From 3f704a75a0d0d2acc29fc03729b96f7846238643 Mon Sep 17 00:00:00 2001
From: allyssonsantos <aallysson0@gmail.com>
Date: Thu, 4 Apr 2019 16:50:32 -0300
Subject: [PATCH] feat(Pagination): Add pageHref and onPageClick props

---
 components/Pagination/Pagination.jsx          |  121 +-
 .../Pagination/Pagination.unit.test.jsx       |   80 +-
 .../Pagination.unit.test.jsx.snap             | 1451 +++++------------
 .../sub-components/ActionButton.jsx           |    8 +-
 components/Pagination/sub-components/Page.jsx |    2 +
 .../ActionButton.unit.test.jsx.snap           |   85 +-
 .../__snapshots__/Dots.unit.test.jsx.snap     |    2 +-
 .../__snapshots__/Page.unit.test.jsx.snap     |    7 +-
 stories/Pagination/Pagination.story.jsx       |  108 +-
 .../examples/ControlledPagination.jsx         |   18 +-
 .../examples/ControlledPaginationAria.jsx     |   70 +
 11 files changed, 727 insertions(+), 1225 deletions(-)
 create mode 100644 stories/Pagination/examples/ControlledPaginationAria.jsx

diff --git a/components/Pagination/Pagination.jsx b/components/Pagination/Pagination.jsx
index 0416d4fc8..88b31e638 100644
--- a/components/Pagination/Pagination.jsx
+++ b/components/Pagination/Pagination.jsx
@@ -11,6 +11,7 @@ import pagination from './utils/pagination';
 const Wrapper = styled.nav`
   align-items: center;
   display: flex;
+  justify-content: center;
   padding: 16px !important;
 `;
 
@@ -22,48 +23,77 @@ const Pagination = ({
   activePageAriaLabel,
   nextButtonText,
   pageAriaLabel,
+  pageHref,
   prevButtonText,
-  onClick,
+  onPageClick,
   totalPages,
   ...props
-}) => (
-  <Wrapper aria-label={ariaLabel} {...props}>
-    <ActionButton
-      aria-disabled={activePage === 1}
-      disabled={activePage === 1}
-      onClick={() => onClick(activePage - 1)}
-    >
-      {prevButtonText}
-    </ActionButton>
-    {pagination({ totalPages, activePage }).map((page, index) => {
-      if (page === '...') {
-        return <Dots key={generateDotsKey(index)} />;
-      }
-
-      return (
-        <Page
-          aria-current={activePage === page ? 'page' : false}
-          aria-label={`${
-            activePage === page ? `${activePageAriaLabel}, ` : ''
-          }${pageAriaLabel} ${page}`}
-          key={page}
-          active={activePage === page}
-          onClick={() => onClick(page)}
-        >
-          {page}
-        </Page>
-      );
-    })}
-
-    <ActionButton
-      aria-disabled={activePage === totalPages}
-      disabled={activePage === totalPages}
-      onClick={() => onClick(activePage + 1)}
-    >
-      {nextButtonText}
-    </ActionButton>
-  </Wrapper>
-);
+}) => {
+  const handlePageClick = page => e => {
+    if (!onPageClick) {
+      return undefined;
+    }
+
+    e.preventDefault();
+
+    if (page <= 0 || page > totalPages) {
+      return false;
+    }
+
+    return onPageClick(page);
+  };
+
+  const handleHref = page => {
+    if (!pageHref || onPageClick || page <= 0 || page > totalPages) {
+      return undefined;
+    }
+
+    return pageHref(page);
+  };
+
+  return (
+    <Wrapper aria-label={ariaLabel} {...props}>
+      <ActionButton
+        aria-disabled={activePage === 1}
+        disabled={activePage === 1}
+        onClick={handlePageClick(activePage - 1)}
+        href={handleHref(activePage - 1)}
+      >
+        {prevButtonText}
+      </ActionButton>
+
+      {pagination({ totalPages, activePage }).map((page, index) => {
+        if (page === '...') {
+          return <Dots key={generateDotsKey(index)} />;
+        }
+
+        return (
+          <Page
+            aria-current={activePage === page ? 'page' : false}
+            aria-label={`${
+              activePage === page ? `${activePageAriaLabel}, ` : ''
+            }${pageAriaLabel} ${page}`}
+            key={page}
+            active={activePage === page}
+            onClick={handlePageClick(page)}
+            href={handleHref(page)}
+          >
+            {page}
+          </Page>
+        );
+      })}
+
+      <ActionButton
+        aria-disabled={activePage === totalPages}
+        disabled={activePage === totalPages}
+        onClick={handlePageClick(activePage + 1)}
+        href={handleHref(activePage + 1)}
+      >
+        {nextButtonText}
+      </ActionButton>
+    </Wrapper>
+  );
+};
 
 Pagination.propTypes = {
   /** Set the aria-label html attribute to the root element of pagination */
@@ -74,14 +104,16 @@ Pagination.propTypes = {
   activePageAriaLabel: PropTypes.string,
   /** Set the number of pages to be displayed. */
   totalPages: PropTypes.number.isRequired,
-  /** Next page button text */
+  /** Set next page button text */
   nextButtonText: PropTypes.string,
-  /** Page number button aria-label html attribute */
+  /** Page number button aria-label html attribute. */
   pageAriaLabel: PropTypes.string,
-  /** Previous page button text */
+  /** Set the page anchor element href value. */
+  pageHref: PropTypes.func,
+  /** Set previous page button text. */
   prevButtonText: PropTypes.string,
   /** Function to be called when prev, next or page button is clicked, it receives the next page number as an argument. */
-  onClick: PropTypes.func,
+  onPageClick: PropTypes.func,
 };
 
 Pagination.defaultProps = {
@@ -90,8 +122,9 @@ Pagination.defaultProps = {
   activePageAriaLabel: 'Current Page',
   nextButtonText: 'Next',
   pageAriaLabel: 'Page',
+  pageHref: undefined,
   prevButtonText: 'Previous',
-  onClick: nextPage => {}, // eslint-disable-line
+  onPageClick: undefined, // eslint-disable-line
 };
 
 export default Pagination;
diff --git a/components/Pagination/Pagination.unit.test.jsx b/components/Pagination/Pagination.unit.test.jsx
index d1d868dd7..d08945809 100644
--- a/components/Pagination/Pagination.unit.test.jsx
+++ b/components/Pagination/Pagination.unit.test.jsx
@@ -56,24 +56,28 @@ describe('<Pagination />', () => {
     });
   });
 
