Update summary to handle being embeded within a question page (#360)

ONSdigital · May 9, 2019 · 8e08d3c · 8e08d3c
1 parent 1a46ed7
commit 8e08d3c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md
@@ -1,9 +1,10 @@
-| 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 |
+| 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                                                                                                                       |
+| withinQuestion | boolean           | false    | Whether the summary is being rendered within a question page. If true the first row will not have a top border, and the last item will not have a bottom border |
 
 ## SummaryRow
 

diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
@@ -1,5 +1,19 @@
 {% macro onsSummary(params) %}
-    <div class="summary{{ " " + params.classes if params.classes else "" }}{{ " summary--hub" if params.hub else "" }}">
+    {% set className = "summary" %}
+
+    {% if params.classes %}
+         {% set className = className + " " + params.classes %}
+    {% endif %}
+
+    {% if params.hub %}
+        {% set className = className + " summary--hub" %}
+    {% endif %}
+
+    {% if params.withinQuestion %}
+        {% set className = className + " summary--within-question" %}
+    {% endif %}
+
+    <div class="{{ className }}">
         {% if params.title %}
             <h2 class="u-fs-m">{{ params.title }}</h2>
         {% endif %}

diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss
@@ -118,6 +118,18 @@ $hub-row-spacing: 1.3rem;
     }
   }
 
+  &--within-question & {
+    &__item {
+      &:first-child {
+        border-top: 0;
+      }
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
   // Breakpoints
   @include mq(xs, s, none, '<') {
     &__item-title,

diff --git a/src/components/summary/examples/summary-household/index.njk b/src/components/summary/examples/summary-household/index.njk
@@ -1,6 +1,7 @@
 {% from "components/summary/_macro.njk" import onsSummary %}
 
 {{ onsSummary({
+    "withinQuestion": true,
     "rows": [
         {
             "title": "Joe Bloggs (You)",