From 99a714bc6802d322ee63c9e8b1424217d123f2d7 Mon Sep 17 00:00:00 2001 From: AdamChrimes Date: Mon, 25 Feb 2019 10:26:30 +0000 Subject: [PATCH] [refs #384] Create summary list component from GOV.UK Summary list component styles, markup, macro and documentation taken from the GOV.UK Frontend. --- CHANGELOG.md | 10 + app/components/summary-list/index.njk | 93 +++++ .../summary-list/without-actions.njk | 57 +++ .../summary-list/without-border.njk | 58 +++ app/pages/examples.njk | 3 + package.json | 2 +- packages/components/summary-list/README.md | 358 ++++++++++++++++++ .../summary-list/_summary-list.scss | 124 ++++++ packages/components/summary-list/macro.njk | 3 + packages/components/summary-list/template.njk | 35 ++ packages/nhsuk.scss | 1 + tests/backstop/backstop.js | 12 + 12 files changed, 755 insertions(+), 1 deletion(-) create mode 100644 app/components/summary-list/index.njk create mode 100644 app/components/summary-list/without-actions.njk create mode 100644 app/components/summary-list/without-border.njk create mode 100644 packages/components/summary-list/README.md create mode 100644 packages/components/summary-list/_summary-list.scss create mode 100644 packages/components/summary-list/macro.njk create mode 100644 packages/components/summary-list/template.njk diff --git a/CHANGELOG.md b/CHANGELOG.md index 0dc2da45b..c534a0f53 100644 --- 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 new file mode 100644 index 000000000..e0299e866 --- /dev/null +++ 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 %} + +
+
+ +
+
+ + {{ 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
London
SE23 6FH" + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "contact information" + } + ] + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

07700 900457

sarah.phillips@example.com

' + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "contact details" + } + ] + } + } + ] + }) }} + +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/summary-list/without-actions.njk b/app/components/summary-list/without-actions.njk new file mode 100644 index 000000000..be18b4de7 --- /dev/null +++ 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 %} + +
+
+ +
+
+ + {{ 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
London
SE23 6FH" + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

07700 900457

sarah.phillips@example.com

' + } + } + ] + }) }} + +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/summary-list/without-border.njk b/app/components/summary-list/without-border.njk new file mode 100644 index 000000000..fccf34f5d --- /dev/null +++ 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 %} + +
+
+ +
+
+ + {{ 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
London
SE23 6FH" + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

07700 900457

sarah.phillips@example.com

' + } + } + ] + }) }} + +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 015422c71..60e479541 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -98,6 +98,9 @@
  • Select
  • Select with hint text and error message
  • Skip link
    • +
  • Summary list
    • +
  • Summary list without actions
    • +
  • Summary list without border
  • Table
  • Table as a panel
  • Textarea
    • diff --git a/package.json b/package.json index f34b3b609..389816fa5 100644 --- 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", diff --git a/packages/components/summary-list/README.md b/packages/components/summary-list/README.md new file mode 100644 index 000000000..a375c67e0 --- /dev/null +++ b/packages/components/summary-list/README.md @@ -0,0 +1,358 @@ +# Summary list + +## Quick start examples + +### Summary list + +[Preview the summary list component](https://nhsuk.github.io/nhsuk-frontend/components/summary-list/index.html) + +### HTML markup + +```html +
    +
    +
    + Name +
    +
    + Sarah Philips +
    +
    + + Change + name + +
    +
    +
    +
    + Date of birth +
    +
    + 5 January 1978 +
    +
    + + Change + date of birth + +
    +
    +
    +
    + Contact information +
    +
    + 72 Guild Street +
    London +
    SE23 6FH +
    +
    + + Change + contact information + +
    +
    +
    +
    + Contact details +
    +
    +

    07700 900457

    +

    sarah.phillips@example.com

    +
    +
    + + Change + contact details + +
    +
    +
    +``` + +### Nunjucks macro + +``` +{% from "components/summary-list/macro.njk" import summaryList %} + +{{ 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
    London
    SE23 6FH" + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "contact information" + } + ] + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

    07700 900457

    sarah.phillips@example.com

    ' + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "contact details" + } + ] + } + } + ] +}) }} +``` + +### Summary list without actions + +[Preview the summary list without actions component](https://nhsuk.github.io/nhsuk-frontend/components/summary-list/without-actions.html) + +### HTML markup + +```html +
    +
    +
    + Name +
    +
    + Sarah Philips +
    +
    +
    +
    + Date of birth +
    +
    + 5 January 1978 +
    +
    +
    +
    + Contact information +
    +
    + 72 Guild Street +
    London +
    SE23 6FH +
    +
    +
    +
    + Contact details +
    +
    +

    07700 900457

    +

    sarah.phillips@example.com

    +
    +
    +
    +``` + +### Nunjucks macro + +``` +{% from "components/summary-list/macro.njk" import summaryList %} + +{{ 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
    London
    SE23 6FH" + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

    07700 900457

    sarah.phillips@example.com

    ' + } + } + ] +}) }} +``` + +### Summary list without border + +[Preview the summary list without border component](https://nhsuk.github.io/nhsuk-frontend/components/summary-list/without-border.html) + +### HTML markup + +```html +
    +
    +
    + Name +
    +
    + Sarah Philips +
    +
    +
    +
    + Date of birth +
    +
    + 5 January 1978 +
    +
    +
    +
    + Contact information +
    +
    + 72 Guild Street +
    London +
    SE23 6FH +
    +
    +
    +
    + Contact details +
    +
    +

    07700 900457

    +

    sarah.phillips@example.com

    +
    +
    +
    +``` + +### Nunjucks macro + +``` +{% from "components/summary-list/macro.njk" import summaryList %} + +{{ 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
    London
    SE23 6FH" + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

    07700 900457

    sarah.phillips@example.com

    ' + } + } + ] +}) }} +``` +### Nunjucks arguments + +The summary list Nunjucks macro takes the following arguments: + +| Name | Type | Required | Description | +| -----------------|----------|-----------|-------------| +| classes | string | No | Classes to add to the container. | +| attributes | object | No | HTML attributes (for example data attributes) to add to the container. | +| rows | array | Yes | Array of row item objects. | +| rows.key.text | string | Yes | If html is set, this is not required. Text to use within the each key. If html is provided, the text argument will be ignored. | +| rows.key.html | string | Yes | | +| rows.key.classes | string | No | Classes to add to the key wrapper. | +| rows.value.text | string | Yes | If html is set, this is not required. Text to use within the each value. If html is provided, the text argument will be ignored. | +| rows.value.html | string | Yes | If text is set, this is not required. HTML to use within the each value. If html is provided, the text argument will be ignored. | +| rows.key.classes | string | No | Classes to add to the value wrapper. | +| rows.actions.items | array | No | Array of action item objects. | +| action.items.classes | string | No | Classes to add to the actions wrapper. | +| action.items.href | string | Yes | The value of the link href attribute for an action item. | +| action.items.text | string | Yes | If html is set, this is not required. Text to use within each action item. If html is provided, the text argument will be ignored. | +| action.items.html | string | Yes | If text is set, this is not required. HTML to use within the each action item. If html is provided, the text argument will be ignored. | +| action.items.visuallyHiddenText | string | Yes | Actions rely on context from the surrounding content so may require additional accessible text, text supplied to this option is appended to the end, use html for more complicated scenarios. | + +If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). + +## Thanks to the Government Digital Service (GDS) + +This component and documentation has been taken from [GOV.UK Frontend - Summary list component](https://github.com/alphagov/govuk-frontend/tree/master/package/components/summary-list) with a few minor adaptations. diff --git a/packages/components/summary-list/_summary-list.scss b/packages/components/summary-list/_summary-list.scss new file mode 100644 index 000000000..5bfdc2132 --- /dev/null +++ b/packages/components/summary-list/_summary-list.scss @@ -0,0 +1,124 @@ +/* ========================================================================== + COMPONENTS/ #SUMMARY-LIST + ========================================================================== */ + +/** + * Original code taken from GDS (Government Digital Service) + * https://github.com/alphagov/govuk-frontend + * + * 1. Reset default user agent styles + * 2. Automatic wrapping for unbreakable text (e.g. URLs) + * 3. .. WebKit/Blink only + * 4. .. Standards + * 5. In older browsers such as IE8, :last-child is not available, + * so only show the border divider where it is available. + */ + +.nhsuk-summary-list { + @include nhsuk-font($size: 19); + + @include mq($from: tablet) { + display: table; + width: 100%; + } + + margin: 0; /* [1] */ + @include nhsuk-responsive-margin(6, 'bottom'); +} + +.nhsuk-summary-list__row { + @include mq($until: tablet) { + border-bottom: 1px solid $nhsuk-border-color; + margin-bottom: nhsuk-spacing(3); + } + @include mq($from: tablet) { + display: table-row; + } +} + +.nhsuk-summary-list__key, +.nhsuk-summary-list__value, +.nhsuk-summary-list__actions { + margin: 0; /* 1 */ + + @include mq($from: tablet) { + border-bottom: 1px solid $nhsuk-border-color; + display: table-cell; + padding-bottom: nhsuk-spacing(2); + padding-right: nhsuk-spacing(4); + padding-top: nhsuk-spacing(2); + } +} + +.nhsuk-summary-list__actions { + margin-bottom: nhsuk-spacing(3); + + @include mq($from: tablet) { + padding-right: 0; + text-align: right; + } +} + +.nhsuk-summary-list__key, +.nhsuk-summary-list__value { + // sass-lint:disable no-duplicate-properties + /* 2 */ + word-break: break-word; /* 3 */ + word-break: break-all; /* 4 */ +} + +.nhsuk-summary-list__key { + @include nhsuk-typography-weight-bold; + + margin-bottom: nhsuk-spacing(1); + + @include mq($from: tablet) { + width: 30%; + } +} + +.nhsuk-summary-list__value { + @include mq($until: tablet) { + margin-bottom: nhsuk-spacing(3); + } +} + +.nhsuk-summary-list__value > p { + margin-bottom: nhsuk-spacing(2); +} + +.nhsuk-summary-list__value > :last-child { + margin-bottom: 0; +} + +.nhsuk-summary-list__actions-list { + margin: 0; /* 1 */ + padding: 0; /* 1 */ + width: 100%; +} + +.nhsuk-summary-list__actions-list-item { + display: inline; + margin-right: nhsuk-spacing(2); + padding-right: nhsuk-spacing(2); +} + +/* 5 */ +.nhsuk-summary-list__actions-list-item:not(:last-child) { + border-right: 1px solid $nhsuk-border-color; +} + +.nhsuk-summary-list__actions-list-item:last-child { + border: 0; + margin-right: 0; + padding-right: 0; +} + +.nhsuk-summary-list--no-border { + .nhsuk-summary-list__key, + .nhsuk-summary-list__value, + .nhsuk-summary-list__actions, + .nhsuk-summary-list__row { + border: 0; + } +} diff --git a/packages/components/summary-list/macro.njk b/packages/components/summary-list/macro.njk new file mode 100644 index 000000000..624142c3d --- /dev/null +++ b/packages/components/summary-list/macro.njk @@ -0,0 +1,3 @@ +{% macro summaryList(params) %} + {%- include './template.njk' -%} +{% endmacro %} diff --git a/packages/components/summary-list/template.njk b/packages/components/summary-list/template.njk new file mode 100644 index 000000000..68598172c --- /dev/null +++ b/packages/components/summary-list/template.njk @@ -0,0 +1,35 @@ +{%- macro _link(action) %} + + {{ action.html | safe if action.html else action.text }} + {%- if action.visuallyHiddenText -%} + {{ action.visuallyHiddenText }} + {% endif -%} + +{% endmacro -%} +
    + {% for row in params.rows %} +
    +
    + {{ row.key.html | safe if row.key.html else row.key.text }} +
    +
    + {{ row.value.html | indent(8) | trim | safe if row.value.html else row.value.text }} +
    + {% if row.actions.items %} +
    + {% if row.actions.items.length == 1 %} + {{ _link(row.actions.items[0]) | indent(12) | trim }} + {% else %} +
      + {% for action in row.actions.items %} +
    • + {{ _link(action) | indent(18) | trim }} +
      • + {% endfor %} +
    + {% endif %} +
    + {% endif %} +
    + {% endfor %} +
    diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss index 08994d52b..d75b0e184 100644 --- a/packages/nhsuk.scss +++ b/packages/nhsuk.scss @@ -34,6 +34,7 @@ @import 'components/review-date/review-date'; @import 'components/select/select'; @import 'components/skip-link/skip-link'; +@import 'components/summary-list/summary-list'; @import 'components/tables/tables'; @import 'components/textarea/textarea'; @import 'components/warning-callout/warning-callout'; diff --git a/tests/backstop/backstop.js b/tests/backstop/backstop.js index d9a74ab7e..9cb62ac69 100644 --- a/tests/backstop/backstop.js +++ b/tests/backstop/backstop.js @@ -372,6 +372,18 @@ module.exports = { "label": "Select with hint text and error message", "url": `${TEST_HOST}/components/select/hint-error.html` }, + { + "label": "Summary list", + "url": `${TEST_HOST}/components/summary-list/index.html` + }, + { + "label": "Summary list without actions", + "url": `${TEST_HOST}/components/summary-list/without-actions.html` + }, + { + "label": "Summary list without border", + "url": `${TEST_HOST}/components/summary-list/without-border.html` + }, { "label": "Table", "url": `${TEST_HOST}/components/tables/index.html`