Add spectrum pagination component to BBUI

packages/bbui/package.json

@@ -56,6 +56,7 @@
     "@spectrum-css/link": "^3.1.1",
     "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/modal": "^3.0.1",
+    "@spectrum-css/pagination": "^3.0.3",
     "@spectrum-css/picker": "^1.0.1",
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/progressbar": "^1.0.2",

packages/bbui/src/Pagination/Pagination.svelte

@@ -0,0 +1,54 @@
+<script>
+  import "@spectrum-css/pagination/dist/index-vars.css"
+
+  export let page
+  export let goToPrevPage
+  export let goToNextPage
+  export let hasPrevPage = true
+  export let hasNextPage = true
+</script>
+
+<nav class="spectrum-Pagination spectrum-Pagination--explicit">
+  <a
+    href="#"
+    class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton"
+    on:click={hasPrevPage ? goToPrevPage : null}
+    class:is-disabled={!hasPrevPage}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronLeft100"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="ChevronLeft"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </a>
+  <span class="spectrum-Body--secondary spectrum-Pagination-counter">
+    Page {page}
+  </span>
+  <a
+    href="#"
+    class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton"
+    on:click={hasNextPage ? goToNextPage : null}
+    class:is-disabled={!hasNextPage}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronRight100"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="ChevronLeft"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </a>
+</nav>
+
+<style>
+  .spectrum-Pagination-counter {
+    margin-left: 0;
+  }
+  .is-disabled:hover {
+    cursor: initial;
+  }
+</style>

packages/bbui/src/index.js

@@ -51,6 +51,7 @@ export { default as TreeView } from "./TreeView/Tree.svelte"
 export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
 export { default as Search } from "./Form/Search.svelte"
+export { default as Pagination } from "./Pagination/Pagination.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"

packages/bbui/yarn.lock

@@ -161,6 +161,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.2.tgz#58b6621cab65f90788d310374f40df1f7090473f"
   integrity sha512-YnIivJhoaao7Otu+HV7sgebPyFbO6sd/oMvTN/Rb2wwgnaMnIIuIRdGandSrcgotN2uNgs+P0knG6mv/xA1/dg==
 
+"@spectrum-css/pagination@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/pagination/-/pagination-3.0.3.tgz#b204c3ada384c4af751a354bc428346d82eeea65"
+  integrity sha512-OJ/v9GeNXJOZ9Yr9LDBYPrR2NCiLOWP9wANT/a5sqFuugRnQbn/HYMnRp9TBxwpDY6ihaPo0T/wi7kLiAJFdDw==
+
 "@spectrum-css/picker@^1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.2.tgz#b49429ae3c89f9c5f2c0530787ce45392c9612ff"