From 10681d1a44477cb11afd0a84de405615ad8b8852 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 13 May 2021 12:23:25 +0100
Subject: [PATCH] Add spectrum pagination component to BBUI

---
 packages/bbui/package.json                    |  1 +
 .../bbui/src/Pagination/Pagination.svelte     | 54 +++++++++++++++++++
 packages/bbui/src/index.js                    |  1 +
 packages/bbui/yarn.lock                       |  5 ++
 4 files changed, 61 insertions(+)
 create mode 100644 packages/bbui/src/Pagination/Pagination.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 056f4229cb..c4c7e14b4b 100644
--- a/packages/bbui/package.json
+++ b/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",
diff --git a/packages/bbui/src/Pagination/Pagination.svelte b/packages/bbui/src/Pagination/Pagination.svelte
new file mode 100644
index 0000000000..cfe989ea14
--- /dev/null
+++ b/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>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 9d47958461..8ed1dadf1f 100644
--- a/packages/bbui/src/index.js
+++ b/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"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index e9bad2e162..36e26b0ea6 100644
--- a/packages/bbui/yarn.lock
+++ b/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"