refactor!: refactoring Pagination component (#2837)

src/Button/index.scss

@@ -358,6 +358,12 @@ fieldset:disabled a.btn {
     $btn-tertiary-color,
     $btn-tertiary-color
   );
+
+  &.disabled,
+  &:disabled {
+    color: $yiq-text-dark;
+  }
+
   @include button-focus(theme-color("primary", "focus"));
 }
 
@@ -380,6 +386,12 @@ fieldset:disabled a.btn {
     $btn-inverse-tertiary-color,
     $btn-inverse-tertiary-color
   );
+
+  &.disabled,
+  &:disabled {
+    color: $yiq-text-light;
+  }
+
   @include button-focus($white);
 }
 

src/DataTable/TablePagination.jsx

@@ -14,10 +14,15 @@ function TablePagination() {
   const pageIndex = state?.pageIndex;
 
   return (
-    <Pagination.Reduced
+    <Pagination
+      variant="reduced"
       currentPage={pageIndex + 1}
-      handlePageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       pageCount={pageCount}
+      icons={{
+        leftIcon: null,
+        rightIcon: null,
+      }}
     />
   );
 }

src/DataTable/TablePaginationMinimal.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import { ArrowBackIos, ArrowForwardIos } from '../../icons';
 
 function TablePaginationMinimal() {
   const {
@@ -21,6 +22,10 @@ function TablePaginationMinimal() {
       pageCount={pageCount}
       paginationLabel="table pagination"
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      icons={{
+        leftIcon: ArrowBackIos,
+        rightIcon: ArrowForwardIos,
+      }}
     />
   );
 }

src/DataTable/tests/TablePagination.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act } from '@testing-library/react';
+import { render, act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -29,21 +29,21 @@ describe('<TablePagination />', () => {
   it(
     'Shows dropdown button with the page count as label and performs actions when dropdown items are clicked',
     async () => {
-      const { getAllByTestId, getByRole } = render(<PaginationWrapper value={instance} />);
-      const dropdownButton = getByRole('button', { name: /2 of 3/i });
+      render(<PaginationWrapper value={instance} />);
+      const dropdownButton = screen.getByRole('button', { name: /2 of 3/i });
       expect(dropdownButton).toBeInTheDocument();
       await act(async () => {
         await userEvent.click(dropdownButton);
       });
 
-      const dropdownChoices = getAllByTestId('pagination-dropdown-item');
+      const dropdownChoices = screen.getAllByTestId('pagination-dropdown-item');
       expect(dropdownChoices.length).toEqual(instance.pageCount);
       await act(async () => {
-        await userEvent.click(dropdownChoices[1], undefined, { skipPointerEventsCheck: true });
+        await userEvent.click(dropdownChoices[2], undefined, { skipPointerEventsCheck: true });
       });
 
       expect(instance.gotoPage).toHaveBeenCalledTimes(1);
-      expect(instance.gotoPage).toHaveBeenCalledWith(1);
+      expect(instance.gotoPage).toHaveBeenCalledWith(2);
     },
   );
 });

src/Pagination/DefaultPagination.jsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import PaginationContext from './PaginationContext';
+import { ELLIPSIS } from './constants';
+import {
+  PreviousPageButton,
+  NextPageButton,
+  PageOfCountButton,
+  PageButton,
+  Ellipsis,
+} from './subcomponents';
+import breakpoints from '../utils/breakpoints';
+import newId from '../utils/newId';
+
+function PaginationPages() {
+  const { displayPages } = useContext(PaginationContext);
+  const isMobile = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  if (isMobile) {
+    return <PageOfCountButton />;
+  }
+
+  return (
+    <>
+      {displayPages.map((pageIndex) => {
+        if (pageIndex === ELLIPSIS) {
+          return <Ellipsis key={newId('pagination-ellipsis-')} />;
+        }
+        return <PageButton key={pageIndex} pageNum={pageIndex + 1} />;
+      })}
+    </>
+  );
+}
+
+export default function DefaultPagination() {
+  return (
+    <ul className="pagination">
+      <PreviousPageButton />
+      <PaginationPages />
+      <NextPageButton />
+    </ul>
+  );
+}

src/Pagination/MinimalPagination.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PreviousPageButton, NextPageButton } from './subcomponents';
+
+export default function MinimalPagination() {
+  return (
+    <ul className="pagination">
+      <PreviousPageButton />
+      <NextPageButton />
+    </ul>
+  );
+}