From da1551d483f82ac4eed28450defa4aae6b7318e5 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 16 Apr 2021 10:15:31 -0500
Subject: [PATCH 1/8] add pagination component

---
 lib/Pagination/Pagination.css                | 76 ++++++++++++++++++
 lib/Pagination/Pagination.js                 | 84 ++++++++++++++++++++
 lib/Pagination/index.js                      |  1 +
 lib/Pagination/readme.md                     | 20 +++++
 lib/Pagination/stories/BasicUsage.js         | 35 ++++++++
 lib/Pagination/stories/Pagination.stories.js |  9 +++
 lib/Pagination/tests/Pagination-test.js      | 82 +++++++++++++++++++
 lib/Pagination/tests/interactor.js           | 39 +++++++++
 package.json                                 |  1 +
 translations/stripes-components/en.json      |  2 +
 10 files changed, 349 insertions(+)
 create mode 100644 lib/Pagination/Pagination.css
 create mode 100644 lib/Pagination/Pagination.js
 create mode 100644 lib/Pagination/index.js
 create mode 100644 lib/Pagination/readme.md
 create mode 100644 lib/Pagination/stories/BasicUsage.js
 create mode 100644 lib/Pagination/stories/Pagination.stories.js
 create mode 100644 lib/Pagination/tests/Pagination-test.js
 create mode 100644 lib/Pagination/tests/interactor.js

