From 329c48378a3c3ab55a0c9b90b745e834fd179f9b Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Mon, 11 Dec 2023 11:33:04 -0800
Subject: [PATCH 1/5] Add new pager display mode

This adds a new pager display mode to customize what table data the pager shows
---
 docs/components/data/Pager.mdx           |   5 +-
 src/data/Pager/Pager.module.css          |   4 +
 src/data/Pager/Pager.story.tsx           |  40 ++++++-
 src/data/Pager/Pager.tsx                 | 136 ++++++++++++++---------
 src/data/Pager/assets/arrow-end.svg      |   6 +-
 src/data/Pager/assets/arrow-next.svg     |   6 +-
 src/data/Pager/assets/arrow-previous.svg |   6 +-
 src/data/Pager/assets/arrow-start.svg    |   6 +-
 src/data/Pager/utils.ts                  |  12 ++
 9 files changed, 164 insertions(+), 57 deletions(-)

diff --git a/docs/components/data/Pager.mdx b/docs/components/data/Pager.mdx
index 4f60e24f..918ce9f8 100644
--- a/docs/components/data/Pager.mdx
+++ b/docs/components/data/Pager.mdx
@@ -6,9 +6,12 @@ import * as PagerStories from '../../../src/data/Pager/Pager.story'
 
 # Pager
 A simple pager for navigating between pages of data. You can customise the page navigation indicators (The pager arrows) if you want.
+You can also change the `displayMode` to customize what table information the pager shows.
 
 ## Example
-<Canvas sourceState="shown" of={PagerStories.Basic} />
+<Canvas sourceState="shown" of={PagerStories.ShowPages} />
+<Canvas sourceState="shown" of={PagerStories.ShowItems} />
+<Canvas sourceState="shown" of={PagerStories.ShowAll} />
 
 ## API
 <ArgsTable of={Pager} />
diff --git a/src/data/Pager/Pager.module.css b/src/data/Pager/Pager.module.css
index ba328641..c4fa21e7 100644
--- a/src/data/Pager/Pager.module.css
+++ b/src/data/Pager/Pager.module.css
@@ -15,4 +15,8 @@
       color: var(--input-color);
     }
   }
+
+  .items {
+    margin-right: var(--spacing-sm);
+  }
 }
diff --git a/src/data/Pager/Pager.story.tsx b/src/data/Pager/Pager.story.tsx
index f58d54ea..9aa5d5f4 100644
--- a/src/data/Pager/Pager.story.tsx
+++ b/src/data/Pager/Pager.story.tsx
@@ -6,8 +6,44 @@ export default {
   component: Pager
 };
 
