feat(community-pagination): centering component

telus · Apr 17, 2019 · 1032622 · 1032622
1 parent 6eb2a96
commit 1032622
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 28 deletions.
diff --git a/packages/Pagination/Pagination.jsx b/packages/Pagination/Pagination.jsx
@@ -20,7 +20,7 @@ class Pagination extends Component {
       showPrevious: false,
       showNext: true,
     }
-    this.mapNumeric = this.mapNumeric.bind(this)
+    this.mapTabs = this.mapTabs.bind(this)
     this.handleButtonState = this.handleButtonState.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
@@ -29,7 +29,7 @@ class Pagination extends Component {
     this.handleButtonState()
   }
 
-  mapNumeric = () => {
+  mapTabs = () => {
     return this.props.children.map((item, i) => {
       const index = i + 1
       let { current } = this.state
@@ -124,31 +124,27 @@ class Pagination extends Component {
       <div {...safeRest(rest)} className={styles.container}>
         <Panels {...rest}>{children[current - 1] && children[current - 1]}</Panels>
         <div className={styles.controls}>
-          {this.state.showPrevious && (
-            <p className={styles.previous}>
-              <button
-                value={decreaseNumber}
-                onClick={e => this.handleClick(e)}
-                aria-label={PreviousLabel}
-              >
-                <DecorativeIcon symbol="leftChevron" size={16} />{' '}
-                <span className={styles.buttonLabel}>{PreviousText}</span>
-              </button>
-            </p>
-          )}
-          <ul className={styles.pagination}>{this.mapNumeric()}</ul>
-          {this.state.showNext && (
-            <p className={styles.next}>
-              <button
-                value={increaseNumber}
-                onClick={e => this.handleClick(e)}
-                aria-label={NextLabel}
-              >
-                <span className={styles.buttonLabel}>{NextText}</span>{' '}
-                <DecorativeIcon symbol="chevron" size={16} />
-              </button>
-            </p>
-          )}
+          <p className={this.state.showPrevious ? styles.previous : styles.previousHidden}>
+            <button
+              value={decreaseNumber}
+              onClick={e => this.handleClick(e)}
+              aria-label={PreviousLabel}
+            >
+              <DecorativeIcon symbol="leftChevron" size={16} />{' '}
+              <span className={styles.buttonLabel}>{PreviousText}</span>
+            </button>
+          </p>
+          <ul className={styles.pagination}>{this.mapTabs()}</ul>
+          <p className={this.state.showNext ? styles.next : styles.nextHidden}>
+            <button
+              value={increaseNumber}
+              onClick={e => this.handleClick(e)}
+              aria-label={NextLabel}
+            >
+              <span className={styles.buttonLabel}>{NextText}</span>{' '}
+              <DecorativeIcon symbol="chevron" size={16} />
+            </button>
+          </p>
         </div>
       </div>
     )

diff --git a/packages/Pagination/Pagination.scss b/packages/Pagination/Pagination.scss
@@ -8,9 +8,12 @@
   clear: both;
   display: flex;
   margin-top: 20px;
+  position: relative;
+  justify-content: center;
+  width: 100%;
 }
 
-.next, .previous {
+.next, .nextHidden, .previous, .previousHidden {
   color: #4B286D;
   padding: 0 8px;
   font-size: 16px;
@@ -35,6 +38,10 @@
   }
 }
 
+.nextHidden, .previousHidden {
+  visibility: hidden;
+}
+
 .pagination {
   display: flex;
   li {

diff --git a/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap b/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap
@@ -25,6 +25,37 @@ exports[`Pagination renders 1`] = `
     <div
       className="controls"
     >
+      <p
+        className="previousHidden"
+      >
+        <button
+          aria-label="Go to previous panel"
+          onClick={[Function]}
+          value={0}
+        >
+          <DecorativeIcon
+            size={16}
+            symbol="leftChevron"
+          >
+            <Icon
+              aria-hidden="true"
+              size={16}
+              symbol="leftChevron"
+            >
+              <i
+                aria-hidden="true"
+                className="TDS_Icon-modules__iconLeftChevron___37tW0 TDS_Icon-modules__icon___13xYd TDS_Icon-modules__size16___1pm12"
+              />
+            </Icon>
+          </DecorativeIcon>
+           
+          <span
+            className="buttonLabel"
+          >
+            Previous
+          </span>
+        </button>
+      </p>
       <ul
         className="pagination"
       >