feat: refactor Pagination

src/Button/Button.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 { Pagination } from '..';
 import DataTableContext from './DataTableContext';
+import { Pagination } from '..';
+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/Pagination/DefaultPagination.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import PaginationContext from './PaginationContext';
+import PreviousPageButton from './subcomponents/PreviousPageButton';
+import NextPageButton from './subcomponents/NextPageButton';
+import PageOfCountButton from './subcomponents/PageOfCountButton';
+import breakpoints from '../utils/breakpoints';
+import { ELLIPSIS } from './constants';
+import Ellipsis from './subcomponents/Ellipsis';
+import newId from '../utils/newId';
+import PageButton from './subcomponents/PageButton';
+
+export default function DefaultPagination() {
+  return (
+    <ul className="pagination">
+      <PreviousPageButton />
+      <PaginationPages />
+      <NextPageButton />
+    </ul>
+  );
+}
+
+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} />;
+      })}
+    </>
+  );
+}

src/Pagination/MinimalPagination.jsx

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