Man 278 pjs card footer indicators (#332)

* Add indicator element

* Add card footer

* Add aria-label

* Lint

* Radius round utility

app/helpers/elements_helper.rb

@@ -75,6 +75,15 @@ def sage_elements
         react: "no",
         a11y: "todo"
       },
+      {
+        title: "indicator",
+        description: "A simple dot-styled position indicator bar. This is currently not intended to be used as navigation but only a visual indicator.",
+        scss: "doing",
+        docs: "doing",
+        rails: "todo",
+        react: "todo",
+        a11y: "doing"
+      },
       {
         title: "label",
         description: "Labels show concise metadata or indicate status in a compact format.",

app/views/examples/elements/indicator/_markup.html.erb

@@ -0,0 +1,9 @@
+<ul class="sage-indicator-list" aria-label="<%= "Showing #{label} #{current_item} of #{num_items}"%>">
+  <% for i in 1...(num_items + 1) %>
+    <li class="sage-indicator<%= " sage-indicator--current" if current_item == i %>">
+      <span class="visually-hidden">
+        <%= "#{label} #{i}" %>
+      </span>
+    </li>
+  <% end %>
+</ul>

app/views/examples/elements/indicator/_preview.html.erb

@@ -0,0 +1,6 @@
+<h4>Default</h4>
+<%= render "examples/elements/indicator/markup",
+  label: "Page",
+  num_items: 5,
+  current_item: 2
+%>

app/views/examples/elements/indicator/_props.html.erb

@@ -0,0 +1,18 @@
+<tr>
+  <td>label</td>
+  <td>The label to prepend in front of the number for the indicator in visually-hidden text.</td>
+  <td>String</td>
+  <td></td>
+</tr>
+<tr>
+  <td>num_items</td>
+  <td>The total number of items to display.</td>
+  <td>Number</td>
+  <td></td>
+</tr>
+<tr>
+  <td>current_item</td>
+  <td>The item that is "selected" in the indicator list.</td>
+  <td>Number</td>
+  <td></td>
+</tr>

app/views/examples/objects/card/_preview.html.erb

@@ -135,4 +135,26 @@
       img_alt: ""
     %>
   </div>
+  <div class="sage-col--md-8">
+    <div class="sage-card sage-card--spaced">
+      <%= image_pack_tag("docs/card/card-placeholder-sm.png", class: "sage-card__img", alt: "") %>
+      <h2 class="sage-card__title t-sage-heading-5">Card w/ Rich Text and Footer</h2>
+      <div class="sage-card__body sage-type">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ipsum, congue a efficitur sed, <a href="#">luctus at purus</a>. Vivamus scelerisque pharetra elementum.</p>
+        <ul>
+          <li>Diam in auctor sit quam laoreet imperdiet aliquam. Habitant nunc lacus semper lacus, nec a, sit enim.</li>
+          <li>Diam in auctor sit quam laoreet imperdiet aliquam. Habitant nunc lacus semper lacus, nec a, sit enim.</li>
+        </ul>
+      </div>
+      <div class="sage-card__footer">
+        <a href="#" class="sage-btn sage-btn--tertiary">Previous</a>
+        <%= render "examples/elements/indicator/markup",
+          label: "Page",
+          num_items: 5,
+          current_item: 2
+        %>
+        <a href="#" class="sage-btn sage-btn--primary">Next</a>
+      </div>
+    </div>
+  </div>
 </div>

app/views/examples/objects/pagination/_markup.html.erb

@@ -1,23 +1,23 @@
 <nav class="sage-pagination" aria-label="pagination">
   <span class="sage-pagination__count"><strong><%= total_count %></strong> Records</span>
   <ul class="sage-pagination__pages">
-  <% pagination_items.each do |item| %>
-    <li class="sage-pagination__item">
-      <%- if item[:is_link] -%>
-      <a href="<%= item[:link_url] %>" class="sage-pagination__page<%= item[:is_disabled] ? " sage-pagination__page--disabled" : "" %><%= item[:is_current] ? " sage-pagination__page--current" : "" %>"<% if item[:is_disabled] %> aria-disabled="true"<% end %><% if item[:is_current] %> aria-current="page"<% end %>>
-      <% if item[:is_prev] %>
-      Back
-      <% elsif item[:is_next] %>
-      Next <span class="visually-hidden">Page</span>
-      <% else %>
-        <span class="visually-hidden">Page</span> <%= item[:page_number] %>
-      <% end %>
-      </a>
+    <% pagination_items.each do |item| %>
+      <li class="sage-pagination__item">
+        <%- if item[:is_link] -%>
+          <a href="<%= item[:link_url] %>" class="sage-pagination__page<%= item[:is_disabled] ? " sage-pagination__page--disabled" : "" %><%= item[:is_current] ? " sage-pagination__page--current" : "" %>"<% if item[:is_disabled] %> aria-disabled="true"<% end %><% if item[:is_current] %> aria-current="page"<% end %>>
+            <% if item[:is_prev] %>
+              Back
+            <% elsif item[:is_next] %>
+              Next <span class="visually-hidden">Page</span>
+            <% else %>
+              <span class="visually-hidden">Page</span> <%= item[:page_number] %>
+            <% end %>
+          </a>
+        <% end %>
+        <%- if item[:is_gap] -%>
+          <span class="sage-pagination__gap">&hellip;</span>
+        <% end %>
+      </li>
     <% end %>
-    <%- if item[:is_gap] -%>
-      <span class="sage-pagination__gap">&hellip;</span>
-    <% end %>
-    </li>
-  <% end %>
   </ul>
 </nav>

lib/sage-frontend/stylesheets/system/core/_typography.scss

@@ -198,6 +198,7 @@ body {
     @extend %t-sage-heading-6;
   }
 
+  li:not([class]),
   p:not([class]) {
     @extend %t-sage-body;
   }

lib/sage-frontend/stylesheets/system/index.scss

@@ -52,6 +52,7 @@
 @import "patterns/elements/form_input";
 @import "patterns/elements/form_select";
 @import "patterns/elements/form_textarea";
+@import "patterns/elements/indicator";
 @import "patterns/elements/label";
 @import "patterns/elements/loader";
 @import "patterns/elements/menu_button";

lib/sage-frontend/stylesheets/system/patterns/elements/_indicator.scss

@@ -0,0 +1,27 @@
+
+$-indicator-size: rem(7px);
+
+.sage-indicator-list {
+  display: flex;
+  align-items: center;
+  padding-left: 0;
+}
+
+.sage-indicator {
+  overflow: hidden;
+  width: $-indicator-size;
+  height: $-indicator-size;
+  border-radius: sage-border(radius-round);
+
+  &:not(.sage-indicator--current) {
+    background-color: sage-color(grey, 300);
+  }
+
+  &:not(:last-child) {
+    margin-right: 8px;
+  }
+}
+
+.sage-indicator--current {
+  background-color: sage-color(grey, 500);
+}

lib/sage-frontend/stylesheets/system/patterns/objects/_card.scss

@@ -19,11 +19,30 @@
   .sage-card--spaced.sage-card--compact & {
     padding: 0 $sage-card-spacing;
   }
-  :last-child {
+  &:last-child {
     margin: 0;
   }
 }
 
+.sage-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: rem(24px);
+
+  > *:not(:last-child) {
+    margin-right: rem(16px);
+  }
+}
+
+.sage-card__footer--align-left {
+  justify-content: flex-start;
+}
+
+.sage-card__footer--align-right {
+  justify-content: flex-start;
+}
+
 .sage-card__title {
   margin: 0 0 rem(16px) 0;
   word-wrap: break-word;