From 0f543a1fcea6de64a52f70ab38a4b576dfe54511 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Mon, 14 Aug 2017 14:10:51 -0300
Subject: [PATCH] fix(pagination): Change classes from .hidden-* to .d-* (#840)

* fix(pagination): classes .hidden-* => .d-*

* fix(pagination-nav): Classes .hidden-* => .d-*
---
 lib/components/pagination-nav.vue | 18 ++++++++----------
 lib/components/pagination.vue     | 16 ++++++++--------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/lib/components/pagination-nav.vue b/lib/components/pagination-nav.vue
index a66e9bcf35b..52e27a714dd 100644
--- a/lib/components/pagination-nav.vue
+++ b/lib/components/pagination-nav.vue
@@ -42,7 +42,7 @@
         </li>
 
         <!-- First Ellipsis Bookend -->
-        <li v-if="showFirstDots" class="page-item disabled hidden-xs-down" role="separator">
+        <li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
             <span class="page-link" v-html="ellipsisText"></span>
         </li>
 
@@ -65,7 +65,7 @@
         </li>
 
         <!-- Last Ellipsis Bookend -->
-        <li v-if="showLastDots" class="page-item disabled hidden-xs-down" role="separator">
+        <li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
             <span class="page-link" v-html="ellipsisText"></span>
         </li>
 
@@ -334,21 +334,21 @@ export default {
                 if (idx === 0) {
                     // Keep leftmost 3 buttons visible
                     for (let i = 3; i < pages.length; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 } else if (idx === pages.length - 1) {
                     // Keep rightmost 3 buttons visible
                     for (let i = 0; i < pages.length - 3; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 } else {
                     // hide left button(s)
                     for (let i = 0; i < idx - 1; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                     // hide right button(s)
                     for (let i = pages.length - 1; i > idx + 1; i--) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 }
             }
@@ -396,20 +396,18 @@ export default {
             return pagenum === this.currentPage;
         },
         pageItemClasses(page) {
-            const active = this.isActive(page.number);
             return [
                 'page-item',
                 this.disabled ? 'disabled' : '',
-                active ? 'active' : '',
+                this.isActive(page.number) ? 'active' : '',
                 page.className
             ];
         },
         pageLinkClasses(page) {
-            const active = this.isActive(page.number);
             return [
                 'page-link',
                 this.disabled ? 'disabled' : '',
-                active ? 'active' : ''
+                this.isActive(page.number) ? 'active' : ''
             ];
         },
         getButtons() {
diff --git a/lib/components/pagination.vue b/lib/components/pagination.vue
index 2f12be6aa37..8a730ae5d0b 100755
--- a/lib/components/pagination.vue
+++ b/lib/components/pagination.vue
@@ -47,7 +47,7 @@
         </li>
 
         <!-- First Ellipsis Bookend -->
-        <li v-if="showFirstDots" class="page-item disabled hidden-xs-down" role="separator">
+        <li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
             <span class="page-link" v-html="ellipsisText"></span>
         </li>
 
@@ -71,7 +71,7 @@
         </li>
 
         <!-- Last Ellipsis Bookend -->
-        <li v-if="showLastDots" class="page-item disabled hidden-xs-down" role="separator">
+        <li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
             <span class="page-link" v-html="ellipsisText"></span>
         </li>
 
@@ -211,28 +211,28 @@ export default {
             // Generate list of page numbers
             const pages = makePageArray(startNum, numLinks);
 
-            // We limit to a total of 3 page buttons on small screens
-            // Ellipsis will also be hidden on small screens
+            // We limit to a total of 3 page buttons on xs screens
+            // Ellipsis will also be hidden on xs screens
             if (pages.length > 3) {
                 const idx = this.currentPage - startNum;
                 if (idx === 0) {
                     // Keep leftmost 3 buttons visible
                     for (let i = 3; i < pages.length; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 } else if (idx === pages.length - 1) {
                     // Keep rightmost 3 buttons visible
                     for (let i = 0; i < pages.length - 3; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 } else {
                     // hide left button(s)
                     for (let i = 0; i < idx - 1; i++) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                     // hide right button(s)
                     for (let i = pages.length - 1; i > idx + 1; i--) {
-                        pages[i].className = 'hidden-xs-down';
+                        pages[i].className = 'd-none d-sm-flex';
                     }
                 }
             }