From a4baf9f4e8308f341e3f9f48fdadfcef89e05a42 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 10 Dec 2021 16:12:45 +0000
Subject: [PATCH] Add summary list example with actions on some rows

Co-authored-by: EoinShaughnessy <72507742+EoinShaughnessy@users.noreply.github.com>
---
 src/components/summary-list/index.md.njk      |  4 ++
 .../summary-list/mixed-actions/index.njk      | 70 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 src/components/summary-list/mixed-actions/index.njk

diff --git a/src/components/summary-list/index.md.njk b/src/components/summary-list/index.md.njk
index fed17b4f44..6d80a1f288 100644
--- a/src/components/summary-list/index.md.njk
+++ b/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.
diff --git a/src/components/summary-list/mixed-actions/index.njk b/src/components/summary-list/mixed-actions/index.njk
new file mode 100644
index 0000000000..8a8ff669f4
--- /dev/null
+++ b/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">sarah.phillips@example.com</p>'
+      },
+      actions: {
+        items: [
+          {
+            href: "#",
+            text: "Change",
+            visuallyHiddenText: "contact details"
+          }
+        ]
+      }
+    }
+  ]
+}) }}