From d7b6c19452e22c5260fbd8f8917b2fed40cec456 Mon Sep 17 00:00:00 2001
From: Ben Meyrick <bameyrick@gmail.com>
Date: Wed, 8 May 2019 10:27:33 +0100
Subject: [PATCH] 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    |  46 +++--
 src/components/breadcrumb/_macro.njk          |   2 +-
 src/components/button/_button.scss            |  16 +-
 src/components/button/_macro.njk              |   2 +-
 src/components/summary/_macro-options.md      |  11 +-
 src/components/summary/_macro.njk             |  16 +-
 src/components/summary/_summary.scss          |  72 ++++++-
 src/components/summary/examples/hub/index.njk | 162 +++++++++++++++
 .../examples/summary-household/index.njk      |   3 +-
 src/components/summary/index.njk              |   5 +
 src/img/icons/icons--external-link-hover.svg  |   1 -
 src/img/icons/icons--external-link.svg        |  10 +-
 src/img/icons/icons--lock.svg                 |  11 +-
 src/img/icons/icons--logo.svg                 |   1 -
 .../hub-and-spoke/examples/hub/index.njk      | 192 ++++++++++++++++++
 src/patterns/hub-and-spoke/index.njk          |  11 +
 src/scss/base/_typography.scss                |   4 +-
 src/scss/helpers/_mixins.scss                 | 101 +++------
 src/scss/patternlib.scss                      |   5 +-
 src/styles/typography/icons/_icons.scss       |  42 +---
 .../spec/print-button/print-button.spec.js    |   3 +-
 21 files changed, 556 insertions(+), 160 deletions(-)
 create mode 100644 src/components/summary/examples/hub/index.njk
 delete mode 100644 src/img/icons/icons--external-link-hover.svg
 delete mode 100644 src/img/icons/icons--logo.svg
 create mode 100644 src/patterns/hub-and-spoke/examples/hub/index.njk
 create mode 100644 src/patterns/hub-and-spoke/index.njk

diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
index 9402fc5d11..877f7cc70e 100644
--- a/src/components/breadcrumb/_breadcrumb.scss
+++ b/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;
+  }
 }
diff --git a/src/components/breadcrumb/_macro.njk b/src/components/breadcrumb/_macro.njk
index bf3bb686dc..fb34b541ff 100644
--- a/src/components/breadcrumb/_macro.njk
+++ b/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 %}
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index beff6482dc..88f8ed5985 100644
--- a/src/components/button/_button.scss
+++ b/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,
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index cb4c761715..1ab43d8be4 100644
--- a/src/components/button/_macro.njk
+++ b/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 %}
diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md
index cfa39209c9..49d11fe3a8 100644
--- a/src/components/summary/_macro-options.md
+++ b/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
 
diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
index 64bd9166c7..6c9de3c66c 100644
--- a/src/components/summary/_macro.njk
+++ b/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 %}
diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss
index 3faad43070..15c572b291 100644
--- a/src/components/summary/_summary.scss
+++ b/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,6 +91,25 @@ $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,
@@ -87,15 +117,43 @@ $summary-col-spacing: 1rem;
     &__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;
+      }
+    }
   }
 }
