merge conflicts

src/client/components/modules/Paginator/ClickableArrow/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Arrow from '../../../graphics/Arrow';
+
+import './index.scss';
+
+const baseClass = 'clickable-arrow';
+
+const ClickableArrow = (props) => {
+  const {
+    updatePage,
+    isDisabled,
+    direction,
+  } = props;
+
+  const classes = [
+    baseClass,
+    isDisabled && `${baseClass}--is-disabled`,
+    direction && `${baseClass}--${direction}`,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      className={classes}
+      onClick={!isDisabled && updatePage}
+      type="button"
+    >
+      <Arrow />
+    </button>
+  );
+};
+
+ClickableArrow.defaultProps = {
+  updatePage: null,
+  isDisabled: false,
+  direction: 'right',
+};
+
+ClickableArrow.propTypes = {
+  updatePage: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  direction: PropTypes.oneOf(['right', 'left']),
+};
+
+export default ClickableArrow;

src/client/components/modules/Paginator/ClickableArrow/index.scss

@@ -0,0 +1,17 @@
+@import '../../../../scss/styles.scss';
+
+.clickable-arrow {
+  cursor: pointer;
+
+  &--left {
+    transform: rotate(180deg);
+  }
+
+  &--is-disabled {
+    cursor: default;
+
+    .icon .stroke{
+      stroke: $gray;
+    }
+  }
+}

src/client/components/modules/Paginator/Ellipsis/index.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import './index.scss';
-
-const Ellipsis = () => <span className="paginator__ellipsis">...</span>;
-
-export default Ellipsis;

src/client/components/modules/Paginator/NextArrow/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Arrow from '../../../graphics/Arrow';
-
-import './index.scss';
-
-const NextArrow = ({ updatePage }) => (
-  <button
-    className="paginator__next-arrow"
-    onClick={updatePage}
-    type="button"
-  >
-    <Arrow />
-  </button>
-);
-
-NextArrow.defaultProps = {
-  updatePage: null,
-};
-
-NextArrow.propTypes = {
-  updatePage: PropTypes.func,
-};
-
-export default NextArrow;

src/client/components/modules/Paginator/Page/index.js

@@ -5,10 +5,14 @@ import './index.scss';
 
 const baseClass = 'paginator__page';
 
