From b5b392963e5d382ad9beb26c2be15f37661b6285 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 8 Oct 2022 13:38:11 -0700
Subject: [PATCH] docs(pagination-nav): add more examples (#1514)

Adds "Reactive example," "Total," "Shown," and "Custom button text."
---
 docs/src/pages/components/PaginationNav.svx   | 33 +++++++++++++++++++
 .../PaginationNavReactive.svelte              | 16 +++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte

diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx
index 079c5f3c..690921fc 100644
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@@ -5,8 +5,41 @@
 
 ## Default
 
+`PaginationNav` renders `10` items and does not loop by default.
+
 <PaginationNav />
 
+## Reactive example
+
+Use the `page` prop to bind to the current page number.
+
+<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
+
+## Total
+
+Use the `total` prop to specify the number of pages.
+
+<PaginationNav total={3} />
+
 ## Loopable
 
+Set `loop` to `true` for navigation to be looped.
+
 <PaginationNav total={3} loop />
+
+## Shown
+
+If `total` is greater than `10`, the number of items shown will be truncated to `10`.
+
+Use `shown` to override the number of items shown.
+
+<PaginationNav total={100} shown={5}  />
+
+## Custom button text
+
+Use the `forwardText` and `backwardText` props to customize the button text.
+
+<PaginationNav
+  forwardText="Next"
+  backwardText="Previous"
+/>
\ No newline at end of file
diff --git a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
new file mode 100644
index 00000000..8c98cf91
--- /dev/null
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { PaginationNav, Button } from "carbon-components-svelte";
+
+  let page = 2;
+</script>
+
+<PaginationNav bind:page />
+
+<div style="margin: var(--cds-layout-01) 0">
+  <Button on:click="{() => (page = 0)}" disabled="{page === 0}">
+    Set page to 0
+  </Button>
+</div>
+
+<strong>page:</strong>
+{page}