Revert "Update hub design (#376)" (#388)

This reverts commit 419decf.
ONSdigital · May 23, 2019 · a98b662 · a98b662
1 parent 76d5695
commit a98b662
Show file tree

Hide file tree

Showing 11 changed files with 416 additions and 176 deletions.
diff --git a/src/components/hub/_hub.scss b/src/components/hub/_hub.scss
diff --git a/src/components/hub/_macro-options.md b/src/components/hub/_macro-options.md
diff --git a/src/components/hub/_macro.njk b/src/components/hub/_macro.njk
diff --git a/src/components/hub/examples/hub/index.njk b/src/components/hub/examples/hub/index.njk
diff --git 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
@@ -1,5 +1,15 @@
 {% macro onsSummary(params) %}
-    <div class="summary{% if params.classes %} {{ params.classes }}{% endif %}">
+    {% set className = "summary" %}
+
+    {% if params.classes %}
+         {% set className = className + " " + params.classes %}
+    {% endif %}
+
+    {% if params.hub %}
+        {% set className = className + " summary--hub" %}
+    {% endif %}
+
+    <div class="{{ className }}">
         {% if params.title %}
             <h2>{{ params.title }}</h2>
         {% endif %}
@@ -28,6 +38,11 @@
                                 {% endif %}
 
                                 {{ rowItem.title | default(row.title) }} {{ hasIcons }}
+
+                                {# Render section status for mobile if is hub #}
+                                {% if params.hub and rowItem.valueList %}
+                                    <span class="u-d-no@s u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
+                                {% endif %}
                             </td>
                             {% if rowItem.valueList %}
                                 <td

diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss
@@ -1,5 +1,6 @@
 $summary-row-spacing: 1rem;
 $summary-col-spacing: 1rem;
+$hub-row-spacing: 1.3rem;
 
 .summary {
   &__items {
@@ -56,10 +57,6 @@ $summary-col-spacing: 1rem;
     left: 0;
   }
 
-  &__values {
-    @extend .u-fs-r--b;
-  }
-
   &__actions {
     white-space: nowrap;
   }
@@ -112,13 +109,38 @@ $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) {
@@ -143,5 +165,13 @@ $summary-col-spacing: 1rem;
         width: 50%;
       }
     }
+
+    &--hub & {
+      &__item-title,
+      &__values,
+      &__actions {
+        padding-top: $hub-row-spacing;
+      }
+    }
   }
 }