-export const Basic = () => {
+export const ShowPages = () => {
   const [page, setPage] = useState<number>(0);
 
-  return <Pager page={page} size={10} total={100} onPageChange={setPage} />;
+  return (
+    <Pager
+      page={page}
+      size={10}
+      total={100}
+      onPageChange={setPage}
+      displayMode="pages"
+    />
+  );
+};
+
+export const ShowItems = () => {
+  const [page, setPage] = useState<number>(0);
+
+  return (
+    <Pager
+      page={page}
+      size={10}
+      total={100}
+      onPageChange={setPage}
+      displayMode="items"
+    />
+  );
+};
+
+export const ShowAll = () => {
+  const [page, setPage] = useState<number>(0);
+
+  return (
+    <Pager
+      page={page}
+      size={10}
+      total={100}
+      onPageChange={setPage}
+      displayMode="all"
+    />
+  );
 };
diff --git a/src/data/Pager/Pager.tsx b/src/data/Pager/Pager.tsx
index c5988677..1f9858bf 100644
--- a/src/data/Pager/Pager.tsx
+++ b/src/data/Pager/Pager.tsx
@@ -1,13 +1,15 @@
 import React, { FC, Fragment, ReactNode, useCallback } from 'react';
 import classNames from 'classnames';
-import { Button } from '../../elements/Button';
-import { FUZZY_RANGE, getPageRange } from './utils';
 
-import { ReactComponent as PreviousArrow } from './assets/arrow-previous.svg';
+import { Button } from '../../elements/Button';
+import { Stack } from '../../layout';
+import { Text } from '../../typography';
+import { Pluralize } from '../Pluralize';
+import { ReactComponent as EndArrow } from './assets/arrow-end.svg';
 import { ReactComponent as NextArrow } from './assets/arrow-next.svg';
+import { ReactComponent as PreviousArrow } from './assets/arrow-previous.svg';
 import { ReactComponent as StartArrow } from './assets/arrow-start.svg';
-import { ReactComponent as EndArrow } from './assets/arrow-end.svg';
-
+import { FUZZY_RANGE, getItemsRange, getPageRange } from './utils';
 import css from './Pager.module.css';
 
 export interface PagerProps {
@@ -60,6 +62,11 @@ export interface PagerProps {
    * A callback function that is called when the page changes.
    */
   onPageChange?: (page: number) => void;
+
+  /**
+   * The type of table data for the pager to display.
+   */
+  displayMode?: 'pages' | 'items' | 'all';
 }
 
 export const Pager: FC<PagerProps> = ({
@@ -72,12 +79,14 @@ export const Pager: FC<PagerProps> = ({
   endArrow,
   previousArrow,
   nextArrow,
-  onPageChange
+  onPageChange,
+  displayMode
 }) => {
   const pageCount = Math.ceil(total / size);
   const canPrevious = page !== 0;
   const canNext = page < pageCount - 1;
   const [startPage, endPage] = getPageRange(page, pageCount - 1);
+  const [startItem, endItem] = getItemsRange(page, size, total);
 
   const previousPage = useCallback(() => {
     if (canPrevious) {
@@ -101,16 +110,36 @@ export const Pager: FC<PagerProps> = ({
 
   return (
     <div className={classNames(css.pager, className)}>
-      <Button
-        variant="text"
-        size="small"
-        disablePadding
-        title="First Page"
-        onClick={() => onPageChange?.(0)}
-        disabled={!canPrevious}
-      >
-        {startArrow}
-      </Button>
+      {(displayMode === 'items' || displayMode === 'all') && (
+        <div className={css.items}>
+          {pageCount === 1 && total > 0 && (
+            <Text>
+              Showing {total === 1 ? total : `all ${total.toLocaleString()}`}{' '}
+              <Pluralize count={total} singular="item" showCount={false} />
+            </Text>
+          )}
+          {pageCount > 1 && (
+            <Stack dense>
+              <Text>
+                {startItem.toLocaleString()}-{endItem.toLocaleString()} of{' '}
+                <Pluralize count={total} singular="item" />
+              </Text>
+            </Stack>
+          )}
+        </div>
+      )}
+      {startArrow && (
+        <Button
+          variant="text"
+          size="small"
+          disablePadding
+          title="First Page"
+          onClick={() => onPageChange?.(0)}
+          disabled={!canPrevious}
+        >
+          {startArrow}
+        </Button>
+      )}
       <Button
         variant="text"
         size="small"
@@ -121,31 +150,35 @@ export const Pager: FC<PagerProps> = ({
       >
         {previousArrow}
       </Button>
-      {startPage >= 2 && <div className={css.overflow}>&nbsp;...</div>}
-      {[...Array(pageCount)].map((_, i) => (
-        <Fragment key={i}>
-          {i >= startPage && i <= endPage && (
-            <Button
-              variant="text"
-              size="small"
-              disabled={page === i}
-              title={`Page ${i + 1}`}
-              className={classNames(
-                css.page,
-                {
-                  [css.active]: page === i
-                },
-                pageClassName
+      {(displayMode === 'pages' || displayMode === 'all') && (
+        <>
+          {startPage >= 2 && <div className={css.overflow}>&nbsp;...</div>}
+          {[...Array(pageCount)].map((_, i) => (
+            <Fragment key={i}>
+              {i >= startPage && i <= endPage && (
+                <Button
+                  variant="text"
+                  size="small"
+                  disabled={page === i}
+                  title={`Page ${i + 1}`}
+                  className={classNames(
+                    css.page,
+                    {
+                      [css.active]: page === i
+                    },
+                    pageClassName
+                  )}
+                  onClick={() => onPageChange?.(i)}
+                >
+                  {(i + 1).toLocaleString()}
+                </Button>
               )}
-              onClick={() => onPageChange?.(i)}
-            >
-              {(i + 1).toLocaleString()}
-            </Button>
+            </Fragment>
+          ))}
+          {endPage <= pageCount - FUZZY_RANGE && (
+            <div className={css.overflow}>...&nbsp;</div>
           )}
-        </Fragment>
-      ))}
-      {endPage <= pageCount - FUZZY_RANGE && (
-        <div className={css.overflow}>...&nbsp;</div>
+        </>
       )}
       <Button
         variant="text"
@@ -157,16 +190,18 @@ export const Pager: FC<PagerProps> = ({
       >
         {nextArrow}
       </Button>
-      <Button
-        size="small"
-        title="Last Page"
-        disablePadding
-        variant="text"
-        onClick={() => onPageChange?.(pageCount - 1)}
-        disabled={!canNext}
-      >
-        {endArrow}
-      </Button>
+      {endArrow && (
+        <Button
+          size="small"
+          title="Last Page"
+          disablePadding
+          variant="text"
+          onClick={() => onPageChange?.(pageCount - 1)}
+          disabled={!canNext}
+        >
+          {endArrow}
+        </Button>
+      )}
     </div>
   );
 };
@@ -175,5 +210,6 @@ Pager.defaultProps = {
   previousArrow: <PreviousArrow />,
   nextArrow: <NextArrow />,
   startArrow: <StartArrow />,
-  endArrow: <EndArrow />
+  endArrow: <EndArrow />,
+  displayMode: 'pages'
 };
diff --git a/src/data/Pager/assets/arrow-end.svg b/src/data/Pager/assets/arrow-end.svg
index c160b5b0..d90c00f0 100644
--- a/src/data/Pager/assets/arrow-end.svg
+++ b/src/data/Pager/assets/arrow-end.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="32px" height="32px"><path d="M 9.4140625 4 L 8 5.4140625 L 18.585938 16 L 8 26.585938 L 9.4140625 28 L 21 16.414062 L 21 28 L 23 28 L 23 4 L 21 4 L 21 15.585938 L 9.4140625 4 z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"
+    fill="currentColor">
+    <path
+        d="M 9.4140625 4 L 8 5.4140625 L 18.585938 16 L 8 26.585938 L 9.4140625 28 L 21 16.414062 L 21 28 L 23 28 L 23 4 L 21 4 L 21 15.585938 L 9.4140625 4 z" />
+</svg>
\ No newline at end of file
diff --git a/src/data/Pager/assets/arrow-next.svg b/src/data/Pager/assets/arrow-next.svg
index 134c8379..1409161d 100644
--- a/src/data/Pager/assets/arrow-next.svg
+++ b/src/data/Pager/assets/arrow-next.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="32px" height="32px"><path d="M 12.96875 4.28125 L 11.53125 5.71875 L 21.8125 16 L 11.53125 26.28125 L 12.96875 27.71875 L 23.96875 16.71875 L 24.65625 16 L 23.96875 15.28125 Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"
+    fill="currentColor">
+    <path
+        d="M 12.96875 4.28125 L 11.53125 5.71875 L 21.8125 16 L 11.53125 26.28125 L 12.96875 27.71875 L 23.96875 16.71875 L 24.65625 16 L 23.96875 15.28125 Z" />
+</svg>
\ No newline at end of file
diff --git a/src/data/Pager/assets/arrow-previous.svg b/src/data/Pager/assets/arrow-previous.svg
index 3f4d0298..a5f879c4 100644
--- a/src/data/Pager/assets/arrow-previous.svg
+++ b/src/data/Pager/assets/arrow-previous.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="32px" height="32px"><path d="M 19.03125 4.28125 L 8.03125 15.28125 L 7.34375 16 L 8.03125 16.71875 L 19.03125 27.71875 L 20.46875 26.28125 L 10.1875 16 L 20.46875 5.71875 Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"
+    fill="currentColor">
+    <path
+        d="M 19.03125 4.28125 L 8.03125 15.28125 L 7.34375 16 L 8.03125 16.71875 L 19.03125 27.71875 L 20.46875 26.28125 L 10.1875 16 L 20.46875 5.71875 Z" />
+</svg>
\ No newline at end of file
diff --git a/src/data/Pager/assets/arrow-start.svg b/src/data/Pager/assets/arrow-start.svg
index 82c4ec35..f9a1d38e 100644
--- a/src/data/Pager/assets/arrow-start.svg
+++ b/src/data/Pager/assets/arrow-start.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="32px" height="32px"><path d="M 9 4 L 9 28 L 11 28 L 11 16.414062 L 22.585938 28 L 24 26.585938 L 13.414062 16 L 24 5.4140625 L 22.585938 4 L 11 15.585938 L 11 4 L 9 4 z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"
+    fill="currentColor">
+    <path
+        d="M 9 4 L 9 28 L 11 28 L 11 16.414062 L 22.585938 28 L 24 26.585938 L 13.414062 16 L 24 5.4140625 L 22.585938 4 L 11 15.585938 L 11 4 L 9 4 z" />
+</svg>
\ No newline at end of file
diff --git a/src/data/Pager/utils.ts b/src/data/Pager/utils.ts
index 50d37a08..34c9690e 100644
--- a/src/data/Pager/utils.ts
+++ b/src/data/Pager/utils.ts
@@ -16,3 +16,15 @@ export function getPageRange(page: number, totalPages: number) {
 
   return [startPage, endPage];
 }
+
+export function getItemsRange(
+  page: number,
+  perPage: number,
+  totalItems: number
+) {
+  const startItem = page * perPage + 1;
+  const endOfPage = (page + 1) * perPage;
+  const endItem = Math.min(endOfPage, totalItems);
+
+  return [startItem, endItem];
+}

From ce1f428a5a2e73f19b8b4895d4889b4c96b375a0 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Mon, 11 Dec 2023 13:01:57 -0800
Subject: [PATCH 2/5] Update pager styling

---
 src/data/Pager/Pager.module.css | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/data/Pager/Pager.module.css b/src/data/Pager/Pager.module.css
index c4fa21e7..dd03a1b2 100644
--- a/src/data/Pager/Pager.module.css
+++ b/src/data/Pager/Pager.module.css
@@ -2,21 +2,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
 
-  svg {
-    height: 20px;
-    width: 20px;
-  }
-
-  .page {
-    padding: 0 var(--spacing-sm);
+svg {
+  height: 20px;
+  width: 20px;
+}
 
-    &.active {
-      color: var(--input-color);
-    }
-  }
+.page {
+  padding: 0 var(--spacing-sm);
 
-  .items {
-    margin-right: var(--spacing-sm);
+  &.active {
+    color: var(--input-color);
   }
 }
+.items {
+  color: var(--gray-100);
+  margin-right: var(--spacing-sm);
+}

From bd4e67af54b89c907cd12f156659f68ae1c15706 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Mon, 11 Dec 2023 13:06:01 -0800
Subject: [PATCH 3/5] Update pager styling

---
 src/data/Pager/Pager.module.css | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/data/Pager/Pager.module.css b/src/data/Pager/Pager.module.css
index dd03a1b2..5bb376c0 100644
--- a/src/data/Pager/Pager.module.css
+++ b/src/data/Pager/Pager.module.css
@@ -2,6 +2,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  .page {
+    padding: 0 var(--spacing-sm);
+
+    &.active {
+      color: var(--input-color);
+    }
+  }
 }
 
 svg {
@@ -9,13 +17,6 @@ svg {
   width: 20px;
 }
 
-.page {
-  padding: 0 var(--spacing-sm);
-
-  &.active {
-    color: var(--input-color);
-  }
-}
 .items {
   color: var(--gray-100);
   margin-right: var(--spacing-sm);

From 676cd6d48f942243b8daadbcc1d75b20ff5f10ac Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Mon, 11 Dec 2023 17:03:32 -0800
Subject: [PATCH 4/5] Add custom classname props

---
 src/data/Pager/Pager.module.css |  5 +++++
 src/data/Pager/Pager.tsx        | 20 +++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/data/Pager/Pager.module.css b/src/data/Pager/Pager.module.css
index 5bb376c0..32512c7e 100644
--- a/src/data/Pager/Pager.module.css
+++ b/src/data/Pager/Pager.module.css
@@ -12,6 +12,11 @@
   }
 }
 
+.pagesContainer {
+  display: flex;
+  align-items: center;
+}
+
 svg {
   height: 20px;
   width: 20px;
diff --git a/src/data/Pager/Pager.tsx b/src/data/Pager/Pager.tsx
index 1f9858bf..e3d60f9c 100644
--- a/src/data/Pager/Pager.tsx
+++ b/src/data/Pager/Pager.tsx
@@ -23,6 +23,16 @@ export interface PagerProps {
    */
   pageClassName?: string;
 
+  /**
+   * The class name for the active page button.
+   */
+  activePageClassName?: string;
+
+  /**
+   * The class name to add to the pages container.
+   */
+  pagesContainerClassName?: string;
+
   /**
    * The current page number.
    */
@@ -72,6 +82,8 @@ export interface PagerProps {
 export const Pager: FC<PagerProps> = ({
   className,
   pageClassName,
+  activePageClassName,
+  pagesContainerClassName,
   page,
   size,
   total,
@@ -151,7 +163,9 @@ export const Pager: FC<PagerProps> = ({
         {previousArrow}
       </Button>
       {(displayMode === 'pages' || displayMode === 'all') && (
-        <>
+        <div
+          className={classNames(css.pagesContainer, pagesContainerClassName)}
+        >
           {startPage >= 2 && <div className={css.overflow}>&nbsp;...</div>}
           {[...Array(pageCount)].map((_, i) => (
             <Fragment key={i}>
@@ -164,7 +178,7 @@ export const Pager: FC<PagerProps> = ({
                   className={classNames(
                     css.page,
                     {
-                      [css.active]: page === i
+                      [activePageClassName || css.active]: page === i
                     },
                     pageClassName
                   )}
@@ -178,7 +192,7 @@ export const Pager: FC<PagerProps> = ({
           {endPage <= pageCount - FUZZY_RANGE && (
             <div className={css.overflow}>...&nbsp;</div>
           )}
-        </>
+        </div>
       )}
       <Button
         variant="text"

From c88696344b591bcd8a91238a13fb609f2f737ab3 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Tue, 12 Dec 2023 07:27:25 -0800
Subject: [PATCH 5/5] Update pager css

---
 src/data/Pager/Pager.module.css | 12 ++++++------
 src/data/Pager/Pager.tsx        |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/data/Pager/Pager.module.css b/src/data/Pager/Pager.module.css
index 32512c7e..f57c3651 100644
--- a/src/data/Pager/Pager.module.css
+++ b/src/data/Pager/Pager.module.css
@@ -3,6 +3,11 @@
   align-items: center;
   justify-content: center;
 
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+
   .page {
     padding: 0 var(--spacing-sm);
 
@@ -17,12 +22,7 @@
   align-items: center;
 }
 
-svg {
-  height: 20px;
-  width: 20px;
-}
-
-.items {
+.pagerDisplayItems {
   color: var(--gray-100);
   margin-right: var(--spacing-sm);
 }
diff --git a/src/data/Pager/Pager.tsx b/src/data/Pager/Pager.tsx
index e3d60f9c..8c73f77e 100644
--- a/src/data/Pager/Pager.tsx
+++ b/src/data/Pager/Pager.tsx
@@ -123,7 +123,7 @@ export const Pager: FC<PagerProps> = ({
   return (
     <div className={classNames(css.pager, className)}>
       {(displayMode === 'items' || displayMode === 'all') && (
-        <div className={css.items}>
+        <div className={css.pagerDisplayItems}>
           {pageCount === 1 && total > 0 && (
             <Text>
               Showing {total === 1 ? total : `all ${total.toLocaleString()}`}{' '}