[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 · 330c7ea · 330c7ea
1 parent bc23d52
commit 330c7ea
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 have access to the new component when you update. Alternatively if you are importing each of the individual components separately you will need to import the component with `@import 'node_modules/nhsuk-frontend/packages/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",