266 hub and spoke (#350)

* Update summary to handle hub, and make icons simpler to positon

* Fix wrapping of summary row title when theres an icon

* Added hub example to summary page

* Hub tweaks for mobile and created example of entire hub page

src/components/breadcrumb/_breadcrumb.scss

@@ -1,28 +1,38 @@
+$breadcrumb-chevron-height: 0.65rem;
+
 .breadcrumb {
   display: flex;
   align-items: center;
   padding: 1rem 0;
-}
 
-.breadcrumb__items {
-  margin: 0;
-  padding: 0;
-}
+  &__items {
+    margin: 0;
+    padding: 0;
+  }
 
-.breadcrumb__item {
-  display: inline-block;
-  margin: 0 0.4rem 0 0;
-  white-space: nowrap; /* stop items from wrapping, break on chevron only */
+  &__item {
+    display: inline-block;
+    margin: 0;
+    white-space: nowrap; /* stop items from wrapping, break on chevron only */
 
-  @include mq(xs, s) {
-    margin-bottom: 0.5rem;
-  }
-}
+    &:not(:last-child):after {
+      @include icon('chevron-right', $breadcrumb-chevron-height, $breadcrumb-chevron-height);
 
-.breadcrumb__item--current {
-  color: $color-text-light;
-}
+      content: '';
+      margin: 0 0.4rem;
+      vertical-align: middle;
+    }
+
+    @include mq(xs, s) {
+      margin-bottom: 0.5rem;
+    }
 
-.breadcrumb__link {
-  text-decoration: none;
+    &--current {
+      color: $color-text-light;
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+  }
 }

src/components/breadcrumb/_macro.njk

@@ -2,7 +2,7 @@
   <nav class="breadcrumb" aria-label="{{params.ariaLabel}}">
     <ol class="breadcrumb__items">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
-            <li class="breadcrumb__item u-fs-s{{ ' icon--breadcrumb' if loop.index < loop.length }}{{ '  breadcrumb__item--current' if item.current }}">
+            <li class="breadcrumb__item u-fs-s{{ ' breadcrumb__item--current' if item.current }}">
                 {% if item.current %} 
                     {{ item.text }}
                 {% else %}

src/components/button/_button.scss

@@ -68,11 +68,23 @@
   padding: $input-padding 1rem;
 }
 
-.btn--secondary {
-  @include btn-override($bg: $color-button-secondary, $color: $color-black, $color-hover: $color-black, $darken-hover: 5%);
+.btn--secondary,
+.btn--print {
+  @include btn-override($bg: $color-button-secondary, $color: $color-links, $color-hover: $color-links-hover, $darken-hover: 5%);
   font-weight: normal;
 }
 
+.btn--print {
+  &:after {
+    @include icon('print-link');
+
+    content: '';
+
+    margin: 0 0 0 0.5rem;
+    vertical-align: middle;
+  }
+}
+
 .btn--ghost {
   @include btn-override(
     $bg: transparent,

src/components/button/_macro.njk

@@ -4,7 +4,7 @@
 
   <button
       type="{{ params.type if params.type else ('button' if params.print else 'submit') }}"
-      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--secondary icon--print print__hidden u-d-no js-print-btn{% endif %}"
+      class="btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} btn--disabled{% endif %}{% if params.print %} btn--print print__hidden u-d-no js-print-btn{% endif %}"
       {% if params.id %}id="{{ params.id }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       {% if params.name %}name="{{ params.name }}"{% endif %}

src/components/summary/_macro-options.md

@@ -1,8 +1,9 @@
-| Name    | Type              | Required | Description                             |
-| ------- | ----------------- | -------- | --------------------------------------- |
-| rows    | Array<SummaryRow> | true     | An array of rows to summarise           |
-| title   | string            | false    | The title for the summary block         |
-| classes | string            | false    | Classes to add to the summary component |
+| Name    | Type              | Required | Description                               |
+| ------- | ----------------- | -------- | ----------------------------------------- |
+| rows    | Array<SummaryRow> | true     | An array of rows to summarise             |
+| title   | string            | false    | The title for the summary block           |
+| classes | string            | false    | Classes to add to the summary component   |
+| hub     | boolean           | false    | Whether to render the summary in as a hub |
 
 ## SummaryRow
 

src/components/summary/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSummary(params) %}
-    <div class="summary{{ " " + params.classes if params.classes else "" }}">
+    <div class="summary{{ " " + params.classes if params.classes else "" }}{{ " summary--hub" if params.hub else "" }}">
         {% if params.title %}
             <h2 class="u-fs-m">{{ params.title }}</h2>
         {% endif %}
@@ -18,19 +18,25 @@
                     {% endif %}
 
                     {% for rowItem in row.rowItems %}
-                        <tr class="summary__row">
+                        <tr class="summary__row{{ " summary__row--has-values" if rowItem.values else "" }}">
                             <td 
                                 class="summary__item-title{{ " summary__item-title--has-icon" if rowItem.icon else "" }}"
                                 {% if rowItem.titleAttributes %}{% for attribute, value in (rowItem.titleAttributes.items() if rowItem.titleAttributes is mapping and rowItem.titleAttributes.items else rowItem.titleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                             >
                                 {% if rowItem.icon %}
-                                    <span class="summary__icon icon icon--{{ rowItem.icon }}"></span>
+                                    <span class="summary__icon icon--{{ rowItem.icon }}"></span>
                                 {% endif %}
+
                                 {{ rowItem.title | default(row.title) }} {{ hasIcons }}
+
+                                {# Render section status for mobile if is hub #}
+                                {% if params.hub and rowItem.values %}
+                                    <span class="u-d-no@s u-fs-r"> — {{ rowItem.values[0].text | safe }}</span>
+                                {% endif %}
                             </td>
                             {% if rowItem.values %}
                                 <td
-                                    class="summary__values u-fs-r--b"
+                                    class="summary__values"
                                     {% if rowItem.actions == null %} colspan="2"{% endif %}
                                     {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                 >
@@ -62,7 +68,7 @@
                                     {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
                                         {% if loop.index > 1 %}<span class="summary__spacer">|</span>{% endif %}
                                         <a
-                                            href="{{ rowItem.action.url }}"
+                                            href="{{ action.url }}"
                                             class="summary__button"
                                             {% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
                                             {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}

src/components/summary/_summary.scss

@@ -1,5 +1,6 @@
-$summary-row-spacing: 0.5rem;
+$summary-row-spacing: 1rem;
 $summary-col-spacing: 1rem;
+$hub-row-spacing: 1.3rem;
 
 .summary {
   &__items {
@@ -36,16 +37,26 @@ $summary-col-spacing: 1rem;
   &__item-title,
   &__values,
   &__actions {
-    padding: $summary-row-spacing 0;
+    padding: 0 0 $summary-row-spacing;
     vertical-align: top;
+  }
+
+  &__item-title {
+    padding-top: $summary-row-spacing;
 
-    &:not(:last-child) {
-      padding-right: $summary-col-spacing;
+    &--has-icon {
+      position: relative;
+      padding-left: 2rem;
     }
   }
 
   &__icon {
-    margin: 0 0.25rem 0 0;
+    position: absolute;
+    left: 0;
+  }
+
+  &__actions {
+    white-space: nowrap;
   }
 
   &__spacer {
@@ -80,22 +91,69 @@ $summary-col-spacing: 1rem;
     }
   }
 
+  // Modifiers
+  &--hub & {
+    &__actions {
+      padding: 0 0 $hub-row-spacing;
+    }
+
+    &__item-title {
+      @extend .u-fs-r--b;
+
+      padding-top: $hub-row-spacing;
+    }
+  }
+
+  &:not(&--hub) & {
+    &__values {
+      @extend .u-fs-r--b;
+    }
+  }
+
   // Breakpoints
   @include mq(xs, s, none, '<') {
     &__item-title,
     &__values,
     &__actions {
       display: block;
     }
+
+    &--hub & {
+      &__values {
+        display: none;
+      }
+    }
   }
 
   @include mq(s) {
-    &__values {
-      width: 50%;
+    &__item-title,
+    &__values,
+    &__actions {
+      padding-top: $summary-row-spacing;
+      vertical-align: top;
+
+      &:not(:last-child) {
+        padding-right: $summary-col-spacing;
+      }
     }
 
     &__actions {
       text-align: right;
     }
+
+    &__row--has-values & {
+      &__item-title,
+      &__values {
+        width: 50%;
+      }
+    }
+
+    &--hub & {
+      &__item-title,
+      &__values,
+      &__actions {
+        padding-top: $hub-row-spacing;
+      }
+    }
   }
 }