Merge pull request #69 from IBM/pagination

feat(component): add Pagination component
2025-09-14 18:01:06 +00:00 · 2019-12-23 09:35:32 -08:00 · 2019-12-23 09:35:32 -08:00 · 06e02c3dc3
commit 06e02c3dc3
parent 892d95931d 4dad89e12d
18 changed files with 225 additions and 20 deletions
--- a/README.md
+++ b/README.md
@ -45,6 +45,8 @@ Currently, the following components are supported:
  - NotificationIcon
  - NotificationTextDetails
 - OrderedList
+- Pagination
+  - PaginationSkeleton
 - ProgressIndicator
  - ProgressIndicatorSkeleton
  - ProgressStep
--- a/docs/iframe.html
+++ b/docs/iframe.html
@ -70,4 +70,4 @@
  }</script><style>#root[hidden],
      #docs-root[hidden] {
        display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.f602ce593db7523c0d2e.bundle.js"></script><script src="vendors~main.f602ce593db7523c0d2e.bundle.js"></script><script src="main.f602ce593db7523c0d2e.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.eb1985332fcdaa83ba10.bundle.js"></script><script src="vendors~main.eb1985332fcdaa83ba10.bundle.js"></script><script src="main.eb1985332fcdaa83ba10.bundle.js"></script></body></html>
--- a/docs/main.eb1985332fcdaa83ba10.bundle.js
+++ b/docs/main.eb1985332fcdaa83ba10.bundle.js
--- a/docs/main.eb1985332fcdaa83ba10.bundle.js.map
+++ b/docs/main.eb1985332fcdaa83ba10.bundle.js.map
@ -0,0 +1 @@
+{"version":3,"file":"main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/main.f602ce593db7523c0d2e.bundle.js
+++ b/docs/main.f602ce593db7523c0d2e.bundle.js
--- a/docs/main.f602ce593db7523c0d2e.bundle.js.map
+++ b/docs/main.f602ce593db7523c0d2e.bundle.js.map
@ -1 +0,0 @@
-{"version":3,"file":"main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/runtime~main.eb1985332fcdaa83ba10.bundle.js
+++ b/docs/runtime~main.eb1985332fcdaa83ba10.bundle.js
@ -1,2 +1,2 @@
 !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
-//# sourceMappingURL=runtime~main.f602ce593db7523c0d2e.bundle.js.map
+//# sourceMappingURL=runtime~main.eb1985332fcdaa83ba10.bundle.js.map
--- a/docs/runtime~main.eb1985332fcdaa83ba10.bundle.js.map
+++ b/docs/runtime~main.eb1985332fcdaa83ba10.bundle.js.map
@ -1 +1 @@
-{"version":3,"file":"runtime~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
+{"version":3,"file":"runtime~main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
--- a/docs/vendors~main.eb1985332fcdaa83ba10.bundle.js
+++ b/docs/vendors~main.eb1985332fcdaa83ba10.bundle.js
--- a/docs/vendors~main.eb1985332fcdaa83ba10.bundle.js.map
+++ b/docs/vendors~main.eb1985332fcdaa83ba10.bundle.js.map
@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///vendors~main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA;;;;;AAwqeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsfA;;;;;;;AAfA","sourceRoot":""}
--- a/docs/vendors~main.f602ce593db7523c0d2e.bundle.js.map
+++ b/docs/vendors~main.f602ce593db7523c0d2e.bundle.js.map
@ -1 +0,0 @@
-{"version":3,"file":"vendors~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///vendors~main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAq/IA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAyfA;;;;;;;AAfA","sourceRoot":""}
--- a/src/components/Pagination/Pagination.Skeleton.svelte
+++ b/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>
--- a/src/components/Pagination/Pagination.Story.svelte
+++ b/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>
--- a/src/components/Pagination/Pagination.stories.js
+++ b/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' } });
--- a/src/components/Pagination/Pagination.svelte
+++ b/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>
--- a/src/components/Pagination/index.js
+++ b/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';
--- a/src/components/Select/Select.svelte
+++ b/src/components/Select/Select.svelte
@ -42,9 +42,11 @@
  setContext('Select', { selected });

  $: {
-    defaultValue = $selected;
+    selected.set(defaultValue);
    dispatch('change', $selected);
  }
+
+  $: defaultValue = $selected;
 </script>

 <div class={cx('--form-item')} {style}>
@ -82,7 +84,6 @@
        <div class={_helperTextClass}>{helperText}</div>
      {/if}
    {/if}
-
    {#if !inline}
      <div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
        <select
--- a/src/index.js
+++ b/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,
				`@ -0,0 +1 @@`
				`{"version":3,"file":"main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA","sourceRoot":""}`
				`@ -1 +0,0 @@`
				`{"version":3,"file":"main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA","sourceRoot":""}`
				`@ -0,0 +1 @@`
				`{"version":3,"file":"vendors~main.eb1985332fcdaa83ba10.bundle.js","sources":["webpack:///vendors~main.eb1985332fcdaa83ba10.bundle.js"],"mappings":"AAAA;;;;;AAwqeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsfA;;;;;;;AAfA","sourceRoot":""}`
				`@ -1 +0,0 @@`
				`{"version":3,"file":"vendors~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///vendors~main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAq/IA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAyfA;;;;;;;AAfA","sourceRoot":""}`