fix(pagination): bring v2 version back (#782)

carbon-design-system · May 18, 2018 · 42ebc8c · 42ebc8c
1 parent f307929
commit 42ebc8c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 61 deletions.
diff --git a/src/components/pagination/pagination-v2.dust b/src/components/pagination/pagination-v2.dust
diff --git a/src/components/pagination/pagination.config.js b/src/components/pagination/pagination.config.js
@@ -0,0 +1,20 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'V1',
+      notes: `
+        Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.
+      `,
+    },
+    {
+      name: 'v2',
+      label: 'V2',
+      context: {
+        version: 'v2',
+      },
+    },
+  ],
+};
diff --git a/src/components/pagination/pagination.hbs b/src/components/pagination/pagination.hbs
@@ -1,24 +1,29 @@
 <div class="bx--pagination" data-pagination>
   <div class="bx--pagination__left">
-    <div class="bx--select">
+    <div class="bx--select{{#is version "v2"}} bx--select--inline{{/is}}">
       <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
       <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
         <option class="bx--select-option" value="10" selected>10</option>
-        <option class="bx--select-option" value="15">15</option>
         <option class="bx--select-option" value="20">20</option>
-        <option class="bx--select-option" value="25">25</option>
         <option class="bx--select-option" value="30">30</option>
+        <option class="bx--select-option" value="40">40</option>
+        <option class="bx--select-option" value="50">50</option>
       </select>
       <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
         <path d="M10 0L5 5 0 0z"></path>
       </svg>
     </div>
-    <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+    {{#isnt version "v2"}}
+      <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+    {{/isnt}}
     <span class="bx--pagination__text">
+      {{#is version "v2"}}
+        <span>|&nbsp;</span>
+      {{/is}}
       <span data-displayed-item-range>1-10</span> of
       <span data-total-items>40</span> items</span>
   </div>
-  <div class="bx--pagination__right">
+  <div class="bx--pagination__right{{#is version "v2"}} bx--pagination--inline{{/is}}">
     <span class="bx--pagination__text">
       <span data-displayed-page-number>1</span> of
       <span data-total-pages>4</span> pages</span>
@@ -28,7 +33,23 @@
       </svg>
     </button>
     <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-    <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
+    {{#isnt version "v2"}}
+      <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
+    {{else}}
+      <div class="bx--select bx--select--inline">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
+          <option class="bx--select-option" value="1" selected>1</option>
+          <option class="bx--select-option" value="2">2</option>
+          <option class="bx--select-option" value="3">3</option>
+          <option class="bx--select-option" value="4">4</option>
+          <option class="bx--select-option" value="5">5</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    {{/isnt}}
     <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
       <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
         <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>