From 42ebc8c3e2754773d4b68ccf7e1ecb0c8eafe047 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Fri, 18 May 2018 23:55:16 +0900
Subject: [PATCH] fix(pagination): bring v2 version back (#782)

---
 src/components/pagination/pagination-v2.dust  | 55 -------------------
 .../pagination/pagination.config.js           | 20 +++++++
 src/components/pagination/pagination.hbs      | 33 +++++++++--
 3 files changed, 47 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/pagination/pagination-v2.dust
 create mode 100644 src/components/pagination/pagination.config.js

diff --git a/src/components/pagination/pagination-v2.dust b/src/components/pagination/pagination-v2.dust
deleted file mode 100644
index d0262f909f44..000000000000
--- a/src/components/pagination/pagination-v2.dust
+++ /dev/null
@@ -1,55 +0,0 @@
-{>_layout/}
-
-{<content}
-  <div class="bx--pagination" data-pagination>
-    <div class="bx--pagination__left">
-      <span class="bx--pagination__text">Items per page:</span>
-      <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-items-per-page>
-          <option class="bx--select-option" value="10" selected>10</option>
-          <option class="bx--select-option" value="20">20</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">
-        <span>|&nbsp;</span>
-        <span data-displayed-item-range>1-10</span> of
-        <span data-total-items>40</span> items</span>
-    </div>
-    <div class="bx--pagination__right bx--pagination--inline">
-      <span class="bx--pagination__text">
-        <span data-displayed-page-number>1</span> of
-        <span data-total-pages>4</span> pages</span>
-      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-      <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>
-      <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>
-        </svg>
-      </button>
-    </div>
-  </div>
-{/content}
diff --git a/src/components/pagination/pagination.config.js b/src/components/pagination/pagination.config.js
new file mode 100644
index 000000000000..4ebc3dd720b3
--- /dev/null
+++ 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
index d42514694af4..5e69e4c09c61 100644
--- 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>