Add classes to action items in the summary list component

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 #1233](https://github.com/alphagov/govuk-frontend/pull/1233))
+
 - Prevent horizontal jump as scrollbars appear
 
   As content vertical height grows (e.g. autocomplete results appear), browsers

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

src/components/summary-list/template.njk

@@ -1,5 +1,5 @@
 {%- macro _actionLink(action) %}
-  <a class="govuk-link" href="{{ action.href }}">
+  <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}">
     {{ action.html | safe if action.html else action.text }}
     {%- if action.visuallyHiddenText -%}
       <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>

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()
+      })
     })
   })
 })