chore: lift components folder

src/Pagination/Pagination.Skeleton.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { SkeletonText } from "../SkeletonText";
+</script>
+
+<div
+  class:bx--pagination={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div class:bx--pagination__left={true}>
+    <SkeletonText width="70px" />
+    <SkeletonText width="35px" />
+    <SkeletonText width="105px" />
+  </div>
+  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
+    <SkeletonText width="70px" />
+  </div>
+</div>

src/Pagination/Pagination.Story.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let story = undefined;
+
+  import Pagination from "./Pagination.svelte";
+  import PaginationSkeleton from "./Pagination.Skeleton.svelte";
+</script>
+
+<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>

src/Pagination/Pagination.stories.js

@@ -0,0 +1,69 @@
+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/Pagination/Pagination.svelte

@@ -0,0 +1,111 @@
+<script>
+  export let totalItems = 0;
+  export let disabled = false;
+  export let forwardText = "Next page";
+  export let backwardText = "Previous page";
+  export let itemRangeText = (min, max, total) =>
+    `${min}–${max} of ${total} items`;
+  export let itemsPerPageText = "Items per page:";
+  export let itemText = (min, max) => `${min}–${max} items`;
+  export let page = 1;
+  export let pageInputDisabled = false;
+  export let pageRangeText = (current, total) => `of ${total} pages`;
+  export let pageSize = 10;
+  export let pageSizes = [10];
+  export let pagesUnknown = false;
+  export let pageText = page => `page ${page}`;
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
+  import CaretRight24 from "carbon-icons-svelte/lib/CaretRight24";
+  import { Select, SelectItem } from "../Select";
+  import { afterUpdate, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  afterUpdate(() => {
+    dispatch("update", { pageSize: parseInt(pageSize), page: parseInt(page) });
+  });
+
+  $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
+  $: backButtonDisabled = disabled || page === 1;
+  $: forwardButtonDisabled = disabled || page === totalPages;
+</script>
+
+<div class:bx--pagination={true} {...$$restProps}>
+  <div class:bx--pagination__left={true}>
+    <label
+      id="bx--pagination-select-{id}-count-label"
+      class:bx--pagination__text={true}
+      for="bx--pagination-select-{id}">
+      {itemsPerPageText}
+    </label>
+    <Select
+      id="bx--pagination-select-{id}"
+      class="bx--select__item-count"
+      labelText=""
+      hideLabel
+      noLabel
+      inline
+      on:change={() => {
+        page = 1;
+      }}
+      bind:selected={pageSize}>
+      {#each pageSizes as size, i (size)}
+        <SelectItem value={size} text={size.toString()} />
+      {/each}
+    </Select>
+    <span class:bx--pagination__text={true}>
+      {#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:bx--pagination__right={true}>
+    {#if !pageInputDisabled}
+      <Select
+        id="bx--pagination-select-{id + 2}"
+        class="bx--select__page-number"
+        labelText="Page number, of {totalPages} pages"
+        inline
+        hideLabel
+        bind:selected={page}>
+        {#each selectItems as size, i (size)}
+          <SelectItem value={size + 1} text={(size + 1).toString()} />
+        {/each}
+      </Select>
+      <span class:bx--pagination__text={true}>
+        {#if pagesUnknown}
+          {pageText(page)}
+        {:else}{pageRangeText(page, totalPages)}{/if}
+      </span>
+    {/if}
+    <button
+      type="button"
+      aria-label={backwardText}
+      disabled={backButtonDisabled}
+      class:bx--pagination__button={true}
+      class:bx--pagination__button--backward={true}
+      class:bx--pagination__button--no-index={backButtonDisabled}
+      on:click={() => {
+        page--;
+      }}>
+      <CaretLeft24 />
+    </button>
+    <button
+      type="button"
+      aria-label={forwardText}
+      disabled={forwardButtonDisabled}
+      class:bx--pagination__button={true}
+      class:bx--pagination__button--forward={true}
+      class:bx--pagination__button--no-index={forwardButtonDisabled}
+      on:click={() => {
+        page++;
+      }}>
+      <CaretRight24 />
+    </button>
+  </div>
+</div>

src/Pagination/index.js

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination.svelte";
+export { default as PaginationSkeleton } from "./Pagination.Skeleton.svelte";