diff --git a/src/components/summary/examples/hub/index.njk b/src/components/summary/examples/hub/index.njk
new file mode 100644
index 0000000000..0f2af35519
--- /dev/null
+++ b/src/components/summary/examples/hub/index.njk
@@ -0,0 +1,162 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{ onsSummary({
+    "hub": true,
+    "rows": [
+        {
+            "title": "People who live here",
+            "rowItems": [
+                {
+                    "icon": "check-green",
+                    "values": [
+                        {
+                            "text": "Completed"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "View answers",
+                            "ariaLabel": "View answers for People who live here",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Accomodation",
+            "rowItems": [
+                {
+                    "icon": "check-green",
+                    "values": [
+                        {
+                            "text": "Completed"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "View answers",
+                            "ariaLabel": "View answers for Accomodation",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Mary Smith (You)",
+            "rowItems": [
+                {
+                    "icon": "check-green",
+                    "values": [
+                        {
+                            "text": "Completed"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "View answers",
+                            "ariaLabel": "View answers for Mary Smith",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "John Smith",
+            "rowItems": [
+                {
+                    "values": [
+                        {
+                            "text": "Partially completed"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "Continue with section",
+                            "ariaLabel": "Continue with John Smith's section",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Billy Smith",
+            "rowItems": [
+                {
+                    "values": [
+                        {
+                            "text": "Not started"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "Start section",
+                            "ariaLabel": "Start Billy Smith's section",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Sally Smith",
+            "rowItems": [
+                {
+                    "values": [
+                        {
+                            "text": "Not started"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "Start section",
+                            "ariaLabel": "Start Sally Smith's section",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Wilhelmina Susannah Clementine-Smith (Visitor)",
+            "rowItems": [
+                {
+                    "values": [
+                        {
+                            "text": "Not started"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "Start section",
+                            "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Vera Jones (Visitor)",
+            "rowItems": [
+                {
+                    "values": [
+                        {
+                            "text": "Not started"
+                        }
+                    ],
+                    "actions": [
+                        {
+                            "text": "Start section",
+                            "ariaLabel": "Start Vera Jones's section",
+                            "url": "#"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}) }}
diff --git a/src/components/summary/examples/summary-household/index.njk b/src/components/summary/examples/summary-household/index.njk
index 0c08ddc8e1..d3e109b96c 100644
--- a/src/components/summary/examples/summary-household/index.njk
+++ b/src/components/summary/examples/summary-household/index.njk
@@ -3,7 +3,6 @@
 {{ onsSummary({
     "rows": [
         {
-            "icon": "person",
             "title": "Joe Bloggs (You)",
             "rowItems": [
                 {
@@ -39,7 +38,7 @@
             ]
         },
         {
-            "title": "Susan Gill",
+            "title": "Wilhelmina Susannah Clementine-Smith",
             "rowItems": [
                 {
                     "icon": "person",
diff --git a/src/components/summary/index.njk b/src/components/summary/index.njk
index 522e81f584..6d2c969014 100644
--- a/src/components/summary/index.njk
+++ b/src/components/summary/index.njk
@@ -87,6 +87,11 @@ A summary of multiple answers to a single question.
     patternlibExample({"path": "components/summary/examples/summary-household/index.njk"})
 }}
 
+#### Hub
+{{
+    patternlibExample({"path": "components/summary/examples/hub/index.njk"})
+}}
+
 ## Research on this component
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% call onsPanel() %}
diff --git a/src/img/icons/icons--external-link-hover.svg b/src/img/icons/icons--external-link-hover.svg
deleted file mode 100644
index be1e8d1077..0000000000
--- a/src/img/icons/icons--external-link-hover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v20h20v-5h-2.4v2.6H2.5v-15H5V0H0zm10 0l3.8 3.8L7.5 10l2.5 2.5 6.3-6.2 3.8 3.7V0H10z" fill="#033E58" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/src/img/icons/icons--external-link.svg b/src/img/icons/icons--external-link.svg
index bc1907df65..7daf4abcd7 100644
--- a/src/img/icons/icons--external-link.svg
+++ b/src/img/icons/icons--external-link.svg
@@ -1 +1,9 @@
-<svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v20h20v-5h-2.4v2.6H2.5v-15H5V0H0zm10 0l3.8 3.8L7.5 10l2.5 2.5 6.3-6.2 3.8 3.7V0H10z" fill="#4A4A4A" fill-rule="nonzero"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4A4A4A;}
+</style>
+<path class="st0" d="M0,0v18h17.9v-4.5h-2.1v2.3H2.2V2.3h2.2V0H0z M9,0l3.4,3.4L6.7,9L9,11.2l5.6-5.6L18,9V0H9z"/>
+</svg>
diff --git a/src/img/icons/icons--lock.svg b/src/img/icons/icons--lock.svg
index 578d954ee2..5c98a10b19 100644
--- a/src/img/icons/icons--lock.svg
+++ b/src/img/icons/icons--lock.svg
@@ -1 +1,10 @@
-<svg viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 0a5.6 5.6 0 0 0-5.7 5.6v2.8H.5v11.3h16.9V8.4h-2.9V5.6C14.5 2.6 12 0 9 0zm0 2.8a2.8 2.8 0 0 1 2.7 2.8v2.8H6.1V5.6a2.8 2.8 0 0 1 2.8-2.8z" fill="#4A4A4A" fill-rule="nonzero"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4A4A4A;}
+</style>
+<path class="st0" d="M9,0C6.2,0,3.9,2.2,3.8,5c0,0,0,0.1,0,0.1v2.6H1.3V18h15.4V7.7h-2.6V5.1C14.1,2.4,11.8,0,9,0z M9,2.6
+	c1.4,0,2.5,1.2,2.5,2.6v2.6H6.4V5.1C6.4,3.7,7.5,2.6,9,2.6L9,2.6z"/>
+</svg>
diff --git a/src/img/icons/icons--logo.svg b/src/img/icons/icons--logo.svg
deleted file mode 100644
index 7aed7577ff..0000000000
--- a/src/img/icons/icons--logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50.1%" y2="50.1%" id="a"><stop stop-color="#783D8F" offset="0%"/><stop stop-color="#682782" offset="100%"/></linearGradient><linearGradient x1="38.2%" y1="-30.3%" x2="51.4%" y2="58.5%" id="b"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity=".8" offset="100%"/></linearGradient><linearGradient x1="34.2%" y1="7.2%" x2="68.2%" y2="63.6%" id="c"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity=".8" offset="100%"/></linearGradient><linearGradient x1="63.5%" y1="68.7%" x2="35.3%" y2="29.5%" id="d"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity=".8" offset="100%"/></linearGradient><linearGradient x1="82.9%" y1="50.1%" x2="1.4%" y2="50.1%" id="e"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="50%" y1="185.4%" x2="50%" y2="280.3%" id="f"><stop stop-color="#1E1E1C" offset="0%"/><stop stop-color="#1E1E1C" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="-.9%" y1="49.9%" x2="99.7%" y2="49.9%" id="g"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#FFF" stop-opacity=".8" offset="100%"/></linearGradient><linearGradient x1="-302.6%" y1="50%" x2="-206.7%" y2="50%" id="h"><stop stop-color="#1E1E1C" offset="0%"/><stop stop-color="#1E1E1C" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M12.3 16.1v2.6h-6V6.3h6v2.5h6.2V6.3L12.3 0h-6L.2 6.3v12.4L6.4 25h5.9l6.2-6.2V16h-6.2z" fill="url(#a)" opacity=".6"/><path fill="url(#b)" d="M12.3 16.1h6.2v2.5h-6.2z"/><path fill="url(#c)" d="M.2 18.7l6.2 6.1V6.3H.2z"/><path fill="url(#d)" d="M18.5 18.6l-6.2 6.2H6.4v-6.2z"/><path fill="url(#e)" d="M12.3 8.8h6.2V6.2L12.3.1z"/><path d="M15.6 29.5l1 .1c0 .7-.3 1.2-.7 1.7-1 1-2.2 1-3.3-.2l-.2-.2c-1.3-1.4-1-2.6-.2-3.3a2 2 0 0 1 2-.5l-.2 1c-1.2-.2-2 .7-.6 2 1.2 1.3 2.1.6 2.2-.6zm4.3-2.3c-2.4-2.5-1.9-2-2.7-2.5l.7-.8.4.3c-.1-.4 0-.8.3-1.1.5-.5 1.1-.6 1.7 0l1.8 1.8-.8.9c-1.9-1.8-2-2-2.3-1.8-.2.2-.1.5 0 .7l1.7 1.6-.8.9zm2.1-3.7c.5-.1 1.4-.6 1-1-.3-.3-1.2 1-2.1.1-1-1 .2-2.4 1.5-2.5v.9c-.7 0-1 .5-.8.7.4.4 1.3-1 2.2 0 1 1-.5 2.4-1.5 2.6l-.3-.8zm2.8-6.4l2.6 2.6-.7.7-.3-.2c0 .4-.1.7-.4 1-.6.6-1.2.5-1.8 0l-1.7-1.8.8-.9c1.9 1.9 2 2.1 2.3 1.8.2-.2.2-.4 0-.6L23.9 18l.9-.9zm2.5 1.2c.5-.2 1.4-.6 1-1-.4-.3-1.3 1-2.2.1-1-1 .3-2.5 1.6-2.5v.8c-.8.2-1.1.6-.9.8.4.4 1.4-1 2.3 0 1 1-.6 2.4-1.5 2.6l-.3-.8zm-9 8.3L16.9 28c.7.6 1.4-.1 1.5-.9l.9.3c0 .6-1.6 3-3.4 1.2-.7-.7-1-1.8-.1-2.7 1-.9 2-.4 2.5.7zm-1.8.9l.6-.7c-.2-.3-.4-.5-.7-.3-.3.3-.2.7 0 1z" fill="#FFF" fill-rule="nonzero"/><path d="M12.3 6.3H.2a21 21 0 0 0 12.1 0z" fill="url(#f)" opacity=".5"/><path fill="url(#g)" d="M12.3.1H6.4L.2 6.3h12.1z"/><path d="M7 15.9c0-2.7-.3-5.5-.6-7.6v16.5c.4-3.2.8-6.5.7-9z" fill="url(#h)" opacity=".5"/><path d="M2.7 18.5l-.4-.7c0-.2 0-.3.3-.3s.4.1.7.3L4.6 19h.6v-2.7h-.8v1.4l-.8-.8c-.4-.3-.7-.5-1.1-.5-.6 0-1 .4-1 1.2 0 .5.2 1 .6 1.4l.6-.5zm-1.3-3.8c0 .8.6 1.4 1.9 1.4 1.3 0 1.9-.5 1.9-1.4 0-.9-.5-1.4-2-1.4-1.2 0-1.8.5-1.8 1.4zm3 0c0 .2-.2.4-1 .4-1 0-1.2-.2-1.2-.4 0-.3.3-.4 1.1-.4 1 0 1.2.1 1.2.4zm0-2h.8v-2.2h-.7v.6H2.2l-.7-.1v.8l.7 1.2.6-.4-.3-.6h2v.6zM2.4 10V8.8c.8.8 1.8.9 2.4.9h.4v-1h-.3c-.5 0-1.8 0-2.7-1.2h-.6v2.6h.8z" fill="#6D2D86" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/patterns/hub-and-spoke/examples/hub/index.njk b/src/patterns/hub-and-spoke/examples/hub/index.njk
new file mode 100644
index 0000000000..9d66d362c8
--- /dev/null
+++ b/src/patterns/hub-and-spoke/examples/hub/index.njk
@@ -0,0 +1,192 @@
+---
+layout: none
+---
+{% extends "styles/page-template/_template.njk" %}
+
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/summary/_macro.njk" import onsSummary %}
+{% from "components/button/_macro.njk" import onsButton %}
+
+{% set page = {
+    "title": "Hub Example",
+    "signoutButton": {
+        "text": "Save and complete later"
+    }
+} %}
+
+{% block main %}
+    <h1 class="u-fs-l u-mt-m">Choose another section to complete</h1>
+
+    {% call onsPanel() %}
+        <p><strong>You must complete all sections in order to submit this survey</strong></p>
+    {% endcall %}
+
+    {{ onsSummary({
+        "hub": true,
+        "classes": "u-mt-m",
+        "rows": [
+            {
+                "title": "People who live here",
+                "rowItems": [
+                    {
+                        "icon": "check-green",
+                        "values": [
+                            {
+                                "text": "Completed"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "View answers",
+                                "ariaLabel": "View answers for People who live here",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Accomodation",
+                "rowItems": [
+                    {
+                        "icon": "check-green",
+                        "values": [
+                            {
+                                "text": "Completed"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "View answers",
+                                "ariaLabel": "View answers for Accomodation",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Mary Smith (You)",
+                "rowItems": [
+                    {
+                        "icon": "check-green",
+                        "values": [
+                            {
+                                "text": "Completed"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "View answers",
+                                "ariaLabel": "View answers for Mary Smith",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "John Smith",
+                "rowItems": [
+                    {
+                        "values": [
+                            {
+                                "text": "Partially completed"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "Continue with section",
+                                "ariaLabel": "Continue with John Smith's section",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Billy Smith",
+                "rowItems": [
+                    {
+                        "values": [
+                            {
+                                "text": "Not started"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "Start section",
+                                "ariaLabel": "Start Billy Smith's section",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Sally Smith",
+                "rowItems": [
+                    {
+                        "values": [
+                            {
+                                "text": "Not started"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "Start section",
+                                "ariaLabel": "Start Sally Smith's section",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Wilhelmina Susannah Clementine-Smith (Visitor)",
+                "rowItems": [
+                    {
+                        "values": [
+                            {
+                                "text": "Not started"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "Start section",
+                                "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Vera Jones (Visitor)",
+                "rowItems": [
+                    {
+                        "values": [
+                            {
+                                "text": "Not started"
+                            }
+                        ],
+                        "actions": [
+                            {
+                                "text": "Start section",
+                                "ariaLabel": "Start Vera Jones's section",
+                                "url": "#"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }) }}
+
+    {{
+        onsButton({
+            "text": 'Continue',
+            "classes": 'u-mb-m u-mt-l'
+        })
+    }}
+{% endblock %}
diff --git a/src/patterns/hub-and-spoke/index.njk b/src/patterns/hub-and-spoke/index.njk
new file mode 100644
index 0000000000..df3cb602b9
--- /dev/null
+++ b/src/patterns/hub-and-spoke/index.njk
@@ -0,0 +1,11 @@
+---
+group: Pages
+title: Hub and Spoke
+---
+{% from "views/partials/example/_macro.njk" import patternlibExample %}
+
+Documentation required
+
+{{
+    patternlibExample({"path": "patterns/hub-and-spoke/examples/hub/index.njk"})
+}}
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index 34b582c079..95dedf209b 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -1,5 +1,7 @@
+@import '../objects/typescale';
+
 html {
-  font-size: 18px;
+  font-size: $base;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }
diff --git a/src/scss/helpers/_mixins.scss b/src/scss/helpers/_mixins.scss
index 12d816220f..b495286f83 100644
--- a/src/scss/helpers/_mixins.scss
+++ b/src/scss/helpers/_mixins.scss
@@ -72,94 +72,39 @@
 @mixin clearfix() {
   // no-op
 }
+
 // =============================================================================
-// Create icon
+// Icons
 // =============================================================================
 
-@mixin icon($name) {
-  background-image: url('#{$static}/img/icons/icons--#{$name}.svg');
-  background-repeat: no-repeat;
-}
+@mixin icon($name, $height: 1rem, $width: $height) {
+  display: inline-block;
 
-@mixin create-icon(
-  $icon-name,
-  $class-name: null,
-  $hover-icon-name: null,
-  $width: 1.3rem,
-  $top: 2px,
-  $position: left,
-  $btn: false,
-  $transform: null
-) {
-  $name: $icon-name;
-
-  @if ($class-name != null) {
-    $name: $class-name;
+  width: $width;
+  height: $height;
+
+  background: {
+    image: url(#{$static}/img/icons/icons--#{$name}.svg);
+    repeat: no-repeat;
+    size: $width $height;
   }
+}
 
-  .icon--#{$name} {
-    position: relative;
-    @if ($position == 'right') {
-      @if ($btn == true) {
-        padding-right: $width * 1.8;
-      } @else {
-        padding-right: $width + 0.4rem;
-      }
-    } @else {
-      @if ($btn == true) {
-        padding-left: $width * 1.8;
-      } @else {
-        padding-left: $width + 0.4rem;
-      }
-    }
+@mixin create-icon($name, $class-name: $name, $height: 1rem, $width: $height, $margin: 0.5rem, $position: 'before', $transform: none) {
+  .icon--#{$class-name}:#{$position} {
+    @include icon($name, $width, $height);
 
-    &::before,
-    &::after {
-      content: '';
-      display: inline-block;
-      height: $width;
-      width: $width;
-      position: absolute;
-      top: $top;
-      left: 0;
-      background-size: $width $width;
-      background-repeat: no-repeat;
-      transition: opacity 200ms ease-in-out, transform 300ms ease-in-out;
-      background-position: 0 0;
-
-      @if ($btn == true) {
-        top: 0.7rem;
-        left: $width - 0.5rem;
-      }
-
-      @if ($position == 'right') {
-        left: auto;
-        right: $width - 0.7rem;
-      }
-
-      @if ($transform) {
-        transform: $transform;
-      }
-    }
+    content: '';
+    vertical-align: middle;
 
-    &::before {
-      @include icon($icon-name);
+    @if $position == 'before' {
+      margin: 0 $margin 0 0;
+    } @else {
+      margin: 0 0 0 $margin;
     }
 
-    @if ($hover-icon-name) {
-      &::after {
-        @include icon($hover-icon-name);
-        opacity: 0;
-      }
-      &:hover,
-      &:focus {
-        &::before {
-          opacity: 0;
-        }
-        &::after {
-          opacity: 1;
-        }
-      }
+    @if $transform {
+      transform: $transform;
     }
   }
 }
diff --git a/src/scss/patternlib.scss b/src/scss/patternlib.scss
index 704e858922..3253c2c0f6 100644
--- a/src/scss/patternlib.scss
+++ b/src/scss/patternlib.scss
@@ -11,8 +11,8 @@
   height: 100vh;
 
   &--example {
-    padding: 1rem 2rem;
     display: block;
+    padding: 1rem 1.5rem;
     height: auto;
   }
 
@@ -82,6 +82,7 @@
 
     table {
       margin: 0;
+      width: 100%;
       border-spacing: 0;
       border-collapse: collapse;
     }
@@ -92,6 +93,8 @@
 
       border-bottom: 2px solid $color-grey-3;
       background: $color-white;
+
+      text-align: left;
     }
 
     th,
diff --git a/src/styles/typography/icons/_icons.scss b/src/styles/typography/icons/_icons.scss
index 7544fc1f7d..4199477100 100644
--- a/src/styles/typography/icons/_icons.scss
+++ b/src/styles/typography/icons/_icons.scss
@@ -1,35 +1,11 @@
 // The @include create-icon @mixin is located in the 'partials/helpers/_mixins.scss' file
-@include create-icon($icon-name: check); // Example for the pattern library
-@include create-icon($icon-name: print, $position: right, $btn: true); // Example for the pattern library
-@include create-icon($icon-name: person, $width: 1rem, $top: 1px); // Example for the pattern library
 
-@include create-icon(
-  $icon-name: external-link,
-  $hover-icon-name: external-link-hover,
-  $width: 0.9rem,
-  $top: 3px,
-  $position: right
-); // Used in eq-runner to handle external link
-@include create-icon(
-  $class-name: collapsible-simple,
-  $icon-name: chevron-right-blue,
-  $hover-icon-name: chevron-right-blue-hover,
-  $width: 1.1rem,
-  $top: 1px
-); // Used for a single/simple accordion
-@include create-icon(
-  $class-name: collapsible,
-  $icon-name: chevron-right-blue,
-  $hover-icon-name: chevron-right-blue-hover,
-  $width: 1.2rem,
-  $top: 33%
-); // Used with the accordion component
-@include create-icon(
-  $class-name: breadcrumb,
-  $icon-name: chevron-right,
-  $width: 0.65rem,
-  $position: right,
-  $top: 50%,
-  $transform: translateY(-50%)
-); // Used with the breadcrumb component
-@include create-icon($icon-name: lock, $top: 1px); // Used with text stating data portection
+@include create-icon($name: check);
+
+@include create-icon($name: check-green, $margin: 1rem);
+
+@include create-icon($name: person, $margin: 1rem, $transform: translateY(-0.15rem));
+
+@include create-icon($name: external-link, $position: 'after');
+
+@include create-icon($name: lock, $height: 1.3rem, $transform: translateY(-0.15rem));
diff --git a/src/tests/spec/print-button/print-button.spec.js b/src/tests/spec/print-button/print-button.spec.js
index ed8add9a80..7c6c0d31ba 100644
--- a/src/tests/spec/print-button/print-button.spec.js
+++ b/src/tests/spec/print-button/print-button.spec.js
@@ -32,8 +32,7 @@ describe('Function: Print Button ', function() {
 
   describe('Before the button is initialised', () => {
     it('Button should have relevant classes', () => {
-      expect(buttonElement.classList.contains('btn--secondary')).to.be.true;
-      expect(buttonElement.classList.contains('icon--print')).to.be.true;
+      expect(buttonElement.classList.contains('btn--print')).to.be.true;
       expect(buttonElement.classList.contains('print__hidden')).to.be.true;
       expect(buttonElement.classList.contains('u-d-no')).to.be.true;
       expect(buttonElement.classList.contains('js-print-btn')).to.be.true;