diff --git a/lib/Pagination/Pagination.css b/lib/Pagination/Pagination.css
new file mode 100644
index 000000000..c46b7d82b
--- /dev/null
+++ b/lib/Pagination/Pagination.css
@@ -0,0 +1,76 @@
+@import '../variables.css';
+
+/**
+* Default styling
+*/
+
+.pagination {
+  display: flex;
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+
+  &.fillWidth {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  & .paginationItem {
+    padding: 0 2px;
+    margin: 0 1px;
+  }
+}
+
+.paginationLink {
+  composes: button from "../Button/Button.css";
+  padding: 0 var(--gutter-static-two-thirds, 8px);
+  margin: 0;
+
+  &[aria-disabled=true] {
+    color: var(--color-text-p2);
+    transition: opacity ease-in-out 500ms;
+    pointer-events: none;
+  }
+
+  &.numberLink {
+    min-width: 1.72rem;
+    padding: 0 4px;
+    margin: 0;
+  }
+
+  &:visited {
+    color: inherit;
+  }
+
+  &::before {
+    border-radius: 999px;
+  }
+
+  /**
+  * Button Style: Default
+  */
+
+  &.default {
+    background-color: transparent;
+    border: 1px solid var(--primary);
+    color: var(--primary);
+
+    & :global .stripes__icon {
+      fill: var(--primary);
+    }
+  }
+
+  /**
+   * Button style primary
+   */
+
+  &.primary {
+    background-color: var(--primary);
+    border: 1px solid var(--primary);
+    color: #fff;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
diff --git a/lib/Pagination/Pagination.js b/lib/Pagination/Pagination.js
new file mode 100644
index 000000000..8ce2d610e
--- /dev/null
+++ b/lib/Pagination/Pagination.js
@@ -0,0 +1,84 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import ReactPaginate from 'react-paginate';
+import uniqueId from 'lodash/uniqueId';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import Icon from '../Icon';
+import css from './Pagination.css';
+
+const propTypes = {
+  /** Class to be applied to `<nav>` containter */
+  className: PropTypes.string,
+  /** Allows you to control the pagination and define the current page. */
+  currentPage: PropTypes.number,
+  /** fills width of container, placing previous/next buttons at either end */
+  fillWidth: PropTypes.bool,
+  /** The method called to generate the href attribute value for each page. */
+  hrefBuilder: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  /** Set accessible label for `nav` container */
+  label: PropTypes.string,
+  /** The method to call when a page is clicked. Exposes the current page object as an argument. */
+  onPageChange: PropTypes.func,
+  /** Total number of pages. */
+  pageCount: PropTypes.number,
+  /** Whether or not to show the previous and next labels */
+  showLabels: PropTypes.bool,
+};
+
+const Pagination = ({
+  id,
+  pageCount,
+  onPageChange,
+  hrefBuilder,
+  fillWidth,
+  currentPage,
+  label = 'pagination',
+  showLabels = true,
+  ...props
+}) => {
+  return (
+    <nav id={id} data-testid="pagination-component" aria-label={label} data-test-pagination>
+      <ReactPaginate
+        pageCount={pageCount}
+        pageRangeDisplayed={pageCount < 6 ? 6 : 3}
+        marginPagesDisplayed={pageCount < 6 ? 0 : 1}
+        nextLabel={(
+          <div data-test-pagination-next>
+            <Icon size="small" icon="caret-right" iconPosition="end">
+              <FormattedMessage id="stripes-components.next">
+                { (text) => <span className={`${showLabels ? '' : 'sr-only'}`}>{text}</span>}
+              </FormattedMessage>
+            </Icon>
+          </div>
+        )}
+        previousLabel={(
+          <div data-test-pagination-previous>
+            <Icon size="small" icon="caret-left">
+              <FormattedMessage id="stripes-components.previous">
+                { (text) => <span className={`${showLabels ? '' : 'sr-only'}`}>{text}</span>}
+              </FormattedMessage>
+            </Icon>
+          </div>
+        )}
+        breakLabel={<Icon icon="ellipsis" aria-label="ellipsis" />}
+        onPageChange={onPageChange}
+        pageClassName={css.paginationItem}
+        containerClassName={`${css.pagination} ${fillWidth ? css.fillWidth : ''}`}
+        pageLinkClassName={`${css.paginationLink} ${css.numberLink}`}
+        activeLinkClassName={css.primary}
+        nextLinkClassName={css.paginationLink}
+        previousLinkClassName={css.paginationLink}
+        breakLinkClassName={css.paginationLink}
+        forcePage={currentPage}
+        hrefBuilder={hrefBuilder}
+        {...props}
+      />
+    </nav>
+  );
+};
+
+Pagination.propTypes = propTypes;
+
+export default Pagination;
diff --git a/lib/Pagination/index.js b/lib/Pagination/index.js
new file mode 100644
index 000000000..eaef04eb7
--- /dev/null
+++ b/lib/Pagination/index.js
@@ -0,0 +1 @@
+export { default } from './Pagination';
diff --git a/lib/Pagination/readme.md b/lib/Pagination/readme.md
new file mode 100644
index 000000000..7da7d1ae6
--- /dev/null
+++ b/lib/Pagination/readme.md
@@ -0,0 +1,20 @@
+
+# Pagination
+The Pagination component is used for nagivation between pages of a list of results.
+
+We use [react-paginate](https://github.com/AdeleD/react-paginate) under the hood, more detail can be found at their we expose their API along with a few useful props.
+
+## Props
+
+Name | type | description | default | required
+--- | --- | --- | --- | ---
+  `id` | string | Applies the 'id' attribute to the outer `<nav>` element | --- | ---
+  `pageCount`| number | Used to set starting/ending page numbers (1 - pageCount) | --- | ---
+  `onPageChange` | func | --- | function called when page button is clicked | ---
+  `hrefBuilder` | func | --- | function for generating hrefs for individual buttons. Provides the  | ---
+  `fillWidth` | bool | if `true`, pagination will fill its parent container, placing previous and next buttons at either end, with page buttons distributed evenly between | false | ---
+  `currentPage` | number | manually sets the current page | --- | ---
+  `label` | string | label for outer `<nav>` element | --- | 'pagination' | ---
+  `showLabels` | bool | whether or not to display the visible "previous" and "next" labels. | true | ---
+
+ 
\ No newline at end of file
diff --git a/lib/Pagination/stories/BasicUsage.js b/lib/Pagination/stories/BasicUsage.js
new file mode 100644
index 000000000..cfc700c61
--- /dev/null
+++ b/lib/Pagination/stories/BasicUsage.js
@@ -0,0 +1,35 @@
+/**
+ * Pagination Component: Basic Usage
+ */
+
+import React from 'react';
+import Pagination from '..';
+// eslint-disable-next-line
+const handlePageClick = () => alert('page clicked');
+
+export default () => (
+  <div>
+    <h3>20 pages</h3>
+    <Pagination
+      pageCount={20}
+      onPageChange={handlePageClick}
+      hrefBuilder={() => '#'}
+    />
+    <h3>3 or fewer pages, hidden previous and next labels</h3>
+    <Pagination
+      pageCount={3}
+      onPageChange={handlePageClick}
+      hrefBuilder={() => '#'}
+      showLabels={false}
+    />
+    <h3>Fill width of container</h3>
+    <div style={{ width: '600px', border: '1px solid #ccc' }}>
+      <Pagination
+        pageCount={3}
+        onPageChange={handlePageClick}
+        hrefBuilder={() => '#'}
+        fillWidth
+      />
+    </div>
+  </div>
+);
diff --git a/lib/Pagination/stories/Pagination.stories.js b/lib/Pagination/stories/Pagination.stories.js
new file mode 100644
index 000000000..2f5e3261b
--- /dev/null
+++ b/lib/Pagination/stories/Pagination.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+import readme from '../readme.md';
+import BasicUsage from './BasicUsage';
+
+storiesOf('Pagination', module)
+  .addDecorator(withReadme(readme))
+  .add('Basic Usage', () => <BasicUsage />);
diff --git a/lib/Pagination/tests/Pagination-test.js b/lib/Pagination/tests/Pagination-test.js
new file mode 100644
index 000000000..460a80375
--- /dev/null
+++ b/lib/Pagination/tests/Pagination-test.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import {
+  beforeEach,
+  describe,
+  it,
+} from '@bigtest/mocha';
+
+import Pagination from '../Pagination';
+
+import { mountWithContext } from '../../../tests/helpers';
+import PaginationInteractor from './interactor';
+
+const clickHandler = sinon.spy();
+
+describe.only('Pagination', () => {
+  const pagination = new PaginationInteractor();
+
+  describe('rendering', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <Pagination
+          pageCount={20}
+          onPageChange={clickHandler}
+          hrefBuilder={() => '#'}
+        />
+      );
+    });
+
+    it('should render pagination links', () => {
+      expect(pagination.isPresent).to.be.true;
+    });
+
+    it('last number link should display 20', () => {
+      expect(pagination.lastNumber.number).to.equal('20');
+    });
+
+    it('previous/next buttons display labels', () => {
+      expect(pagination.nextlink.labelHidden).to.be.false;
+      expect(pagination.nextlink.labelHidden).to.be.false;
+    });
+
+    describe('clicking the next button', () => {
+      beforeEach(async () => {
+        clickHandler.resetHistory;
+        await pagination.nextlink.click();
+      });
+
+      it('calls the pageChange handler', () => {
+        expect(clickHandler.calledOnce).to.be.true;
+      });
+    });
+    describe('clicking the previous button', () => {
+      beforeEach(async () => {
+        clickHandler.resetHistory;
+        await pagination.previouslink.click();
+      });
+
+      it('calls the pageChange handler', () => {
+        expect(clickHandler.calledOnce).to.be.true;
+      });
+    });
+  });
+
+  describe('hidden previous/next labels', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <Pagination
+          pageCount={3}
+          hrefBuilder={() => '#'}
+          showLabels={false}
+        />
+      );
+    });
+
+    it('previous/next buttons hide labels', () => {
+      expect(pagination.nextlink.labelHidden).to.be.true;
+      expect(pagination.nextlink.labelHidden).to.be.true;
+    });
+  });
+});
diff --git a/lib/Pagination/tests/interactor.js b/lib/Pagination/tests/interactor.js
new file mode 100644
index 000000000..6f8578cc1
--- /dev/null
+++ b/lib/Pagination/tests/interactor.js
@@ -0,0 +1,39 @@
+import {
+  clickable,
+  collection,
+  interactor,
+  isPresent,
+  computed,
+  scoped,
+  hasClass,
+} from '@bigtest/interactor';
+
+// import { selectorFromClassnameString } from '../../../tests/helpers';
+
+import css from '../Pagination.css';
+import iconCSS from '../../Icon/Icon.css';
+
+
+const PaginationLinkInteractor = interactor(class NumberLinkInteractor {
+  number = computed(function () {
+    return this.$root.innerText;
+  });
+
+  text = computed(function () {
+    return this.$root.innerText;
+  });
+
+  labelHidden = hasClass(`.${iconCSS.label} > *`, 'sr-only');
+  click = clickable();
+});
+
+export default interactor(class PaginationInteractor {
+  static defaultScope = 'nav[data-test-pagination]';
+  numberlinks = collection(`.${css.paginationItem}`, PaginationLinkInteractor);
+
+  linksArePresent = isPresent(`.${css.paginationLink}`);
+  nextlink = scoped('[rel=next]', PaginationLinkInteractor);
+  previouslink = scoped('[rel=prev]', PaginationLinkInteractor);
+  lastNumber = scoped(`.${css.paginationItem}:nth-last-of-type(2)`, PaginationLinkInteractor);
+  firstNumber = scoped(`.${css.paginationItem}:nth-of-type(2)`, PaginationLinkInteractor);
+});
diff --git a/package.json b/package.json
index 4df139932..2e3a9fe13 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,7 @@
     "react-highlight-words": "^0.16.0",
     "react-hot-loader": "^4.0.0",
     "react-overlays": "^3.2.0",
