Update summary list to simplify actions

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:

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 {

src/components/summary-list/template.njk

@@ -1,26 +1,33 @@
+{%- macro _actionLink(action) %}
+  <a class="govuk-link" href="{{ action.href }}">
+    {{ action.html | safe if action.html else action.text }}
+    {%- if action.visuallyHiddenText -%}
+      <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
+    {% endif -%}
+  </a>
+{% endmacro -%}
 <dl class="govuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% for row in params.rows %}
     <div class="govuk-summary-list__row">
       <dt class="govuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
         {{ row.key.html | safe if row.key.html else row.key.text }}
       </dt>
       <dd class="govuk-summary-list__value {%- if row.value.classes %} {{ row.value.classes }}{% endif %}">
-        {{ 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 }}
       </dd>
       {% if row.actions.items %}
         <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
-          <ul class="govuk-summary-list__actions-list">
-            {% for action in row.actions.items %}
-              <li class="govuk-summary-list__actions-list-item">
-                <a class="govuk-link" href="{{ action.href }}">
-                  {{ action.html | safe if action.html else action.text }}
-                  {%- if action.visuallyHiddenText -%}
-                    <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
-                  {%- endif %}
-                </a>
-              </li>
-            {% endfor %}
-          </ul>
+          {% if row.actions.items.length == 1 %}
+            {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
+          {% else %}
+            <ul class="govuk-summary-list__actions-list">
+              {% for action in row.actions.items %}
+                <li class="govuk-summary-list__actions-list-item">
+                  {{ _actionLink(action) | indent(18) | trim }}
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
         </dd>
       {% endif %}
     </div>

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<span class="visually-hidden"> name</span>')
       })
@@ -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')
+      })
     })
   })
 })