From 45fc31509aa6c63fee95f74d11925a8b8191d54b Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 16:34:12 +0200
Subject: [PATCH 01/12] feat(pagination): add initialSelectedPage

---
 .../Pagination/Pagination.stories.tsx          | 18 +++++++++++++++---
 .../src/components/Pagination/Pagination.tsx   |  4 +++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 9197c91101..6fb6be53c1 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -36,6 +36,14 @@ const meta: Meta<
         step: 1,
       },
     },
+    initialSetPage: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 20,
+        step: 1,
+      },
+    },
   },
 };
 
@@ -53,9 +61,10 @@ export const Controlled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
+    initialSetPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit }) => {
-    const [page, setPage] = React.useState(1);
+  render: ({ totalPages, label, visiblePageLimit, initialSetPage }) => {
+    const [page, setPage] = React.useState(initialSetPage ?? 1);
 
     return (
       <Stack direction="column" gap="$4">
@@ -65,6 +74,7 @@ export const Controlled: Story = {
           currentPage={page}
           label={label}
           visiblePageLimit={visiblePageLimit}
+          initialSetPage={initialSetPage}
           onPageChange={setPage}
         />
       </Stack>
@@ -77,13 +87,15 @@ export const Uncontrolled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
+    initialSetPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit }) => {
+  render: ({ totalPages, label, visiblePageLimit, initialSetPage }) => {
     return (
       <Pagination
         totalPages={totalPages}
         label={label}
         visiblePageLimit={visiblePageLimit}
+        initialSetPage={initialSetPage}
         onPageChange={() => console.log('Updating Page')}
       />
     );
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index bf61a97d7c..4cf44d4f9a 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -12,6 +12,7 @@ export interface IPaginationProps {
   currentPage?: number;
   label: string;
   visiblePageLimit?: number;
+  initialSetPage?: number;
   onPageChange: (page: number) => void;
 }
 
@@ -20,9 +21,10 @@ export const Pagination: FC<IPaginationProps> = ({
   currentPage,
   label,
   visiblePageLimit = 3,
+  initialSetPage,
   onPageChange,
 }) => {
-  const [_page, setPage] = useState(1);
+  const [_page, setPage] = useState(initialSetPage ?? 1);
   const page = currentPage || _page;
   const pages = paginate({
     page,

From 34c4d93a42e1e9dac68f53cb4937ab690e013e8b Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 17:28:39 +0200
Subject: [PATCH 02/12] chore(pagination): rename to initialPage

---
 .../components/Pagination/Pagination.stories.tsx | 16 ++++++++--------
 .../src/components/Pagination/Pagination.tsx     |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 6fb6be53c1..1ca7e94c33 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -36,7 +36,7 @@ const meta: Meta<
         step: 1,
       },
     },
-    initialSetPage: {
+    initialPage: {
       control: {
         type: 'number',
         min: 1,
@@ -61,10 +61,10 @@ export const Controlled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
-    initialSetPage: 2,
+    initialPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit, initialSetPage }) => {
-    const [page, setPage] = React.useState(initialSetPage ?? 1);
+  render: ({ totalPages, label, visiblePageLimit, initialPage }) => {
+    const [page, setPage] = React.useState(initialPage ?? 1);
 
     return (
       <Stack direction="column" gap="$4">
@@ -74,7 +74,7 @@ export const Controlled: Story = {
           currentPage={page}
           label={label}
           visiblePageLimit={visiblePageLimit}
-          initialSetPage={initialSetPage}
+          initialPage={initialPage}
           onPageChange={setPage}
         />
       </Stack>
@@ -87,15 +87,15 @@ export const Uncontrolled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
-    initialSetPage: 2,
+    initialPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit, initialSetPage }) => {
+  render: ({ totalPages, label, visiblePageLimit, initialPage }) => {
     return (
       <Pagination
         totalPages={totalPages}
         label={label}
         visiblePageLimit={visiblePageLimit}
-        initialSetPage={initialSetPage}
+        initialPage={initialPage}
         onPageChange={() => console.log('Updating Page')}
       />
     );
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index 4cf44d4f9a..844db72902 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -12,7 +12,7 @@ export interface IPaginationProps {
   currentPage?: number;
   label: string;
   visiblePageLimit?: number;
-  initialSetPage?: number;
+  initialPage?: number;
   onPageChange: (page: number) => void;
 }
 
@@ -21,10 +21,10 @@ export const Pagination: FC<IPaginationProps> = ({
   currentPage,
   label,
   visiblePageLimit = 3,
-  initialSetPage,
+  initialPage,
   onPageChange,
 }) => {
-  const [_page, setPage] = useState(initialSetPage ?? 1);
+  const [_page, setPage] = useState(initialPage ?? 1);
   const page = currentPage || _page;
   const pages = paginate({
     page,

From a6fa5e319f625e2a18ccb4bfe9684b50e65f9c88 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 17:33:06 +0200
Subject: [PATCH 03/12] chore(pagination): rename to initialSelectedPage prop

---
 .../components/Pagination/Pagination.stories.tsx | 16 ++++++++--------
 .../src/components/Pagination/Pagination.tsx     |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 1ca7e94c33..a3466eeb95 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -36,7 +36,7 @@ const meta: Meta<
         step: 1,
       },
     },
-    initialPage: {
+    initialSelectedPage: {
       control: {
         type: 'number',
         min: 1,
@@ -61,10 +61,10 @@ export const Controlled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
-    initialPage: 2,
+    initialSelectedPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit, initialPage }) => {
-    const [page, setPage] = React.useState(initialPage ?? 1);
+  render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
+    const [page, setPage] = React.useState(initialSelectedPage ?? 1);
 
     return (
       <Stack direction="column" gap="$4">
@@ -74,7 +74,7 @@ export const Controlled: Story = {
           currentPage={page}
           label={label}
           visiblePageLimit={visiblePageLimit}
-          initialPage={initialPage}
+          initialSelectedPage={initialSelectedPage}
           onPageChange={setPage}
         />
       </Stack>
@@ -87,15 +87,15 @@ export const Uncontrolled: Story = {
     label: 'Label',
     totalPages: 10,
     visiblePageLimit: 3,
-    initialPage: 2,
+    initialSelectedPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit, initialPage }) => {
+  render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
     return (
       <Pagination
         totalPages={totalPages}
         label={label}
         visiblePageLimit={visiblePageLimit}
-        initialPage={initialPage}
+        initialSelectedPage={initialSelectedPage}
         onPageChange={() => console.log('Updating Page')}
       />
     );
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index 844db72902..c7c3c4fc7b 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -12,7 +12,7 @@ export interface IPaginationProps {
   currentPage?: number;
   label: string;
   visiblePageLimit?: number;
-  initialPage?: number;
+  initialSelectedPage?: number;
   onPageChange: (page: number) => void;
 }
 
@@ -21,10 +21,10 @@ export const Pagination: FC<IPaginationProps> = ({
   currentPage,
   label,
   visiblePageLimit = 3,
-  initialPage,
+  initialSelectedPage,
   onPageChange,
 }) => {
-  const [_page, setPage] = useState(initialPage ?? 1);
+  const [_page, setPage] = useState(initialSelectedPage ?? 1);
   const page = currentPage || _page;
   const pages = paginate({
     page,

From 17d6d8c059c3eaa83b3db100d566e1e279aaa9f7 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 19:16:29 +0200
Subject: [PATCH 04/12] feat(pagination): add initialPage validation

---
 .../Pagination/Pagination.stories.tsx         |  6 +++++-
 .../src/components/Pagination/Pagination.tsx  | 21 ++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index a3466eeb95..bbc7ae7f5b 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -64,7 +64,11 @@ export const Controlled: Story = {
     initialSelectedPage: 2,
   },
   render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
-    const [page, setPage] = React.useState(initialSelectedPage ?? 1);
+    const validInitialSelectedPage =
+      initialSelectedPage && initialSelectedPage <= totalPages;
+    const [page, setPage] = React.useState(
+      validInitialSelectedPage ? initialSelectedPage : 1,
+    );
 
     return (
       <Stack direction="column" gap="$4">
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index c7c3c4fc7b..fe0946b9c2 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -24,7 +24,12 @@ export const Pagination: FC<IPaginationProps> = ({
   initialSelectedPage,
   onPageChange,
 }) => {
-  const [_page, setPage] = useState(initialSelectedPage ?? 1);
+  const validInitialSelectedPage =
+    initialSelectedPage && initialSelectedPage <= totalPages;
+
+  const [_page, setPage] = useState(
+    validInitialSelectedPage ? initialSelectedPage : 1,
+  );
   const page = currentPage || _page;
   const pages = paginate({
     page,
@@ -51,12 +56,14 @@ export const Pagination: FC<IPaginationProps> = ({
           />
         </li>
         {pages.map((pageNum) => (
-          <PageNum
-            key={pageNum}
-            number={pageNum}
-            current={pageNum === page}
-            onClick={() => onClick(pageNum)}
-          />
+          <li key={pageNum}>
+            <PageNum
+              key={pageNum}
+              number={pageNum}
+              current={pageNum === page}
+              onClick={() => onClick(pageNum)}
+            />
+          </li>
         ))}
         <li>
           <PageNav

From ffb2b0d64f25c7e5dc6e98d2ce54b226900f82d3 Mon Sep 17 00:00:00 2001
From: Timo Heddes <timo.heddes@gmail.com>
Date: Thu, 24 Aug 2023 09:34:36 +0200
Subject: [PATCH 05/12] chore: add missing return type onclick

---
 packages/libs/react-ui/src/components/Pagination/Pagination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index fe0946b9c2..c9a9de6eae 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -39,7 +39,7 @@ export const Pagination: FC<IPaginationProps> = ({
   const enablePrevious = page > 1;
   const enableNext = page < totalPages;
 
-  const onClick = (page: number) => {
+  const onClick = (page: number): void => {
     setPage(page);
     onPageChange(page);
   };

From 8d5541298a034945b00f577e1ca9920eb0829a92 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Thu, 24 Aug 2023 11:30:12 +0200
Subject: [PATCH 06/12] feat(pagination): add description to component and
 fields

---
 .../Pagination/Pagination.stories.tsx         | 19 +++++++++++++++++--
 .../src/components/Pagination/Pagination.tsx  |  4 +++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index bbc7ae7f5b..3934953e8b 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -14,11 +14,21 @@ const meta: Meta<
   } & IPaginationProps
 > = {
   title: 'Components/Pagination',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<i>Note: maximum navigation items is currently limited (not technically enforced).</i><br><br><strong>Label </strong><br> is used to allow screen readers to notify user that there is a pagination here.',
+      },
+    },
+  },
   argTypes: {
     label: {
       control: {
         type: 'text',
       },
+      description:
+        'We use this to give info to screen readers',
     },
     totalPages: {
       control: {
@@ -27,6 +37,7 @@ const meta: Meta<
         max: 20,
         step: 2,
       },
+      description: 'Total number of pages',
     },
     visiblePageLimit: {
       control: {
@@ -35,6 +46,7 @@ const meta: Meta<
         max: 7,
         step: 1,
       },
+      description: 'Number of pages that would be visible',
     },
     initialSelectedPage: {
       control: {
@@ -43,6 +55,7 @@ const meta: Meta<
         max: 20,
         step: 1,
       },
+      description: 'Which page should be selected at start?',
     },
   },
 };
@@ -58,14 +71,16 @@ type Story = StoryObj<IPaginationProps>;
 
 export const Controlled: Story = {
   args: {
-    label: 'Label',
+    label: 'Pagination',
     totalPages: 10,
     visiblePageLimit: 3,
     initialSelectedPage: 2,
   },
   render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
     const validInitialSelectedPage =
-      initialSelectedPage && initialSelectedPage <= totalPages;
+      initialSelectedPage &&
+      initialSelectedPage <= totalPages &&
+      initialSelectedPage > 0;
     const [page, setPage] = React.useState(
       validInitialSelectedPage ? initialSelectedPage : 1,
     );
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
index c9a9de6eae..e3937ca128 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -25,7 +25,9 @@ export const Pagination: FC<IPaginationProps> = ({
   onPageChange,
 }) => {
   const validInitialSelectedPage =
-    initialSelectedPage && initialSelectedPage <= totalPages;
+    initialSelectedPage &&
+    initialSelectedPage <= totalPages &&
+    initialSelectedPage > 0;
 
   const [_page, setPage] = useState(
     validInitialSelectedPage ? initialSelectedPage : 1,

From 659b7a33443907db6bee7ed00f00b10d8d8959b0 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Thu, 24 Aug 2023 11:40:16 +0200
Subject: [PATCH 07/12] chore: run formatter

---
 .../react-ui/src/components/Pagination/Pagination.stories.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 3934953e8b..85db7ca269 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -27,8 +27,7 @@ const meta: Meta<
       control: {
         type: 'text',
       },
-      description:
-        'We use this to give info to screen readers',
+      description: 'We use this to give info to screen readers',
     },
     totalPages: {
       control: {

From 0197e060bd9915bbad14530b053ec9c61c7fe841 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Thu, 24 Aug 2023 16:34:34 +0200
Subject: [PATCH 08/12] chore(pagination): change descriptions of fields

---
 .../components/Pagination/Pagination.stories.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 85db7ca269..a924123b6d 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta<
       control: {
         type: 'text',
       },
-      description: 'We use this to give info to screen readers',
+      description: 'Text that is passed to the Nav element as an aria-label for accessibility.',
     },
     totalPages: {
       control: {
@@ -36,7 +36,7 @@ const meta: Meta<
         max: 20,
         step: 2,
       },
-      description: 'Total number of pages',
+      description: 'Total number of pages.',
     },
     visiblePageLimit: {
       control: {
@@ -45,7 +45,7 @@ const meta: Meta<
         max: 7,
         step: 1,
       },
-      description: 'Number of pages that would be visible',
+      description: 'Number of pages that are visible and can be directly selected.',
     },
     initialSelectedPage: {
       control: {
@@ -54,7 +54,7 @@ const meta: Meta<
         max: 20,
         step: 1,
       },
-      description: 'Which page should be selected at start?',
+      description: 'The default selected page before any interaction.',
     },
   },
 };
@@ -76,13 +76,7 @@ export const Controlled: Story = {
     initialSelectedPage: 2,
   },
   render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
-    const validInitialSelectedPage =
-      initialSelectedPage &&
-      initialSelectedPage <= totalPages &&
-      initialSelectedPage > 0;
-    const [page, setPage] = React.useState(
-      validInitialSelectedPage ? initialSelectedPage : 1,
-    );
+    const [page, setPage] = React.useState(initialSelectedPage ?? 1);
 
     return (
       <Stack direction="column" gap="$4">

From d74fb5e449d688580d512e14e3fffad40b82e5f1 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Thu, 24 Aug 2023 16:35:04 +0200
Subject: [PATCH 09/12] chore: run formatter

---
 .../src/components/Pagination/Pagination.stories.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index a924123b6d..a2276d7c17 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -27,7 +27,8 @@ const meta: Meta<
       control: {
         type: 'text',
       },
-      description: 'Text that is passed to the Nav element as an aria-label for accessibility.',
+      description:
+        'Text that is passed to the Nav element as an aria-label for accessibility.',
     },
     totalPages: {
       control: {
@@ -45,7 +46,8 @@ const meta: Meta<
         max: 7,
         step: 1,
       },
-      description: 'Number of pages that are visible and can be directly selected.',
+      description:
+        'Number of pages that are visible and can be directly selected.',
     },
     initialSelectedPage: {
       control: {

From 03eb9809fde81c23c3b7433326285b4a3112ea03 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Fri, 25 Aug 2023 13:56:57 +0200
Subject: [PATCH 10/12] chore(pagination): change description text

---
 .../react-ui/src/components/Pagination/Pagination.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index a2276d7c17..f96d201151 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<
     docs: {
       description: {
         component:
-          '<i>Note: maximum navigation items is currently limited (not technically enforced).</i><br><br><strong>Label </strong><br> is used to allow screen readers to notify user that there is a pagination here.',
+          'A component used for pagination.',
       },
     },
   },

From dd5c55ca97813d8a1c506abcd1f5251e71ebac40 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Fri, 25 Aug 2023 13:58:10 +0200
Subject: [PATCH 11/12] chore: run formatter

---
 .../react-ui/src/components/Pagination/Pagination.stories.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index f96d201151..53fa588a1a 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -17,8 +17,7 @@ const meta: Meta<
   parameters: {
     docs: {
       description: {
-        component:
-          'A component used for pagination.',
+        component: 'A component used for pagination.',
       },
     },
   },

From 2adcabf980b6877af3ca6f4f207158b76f05daf9 Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Mon, 28 Aug 2023 09:50:15 +0200
Subject: [PATCH 12/12] updating description

---
 .../Pagination/Pagination.stories.tsx         | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 53fa588a1a..1c522f4e68 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -1,7 +1,6 @@
 import { SystemIcon } from '@components/Icon';
 import { IPaginationProps, Pagination } from '@components/Pagination';
 import { Stack } from '@components/Stack';
-import { Heading } from '@components/Typography';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
@@ -17,7 +16,8 @@ const meta: Meta<
   parameters: {
     docs: {
       description: {
-        component: 'A component used for pagination.',
+        component:
+          'This is a navigation component that is used to visually represent and provide interaction elements for pagination. I provides previous and next buttons as well as a subset of the available pages closest to the selected page.<br><br><i>This component has a controlled and uncontrolled state. When a currentPage is not provided, the component will track state internally.</i>',
       },
     },
   },
@@ -28,6 +28,21 @@ const meta: Meta<
       },
       description:
         'Text that is passed to the Nav element as an aria-label for accessibility.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    currentPage: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 20,
+        step: 1,
+      },
+      description: 'Current page number. Used when component is controlled.',
+      table: {
+        type: { summary: 'number' },
+      },
     },
     totalPages: {
       control: {
@@ -37,6 +52,9 @@ const meta: Meta<
         step: 2,
       },
       description: 'Total number of pages.',
+      table: {
+        type: { summary: 'number' },
+      },
     },
     visiblePageLimit: {
       control: {
@@ -47,6 +65,9 @@ const meta: Meta<
       },
       description:
         'Number of pages that are visible and can be directly selected.',
+      table: {
+        type: { summary: 'number' },
+      },
     },
     initialSelectedPage: {
       control: {
@@ -56,6 +77,9 @@ const meta: Meta<
         step: 1,
       },
       description: 'The default selected page before any interaction.',
+      table: {
+        type: { summary: 'number' },
+      },
     },
   },
 };
@@ -75,20 +99,24 @@ export const Controlled: Story = {
     totalPages: 10,
     visiblePageLimit: 3,
     initialSelectedPage: 2,
+    currentPage: 2,
   },
-  render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
-    const [page, setPage] = React.useState(initialSelectedPage ?? 1);
-
+  render: ({
+    totalPages,
+    label,
+    visiblePageLimit,
+    initialSelectedPage,
+    currentPage,
+  }) => {
     return (
       <Stack direction="column" gap="$4">
-        <Heading as="h6">Controlled Page State: {page}</Heading>
         <Pagination
           totalPages={totalPages}
-          currentPage={page}
+          currentPage={currentPage}
           label={label}
           visiblePageLimit={visiblePageLimit}
           initialSelectedPage={initialSelectedPage}
-          onPageChange={setPage}
+          onPageChange={() => console.log('Updating Page')}
         />
       </Stack>
     );