From e7394ee7432071f43eaf9c10d79c6619706d6d01 Mon Sep 17 00:00:00 2001
From: Mike Bunce <mike.bunce@telus.com>
Date: Tue, 26 Mar 2019 15:37:18 -0700
Subject: [PATCH] feat(community-pagination): refactoring code

---
 packages/Pagination/Pagination.jsx  | 60 +++++++++++++++++------------
 packages/Pagination/Pagination.scss | 32 +++++++--------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/packages/Pagination/Pagination.jsx b/packages/Pagination/Pagination.jsx
index d3bc9855b..8c6df95d8 100644
--- a/packages/Pagination/Pagination.jsx
+++ b/packages/Pagination/Pagination.jsx
@@ -29,12 +29,45 @@ class Pagination extends Component {
     this.handleButtonState()
   }
 
+  checkForRegularTabs = index => {
+    const { current } = this.state
+    const { panels } = this.state
+    // Check if there are less than 7 panels,
+    // if the index is at the first panel
+    // if the index is next to the first panel
+    // if current is less than three and index is less than five
+    // and the inverse if current within two of total and index is greater than minus 4 of total
+    return (
+      panels < 7 ||
+      index === 1 ||
+      index === panels ||
+      index === current + 1 ||
+      index === current - 1 ||
+      (current < 3 && index < 5) ||
+      (current > panels - 2 && index > panels - 4)
+    )
+  }
+
+  checkForEllipsis = index => {
+    const { current } = this.state
+    const { panels } = this.state
+    // Check if we should render an ellipsis
+    // if index is less than two or greater than two of current
+    // if current is less than three and index is five
+    // and the inverse if current is within two of total and index is total minus 5
+    return (
+      index === current - 2 ||
+      index === current + 2 ||
+      (current < 3 && index === 5) ||
+      (current > panels - 2 && index === panels - 5)
+    )
+  }
+
   mapTabs = () => {
     const goToText = this.props.language === 'french' ? 'Aller au panneau n°' : 'Go to panel number'
     return this.props.children.map((item, i) => {
       const index = i + 1
       let { current } = this.state
-      const { panels } = this.state
       current = parseInt(current, 10) || 0
       if (current === index) {
         return (
@@ -43,23 +76,7 @@ class Pagination extends Component {
           </li>
         )
       }
-
-      if (panels < 7 || index === 1 || index === panels) {
-        return (
-          <li key={hash(`${i}-2`)} className={styles.regular}>
-            <button value={index} onClick={e => this.handleClick(e)}>
-              {index}
-            </button>
-          </li>
-        )
-      }
-      if (
-        index === current ||
-        index === current + 1 ||
-        index === current - 1 ||
-        (current < 3 && index < 5) ||
-        (current > panels - 2 && index > panels - 4)
-      ) {
+      if (this.checkForRegularTabs(index)) {
         return (
           <li key={hash(`${i}-3`)} className={styles.regular}>
             <button
@@ -72,12 +89,7 @@ class Pagination extends Component {
           </li>
         )
       }
-      if (
-        index === current - 2 ||
-        index === current + 2 ||
-        (current < 3 && index === 5) ||
-        (current > panels - 2 && index === panels - 5)
-      ) {
+      if (this.checkForEllipsis(index)) {
         return (
           <li key={hash(`${i}-4`)} className={styles.ellipsis}>
             ...
diff --git a/packages/Pagination/Pagination.scss b/packages/Pagination/Pagination.scss
index 350d2691a..27681d69d 100644
--- a/packages/Pagination/Pagination.scss
+++ b/packages/Pagination/Pagination.scss
@@ -19,13 +19,15 @@
   font-size: 16px;
   button {
     color: #4B286D;
-    border: none;
+    border: 1px solid #F2EFF4;
     background-color: #F2EFF4;
-    width: 32px;
-    height: 32px;
+    width: 30px;
+    height: 30px;
     text-align: center;
+    cursor: pointer;
     @include mq($from: md) {
       background: none;
+      border: none;
       width: auto;
       height: auto;
     }
@@ -47,13 +49,15 @@
   li {
     color: #4B286D;
     background-color: #F2EFF4;
-    width: 32px;
-    height: 32px;
-    line-height: 29px;
+    border: 1px solid #F2EFF4;
+    height: 30px;
+    line-height: 27px;
+    width: auto;
+    min-width: 30px;
     @include mq($from: md) {
-      width: 24px;
+      min-width: 24px;
       height: 24px;
-      line-height: 24px;
+      line-height: 22px;
     }
     list-style: none;
     margin-right: 4px;
@@ -64,28 +68,24 @@
       border: none;
       color: #4B286D;
       cursor: pointer;
+      padding: 0 5px;
     }
     &:hover {
       border: 1px solid #4B286D;
-      line-height: 27px;
-      @include mq($from: md) {
-        line-height: 22px;
-      }
     }
   }
   li.ellipsis {
     background-color: inherit;
     line-height: 15px;
+    border: none;
     &:hover {
       border: none;
     }
   }
   li.current {
     color: #ffffff;
-    button {
-      color: #ffffff;
-      cursor: default;
-    }
+    border: 1px solid #4B286D;
+    padding: 0 5px;
     background-color: #4B286D;
   }
 }