-  describe('onClick prop', () => {
+  describe('onPageClick prop', () => {
     describe('Page button', () => {
-      it('should call onClick when button is clicked', () => {
-        const onClickMock = jest.fn();
+      it('should call onPageClick when button is clicked', () => {
+        const onPageClickMock = jest.fn();
         const wrapper = shallow(
-          <Pagination totalPages={10} onClick={onClickMock} />,
+          <Pagination totalPages={10} onPageClick={onPageClickMock} />,
         );
 
         const page = wrapper.find('Page');
-        page.at(0).simulate('click');
+        page.at(0).simulate('click', { preventDefault: () => {} });
 
-        expect(onClickMock).toHaveBeenCalled();
+        expect(onPageClickMock).toHaveBeenCalled();
       });
 
       it('should receive clicked page as onClick parameter when button is clicked', () => {
-        const onClickMock = jest.fn();
+        const onPageClickMock = jest.fn();
         const wrapper = mount(
-          <Pagination totalPages={10} activePage={2} onClick={onClickMock} />,
+          <Pagination
+            totalPages={10}
+            activePage={2}
+            onPageClick={onPageClickMock}
+          />,
         );
 
         wrapper
@@ -81,39 +85,47 @@ describe('<Pagination />', () => {
           .at(2)
           .simulate('click');
 
-        expect(onClickMock).toHaveBeenCalledWith(3);
+        expect(onPageClickMock).toHaveBeenCalledWith(3);
       });
     });
 
     describe('Action buttons', () => {
       it('should call onClick when previous button is clicked', () => {
-        const onClickMock = jest.fn();
+        const onPageClickMock = jest.fn();
         const wrapper = shallow(
-          <Pagination totalPages={10} onClick={onClickMock} />,
+          <Pagination
+            totalPages={10}
+            activePage={2}
+            onPageClick={onPageClickMock}
+          />,
         );
 
         const page = wrapper.find('ActionButton');
-        page.at(0).simulate('click');
+        page.at(0).simulate('click', { preventDefault: () => {} });
 
-        expect(onClickMock).toHaveBeenCalled();
+        expect(onPageClickMock).toHaveBeenCalled();
       });
 
       it('should call onClick when next button is clicked', () => {
-        const onClickMock = jest.fn();
+        const onPageClickMock = jest.fn();
         const wrapper = shallow(
-          <Pagination totalPages={10} onClick={onClickMock} />,
+          <Pagination totalPages={10} onPageClick={onPageClickMock} />,
         );
 
         const page = wrapper.find('ActionButton');
-        page.at(1).simulate('click');
+        page.at(1).simulate('click', { preventDefault: () => {} });
 
-        expect(onClickMock).toHaveBeenCalled();
+        expect(onPageClickMock).toHaveBeenCalled();
       });
 
       it('should receive previous page as onClick parameter when previous button is clicked', () => {
-        const onClickMock = jest.fn();
+        const onPageClickMock = jest.fn();
         const wrapper = mount(
-          <Pagination totalPages={10} activePage={2} onClick={onClickMock} />,
+          <Pagination
+            totalPages={10}
+            activePage={2}
+            onPageClick={onPageClickMock}
+          />,
         );
 
         wrapper
@@ -121,13 +133,17 @@ describe('<Pagination />', () => {
           .at(0)
           .simulate('click');
 
-        expect(onClickMock).toHaveBeenCalledWith(1);
+        expect(onPageClickMock).toHaveBeenCalledWith(1);
       });
 
       it('should receive next page as onClick parameter when next button is clicked', () => {
-        const onClickMock = jest.fn();
+        const onPageClickMock = jest.fn();
         const wrapper = mount(
-          <Pagination totalPages={10} activePage={2} onClick={onClickMock} />,
+          <Pagination
+            totalPages={10}
+            activePage={2}
+            onPageClick={onPageClickMock}
+          />,
         );
 
         wrapper
@@ -135,8 +151,26 @@ describe('<Pagination />', () => {
           .at(1)
           .simulate('click');
 
-        expect(onClickMock).toHaveBeenCalledWith(3);
+        expect(onPageClickMock).toHaveBeenCalledWith(3);
       });
     });
   });
+
+  describe('Page href prop', () => {
+    it('should set href value with correct value', () => {
+      const wrapper = mount(
+        <Pagination
+          totalPages={10}
+          activePage={2}
+          pageHref={page => `/?page=${page}`}
+        />,
+      );
+      expect(
+        wrapper
+          .find('Page')
+          .at(0)
+          .prop('href'),
+      ).toBe('/?page=1');
+    });
+  });
 });
diff --git a/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap b/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap
index d63f5c302..fa8865276 100644
--- a/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap
+++ b/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -10,6 +10,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -26,19 +27,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -47,6 +50,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -63,134 +67,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c4:hover,
-.c4:focus {
+.c3:hover,
+.c3:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: not-allowed;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c7 {
-  font-size: 24px;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c6 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c6 .c7 {
-  font-size: 24px;
-}
-
-.c6:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c6:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c6:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -198,29 +87,41 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
   color: #cccccc;
   cursor: not-allowed;
 }
 
-.c5 {
+.c4 {
   border: 1px solid transparent;
   border-radius: 10px;
   cursor: pointer;
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
-.c5:hover,
-.c5:focus {
+.c4:hover,
+.c4:focus {
   background-color: #e5edfc;
   border: 1px solid #1355d0;
   color: #1355d0;
@@ -246,77 +147,67 @@ exports[`<Pagination /> Snapshots should match snapshot with 5 pages 1`] = `
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={true}
-    className="c1 c2"
+    className="c1"
     disabled={true}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 2"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     2
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 3"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     3
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 4"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     4
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 5"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     5
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c5 c6"
+    className="c4"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -325,6 +216,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -341,19 +233,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -362,6 +256,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -378,134 +273,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c4:hover,
-.c4:focus {
+.c3:hover,
+.c3:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: not-allowed;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c7 {
-  font-size: 24px;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c6 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c6 .c7 {
-  font-size: 24px;
-}
-
-.c6:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c6:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c6:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -513,29 +293,41 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
   color: #cccccc;
   cursor: not-allowed;
 }
 
-.c5 {
+.c4 {
   border: 1px solid transparent;
   border-radius: 10px;
   cursor: pointer;
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
-.c5:hover,
-.c5:focus {
+.c4:hover,
+.c4:focus {
   background-color: #e5edfc;
   border: 1px solid #1355d0;
   color: #1355d0;
@@ -561,85 +353,75 @@ exports[`<Pagination /> Snapshots should match snapshot with 6 pages 1`] = `
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={true}
-    className="c1 c2"
+    className="c1"
     disabled={true}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 2"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     2
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 3"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     3
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 4"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     4
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 5"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     5
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 6"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     6
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c5 c6"
+    className="c4"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -648,6 +430,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -664,19 +447,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -685,6 +470,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -701,134 +487,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c4:hover,
-.c4:focus {
+.c3:hover,
+.c3:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: not-allowed;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c9 {
-  font-size: 24px;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c8 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c8 .c9 {
-  font-size: 24px;
-}
-
-.c8:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c8:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c8:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -836,41 +507,53 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
   color: #cccccc;
   cursor: not-allowed;
 }
 
-.c7 {
+.c6 {
   border: 1px solid transparent;
   border-radius: 10px;
   cursor: pointer;
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
-.c7:hover,
-.c7:focus {
+.c6:hover,
+.c6:focus {
   background-color: #e5edfc;
   border: 1px solid #1355d0;
   color: #1355d0;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 }
 
-.c6 {
+.c5 {
   position: relative;
   background-color: #cccccc;
   border-radius: 50%;
@@ -879,7 +562,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   width: 5px;
 }
 
-.c6:after {
+.c5:after {
   left: 8px;
   content: '';
   position: absolute;
@@ -891,7 +574,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   width: 5px;
 }
 
-.c6:before {
+.c5:before {
   left: 16px;
   content: '';
   position: absolute;
@@ -923,84 +606,74 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages 1`] = `
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={true}
-    className="c1 c2"
+    className="c1"
     disabled={true}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 2"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     2
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 3"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     3
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 4"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     4
-  </button>
+  </a>
   <div
-    className="c5"
+    className="c4"
   >
     <span
-      className="c6"
+      className="c5"
     />
   </div>
-  <button
+  <a
     aria-current={false}
     aria-label="Page 7"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     7
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c7 c8"
+    className="c6"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activePage equals 4 1`] = `
-.c4 {
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1009,6 +682,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1025,19 +699,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c4:hover,
-.c4:focus {
+.c3:hover,
+.c3:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1046,92 +722,33 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 16px;
-  font-weight: normal;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin: 0 4px;
-  min-height: 40px;
-  min-width: 40px;
-  outline: none;
-  padding: 5px 8px;
-  -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
-}
-
-.c3:hover,
-.c3:focus {
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c5 {
-  font-size: 24px;
-}
-
-.c2:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 16px;
+  font-weight: normal;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin: 0 4px;
+  min-height: 40px;
+  min-width: 40px;
+  outline: none;
+  padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
+.c2:hover,
 .c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
+  background-color: #e5edfc;
+  border-color: #1355d0;
   color: #1355d0;
 }
 
@@ -1142,10 +759,16 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
 .c1:hover,
@@ -1175,93 +798,83 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 2"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     2
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 3"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     3
-  </button>
-  <button
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 4"
-    className="c4"
+    className="c3"
     onClick={[Function]}
   >
     4
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 5"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     5
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 6"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     6
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 7"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     7
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activePage equals 5 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1270,6 +883,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1286,19 +900,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c6:hover,
-.c6:focus {
+.c5:hover,
+.c5:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1307,6 +923,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1323,79 +940,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c7 {
-  font-size: 24px;
-}
-
-.c2:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -1403,10 +960,16 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
 .c1:hover,
@@ -1416,13 +979,13 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   color: #1355d0;
 }
 
-.c4 {
+.c3 {
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   background-color: #cccccc;
   border-radius: 50%;
@@ -1431,7 +994,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   width: 5px;
 }
 
-.c5:after {
+.c4:after {
   left: 8px;
   content: '';
   position: absolute;
@@ -1443,7 +1006,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   width: 5px;
 }
 
-.c5:before {
+.c4:before {
   left: 16px;
   content: '';
   position: absolute;
@@ -1475,84 +1038,74 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
+  </a>
   <div
-    className="c4"
+    className="c3"
   >
     <span
-      className="c5"
+      className="c4"
     />
   </div>
-  <button
+  <a
     aria-current={false}
     aria-label="Page 4"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     4
-  </button>
-  <button
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 5"
-    className="c6"
+    className="c5"
     onClick={[Function]}
   >
     5
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 6"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     6
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 7"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     7
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activePage equals 7 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1561,6 +1114,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1577,19 +1131,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c6:hover,
-.c6:focus {
+.c5:hover,
+.c5:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1598,6 +1154,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1614,79 +1171,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c7 {
-  font-size: 24px;
-}
-
-.c2:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -1694,10 +1191,16 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
 .c1:hover,
@@ -1707,13 +1210,13 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   color: #1355d0;
 }
 
-.c4 {
+.c3 {
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   background-color: #cccccc;
   border-radius: 50%;
@@ -1722,7 +1225,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   width: 5px;
 }
 
-.c5:after {
+.c4:after {
   left: 8px;
   content: '';
   position: absolute;
@@ -1734,7 +1237,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   width: 5px;
 }
 
-.c5:before {
+.c4:before {
   left: 16px;
   content: '';
   position: absolute;
@@ -1766,84 +1269,74 @@ exports[`<Pagination /> Snapshots should match snapshot with 7 pages and activeP
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
+  </a>
   <div
-    className="c4"
+    className="c3"
   >
     <span
-      className="c5"
+      className="c4"
     />
   </div>
-  <button
+  <a
     aria-current={false}
     aria-label="Page 4"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     4
-  </button>
-  <button
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 5"
-    className="c6"
+    className="c5"
     onClick={[Function]}
   >
     5
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 6"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     6
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 7"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     7
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activePage equals 50 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1852,6 +1345,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1868,19 +1362,21 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c6:hover,
-.c6:focus {
+.c5:hover,
+.c5:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1889,6 +1385,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1905,79 +1402,19 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c7 {
-  font-size: 24px;
-}
-
-.c2:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -1985,10 +1422,16 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
 .c1:hover,
@@ -1998,13 +1441,13 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   color: #1355d0;
 }
 
-.c4 {
+.c3 {
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   background-color: #cccccc;
   border-radius: 50%;
@@ -2013,7 +1456,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   width: 5px;
 }
 
-.c5:after {
+.c4:after {
   left: 8px;
   content: '';
   position: absolute;
@@ -2025,7 +1468,7 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   width: 5px;
 }
 
-.c5:before {
+.c4:before {
   left: 16px;
   content: '';
   position: absolute;
@@ -2057,91 +1500,81 @@ exports[`<Pagination /> Snapshots should match snapshot with 100 pages and activ
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
+  </a>
   <div
-    className="c4"
+    className="c3"
   >
     <span
-      className="c5"
+      className="c4"
     />
   </div>
-  <button
+  <a
     aria-current={false}
     aria-label="Page 49"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     49
-  </button>
-  <button
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 50"
-    className="c6"
+    className="c5"
     onClick={[Function]}
   >
     50
-  </button>
-  <button
+  </a>
+  <a
     aria-current={false}
     aria-label="Page 51"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     51
-  </button>
+  </a>
   <div
-    className="c4"
+    className="c3"
   >
     <span
-      className="c5"
+      className="c4"
     />
   </div>
-  <button
+  <a
     aria-current={false}
     aria-label="Page 100"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     100
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={false}
-    className="c1 c2"
+    className="c1"
     disabled={false}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
 
 exports[`<Pagination /> Snapshots should match snapshot without props 1`] = `
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2150,6 +1583,7 @@ exports[`<Pagination /> Snapshots should match snapshot without props 1`] = `
   border: 1px solid #1355d0;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2166,73 +1600,20 @@ exports[`<Pagination /> Snapshots should match snapshot without props 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   color: #FFFFFF;
 }
 
-.c3:hover,
-.c3:focus {
+.c2:hover,
+.c2:focus {
   background-color: #002f7b;
   border-color: #002f7b;
   color: #FFFFFF;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: not-allowed;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c2 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c2 .c4 {
-  font-size: 24px;
-}
-
-.c2:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c2:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c1 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -2240,10 +1621,16 @@ exports[`<Pagination /> Snapshots should match snapshot without props 1`] = `
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
   color: #cccccc;
   cursor: not-allowed;
 }
@@ -2268,39 +1655,29 @@ exports[`<Pagination /> Snapshots should match snapshot without props 1`] = `
   aria-label="pagination"
   className="c0"
 >
-  <button
+  <a
     aria-disabled={true}
-    className="c1 c2"
+    className="c1"
     disabled={true}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Previous
-    </span>
-  </button>
-  <button
+    Previous
+  </a>
+  <a
     aria-current="page"
     aria-label="Current Page, Page 1"
-    className="c3"
+    className="c2"
     onClick={[Function]}
   >
     1
-  </button>
-  <button
+  </a>
+  <a
     aria-disabled={true}
-    className="c1 c2"
+    className="c1"
     disabled={true}
     onClick={[Function]}
-    size="medium"
-    type="button"
   >
-    
-    <span>
-      Next
-    </span>
-  </button>
+    Next
+  </a>
 </nav>
 `;
diff --git a/components/Pagination/sub-components/ActionButton.jsx b/components/Pagination/sub-components/ActionButton.jsx
index cd1d0bcf3..1d8f06f0f 100644
--- a/components/Pagination/sub-components/ActionButton.jsx
+++ b/components/Pagination/sub-components/ActionButton.jsx
@@ -5,16 +5,18 @@ import styled from 'styled-components';
 import Button from '../../Button';
 import Colors from '../../Colors';
 
-const StyledButton = styled(Button)`
+const StyledButton = styled.a`
   border: 1px solid transparent;
   border-radius: 10px;
   cursor: pointer;
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   text-decoration: none;
+  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
+    border 0.2s ease-in-out;
+  user-select: none;
   white-space: nowrap;
 
   ${({ disabled }) =>
diff --git a/components/Pagination/sub-components/Page.jsx b/components/Pagination/sub-components/Page.jsx
index d6bf95aac..f25dfd80b 100644
--- a/components/Pagination/sub-components/Page.jsx
+++ b/components/Pagination/sub-components/Page.jsx
@@ -11,6 +11,7 @@ const PageButton = styled.a`
     ${({ active }) => (active ? Colors.BLUE['500'] : Colors.BLACK['200'])};
   border-radius: 10px;
   box-sizing: border-box;
+  color: ${Colors.BLACK['700']};
   cursor: pointer;
   display: flex;
   font-size: 16px;
@@ -24,6 +25,7 @@ const PageButton = styled.a`
   text-decoration: none;
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
     color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
+  user-select: none;
 
   ${({ active }) => active && `color: ${Colors.WHITE};`};
 
diff --git a/components/Pagination/sub-components/__snapshots__/ActionButton.unit.test.jsx.snap b/components/Pagination/sub-components/__snapshots__/ActionButton.unit.test.jsx.snap
index 676f09552..0c851382a 100644
--- a/components/Pagination/sub-components/__snapshots__/ActionButton.unit.test.jsx.snap
+++ b/components/Pagination/sub-components/__snapshots__/ActionButton.unit.test.jsx.snap
@@ -1,68 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ActionButton /> Snapshot should match snapshot 1`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-weight: bold;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-  font-size: 16px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1.5px solid transparent;
-  box-shadow: none;
-  color: #1355d0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border-radius: unset;
-}
-
-.c1 *:nth-child(2) {
-  margin-left: 5px;
-}
-
-.c1 .c2 {
-  font-size: 24px;
-}
-
-.c1:hover {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
-.c1:focus {
-  box-shadow: none;
-  background-color: transparent;
-  border-color: transparent;
-  color: #1355d0;
-}
-
-.c1:active {
-  box-shadow: none;
-  background-color: undefined;
-  border-color: undefined;
-  color: #1355d0;
-}
-
 .c0 {
   border: 1px solid transparent;
   border-radius: 10px;
@@ -70,10 +8,16 @@ exports[`<ActionButton /> Snapshot should match snapshot 1`] = `
   font-weight: normal;
   margin: 0 4px;
   outline: none;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 8px;
   -webkit-text-decoration: none;
   text-decoration: none;
+  -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
 }
 
 .c0:hover,
@@ -83,16 +27,11 @@ exports[`<ActionButton /> Snapshot should match snapshot 1`] = `
   color: #1355d0;
 }
 
-<button
-  className="c0 c1"
+<a
+  className="c0"
   disabled={false}
   onClick={[Function]}
-  size="medium"
-  type="button"
 >
-  
-  <span>
-    Back
-  </span>
-</button>
+  Back
+</a>
 `;
diff --git a/components/Pagination/sub-components/__snapshots__/Dots.unit.test.jsx.snap b/components/Pagination/sub-components/__snapshots__/Dots.unit.test.jsx.snap
index f43624a8e..52d468f47 100644
--- a/components/Pagination/sub-components/__snapshots__/Dots.unit.test.jsx.snap
+++ b/components/Pagination/sub-components/__snapshots__/Dots.unit.test.jsx.snap
@@ -4,7 +4,7 @@ exports[`<Dots /> Snapshot should match snapshot 1`] = `
 .c0 {
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 }
 
 .c1 {
diff --git a/components/Pagination/sub-components/__snapshots__/Page.unit.test.jsx.snap b/components/Pagination/sub-components/__snapshots__/Page.unit.test.jsx.snap
index ef1bef3a5..55d6a62b9 100644
--- a/components/Pagination/sub-components/__snapshots__/Page.unit.test.jsx.snap
+++ b/components/Pagination/sub-components/__snapshots__/Page.unit.test.jsx.snap
@@ -10,6 +10,7 @@ exports[`<Page /> Snapshot should match snapshot 1`] = `
   border: 1px solid #cccccc;
   border-radius: 10px;
   box-sizing: border-box;
+  color: #4c4c4c;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -26,6 +27,8 @@ exports[`<Page /> Snapshot should match snapshot 1`] = `
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
   transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out,font-weight 0.2s ease-in-out;
 }
@@ -37,10 +40,10 @@ exports[`<Page /> Snapshot should match snapshot 1`] = `
   color: #1355d0;
 }
 
-<button
+<a
   className="c0"
   onClick={[Function]}
 >
   50
-</button>
+</a>
 `;
diff --git a/stories/Pagination/Pagination.story.jsx b/stories/Pagination/Pagination.story.jsx
index 5b236b4d9..4bfd744ce 100644
--- a/stories/Pagination/Pagination.story.jsx
+++ b/stories/Pagination/Pagination.story.jsx
@@ -13,6 +13,7 @@ import {
 
 import { Pagination, Row, Col } from '../../components';
 import ControlledPagination from './examples/ControlledPagination';
+import ControlledPaginationAria from './examples/ControlledPaginationAria';
 
 storiesOf('Pagination', module).add('Pagination', () => (
   <>
@@ -28,7 +29,14 @@ storiesOf('Pagination', module).add('Pagination', () => (
 
           <Title as="h2">Examples</Title>
 
-          <Title as="h3">With 6 pages</Title>
+          <p>
+            If you want to control the state of pagination, set the onPageClick
+            prop, if you want the <code>{'<a>'}</code> element controls the
+            pagination, set the pageHref prop.
+          </p>
+          <p>Check the examples below:</p>
+
+          <Title as="h3">Simple usage</Title>
           <Row>
             <Col medium={5}>
               <SimpleHighlight>{`<Pagination totalPages={6} />`}</SimpleHighlight>
@@ -38,58 +46,104 @@ storiesOf('Pagination', module).add('Pagination', () => (
             </Col>
           </Row>
 
-          <Title as="h3">With 10 pages</Title>
+          <Title as="h3">With several pages and active page</Title>
           <Row>
             <Col medium={5}>
-              <SimpleHighlight>{`<Pagination totalPages={10} />`}</SimpleHighlight>
+              <SimpleHighlight>{`<Pagination totalPages={10} activePage={5} />`}</SimpleHighlight>
             </Col>
             <Col medium={7}>
-              <Pagination totalPages={10} />
+              <Pagination totalPages={10} activePage={5} />
             </Col>
           </Row>
 
-          <Title as="h3">With active page equals 5</Title>
+          <Title as="h3">Custom previous and next button texts</Title>
+          <p>
+            It&apos;s possible to change the text from &quot;Previous&quot; and
+            &quot;Next&quot; buttons through <code>prevButtonText</code> and{' '}
+            <code>nextButtonText</code> props.
+          </p>
           <Row>
             <Col medium={5}>
-              <SimpleHighlight>{`<Pagination totalPages={10} activePage={5} />`}</SimpleHighlight>
+              <SimpleHighlight>{`<Pagination prevButtonText="Previous Page" nextButtonText="Next Page" totalPages={10} activePage={5} />`}</SimpleHighlight>
             </Col>
             <Col medium={7}>
-              <Pagination totalPages={10} activePage={5} />
+              <Pagination
+                prevButtonText="Previous Page"
+                nextButtonText="Next Page"
+                totalPages={10}
+                activePage={5}
+              />
             </Col>
           </Row>
 
-          <Title as="h3">With active page equals 10</Title>
+          <Title as="h3">
+            Setting the href attribute of the page link elements
+          </Title>
+          <p>
+            The page elements are rendered as anchor elements (
+            <code>{`<a>`}</code>).
+          </p>
+          <p>
+            You can set the href attribute through <code>pageHref</code> prop,
+            this prop must be a function, it receives the page elements value
+            and should return a string.
+          </p>
+
+          <p>
+            Example of usage: (hover the elements to see href value, if you
+            click, the pagination will send you to another page)
+          </p>
+
           <Row>
             <Col medium={5}>
-              <SimpleHighlight>{`<Pagination totalPages={10} activePage={10} />`}</SimpleHighlight>
+              <SimpleHighlight>
+                {
+                  '<Pagination totalPages={10} pageHref={page => `/?page=${page}`} />'
+                }
+              </SimpleHighlight>
             </Col>
             <Col medium={7}>
-              <Pagination totalPages={10} activePage={10} />
+              <Pagination totalPages={10} pageHref={page => `/?page=${page}`} />
             </Col>
           </Row>
 
-          <Title as="h3">With custom previous and next texts</Title>
+          <Title as="h3">onClickPage prop</Title>
+          <p>
+            Thorugh <code>onClickPage</code> prop is possible to get the page
+            clicked.
+          </p>
+          <p>
+            This prop must be a function and it{' '}
+            <strong>receives the page clicked number</strong>.
+          </p>
+          <p>
+            If you set <code>onClickPage</code> prop the <code>pageHref</code>{' '}
+            prop will be ignored.
+          </p>
+          <p>
+            Here's an example of a controlled pagination that use this prop to
+            handle the state.
+          </p>
           <Row>
             <Col medium={5}>
-              <SimpleHighlight>{`<Pagination prevButtonText="Previous Page" nextButtonText="Next Page" totalPages={10} activePage={5} />`}</SimpleHighlight>
-            </Col>
-            <Col medium={7}>
-              <Pagination
-                prevButtonText="Previous Page"
-                nextButtonText="Next Page"
-                totalPages={10}
-                activePage={5}
-              />
+              <SimpleHighlight>{ControlledPagination.code}</SimpleHighlight>
             </Col>
+            <Col medium={7}>{<ControlledPagination />}</Col>
           </Row>
 
           <Title as="h2">Aria attributes</Title>
+          <p>
+            We provide a way to set aria attributes to the rendered pages
+            elements, such as: <code>ariaLabel</code>,{' '}
+            <code>activePageAriaLabel</code> and <code>pageAriaLabel</code>.
+          </p>
+          <p>You can check the description of each prop:</p>
           <Row>
             <Col medium={12}>
               <Table>
                 <thead>
                   <tr>
-                    <th>Component prop</th>
+                    <th style={{ width: 180 }}>Component prop</th>
                     <th>Description</th>
                   </tr>
                 </thead>
@@ -105,7 +159,7 @@ storiesOf('Pagination', module).add('Pagination', () => (
                     <td>activePageAriaLabel</td>
                     <td>
                       Set the value of <code>aria-label</code> attribute of the
-                      active page button, the default value is &quot;Current
+                      active page element, the default value is &quot;Current
                       Page&quot;. This will be displayed with the pageAriaLabel
                       prop. Ex: Current Page, Page 1.
                     </td>
@@ -114,7 +168,7 @@ storiesOf('Pagination', module).add('Pagination', () => (
                     <td>pageAriaLabel</td>
                     <td>
                       Set the value of <code>aria-label</code> attribute of the
-                      availables page buttons, this value will be concatenated
+                      availables page elements, this value will be concatenated
                       with the page number. The default value is
                       &quot;Page&quot;. Example: Page 4.
                     </td>
@@ -123,15 +177,13 @@ storiesOf('Pagination', module).add('Pagination', () => (
               </Table>
             </Col>
           </Row>
-          <Title as="h3">
-            Controlled pagination with aria attributes and custom texts
-          </Title>
+          <p>A working example implementing those props:</p>
           <Row>
             <Col medium={5}>
-              <SimpleHighlight>{ControlledPagination.code}</SimpleHighlight>
+              <SimpleHighlight>{ControlledPaginationAria.code}</SimpleHighlight>
             </Col>
             <Col medium={7}>
-              <ControlledPagination />
+              <ControlledPaginationAria />
             </Col>
           </Row>
         </StoryContainer>
diff --git a/stories/Pagination/examples/ControlledPagination.jsx b/stories/Pagination/examples/ControlledPagination.jsx
index 120becb6e..665b5e4a0 100644
--- a/stories/Pagination/examples/ControlledPagination.jsx
+++ b/stories/Pagination/examples/ControlledPagination.jsx
@@ -7,7 +7,7 @@ class ControlledPagination extends Component {
 
     this.state = {
       activePage: 1,
-      totalPages: 20,
+      totalPages: 10,
     };
   }
 
@@ -19,14 +19,9 @@ class ControlledPagination extends Component {
     const { activePage, totalPages } = this.state;
     return (
       <Pagination
-        ariaLabel="Records pagination"
-        activePageAriaLabel="Current record page"
-        pageAriaLabel="Record page"
-        prevButtonText="Previous page"
-        nextButtonText="Next page"
         totalPages={totalPages}
         activePage={activePage}
-        onClick={this.handleClick}
+        onPageClick={this.handleClick}
       />
     );
   }
@@ -41,7 +36,7 @@ class ControlledPagination extends Component {
 
     this.state = {
       activePage: 1,
-      totalPages: 20,
+      totalPages: 10,
     };
   }
 
@@ -53,14 +48,9 @@ class ControlledPagination extends Component {
     const { activePage, totalPages } = this.state;
     return (
       <Pagination
-        ariaLabel="Records pagination"
-        activePageAriaLabel="Current record page"
-        pageAriaLabel="Record page"
-        prevButtonText="Previous page"
-        nextButtonText="Next page"
         totalPages={totalPages}
         activePage={activePage}
-        onClick={this.handleClick}
+        onPageClick={this.handleClick}
       />
     );
   }
diff --git a/stories/Pagination/examples/ControlledPaginationAria.jsx b/stories/Pagination/examples/ControlledPaginationAria.jsx
new file mode 100644
index 000000000..37e562279
--- /dev/null
+++ b/stories/Pagination/examples/ControlledPaginationAria.jsx
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { Pagination } from '../../../components';
+
+class ControlledPaginationAria extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePage: 1,
+      totalPages: 20,
+    };
+  }
+
+  handleClick = nextPage => {
+    this.setState({ activePage: nextPage });
+  };
+
+  render() {
+    const { activePage, totalPages } = this.state;
+    return (
+      <Pagination
+        ariaLabel="Records pagination"
+        activePageAriaLabel="Current record page"
+        pageAriaLabel="Record page"
+        prevButtonText="Previous page"
+        nextButtonText="Next page"
+        totalPages={totalPages}
+        activePage={activePage}
+        onPageClick={this.handleClick}
+      />
+    );
+  }
+}
+
+ControlledPaginationAria.code = `import React, { Component } from 'react';
+import { Pagination } from '@catho/quantum';
+
+class ControlledPaginationAria extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePage: 1,
+      totalPages: 20,
+    };
+  }
+
+  handleClick = nextPage => {
+    this.setState({ activePage: nextPage });
+  };
+
+  render() {
+    const { activePage, totalPages } = this.state;
+    return (
+      <Pagination
+        ariaLabel="Records pagination"
+        activePageAriaLabel="Current record page"
+        pageAriaLabel="Record page"
+        prevButtonText="Previous page"
+        nextButtonText="Next page"
+        totalPages={totalPages}
+        activePage={activePage}
+        onPageClick={this.handleClick}
+      />
+    );
+  }
+}
+`;
+
+export default ControlledPaginationAria;