new(component) Pagination

components.tsx

@@ -9,11 +9,12 @@ import { Button, button } from './components/button';
 import { Checkbox, checkbox } from './components/checkbox';
 import { DatePicker, datePicker } from './components/datePicker';
 import { ErrorBoundary, errorBoundary } from './components/errorBoundary';
+import { Pagination, pagination } from './components/pagination';
 import { Select, select } from './components/select';
 import { Stepper, stepper } from './components/stepper';
 import { Switch, switchComponent } from './components/switch';
 import { Tabs, tabs } from './components/tabs';
-import { Sentence } from './entities';
+import { CapitalLetter, Sentence } from './entities';
 
 export type Component =
   | Alert
@@ -24,6 +25,7 @@ export type Component =
   | Checkbox
   | DatePicker
   | ErrorBoundary
+  | Pagination
   | Select
   | Stepper
   | Switch
@@ -53,7 +55,7 @@ export interface ComponentInfo {
   componentId: string;
 
   /** The typical name used by the layman to identify this component. */
-  cannonicalName: string;
+  cannonicalName: `${CapitalLetter}${string}`;
 
   /** The English indefinte article to be used to refer to this Component */
   indefiniteArticle: 'a' | 'an';
@@ -71,6 +73,7 @@ export const componentInfo: ComponentInfo[] = sortBy(prop('componentId'), [
   checkbox,
   datePicker,
   errorBoundary,
+  pagination,
   select,
   stepper,
   switchComponent,

components/pagination.ts

@@ -0,0 +1,62 @@
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
+import { checkmark, indexByOptionId, stringArray } from '../utils';
+
+const componentId = 'pagination';
+
+export interface Pagination extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    compact: boolean;
+    edgePages: boolean;
+    firstLast: boolean;
+    numPages: boolean;
+    pageSize: boolean;
+    style: ('items' | 'pages')[];
+  };
+}
+
+export const pagination: ComponentInfo = {
+  cannonicalName: 'Pagination',
+  componentId,
+  description: 'Pagination allows long lists to be divided into several pages.',
+  indefiniteArticle: 'a',
+  optionsById: indexByOptionId([
+    {
+      criteria: 'Has a mode that greatly conserves horizontal space, likely by omitting multiple page selectors.',
+      name: 'Compact',
+      optionId: 'compact',
+      ...checkmark,
+    },
+    {
+      criteria: 'Allows configuring the number of items that will be shown at the beginning and end of the range.',
+      name: 'Edge #',
+      optionId: 'edgePages',
+      ...checkmark,
+    },
+    {
+      criteria: 'Has ready-made functionality to allow users to quickly select first and last pages (either with a stationary page number or a dedicated button).',
+      name: 'First/Last',
+      optionId: 'firstLast',
+      ...checkmark,
+    },
+    {
+      criteria: 'Allows the number of page items shown to be configurable.',
+      name: '# of Pages',
+      optionId: 'numPages',
+      ...checkmark,
+    },
+    {
+      criteria: 'Allows configuring the number of items that will be shown per page.',
+      name: 'Page Size',
+      optionId: 'pageSize',
+      ...checkmark,
+    },
+    {
+      criteria: 'Has an API the is oriented around pages (but disregards pages) or items (and figures out pages automatically).',
+      name: 'Style',
+      optionId: 'style',
+      ...stringArray,
+    },
+  ]),
+};

entities.ts

@@ -6,11 +6,13 @@ export type URL = string;
 
 export type Sentence = `${string}.`;
 
+export type CapitalLetter = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+
 export interface BaseComponent {
   componentId: string;
 
   /** What the Framework _calls_ this component.  That is to say: when you import it, what is the name of the React Element when it is used. */
-  componentName: string;
+  componentName: `${CapitalLetter}${string}`;
 
   componentURL: string;
 }

frameworks.ts

@@ -15,7 +15,7 @@ import { evergreen } from './frameworks/evergreen';
 import { fluentUI } from './frameworks/fluentUI';
 import { gestalt } from './frameworks/gestalt';
 import { grommet } from './frameworks/grommet';
-import { materialUI } from './frameworks/materialUI';
+import { mui } from './frameworks/mui';
 import { onsenUI } from './frameworks/onsenUI';
 import { orbit } from './frameworks/orbit';
 import { primeReact } from './frameworks/primeReact';
@@ -58,7 +58,7 @@ export const frameworks: Framework[] = sort(ascend(pipe(prop('frameworkName'), t
   fluentUI,
   gestalt,
   grommet,
-  materialUI,
+  mui,
   onsenUI,
   orbit,
   primeReact,

frameworks/antDesign.ts

@@ -82,6 +82,19 @@ export const antDesign: Framework = {
         wrapperFallback: false,
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/components/pagination`,
+      options: {
+        compact: true,
+        edgePages: false,
+        firstLast: false,
+        numPages: true,
+        pageSize: true,
+        style: ['items'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'Select',

frameworks/atlaskit.ts

@@ -67,6 +67,19 @@ export const atlaskit: Framework = {
         labelPlacement: ['right'],
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/components/pagination`,
+      options: {
+        compact: false,
+        edgePages: false,
+        firstLast: false,
+        numPages: true,
+        pageSize: false,
+        style: ['pages'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'Select',

frameworks/carbonDesign.ts

@@ -28,6 +28,19 @@ export const carbonDesign: Framework = {
         labelPlacement: ['right'],
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'PaginationNav',
+      componentURL: `${frameworkHomepage}/?path=/story/components-paginationnav--default`,
+      options: {
+        compact: false,
+        edgePages: false,
+        firstLast: false,
+        numPages: true,
+        pageSize: true,
+        style: ['items'],
+      },
+    },
     {
       componentId: 'stepper',
       componentName: 'ProgressIndicator',

frameworks/elasticUI.ts

@@ -63,6 +63,19 @@ export const elasticUI: Framework = {
         wrapperFallback: false,
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/#/navigation/pagination`,
+      options: {
+        compact: true,
+        edgePages: false,
+        firstLast: true,
+        numPages: false,
+        pageSize: false,
+        style: ['pages'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'SuperSelect',

frameworks/element.ts

@@ -62,6 +62,19 @@ export const element: Framework = {
         time: true,
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/#/en-US/component/pagination`,
+      options: {
+        compact: true,
+        edgePages: false,
+        firstLast: false,
+        numPages: true,
+        pageSize: true,
+        style: ['items'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'Select',

frameworks/evergreen.ts

@@ -48,6 +48,19 @@ export const evergreen: Framework = {
         labelPlacement: ['right'],
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/components/pagination`,
+      options: {
+        compact: true,
+        edgePages: false,
+        firstLast: false,
+        numPages: false,
+        pageSize: false,
+        style: ['pages'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'SelectMenu',

frameworks/grommet.ts

@@ -28,6 +28,19 @@ export const grommet: Framework = {
         labelPlacement: ['right'],
       },
     },
+    {
+      componentId: 'pagination',
+      componentName: 'Pagination',
+      componentURL: `${frameworkHomepage}/pagination`,
+      options: {
+        compact: true,
+        edgePages: true,
+        firstLast: true,
+        numPages: true,
+        pageSize: true,
+        style: ['items'],
+      },
+    },
     {
       componentId: 'select',
       componentName: 'Select',