pagination component added, ref mozilla/sumo#130

lincolnloop · Jan 27, 2020 · 8c5f5c2 · 8c5f5c2
1 parent 1c24588
commit 8c5f5c2
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 4 deletions.
diff --git a/kitsune/sumo/static/sumo/scss/base/_utilities.scss b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
@@ -48,6 +48,14 @@
   display: none !important;
 }
 
+.sr-only {
+  position: absolute;
+  left: -1000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .m-0 {
   margin: 0;
 }

diff --git a/kitsune/sumo/static/sumo/scss/components/_index.scss b/kitsune/sumo/static/sumo/scss/components/_index.scss
@@ -4,6 +4,7 @@
 @forward 'icon-links';
 @forward 'social-links';
 @forward 'sidebar-nav';
+@forward 'pagination';
 @forward 'card';
 @forward 'card-grid';
 @forward 'inbox';

diff --git a/kitsune/sumo/static/sumo/scss/components/_pagination.scss b/kitsune/sumo/static/sumo/scss/components/_pagination.scss
@@ -0,0 +1,62 @@
+@use '../config' as c;
+@use '../protocol' as p;
+
+// Pagination
+//
+// This is the pagination component.
+//
+// Markup: ../../../../../../styleguide/styleguide-examples/pagination.njk
+//
+// Weight: 5
+//
+// Style guide: pagination
+
+.pagination {
+  display: flex;
+  align-items: center;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--global-radius);
+    color: var(--color-text);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+      color: var(--color-heading);
+      background-color: var(--color-shade-bg);
+    }
+  }
+
+  li {
+    margin: 0 4px;
+
+    &.selected a {
+      background-color: var(--color-link);
+      color: var(--color-inverse);
+    }
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &--wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 12px 0;
+
+    p {
+      margin-right: 16px;
+      white-space: nowrap;
+    }
+  }
+
+}
diff --git a/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss b/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss
@@ -47,6 +47,10 @@
 .sidebar-subheading {
   @include c.text-body-md;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
   @media #{p.$mq-md} {
     @include c.text-body-lg;
     margin: 72px 0 p.$spacing-lg;

diff --git a/kitsune/sumo/static/sumo/tpl/search-results-list.html b/kitsune/sumo/static/sumo/tpl/search-results-list.html
@@ -59,11 +59,16 @@ <h3 class="text-display-xxs"><a class="title" href="{{ doc.url }}">{{ doc.docume
 {% endif %}
 
 {% if pagination.num_pages > 1 %}
-  <ol class="pagination cf">
+  <ol class="pagination">
   {% if pagination.has_previous %}
     <li class="prev">
       <a class="btn-page btn-page-prev" href="#" data-instant-search="link" data-href="{{ pagination.url|urlparams({page: pagination.number - 1}) }}">
-        {{ _('Previous') }}
+        <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                <polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
+            </g>
+        </svg>
+        <span class="sr-only">{{ _('Previous') }}</span>
       </a>
     </li>
   {% endif %}
@@ -86,8 +91,13 @@ <h3 class="text-display-xxs"><a class="title" href="{{ doc.url }}">{{ doc.docume
   {% endif %}
   {% if pagination.has_next %}
     <li class="next">
-      <a class="btn-page btn-page-next" href="#" data-instant-search="link" data-href="{{ pagination.url|urlparams({page: pagination.number + 1}) }}">
-        {{ _('Next') }}
+      <a href="#" data-instant-search="link" data-href="{{ pagination.url|urlparams({page: pagination.number + 1}) }}">
+        <span class="sr-only">{{ _('Next') }}</span>
+        <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                <polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
+            </g>
+        </svg>
       </a>
     </li>
   {% endif %}

diff --git a/styleguide/styleguide-examples/pagination.njk b/styleguide/styleguide-examples/pagination.njk
@@ -0,0 +1,29 @@
+<div class="pagination--wrap">
+<p>Results 1 of 305</p>
+<ol class="pagination">
+  <li><a href="#" href="#page=1">
+    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+            <polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
+        </g>
+    </svg>
+    <span class="sr-only">Previous</span>
+  </a></li>
+  <li><a href="#" href="#page=2">2</a></li>
+  <li class="selected"><a href="#" href="#page=3">3</a></li>
+  <li><a href="#" href="#page=4">4</a></li>
+  <li><a href="#" href="#page=5">5</a></li>
+  <li><a href="#" href="#page=6">6</a></li>
+  <li><a href="#" href="#page=7">7</a></li>
+  <li><a href="#" href="#page=8">8</a></li>
+  <li class="next"><a href="#" href="#page=2">
+    <span class="sr-only">Next</span>
+    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+            <polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
+        </g>
+    </svg>
+  </a></li>
+</ol>
+
+</div>