From c502a2afe95df5a8c5fd11f037bb70930a3aba76 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Mon, 14 Aug 2023 09:21:11 +0100
Subject: [PATCH] Add nested options description into table caption

---
 lib/get-macro-options/index.js | 2 ++
 views/partials/_example.njk    | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
index 455a751054..856373c67e 100644
--- a/lib/get-macro-options/index.js
+++ b/lib/get-macro-options/index.js
@@ -184,6 +184,7 @@ function getMacroOptions(componentName) {
       nestedOptions.map((option) => ({
         name: `Options for ${option.name}`,
         id: option.slug,
+        description: option.description,
         options: option.params
       }))
     )
@@ -191,6 +192,7 @@ function getMacroOptions(componentName) {
       additionalComponents.map((option) => ({
         name: `Options for ${option.name}`,
         id: option.slug,
+        description: option.description,
         options: getMacroOptionsJson(option.name)
           .map(addSlugs)
           .map(renderNameWithBreaks)
diff --git a/views/partials/_example.njk b/views/partials/_example.njk
index accc56f417..d1772536bd 100644
--- a/views/partials/_example.njk
+++ b/views/partials/_example.njk
@@ -94,7 +94,12 @@
           </p>
           {% for table in macroOptions %}
             <table class="govuk-table app-options__table" id="options-{{ exampleId }}--{{ table.id }}">
-              <caption class="govuk-table__caption govuk-heading-m {% if table.id == 'primary' %} govuk-visually-hidden{% endif %}">{{ table.name | safe }}</caption>
+              <caption class="govuk-table__caption{% if table.id == 'primary' %} govuk-visually-hidden{% endif %}">
+                <h3 class="govuk-heading-m">{{ table.name | safe }}</h3>
+                {% if table.description %}
+                <p class="govuk-body">{{ table.description | safe }}</p>
+                {% endif %}
+              </caption>
               <thead class="govuk-table__head">
                 <tr class="govuk-table__row">
                   <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>