Add summary list where only some rows with actions

Co-authored-by: EoinShaughnessy <[email protected]>

src/components/summary-list/index.md.njk

@@ -44,6 +44,10 @@ To give more context, add visually hidden text to the links. This means a screen
 
 {{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
+If you have a mix of rows with and without actions, add the `govuk-summary-list__row--no-actions` modifier class to the rows without actions.
+
+{{ example({group: "components", item: "summary-list", example: "mixed-actions", html: true, nunjucks: true, open: false}) }}
+
 ### Removing the borders
 
 The summary list includes some separating borders to help users read each row and its action.

src/components/summary-list/mixed-actions/index.njk

@@ -0,0 +1,70 @@
+---
+title: Summary list with a mix of rows with and without actions
+layout: layout-example.njk
+---
+
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
+  rows: [
+    {
+      key: {
+        text: "Name"
+      },
+      value: {
+        text: "Sarah Philips"
+      }
+    },
+    {
+      key: {
+        text: "Date of birth"
+      },
+      value: {
+        text: "5 January 1978"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "date of birth"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Address"
+      },
+      value: {
+        html: "72 Guild Street<br>London<br>SE23 6FH"
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "address"
+          }
+        ]
+      }
+    },
+    {
+      key: {
+        text: "Contact details"
+      },
+      value: {
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">[email protected]</p>'
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "contact details"
+          }
+        ]
+      }
+    }
+  ]
+}) }}