refactor: small SCSS and code style refactoring

src/Pagination/DefaultPagination.jsx

@@ -1,24 +1,16 @@
 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 {
+  PreviousPageButton,
+  NextPageButton,
+  PageOfCountButton,
+  PageButton,
+  Ellipsis,
+} from './subcomponents';
+import breakpoints from '../utils/breakpoints';
 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);
@@ -39,3 +31,13 @@ function PaginationPages() {
     </>
   );
 }
+
+export default function DefaultPagination() {
+  return (
+    <ul className="pagination">
+      <PreviousPageButton />
+      <PaginationPages />
+      <NextPageButton />
+    </ul>
+  );
+}

src/Pagination/MinimalPagination.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import PreviousPageButton from './subcomponents/PreviousPageButton';
-import NextPageButton from './subcomponents/NextPageButton';
+import { PreviousPageButton, NextPageButton } from './subcomponents';
 
 export default function MinimalPagination() {
   return (

src/Pagination/ReducedPagination.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import PreviousPageButton from './subcomponents/PreviousPageButton';
-import NextPageButton from './subcomponents/NextPageButton';
-import PaginationDropdown from './subcomponents/PaginationDropdown';
+import { PreviousPageButton, NextPageButton, PaginationDropdown } from './subcomponents';
 
 export default function ReducedPagination() {
   return (

src/Pagination/index.jsx

@@ -7,7 +7,7 @@ import MinimalPagination from './MinimalPagination';
 import DefaultPagination from './DefaultPagination';
 import { PaginationContextProvider } from './PaginationContext';
 import { PAGINATION_VARIANTS } from './constants';
-import PaginationScreenReaderText from './subcomponents/ScreenReaderComponent';
+import { ScreenReaderText } from './subcomponents';
 
 import { greaterThan } from '../utils/propTypes';
 import { ChevronLeft, ChevronRight } from '../../icons';
@@ -43,7 +43,7 @@ function Pagination(props) {
           'pagination-small': size !== PAGINATION_VARIANTS.default,
         })}
       >
-        <PaginationScreenReaderText />
+        <ScreenReaderText />
         {renderPaginationComponent()}
       </nav>
     </PaginationContextProvider>

src/Pagination/index.scss

@@ -17,6 +17,11 @@
     z-index: 4;
   }
 
+  .page-of-count {
+    margin: 0 0.5rem;
+    border: 0;
+  }
+
   .page-item {
     &:first-child .page-link {
       margin-left: 0;

src/Pagination/subcomponents/PageOfCountButton.jsx

@@ -9,14 +9,13 @@ export default function PageOfCountButton() {
   const label = getPageOfText();
 
   return (
-    <li className={classNames(['page-item', 'disabled'])}>
+    <li className={classNames('page-item', 'disabled')}>
       <span
-        className={classNames([
+        className={classNames(
           'btn',
           'page-link',
-          'mx-2',
-          'border-0',
-        ])}
+          'page-of-count',
+        )}
         aria-label={ariaLabel}
       >
         {label}

src/Pagination/subcomponents/index.jsx

@@ -0,0 +1,7 @@
+export { default as Ellipsis } from './Ellipsis';
+export { default as NextPageButton } from './NextPageButton';
+export { default as PageButton } from './PageButton';
+export { default as PageOfCountButton } from './PageOfCountButton';
+export { default as PaginationDropdown } from './PaginationDropdown';
+export { default as PreviousPageButton } from './PreviousPageButton';
+export { default as ScreenReaderText } from './ScreenReaderText';