From ccbb4fff75223a04f5dddb19eb09082d9e84d9e5 Mon Sep 17 00:00:00 2001
From: John Rood <john.rood@skillsoft.com>
Date: Wed, 22 Jan 2025 11:21:53 -0600
Subject: [PATCH] chore(Pagination): remove navigation option

---
 packages/gamut/src/Pagination/index.tsx       | 20 +------------------
 .../lib/Molecules/Pagination/Pagination.mdx   |  6 ------
 .../Pagination/Pagination.stories.tsx         | 14 -------------
 3 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/packages/gamut/src/Pagination/index.tsx b/packages/gamut/src/Pagination/index.tsx
index dba89cf4cf..c847637352 100644
--- a/packages/gamut/src/Pagination/index.tsx
+++ b/packages/gamut/src/Pagination/index.tsx
@@ -30,10 +30,6 @@ export interface PaginationProps {
    * Default initial page number, if none will default to one
    */
   defaultPageNumber?: number;
-  /**
-   * Whether pagination should act as standard link-based navigation.
-   */
-  isNavigation?: boolean;
   /**
    * Called when the page number is changed with the resulting page number as its first argument
    */
@@ -59,14 +55,12 @@ export interface PaginationProps {
 export const Pagination: React.FC<PaginationProps> = ({
   chapterSize = 5,
   defaultPageNumber = 1,
-  isNavigation,
   onChange,
   pageNumber,
   totalPages,
   type,
   variant = 'stroke',
 }) => {
-  const navigation = isNavigation ? '/' : undefined;
   const [currentPage, setCurrentPage] = useState(
     pageNumber ?? defaultPageNumber
   );
@@ -134,12 +128,7 @@ export const Pagination: React.FC<PaginationProps> = ({
 
   return (
     <FlexBox
-      as={navigation ? 'nav' : undefined}
-      aria-label={
-        navigation
-          ? `Browse Content By Page, total pages ${totalPages}`
-          : `Paginated Navigation, total pages ${totalPages}`
-      }
+      aria-label={`Paginated Navigation, total pages ${totalPages}`}
       justifyContent="center"
       minWidth={{
         _: 'initial',
@@ -149,7 +138,6 @@ export const Pagination: React.FC<PaginationProps> = ({
       <HiddenText aria-live="polite">{liveText}</HiddenText>
       <AnimatedFadeButton
         aria-label={`Navigate back to page ${currentPage - 1}`}
-        href={navigation}
         icon={MiniChevronLeftIcon}
         onClick={() => changeHandler(currentPage - 1)}
         showButton={currentPage === 1 ? 'hidden' : 'shown'}
@@ -161,7 +149,6 @@ export const Pagination: React.FC<PaginationProps> = ({
             aria-label="Jump back to page 1"
             direction="back"
             display={hideOnMobile}
-            href={navigation}
             onClick={() => changeHandler(1)}
             showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
             buttonType={variant}
@@ -172,7 +159,6 @@ export const Pagination: React.FC<PaginationProps> = ({
             aria-label={`Jump back to page ${backPageNumber}`}
             direction="back"
             display={hideOnMobile}
-            href={navigation}
             onClick={() => changeHandler(backPageNumber)}
             buttonType={variant}
             showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
@@ -183,7 +169,6 @@ export const Pagination: React.FC<PaginationProps> = ({
         <PaginationButton
           aria-current={page === currentPage && 'page'}
           aria-label={`${page === totalPages ? 'Last Page, ' : ''}Page ${page}`}
-          href={navigation}
           key={page}
           onClick={() => changeHandler(page)}
           selected={page === currentPage}
@@ -201,7 +186,6 @@ export const Pagination: React.FC<PaginationProps> = ({
             onClick={() => {
               changeHandler(forwardPageNumber);
             }}
-            href={navigation}
             showButton={
               shownPageArray[chapterSize - 1] === totalPages
                 ? 'hidden'
@@ -213,7 +197,6 @@ export const Pagination: React.FC<PaginationProps> = ({
             aria-label={`Jump forward to last page, page ${totalPages}`}
             direction="forward"
             display={hideOnMobile}
-            href={navigation}
             onClick={() => changeHandler(totalPages)}
             showButton={
               shownPageArray[chapterSize - 1] === totalPages
@@ -228,7 +211,6 @@ export const Pagination: React.FC<PaginationProps> = ({
       )}
       <AnimatedFadeButton
         aria-label={`Navigate forward to page ${currentPage + 1}`}
-        href={navigation}
         icon={MiniChevronRightIcon}
         onClick={() => changeHandler(currentPage + 1)}
         showButton={currentPage === totalPages ? 'hidden' : 'shown'}
diff --git a/packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx b/packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx
index a25d7f1538..425a8b6f4a 100644
--- a/packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx
+++ b/packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx
@@ -47,12 +47,6 @@ We have two variants of pagination - `stroke` and `text` - that roughly correspo
 ### `text`
 <Canvas of={TemplateStories.Text} />
 
-## Pagination navigation
-
-When using pagination as navigation between linked pages, use the `isNavigation` prop. Your `onChange` function should include programmatic navigation.
-
-<Canvas of={TemplateStories.Navigation} />
-
 ## Controlled pagination
 
 When `pageNumber` is specified, the component switches to being a controlled component.
diff --git a/packages/styleguide/src/lib/Molecules/Pagination/Pagination.stories.tsx b/packages/styleguide/src/lib/Molecules/Pagination/Pagination.stories.tsx
index 522c8eecfa..d56c616bbf 100644
--- a/packages/styleguide/src/lib/Molecules/Pagination/Pagination.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Pagination/Pagination.stories.tsx
@@ -49,20 +49,6 @@ export const Text: Story = {
   },
 };
 
-export const Navigation: Story = {
-  args: {
-    chapterSize: 5,
-    totalPages: 27,
-    isNavigation: true,
-    onChange: (pageNumber) => {
-      window.open(
-        `https://giphy.com/search/hamtaro-page-${pageNumber}`,
-        '_blank'
-      );
-    }
-  },
-};
-
 export const PaginationControlledExample: React.FC<PaginationProps> = (
   props
 ) => {