diff --git a/src/govuk/components/summary-list/_index.scss b/src/govuk/components/summary-list/_index.scss index 3e9b60ac5d..bea68c8180 100644 --- a/src/govuk/components/summary-list/_index.scss +++ b/src/govuk/components/summary-list/_index.scss @@ -6,15 +6,17 @@ display: table; width: 100%; table-layout: fixed; // Required to allow us to wrap words that overflow. + border-collapse: collapse; } margin: 0; // Reset default user agent styles @include govuk-responsive-margin(6, "bottom"); } .govuk-summary-list__row { + border-bottom: 1px solid $govuk-border-colour; + @include govuk-media-query($until: tablet) { margin-bottom: govuk-spacing(3); - border-bottom: 1px solid $govuk-border-colour; } @include govuk-media-query($from: tablet) { display: table-row; @@ -31,7 +33,6 @@ padding-top: govuk-spacing(2); padding-right: govuk-spacing(4); padding-bottom: govuk-spacing(2); - border-bottom: 1px solid $govuk-border-colour; } } @@ -109,37 +110,32 @@ // No border on entire summary list .govuk-summary-list--no-border { - @include govuk-media-query($until: tablet) { - .govuk-summary-list__row { - border: 0; - } + .govuk-summary-list__row { + border: 0; } - @include govuk-media-query($from: tablet) { - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - // Remove 1px border, add 1px height back on - padding-bottom: govuk-spacing(2) + 1px; - border: 0; - } + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + padding-bottom: govuk-spacing(2) + 1px; } } // No border on specific rows .govuk-summary-list__row--no-border { - @include govuk-media-query($until: tablet) { - border: 0; - } + border: 0; - @include govuk-media-query($from: tablet) { - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - // Remove 1px border, add 1px height back on - padding-bottom: govuk-spacing(2) + 1px; - border: 0; - } + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + padding-bottom: govuk-spacing(2) + 1px; } } + + // Provide an empty 'cell' for rows that don't have actions – otherwise the + // bottom border is not drawn for that part of the row in some browsers. + .govuk-summary-list__row--no-actions:after { + content: ""; + display: table-cell; + } } diff --git a/src/govuk/components/summary-list/template.njk b/src/govuk/components/summary-list/template.njk index 8434378922..e6ad25cf2e 100644 --- a/src/govuk/components/summary-list/template.njk +++ b/src/govuk/components/summary-list/template.njk @@ -16,7 +16,7 @@
{% for row in params.rows %} {% if row %} -
+
{{ row.key.html | safe if row.key.html else row.key.text }}
@@ -37,9 +37,6 @@ {% endif %} - {% elseif anyRowHasActions %} - {# Add dummy column to extend border #} - {% endif %}
{% endif %} diff --git a/src/govuk/components/summary-list/template.test.js b/src/govuk/components/summary-list/template.test.js index 8e1b69e4ee..ecb8aae7b8 100644 --- a/src/govuk/components/summary-list/template.test.js +++ b/src/govuk/components/summary-list/template.test.js @@ -217,19 +217,32 @@ describe('Summary list', () => { expect($action.length).toEqual(0) }) - it('adds dummy action columns when only some rows have actions', async () => { + describe('when only some rows have actions', () => { const $ = render('summary-list', examples['with some actions']) - const $component = $('.govuk-summary-list') - const $action = $component.find('.govuk-summary-list__actions') - // First action column contains link text - expect($action[0].tagName).toEqual('dd') - expect($($action[0]).text()).toContain('Edit') + it('does not add no-actions modifier class to rows with actions', () => { + // The first row has actions + const $firstRow = $component.find('.govuk-summary-list__row:first-child') + expect($firstRow.hasClass('govuk-summary-list__row--no-actions')).toBeFalsy() + }) - // Second action column is a dummy - expect($action[1].tagName).toEqual('span') - expect($($action[1]).text()).toEqual('') + it('adds no-actions modifier class to rows without actions', () => { + // The second row does not have actions + const $secondRow = $component.find('.govuk-summary-list__row:nth-child(2)') + expect($secondRow.hasClass('govuk-summary-list__row--no-actions')).toBeTruthy() + }) + }) + + describe('when no rows have actions', () => { + const $ = render('summary-list', examples['default']) + const $component = $('.govuk-summary-list') + + it('does not add no-actions modifier class to any of the rows', () => { + // The first row has actions + const $rows = $component.find('.govuk-summary-list__row') + expect($rows.hasClass('govuk-summary-list__row--no-actions')).toBeFalsy() + }) }) }) })