[refs #384] Create summary list component from GOV.UK

Summary list component styles, markup, macro and documentation taken from the GOV.UK Frontend.
nhsuk · Feb 25, 2019 · 99a714b · 99a714b
1 parent bc23d52
commit 99a714b
Show file tree

Hide file tree

Showing 12 changed files with 755 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # NHS.UK frontend Changelog
 
+## 1.1.0 - TBC
+
+:new: **New features**
+
+- Summary list component - Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+
+  If you are importing all styles with `@import 'node_modules/nhsuk-frontend/packages/nhsuk';` you will automatically get the new component when you upgrade to version 1.0.0, otherwise you will need to import the component individually `@import 'components/summary-list/summary-list';`
+
+  ([Issue 384](https://github.com/nhsuk/nhsuk-frontend/issues/384))
+
 ## 1.0.1 - Feb 20, 2019
 
 :wrench: **Fixes**

diff --git a/app/components/summary-list/index.njk b/app/components/summary-list/index.njk
@@ -0,0 +1,93 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Summary list' %}
+{% from "components/summary-list/macro.njk" import summaryList %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+
+          {{ summaryList({
+            rows: [
+              {
+                key: {
+                  text: "Name"
+                },
+                value: {
+                  text: "Sarah Philips"
+                },
+                actions: {
+                  items: [
+                    {
+                      href: "#",
+                      text: "Change",
+                      visuallyHiddenText: "name"
+                    }
+                  ]
+                }
+              },
+              {
+                key: {
+                  text: "Date of birth"
+                },
+                value: {
+                  text: "5 January 1978"
+                },
+                actions: {
+                  items: [
+                    {
+                      href: "#",
+                      text: "Change",
+                      visuallyHiddenText: "date of birth"
+                    }
+                  ]
+                }
+              },
+              {
+                key: {
+                  text: "Contact information"
+                },
+                value: {
+                  html: "72 Guild Street<br>London<br>SE23 6FH"
+                },
+                actions: {
+                  items: [
+                    {
+                      href: "#",
+                      text: "Change",
+                      visuallyHiddenText: "contact information"
+                    }
+                  ]
+                }
+              },
+              {
+                key: {
+                  text: "Contact details"
+                },
+                value: {
+                  html: '<p>07700 900457</p><p>sarah.phillips@example.com</p>'
+                },
+                actions: {
+                  items: [
+                    {
+                      href: "#",
+                      text: "Change",
+                      visuallyHiddenText: "contact details"
+                    }
+                  ]
+                }
+              }
+            ]
+          }) }}
+
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/summary-list/without-actions.njk b/app/components/summary-list/without-actions.njk
@@ -0,0 +1,57 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Summary list without actions' %}
+{% from "components/summary-list/macro.njk" import summaryList %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+
+          {{ summaryList({
+            rows: [
+              {
+                key: {
+                  text: "Name"
+                },
+                value: {
+                  text: "Sarah Philips"
+                }
+              },
+              {
+                key: {
+                  text: "Date of birth"
+                },
+                value: {
+                  text: "5 January 1978"
+                }
+              },
+              {
+                key: {
+                  text: "Contact information"
+                },
+                value: {
+                  html: "72 Guild Street<br>London<br>SE23 6FH"
+                }
+              },
+              {
+                key: {
+                  text: "Contact details"
+                },
+                value: {
+                  html: '<p>07700 900457</p><p>sarah.phillips@example.com</p>'
+                }
+              }
+            ]
+          }) }}
+
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/summary-list/without-border.njk b/app/components/summary-list/without-border.njk
@@ -0,0 +1,58 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Summary list without border' %}
+{% from "components/summary-list/macro.njk" import summaryList %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+
+          {{ summaryList({
+            classes: 'nhsuk-summary-list--no-border',
+            rows: [
+              {
+                key: {
+                  text: "Name"
+                },
+                value: {
+                  text: "Sarah Philips"
+                }
+              },
+              {
+                key: {
+                  text: "Date of birth"
+                },
+                value: {
+                  text: "5 January 1978"
+                }
+              },
+              {
+                key: {
+                  text: "Contact information"
+                },
+                value: {
+                  html: "72 Guild Street<br>London<br>SE23 6FH"
+                }
+              },
+              {
+                key: {
+                  text: "Contact details"
+                },
+                value: {
+                  html: '<p>07700 900457</p><p>sarah.phillips@example.com</p>'
+                }
+              }
+            ]
+          }) }}
+
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -98,6 +98,9 @@
     <li><a href="../components/select/index.html">Select</a></li>
     <li><a href="../components/select/hint-error.html">Select with hint text and error message</a></li>
     <li><a href="../components/skip-link/index.html">Skip link</a></li>
+    <li><a href="../components/summary-list/index.html">Summary list</a></li>
+    <li><a href="../components/summary-list/without-actions.html">Summary list without actions</a></li>
+    <li><a href="../components/summary-list/without-border.html">Summary list without border</a></li>
     <li><a href="../components/tables/index.html">Table</a></li>
     <li><a href="../components/tables/tables-panel.html">Table as a panel</a></li>
     <li><a href="../components/textarea/index.html">Textarea</a></li>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",