From 9c011882d96b3d550a46c30ae28054975d44be84 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 14 Jan 2019 10:56:57 +0000 Subject: [PATCH 1/4] Add test for summary list actions with single item --- src/components/summary-list/template.test.js | 55 ++++++++++++++++++-- 1 file changed, 51 insertions(+), 4 deletions(-) diff --git a/src/components/summary-list/template.test.js b/src/components/summary-list/template.test.js index 7a8bb3f615..7b4f78e6a1 100644 --- a/src/components/summary-list/template.test.js +++ b/src/components/summary-list/template.test.js @@ -158,7 +158,7 @@ describe('Data list', () => { }) const $component = $('.govuk-summary-list') - const $actionLink = $component.find('.govuk-summary-list__actions-list-item a') + const $actionLink = $component.find('.govuk-summary-list__actions > a') expect($actionLink.attr('href')).toBe('https://www.gov.uk') }) @@ -178,7 +178,7 @@ describe('Data list', () => { }) const $component = $('.govuk-summary-list') - const $actionLink = $component.find('.govuk-summary-list__actions-list-item a') + const $actionLink = $component.find('.govuk-summary-list__actions > a') expect($actionLink.text()).toContain('Edit') }) @@ -198,7 +198,7 @@ describe('Data list', () => { }) const $component = $('.govuk-summary-list') - const $actionLink = $component.find('.govuk-summary-list__actions-list-item a') + const $actionLink = $component.find('.govuk-summary-list__actions > a') expect($actionLink.html()).toContain('Edit') }) @@ -222,7 +222,7 @@ describe('Data list', () => { }) const $component = $('.govuk-summary-list') - const $actionLink = $component.find('.govuk-summary-list__actions-list-item a') + const $actionLink = $component.find('.govuk-summary-list__actions > a') expect($actionLink.text()).toContain('Edit Custom Accessible Name') }) it('renders classes', async () => { @@ -246,6 +246,53 @@ describe('Data list', () => { expect($actionList.hasClass('app-custom-class')).toBeTruthy() }) + it('renders a single anchor with one action', async () => { + const $ = render('summary-list', { + rows: [ + { + actions: { + items: [ + { + href: '#', + text: 'First action' + } + ] + } + } + ] + }) + + const $component = $('.govuk-summary-list') + const $action = $component.find('.govuk-summary-list__actions > a') + + expect($action.html().trim()).toBe('First action') + }) + it('renders a list with mutliple actions', async () => { + const $ = render('summary-list', { + rows: [ + { + actions: { + items: [ + { + href: '#', + text: 'First action' + }, + { + href: '#', + text: 'Second action' + } + ] + } + } + ] + }) + + const $component = $('.govuk-summary-list') + const $actionList = $component.find('.govuk-summary-list__actions') + const $secondAction = $actionList.find('.govuk-summary-list__actions-list-item:last-child') + + expect($secondAction.text().trim()).toBe('Second action') + }) }) }) }) From bf8b1ecc29ec4a84930e74fd3c7d9512946945b7 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 14 Jan 2019 11:24:35 +0000 Subject: [PATCH 2/4] Conditionally render a list in actions Only render a list when there are more than one action. --- src/components/summary-list/template.njk | 33 ++++++++++++++---------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/components/summary-list/template.njk b/src/components/summary-list/template.njk index e6712c6034..6398802337 100644 --- a/src/components/summary-list/template.njk +++ b/src/components/summary-list/template.njk @@ -1,3 +1,11 @@ +{%- macro _actionLink(action) %} + + {{ action.html | safe if action.html else action.text }} + {%- if action.visuallyHiddenText -%} + {{ action.visuallyHiddenText }} + {% endif -%} + +{% endmacro -%}
{% for row in params.rows %}
@@ -5,22 +13,21 @@ {{ row.key.html | safe if row.key.html else row.key.text }}
- {{ row.value.html | safe if row.value.html else row.value.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 %} + {{ _actionLink(row.actions.items[0]) | indent(12) | trim }} + {% else %} +
    + {% for action in row.actions.items %} +
  • + {{ _actionLink(action) | indent(18) | trim }} +
    • + {% endfor %} +
+ {% endif %}
{% endif %}
From fc112ae9a4ec2ae72f3cedbd7c7dbc59c2eab724 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 14 Jan 2019 11:25:25 +0000 Subject: [PATCH 3/4] Move text alignment to actions wrapper Since links wont always be in a list, move the right alignment to the parent. --- src/components/summary-list/_summary-list.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss index f5c28cd6ee..9d206faa60 100644 --- a/src/components/summary-list/_summary-list.scss +++ b/src/components/summary-list/_summary-list.scss @@ -50,6 +50,7 @@ margin-bottom: govuk-spacing(3); @include govuk-media-query($from: tablet) { padding-right: 0; + text-align: right; } } @@ -80,10 +81,6 @@ width: 100%; margin: 0; // Reset default user agent styles padding: 0; // Reset default user agent styles - - @include govuk-media-query($from: tablet) { - text-align: right; - } } .govuk-summary-list__actions-list-item { From bac9d2a99fd1bca2e7ba049b871a853c9fe195b9 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 14 Jan 2019 12:01:27 +0000 Subject: [PATCH 4/4] Update CHANGELOG --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6c6ed1ac6..8625b780a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,12 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Update summary list to simplify actions + + Only output actions in a list when there's multiple actions. + + ([PR #1131](https://github.com/alphagov/govuk-frontend/pull/1131)) + ## 2.5.0 (Feature release) 🆕 New features: