feat(component): add Pagination

Closes #23

src/components/Pagination/Pagination.Skeleton.svelte

@@ -0,0 +1,21 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
+  import SkeletonText from '../SkeletonText';
+  import { cx } from '../../lib';
+
+  const _class = cx('--pagination', '--skeleton', className);
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <div class={cx('--pagination__left')}>
+    <SkeletonText width="70px" />
+    <SkeletonText width="35px" />
+    <SkeletonText width="105px" />
+  </div>
+  <div class={cx('--pagination__right', '--pagination--inline')}>
+    <SkeletonText width="70px" />
+  </div>
+</div>

src/components/Pagination/Pagination.Story.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Pagination from './Pagination.svelte';
+  import PaginationSkeleton from './Pagination.Skeleton.svelte';
+</script>
+
+<Layout>
+  <div style="width: 800px;">
+    {#if story === 'multiple'}
+      <Pagination {...$$props}>Pagination</Pagination>
+      <Pagination {...$$props}>Pagination</Pagination>
+    {:else if story === 'skeleton'}
+      <PaginationSkeleton />
+    {:else}
+      <Pagination {...$$props}>Pagination</Pagination>
+    {/if}
+  </div>
+</Layout>

src/components/Pagination/Pagination.stories.js

@@ -0,0 +1,39 @@
+import { withKnobs, text, number, boolean, array } from '@storybook/addon-knobs';
+import Component from './Pagination.Story.svelte';
+
+export default { title: 'Pagination', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    disabled: boolean('Disable backward/forward buttons (disabled)', false),
+    page: number('The current page (page)', 1),
+    totalItems: number('Total number of items (totalItems)', 103),
+    pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
+    pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
+    backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
+    forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
+    pageSize: number('Number of items per page (pageSize)', 10),
+    pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
+    itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
+  }
+});
+
+export const Multiple = () => ({
+  Component,
+  props: {
+    story: 'multiple',
+    disabled: boolean('Disable backward/forward buttons (disabled)', false),
+    page: number('The current page (page)', 1),
+    totalItems: number('Total number of items (totalItems)', 103),
+    pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
+    pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
+    backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
+    forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
+    pageSize: number('Number of items per page (pageSize)', 10),
+    pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
+    itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Pagination/Pagination.svelte

@@ -0,0 +1,115 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let backwardText = 'Previous page';
+  export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
+  export let forwardText = 'Next page';
+  export let id = Math.random();
+  export let itemsPerPageText = 'Items per page:';
+  export let itemText = (min, max) => `${min}–${max} items`;
+  export let pageRangeText = (current, total) => `of ${total} pages`;
+  export let pageText = page => `page ${page}`;
+  export let pageSizes = [10];
+  export let totalItems = 0;
+  export let disabled = false;
+  export let page = 1;
+  export let pageSize = 10;
+  export let pagesUnknown = false;
+  export let pageInputDisabled = false;
+  export let style = undefined;
+
+  import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
+  import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
+  import Select, { SelectItem } from '../Select';
+  import { cx } from '../../lib';
+
+  const _class = cx('--pagination', className);
+  $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
+  $: backButtonDisabled = disabled || page === 1;
+  $: _backButtonClass = cx(
+    '--pagination__button',
+    '--pagination__button--backward',
+    backButtonDisabled && '--pagination__button--no-index'
+  );
+  $: forwardButtonDisabled = disabled || page === totalPages;
+  $: _forwardButtonClass = cx(
+    '--pagination__button',
+    '--pagination__button--forward',
+    forwardButtonDisabled && '--pagination__button--no-index'
+  );
+</script>
+
+<div class={_class} {style}>
+  <div class={cx('--pagination__left')}>
+    <label
+      id={cx(`--pagination-select-${id}-count-label`)}
+      class={cx('--pagination__text')}
+      for={cx(`--pagination-select-${id}`)}>
+      {itemsPerPageText}
+    </label>
+    <Select
+      id={cx(`--pagination-select-${id}`)}
+      class={cx('--select__item-count')}
+      labelText=""
+      hideLabel
+      noLabel
+      inline
+      on:change={() => {
+        page = 1;
+      }}
+      bind:defaultValue={pageSize}>
+      {#each pageSizes as size, i (size)}
+        <SelectItem value={size} text={size.toString()} />
+      {/each}
+    </Select>
+    <span class={cx('--pagination__text')}>
+      {#if pagesUnknown}
+        {itemText(pageSize * (page - 1) + 1, page * pageSize)}
+      {:else}
+        {itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)}
+      {/if}
+    </span>
+  </div>
+  <div class={cx('--pagination__right')}>
+    {#if !pageInputDisabled}
+      <Select
+        id={cx(`--pagination-select-${id + 2}`)}
+        class={cx('--select__page-number')}
+        labelText={`Page number, of ${totalPages} pages`}
+        inline
+        hideLabel
+        on:change={({ detail }) => {
+          page = Number(detail);
+        }}
+        bind:defaultValue={page}>
+        {#each selectItems as size, i (size)}
+          <SelectItem value={size + 1} text={(size + 1).toString()} />
+        {/each}
+      </Select>
+      <span class={cx('--pagination__text')}>
+        {#if pagesUnknown}{pageText(page)}{:else}{pageRangeText(page, totalPages)}{/if}
+      </span>
+    {/if}
+    <button
+      type="button"
+      class={_backButtonClass}
+      on:click={() => {
+        page--;
+      }}
+      aria-label={backwardText}
+      disabled={backButtonDisabled}>
+      <CaretLeft24 />
+    </button>
+    <button
+      type="button"
+      class={_forwardButtonClass}
+      aria-label={forwardText}
+      on:click={() => {
+        page++;
+      }}
+      disabled={forwardButtonDisabled}>
+      <CaretRight24 />
+    </button>
+  </div>
+</div>

src/components/Pagination/index.js

@@ -0,0 +1,4 @@
+import Pagination from './Pagination.svelte';
+
+export default Pagination;
+export { default as PaginationSkeleton } from './Pagination.Skeleton.svelte';

src/index.js

@@ -25,6 +25,7 @@ import {
   NotificationTextDetails
 } from './components/Notification';
 import OrderedList from './components/OrderedList';
+import Pagination, { PaginationSkeleton } from './components/Pagination';
 import ProgressIndicator, {
   ProgressIndicatorSkeleton,
   ProgressStep
@@ -97,6 +98,8 @@ export {
   NotificationIcon,
   NotificationTextDetails,
   OrderedList,
+  Pagination,
+  PaginationSkeleton,
   PasswordInput,
   ProgressIndicator,
   ProgressIndicatorSkeleton,