diff --git a/CHANGELOG.md b/CHANGELOG.md index fd9b51c5a4..5f7e85762c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,10 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Add classes to action items in the summary list component + + ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) + - Prevent horizontal jump as scrollbars appear As content vertical height grows (e.g. autocomplete results appear), browsers diff --git a/src/components/summary-list/summary-list.yaml b/src/components/summary-list/summary-list.yaml index bb5a7f5592..cb5a11cc6d 100644 --- a/src/components/summary-list/summary-list.yaml +++ b/src/components/summary-list/summary-list.yaml @@ -27,15 +27,15 @@ params: type: string required: false description: Classes to add to the value wrapper + - name: actions.classes + type: string + required: false + description: Classes to add to the actions wrapper - name: actions.items type: array required: false description: Array of action item objects params: - - name: classes - type: string - required: false - description: Classes to add to the actions wrapper - name: href type: string required: true @@ -52,6 +52,10 @@ params: type: string required: false description: 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. + - name: classes + type: string + required: false + description: Classes to add to the action item - name: classes type: string required: false diff --git a/src/components/summary-list/template.njk b/src/components/summary-list/template.njk index 6398802337..7562bb7d8a 100644 --- a/src/components/summary-list/template.njk +++ b/src/components/summary-list/template.njk @@ -1,5 +1,5 @@ {%- macro _actionLink(action) %} - + {{ action.html | safe if action.html else action.text }} {%- if action.visuallyHiddenText -%} {{ action.visuallyHiddenText }} diff --git a/src/components/summary-list/template.test.js b/src/components/summary-list/template.test.js index 7b4f78e6a1..1d3b1d9df8 100644 --- a/src/components/summary-list/template.test.js +++ b/src/components/summary-list/template.test.js @@ -293,6 +293,27 @@ describe('Data list', () => { expect($secondAction.text().trim()).toBe('Second action') }) + it('renders classes on actions', async () => { + const $ = render('summary-list', { + rows: [ + { + actions: { + items: [ + { + text: 'Edit', + classes: 'govuk-link--no-visited-state' + } + ] + } + } + ] + }) + + const $component = $('.govuk-summary-list') + const $action = $component.find('.govuk-summary-list__actions > a') + + expect($action.hasClass('govuk-link--no-visited-state')).toBeTruthy() + }) }) }) })