diff --git a/src/govuk/components/summary-list/_index.scss b/src/govuk/components/summary-list/_index.scss index 3e9b60ac5d..6604056eee 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,25 @@ // 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; } } } diff --git a/src/govuk/components/summary-list/template.njk b/src/govuk/components/summary-list/template.njk index 8434378922..8319330002 100644 --- a/src/govuk/components/summary-list/template.njk +++ b/src/govuk/components/summary-list/template.njk @@ -7,12 +7,6 @@ {% endmacro -%} -{# Determine if we need 2 or 3 columns #} -{% set anyRowHasActions = false %} -{% for row in params.rows %} - {% set anyRowHasActions = true if row.actions.items | length else anyRowHasActions %} -{% endfor -%} -
{% for row in params.rows %} {% if row %} @@ -37,9 +31,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..8343ef2b48 100644 --- a/src/govuk/components/summary-list/template.test.js +++ b/src/govuk/components/summary-list/template.test.js @@ -216,21 +216,6 @@ describe('Summary list', () => { expect($action.length).toEqual(0) }) - - it('adds dummy action columns when only some rows have actions', async () => { - 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') - - // Second action column is a dummy - expect($action[1].tagName).toEqual('span') - expect($($action[1]).text()).toEqual('') - }) }) }) })