+    "react-paginate": "^7.1.2",
     "react-quill": "^1.3.3",
     "react-svg-loader": "^3.0.3",
     "react-tether": "^1.0.1",
diff --git a/translations/stripes-components/en.json b/translations/stripes-components/en.json
index c5632adff..4de50aa6d 100644
--- a/translations/stripes-components/en.json
+++ b/translations/stripes-components/en.json
@@ -5,6 +5,8 @@
   "goToPreviousMonth": "Go to previous month",
   "goToNextYear": "Go to next year",
   "goToNextMonth": "Go to next month",
+  "previous": "Previous",
+  "next": "Next",
   "selectDay": "Choose {dayOfWeek}, {date}",
   "dateSelected": "{date} selected",
   "Datepicker.monthControl": "month",

From cf390ed13bd7c96c8183e42cbe8bf8a4e45b6104 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 16 Apr 2021 12:12:41 -0500
Subject: [PATCH 2/8] remove only, document example

---
 lib/Pagination/readme.md                | 26 +++++++++++++++++++++++--
 lib/Pagination/stories/BasicUsage.js    |  4 +++-
 lib/Pagination/tests/Pagination-test.js |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/lib/Pagination/readme.md b/lib/Pagination/readme.md
index 7da7d1ae6..2f82525b0 100644
--- a/lib/Pagination/readme.md
+++ b/lib/Pagination/readme.md
@@ -4,14 +4,36 @@ The Pagination component is used for nagivation between pages of a list of resul
 
 We use [react-paginate](https://github.com/AdeleD/react-paginate) under the hood, more detail can be found at their we expose their API along with a few useful props.
 
+## Basic Usage
+
+```
+
+  // take actions within your app corresponding to the selected page...
+  const handlePageClick = (page) => {
+    // page is an object with {selected} property - which gives the currently selected page index.
+    // console.log(page);
+  }
+
+  // generate the hrefs for links if necessary (return the full string)
+  const resultsHrefBuilder = (page) => {
+    // return '#';
+  }
+
+  <Pagination
+    pageCount={20}
+    onPageChange={handlePageClick}
+    hrefBuilder={resultsHrefBuilder}
+  />
+```
+
 ## Props
 
 Name | type | description | default | required
 --- | --- | --- | --- | ---
   `id` | string | Applies the 'id' attribute to the outer `<nav>` element | --- | ---
-  `pageCount`| number | Used to set starting/ending page numbers (1 - pageCount) | --- | ---
+  `pageCount`| number | Used to set starting/ending page numbers (1 - pageCount) | --- | required
   `onPageChange` | func | --- | function called when page button is clicked | ---
-  `hrefBuilder` | func | --- | function for generating hrefs for individual buttons. Provides the  | ---
+  `hrefBuilder` | func | function for generating hrefs for individual buttons. Provides the page object  | ---
   `fillWidth` | bool | if `true`, pagination will fill its parent container, placing previous and next buttons at either end, with page buttons distributed evenly between | false | ---
   `currentPage` | number | manually sets the current page | --- | ---
   `label` | string | label for outer `<nav>` element | --- | 'pagination' | ---
diff --git a/lib/Pagination/stories/BasicUsage.js b/lib/Pagination/stories/BasicUsage.js
index cfc700c61..69f705463 100644
--- a/lib/Pagination/stories/BasicUsage.js
+++ b/lib/Pagination/stories/BasicUsage.js
@@ -5,7 +5,9 @@
 import React from 'react';
 import Pagination from '..';
 // eslint-disable-next-line
-const handlePageClick = () => alert('page clicked');
+const handlePageClick = (page) => {
+  console.log(page);
+};
 
 export default () => (
   <div>
diff --git a/lib/Pagination/tests/Pagination-test.js b/lib/Pagination/tests/Pagination-test.js
index 460a80375..0d026c55b 100644
--- a/lib/Pagination/tests/Pagination-test.js
+++ b/lib/Pagination/tests/Pagination-test.js
@@ -14,7 +14,7 @@ import PaginationInteractor from './interactor';
 
 const clickHandler = sinon.spy();
 
-describe.only('Pagination', () => {
+describe('Pagination', () => {
   const pagination = new PaginationInteractor();
 
   describe('rendering', () => {

From fd5e2f7f94fe9b787f3985b79eb0709ca37f94d0 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 16 Apr 2021 12:14:42 -0500
Subject: [PATCH 3/8] expose pagination at top-level index

---
 index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.js b/index.js
index 99bf34592..4a2255cf0 100644
--- a/index.js
+++ b/index.js
@@ -113,6 +113,7 @@ export {
 export { default as FilterControlGroup } from './lib/FilterControlGroup';
 export { default as FilterPaneSearch } from './lib/FilterPaneSearch';
 export { default as ExportCsv } from './lib/ExportCsv';
+export { default as Pagination } from './lib/Pagination';
 
 /* utilities */
 export { default as RootCloseWrapper } from './util/RootCloseWrapper';

From 0943136371e245daecba67ae100647b969512e73 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 16 Apr 2021 15:17:25 -0500
Subject: [PATCH 4/8] resolve applicable lint errors

---
 lib/Pagination/Pagination.js         | 4 +---
 lib/Pagination/stories/BasicUsage.js | 4 +++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/Pagination/Pagination.js b/lib/Pagination/Pagination.js
index 8ce2d610e..bd1266813 100644
--- a/lib/Pagination/Pagination.js
+++ b/lib/Pagination/Pagination.js
@@ -1,8 +1,6 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactPaginate from 'react-paginate';
-import uniqueId from 'lodash/uniqueId';
-import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Icon from '../Icon';
 import css from './Pagination.css';
diff --git a/lib/Pagination/stories/BasicUsage.js b/lib/Pagination/stories/BasicUsage.js
index 69f705463..c5d0dd2a5 100644
--- a/lib/Pagination/stories/BasicUsage.js
+++ b/lib/Pagination/stories/BasicUsage.js
@@ -3,10 +3,12 @@
  */
 
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import Pagination from '..';
+
 // eslint-disable-next-line
 const handlePageClick = (page) => {
-  console.log(page);
+  action(page);
 };
 
 export default () => (

From 647d67a83103424aac72153dfeb62bfb9929335e Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Wed, 21 Apr 2021 14:59:35 -0500
Subject: [PATCH 5/8] add constants, remove comment

---
 lib/Pagination/Pagination.js       | 13 +++++++++++--
 lib/Pagination/tests/interactor.js |  3 ---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/Pagination/Pagination.js b/lib/Pagination/Pagination.js
index bd1266813..3862a784f 100644
--- a/lib/Pagination/Pagination.js
+++ b/lib/Pagination/Pagination.js
@@ -5,6 +5,15 @@ import { FormattedMessage } from 'react-intl';
 import Icon from '../Icon';
 import css from './Pagination.css';
 
+//  <    #    ...       # # #       ...      #      >
+//      |_|  |___|     |_____|     |___|    |_|
+//     OUTER BREAK     CENTER      BREAK   OUTER
+
+const DISPLAY_BREAK_LINKS_ABOVE = 6;
+const MIN_CENTER_LINKS = 3;
+const MAX_CENTER_LINKS = 6;
+const MAX_OUTER_PAGES = 1;
+
 const propTypes = {
   /** Class to be applied to `<nav>` containter */
   className: PropTypes.string,
@@ -40,8 +49,8 @@ const Pagination = ({
     <nav id={id} data-testid="pagination-component" aria-label={label} data-test-pagination>
       <ReactPaginate
         pageCount={pageCount}
-        pageRangeDisplayed={pageCount < 6 ? 6 : 3}
-        marginPagesDisplayed={pageCount < 6 ? 0 : 1}
+        pageRangeDisplayed={pageCount < DISPLAY_BREAK_LINKS_ABOVE ? MAX_CENTER_LINKS : MIN_CENTER_LINKS}
+        marginPagesDisplayed={pageCount < DISPLAY_BREAK_LINKS_ABOVE ? 0 : MAX_OUTER_PAGES}
         nextLabel={(
           <div data-test-pagination-next>
             <Icon size="small" icon="caret-right" iconPosition="end">
diff --git a/lib/Pagination/tests/interactor.js b/lib/Pagination/tests/interactor.js
index 6f8578cc1..fed60768e 100644
--- a/lib/Pagination/tests/interactor.js
+++ b/lib/Pagination/tests/interactor.js
@@ -8,12 +8,9 @@ import {
   hasClass,
 } from '@bigtest/interactor';
 
-// import { selectorFromClassnameString } from '../../../tests/helpers';
-
 import css from '../Pagination.css';
 import iconCSS from '../../Icon/Icon.css';
 
-
 const PaginationLinkInteractor = interactor(class NumberLinkInteractor {
   number = computed(function () {
     return this.$root.innerText;

From f64695f7dde57e7d87642b4efb3c1fe345147cbf Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Wed, 21 Apr 2021 15:56:03 -0500
Subject: [PATCH 6/8] change constant names, adjust documentation

---
 lib/Pagination/Pagination.js | 12 ++++++------
 lib/Pagination/readme.md     | 11 +++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/lib/Pagination/Pagination.js b/lib/Pagination/Pagination.js
index 3862a784f..0ee09e7bd 100644
--- a/lib/Pagination/Pagination.js
+++ b/lib/Pagination/Pagination.js
@@ -9,10 +9,10 @@ import css from './Pagination.css';
 //      |_|  |___|     |_____|     |___|    |_|
 //     OUTER BREAK     CENTER      BREAK   OUTER
 
-const DISPLAY_BREAK_LINKS_ABOVE = 6;
-const MIN_CENTER_LINKS = 3;
-const MAX_CENTER_LINKS = 6;
-const MAX_OUTER_PAGES = 1;
+const MINIMAL_DISPLAY_THRESHOLD = 6;
+const MINIMAL_DISPLAY_COUNT = 3;
+const EXTENDED_DISPLAY_COUNT = 6;
+const MAX_EXTENDED_OUTER_PAGES = 1;
 
 const propTypes = {
   /** Class to be applied to `<nav>` containter */
@@ -49,8 +49,8 @@ const Pagination = ({
     <nav id={id} data-testid="pagination-component" aria-label={label} data-test-pagination>
       <ReactPaginate
         pageCount={pageCount}
-        pageRangeDisplayed={pageCount < DISPLAY_BREAK_LINKS_ABOVE ? MAX_CENTER_LINKS : MIN_CENTER_LINKS}
-        marginPagesDisplayed={pageCount < DISPLAY_BREAK_LINKS_ABOVE ? 0 : MAX_OUTER_PAGES}
+        pageRangeDisplayed={pageCount < MINIMAL_DISPLAY_THRESHOLD ? EXTENDED_DISPLAY_COUNT : MINIMAL_DISPLAY_COUNT}
+        marginPagesDisplayed={pageCount < MINIMAL_DISPLAY_THRESHOLD ? 0 : MAX_EXTENDED_OUTER_PAGES}
         nextLabel={(
           <div data-test-pagination-next>
             <Icon size="small" icon="caret-right" iconPosition="end">
diff --git a/lib/Pagination/readme.md b/lib/Pagination/readme.md
index 2f82525b0..c034e1c0a 100644
--- a/lib/Pagination/readme.md
+++ b/lib/Pagination/readme.md
@@ -26,6 +26,17 @@ We use [react-paginate](https://github.com/AdeleD/react-paginate) under the hood
   />
 ```
 
+## Display modes based on page count...
+For less than 6 pages, 3 page links will be visible between previous and next buttons (carets.)
+```
+<  1  2  3  >
+```
+
+For more than 6 pages, extended mode is activated - it includes collected central links between ellipsis and outer "margin" links.
+```
+<  1  ...  4  5  6  ...  10  >
+```
+
 ## Props
 
 Name | type | description | default | required

From bfb38dbe0858662d1b6e2b0127c41048b82250bb Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Tue, 8 Jun 2021 11:32:42 -0500
Subject: [PATCH 7/8] Update lib/Pagination/readme.md

Co-authored-by: Viktor Soroka <viktor_soroka@epam.com>
---
 lib/Pagination/readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/Pagination/readme.md b/lib/Pagination/readme.md
index c034e1c0a..a550123c2 100644
--- a/lib/Pagination/readme.md
+++ b/lib/Pagination/readme.md
@@ -2,7 +2,7 @@
 # Pagination
 The Pagination component is used for nagivation between pages of a list of results.
 
-We use [react-paginate](https://github.com/AdeleD/react-paginate) under the hood, more detail can be found at their we expose their API along with a few useful props.
+We use [react-paginate](https://github.com/AdeleD/react-paginate) under the hood, more detail can be found in their documentation. We expose their API along with a few useful props.
 
 ## Basic Usage
 
@@ -50,4 +50,4 @@ Name | type | description | default | required
   `label` | string | label for outer `<nav>` element | --- | 'pagination' | ---
   `showLabels` | bool | whether or not to display the visible "previous" and "next" labels. | true | ---
 
- 
\ No newline at end of file
+ 

From b1ebe7390f265f6c70b3a8e03aed95ebadcab257 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Thu, 6 Jan 2022 07:11:31 -0500
Subject: [PATCH 8/8] remove @bigtest/mocha dependency

Bringing forward changes from #1694 (STCOM-905)
---
 lib/Pagination/tests/Pagination-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/Pagination/tests/Pagination-test.js b/lib/Pagination/tests/Pagination-test.js
index 0d026c55b..fe8890d9d 100644
--- a/lib/Pagination/tests/Pagination-test.js
+++ b/lib/Pagination/tests/Pagination-test.js
@@ -5,7 +5,7 @@ import {
   beforeEach,
   describe,
   it,
-} from '@bigtest/mocha';
+} from 'mocha';
 
 import Pagination from '../Pagination';