feat: added prop to hide\show first\last pages for Pagination (#1616)

feat: added prop to hide\show first\last pages Co-authored-by: Denys Fedorov <[email protected]>
dequelabs · Aug 7, 2024 · eb0a056 · eb0a056
1 parent a3f374a
commit eb0a056
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 18 deletions.
diff --git a/docs/pages/components/Pagination.mdx b/docs/pages/components/Pagination.mdx
@@ -24,6 +24,17 @@ import { Pagination } from '@deque/cauldron-react'
 <Pagination totalItems={15} thin />
 ```
 
+### Hiding Start and End Pagination Buttons
+
+Using `hideStartEndPagination` prop, you can hide the "First" and "Last" page buttons.
+
+```jsx example
+<Pagination
+  totalItems={30}
+  hideStartEndPagination
+/>
+```
+
 ### Customizing Pagination Labels
 
 The pagination component sets labels by default, but these labels can be overridden if you need to customize the labels based on the types of items that are being displayed or to provide the labels in a different locale.
@@ -157,6 +168,12 @@ The pagination hook returns an object containing the properties `pagination`, a
       name: 'thin',
       type: 'boolean',
       description: 'Displays pagination with "thin" modifier (reduces the height of buttons and spacing)'
+    },
+    {
+      name: 'hideStartEndPagination',
+      type: 'boolean',
+      description: 'Hides "First page" and "Last page" buttons. Shows only "Next\Previous" buttons',
+      defaultValue: 'false'
     }
   ]}
 />
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -8,6 +8,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   totalItems: number;
   itemsPerPage?: number;
   currentPage?: number;
+  hideStartEndPagination?: boolean;
   statusLabel?: ContentNode;
   firstPageLabel?: ContentNode;
   previousPageLabel?: ContentNode;
@@ -28,6 +29,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
       totalItems,
       itemsPerPage = 10,
       currentPage = 1,
+      hideStartEndPagination = false,
       statusLabel,
       firstPageLabel = 'First page',
       previousPageLabel = 'Previous page',
@@ -58,15 +60,17 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
         {...other}
       >
         <ul>
-          <li>
-            <IconButton
-              icon="chevron-double-left"
-              tooltipProps={{ placement: tooltipPlacement }}
-              label={firstPageLabel}
-              aria-disabled={isFirstPage}
-              onClick={isFirstPage ? undefined : onFirstPageClick}
-            />
-          </li>
+          {!hideStartEndPagination && (
+            <li>
+              <IconButton
+                icon="chevron-double-left"
+                tooltipProps={{ placement: tooltipPlacement }}
+                label={firstPageLabel}
+                aria-disabled={isFirstPage}
+                onClick={isFirstPage ? undefined : onFirstPageClick}
+              />
+            </li>
+          )}
 
           <li>
             <IconButton
@@ -99,15 +103,17 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
             />
           </li>
 
-          <li>
-            <IconButton
-              icon="chevron-double-right"
-              tooltipProps={{ placement: tooltipPlacement }}
-              label={lastPageLabel}
-              aria-disabled={isLastPage}
-              onClick={isLastPage ? undefined : onLastPageClick}
-            />
-          </li>
+          {!hideStartEndPagination && (
+            <li>
+              <IconButton
+                icon="chevron-double-right"
+                tooltipProps={{ placement: tooltipPlacement }}
+                label={lastPageLabel}
+                aria-disabled={isLastPage}
+                onClick={isLastPage ? undefined : onLastPageClick}
+              />
+            </li>
+          )}
         </ul>
       </div>
     );

diff --git a/packages/react/src/components/Pagination/index.test.tsx b/packages/react/src/components/Pagination/index.test.tsx
@@ -272,3 +272,21 @@ test('returns no axe violations', async () => {
   const { container } = render(<Pagination totalItems={500} currentPage={3} />);
   expect(await axe(container)).toHaveNoViolations();
 });
+
+test('should show start and end pagination buttons when hideStartEndPagination is not provided', () => {
+  render(<Pagination totalItems={18} currentPage={1} />);
+
+  expect(screen.getByText('First page')).toBeInTheDocument();
+  expect(screen.getByText('Previous page')).toBeInTheDocument();
+  expect(screen.getByText('Next page')).toBeInTheDocument();
+  expect(screen.getByText('Last page')).toBeInTheDocument();
+});
+
+test('should hide start and end pagination buttons when hideStartEndPagination is true', () => {
+  render(<Pagination totalItems={18} currentPage={1} hideStartEndPagination />);
+
+  expect(screen.queryByText('First page')).not.toBeInTheDocument();
+  expect(screen.queryByText('Last page')).not.toBeInTheDocument();
+  expect(screen.getByText('Previous page')).toBeInTheDocument();
+  expect(screen.getByText('Next page')).toBeInTheDocument();
+});