Merge branch 'jcm-pagination'

app/assets/stylesheets/sage/sage_system.css.scss

@@ -61,6 +61,7 @@
 @import "system/patterns/elements/overlay";
 
 // Objects
+@import "system/patterns/objects/pagination";
 @import "system/patterns/objects/page_heading";
 @import "system/patterns/objects/live_stream_video_grid";
 @import "system/patterns/objects/live_stream_footer";

app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss

@@ -0,0 +1,49 @@
+/* ==================================================
+  ** pagination
+  type: object
+
+================================================== */
+
+.sage-pagination {
+  display: flex;
+  margin-bottom: sage-spacing();
+}
+
+.sage-pagination__count {
+  @extend %t-sage-body;
+  padding-right: sage-spacing();
+}
+
+.sage-pagination__link {
+  @extend %t-sage-body-semi;
+  display: flex;
+  align-items: center;
+  color: sage-color(primary);
+  padding: 0 sage-spacing(xs);
+}
+
+.sage-pagination__link--disabled {
+  color: sage-color(grey, 400);
+  pointer-events: none;
+}
+
+.sage-pagination__icon {
+  display: inherit;  
+  padding: 0 sage-spacing(2xs);
+}
+
+.sage-pagination__pages {
+  display: flex;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.sage-pagination__page {
+  @extend %t-sage-body-semi;
+  color: sage-color(primary);
+  padding: 0 sage-spacing(2xs);
+}
+
+.sage-pagination__page--active {
+  color: sage-color(grey, 400);
+}

app/helpers/sage/objects_helper.rb

@@ -13,6 +13,19 @@ module ObjectsHelper
     def sage_objects
       [
         # Sage Generated Objects
+        {
+          title: "pagination",
+          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 
+          scss_design:  "done",
+          scss_dev:     "done",
+          scss_doc:     "todo",
+          rails_design: "done",
+          rails_dev:    "doing",
+          rails_doc:    "todo",
+          react_design: "done",
+          react_dev:    "todo",
+          react_doc:    "todo"
+        },
         {
           title: "page_heading",
           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 

app/views/sage/examples/objects/pagination/_preview.html.erb

@@ -0,0 +1,32 @@
+<nav class="sage-pagination" aria-label="Pagination">
+  <span class="sage-pagination__count">
+    <strong>32</strong> Records
+  </span>
+  <a class="sage-pagination__link" rel="prev" href="#"><i class="sage-pagination__icon sage-icon-caret-left"></i> Prev</a>
+  <ul class="sage-pagination__pages">
+    <li>
+      <a href="#" class="sage-pagination__page" aria-label="Go to Page 1">1</a>
+    </li>
+    <li>
+      <a href="#" class="sage-pagination__page" aria-label="Go to Page 2">2</a>
+    </li>
+    <li>
+      <a href="#" class="sage-pagination__page" aria-label="Go to Page 3">3</a>
+    </li>
+    <li>
+      <span class="sage-pagination__page sage-pagination__page--gap">...</span>
+    </li>
+    <li>
+      <a href="#" class="sage-pagination__page" aria-label="Go to Page 18">18</a>
+    </li>
+    <li>
+      <a href="#" class="sage-pagination__page" aria-label="Go to Page 19">19</a>
+    </li>
+    <li>
+      <span class="sage-pagination__page sage-pagination__page--active" aria-current="page">20</span>
+    </li>
+  </ul>
+  <a href="#" class="sage-pagination__link sage-pagination__link--disabled" aria-disabled="true">
+    Next <i class="sage-pagination__icon sage-icon-caret-right"></i>
+  </a>
+</nav>

app/views/sage/examples/objects/pagination/_props.html.erb

@@ -0,0 +1,6 @@
+<tr>
+  <td>Prop Name</td>
+  <td>The description of the property goes here.</td>
+  <td>String</td>
+  <td>Default</td>
+</tr>

app/views/sage/examples/objects/pagination/_rules_do.html.erb

@@ -0,0 +1,3 @@
+<ul>
+  <li>Rules for what you should do with this object go here.</li>
+</ul>

app/views/sage/examples/objects/pagination/_rules_dont.html.erb

@@ -0,0 +1,3 @@
+<ul>
+  <li>Rules for what you should not do with this object go here.</li>
+</ul>