-const Page = ({ page, isCurrent, updatePage }) => {
+const Page = ({
+  page, isCurrent, updatePage, isFirstPage, isLastPage,
+}) => {
   const classes = [
     baseClass,
     isCurrent && `${baseClass}--is-current`,
+    isFirstPage && `${baseClass}--is-first-page`,
+    isLastPage && `${baseClass}--is-last-page`,
   ].filter(Boolean).join(' ');
 
   return (
@@ -26,12 +30,16 @@ Page.defaultProps = {
   page: 1,
   isCurrent: false,
   updatePage: null,
+  isFirstPage: false,
+  isLastPage: false,
 };
 
 Page.propTypes = {
   page: PropTypes.number,
   isCurrent: PropTypes.bool,
   updatePage: PropTypes.func,
+  isFirstPage: PropTypes.bool,
+  isLastPage: PropTypes.bool,
 };
 
 export default Page;

src/client/components/modules/Paginator/Page/index.scss

@@ -0,0 +1 @@
+

src/client/components/modules/Paginator/PrevArrow/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Arrow from '../../../graphics/Arrow';
-
-import './index.scss';
-
-const PrevArrow = ({ updatePage }) => (
-  <button
-    className="paginator__prev-arrow"
-    onClick={updatePage}
-    type="button"
-  >
-    <Arrow />
-  </button>
-);
-
-PrevArrow.defaultProps = {
-  updatePage: null,
-};
-
-PrevArrow.propTypes = {
-  updatePage: PropTypes.func,
-};
-
-export default PrevArrow;

src/client/components/modules/Paginator/PrevArrow/index.scss

@@ -1,3 +0,0 @@
-.prev-arrow {
-  transform: rotate(180deg);
-}

src/client/components/modules/Paginator/Separator/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './index.scss';
+
+const Separator = () => <span className="paginator__separator">&mdash;</span>;
+
+export default Separator;

src/client/components/modules/Paginator/index.js

@@ -4,17 +4,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import queryString from 'qs';
 
 import Page from './Page';
-import Ellipsis from './Ellipsis';
-import NextArrow from './NextArrow';
-import PrevArrow from './PrevArrow';
+import Separator from './Separator';
+import ClickableArrow from './ClickableArrow';
 
 import './index.scss';
 
 const nodeTypes = {
   Page,
-  Ellipsis,
-  NextArrow,
-  PrevArrow,
+  Separator,
+  ClickableArrow,
 };
 
 const baseClass = 'paginator';
@@ -56,8 +54,8 @@ const Pagination = (props) => {
   // Slice out the range of pages that we want to render
   const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
 
-  // Add prev ellipsis if necessary
-  if (currentPage - numberOfNeighbors - 1 >= 2) nodes.unshift({ type: 'Ellipsis' });
+  // Add prev separator if necessary
+  if (currentPage - numberOfNeighbors - 1 >= 2) nodes.unshift({ type: 'Separator' });
   // Add first page if necessary
   if (currentPage > numberOfNeighbors + 1) {
     nodes.unshift({
@@ -65,12 +63,13 @@ const Pagination = (props) => {
       props: {
         page: 1,
         updatePage,
+        isFirstPage: true,
       },
     });
   }
 
-  // Add next ellipsis if necessary
-  if (currentPage + numberOfNeighbors + 1 < totalPages) nodes.push({ type: 'Ellipsis' });
+  // Add next separator if necessary
+  if (currentPage + numberOfNeighbors + 1 < totalPages) nodes.push({ type: 'Separator' });
   // Add last page if necessary
   if (rangeEndIndex < totalPages) {
     nodes.push({
@@ -78,28 +77,29 @@ const Pagination = (props) => {
       props: {
         page: totalPages,
         updatePage,
+        isLastPage: true,
       },
     });
   }
 
   // Add prev and next arrows based on necessity
-  if (hasPrevPage) {
-    nodes.unshift({
-      type: 'PrevArrow',
-      props: {
-        updatePage: () => updatePage(prevPage),
-      },
-    });
-  }
+  nodes.push({
+    type: 'ClickableArrow',
+    props: {
+      updatePage: () => updatePage(prevPage),
+      isDisabled: !hasPrevPage,
+      direction: 'left',
+    },
+  });
 
-  if (hasNextPage) {
-    nodes.push({
-      type: 'NextArrow',
-      props: {
-        updatePage: () => updatePage(nextPage),
-      },
-    });
-  }
+  nodes.push({
+    type: 'ClickableArrow',
+    props: {
+      updatePage: () => updatePage(nextPage),
+      isDisabled: !hasNextPage,
+      direction: 'right',
+    },
+  });
 
   return (
     <div className={baseClass}>

src/client/components/modules/Paginator/index.scss

@@ -3,36 +3,40 @@
 .paginator {
   display: flex;
   align-items: flex-end;
+  justify-content: flex-end;
+  margin-bottom: base(1);
 
-  &__prev-arrow,
-  &__next-arrow,
   &__page {
-    @extend %btn-reset;
-    line-height: 1;
-    outline: 0;
-    @include shadow-sm;
-    padding: base(.5) base(.65);
-    margin-right: base(.45);
     cursor: pointer;
-    font-size: base(.4);
-    color: $black;
 
     &--is-current {
+      box-shadow: $shadow-sm;
       color: $gray;
       cursor: default;
     }
-  }
 
-  &__prev-arrow {
-    .icon {
-      transform: rotate(180deg);
+    &--is-last-page {
+      margin-right: 0;
     }
   }
 
-  &__ellipsis {
+  .clickable-arrow,
+  &__page {
+    @extend %btn-reset;
+    @extend %small;
+    outline: 0;
+    padding: base(.35) base(.45);
+    color: $black;
     line-height: 1;
-    padding: base(.25);
-    padding-bottom: 0;
-    margin-right: base(.45);
+  }
+
+  &__page,
+  &__separator {
+    margin-right: base(.25);
+  }
+
+  &__separator {
+    align-self: center;
+    color: $gray;
   }
 }