Always show parent prefixes in macro options display names

alphagov · Sep 18, 2023 · 096ec9f · 096ec9f
1 parent ed4fc6b
commit 096ec9f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
@@ -39,10 +39,14 @@ function addSlugs(option, parent) {
 }
 
 function addParentPrefix(option, parent) {
+  if (option.type === 'array') {
+    option.name = `${option.name}[]`
+  }
+
   // Prefix nested option names with parent name to avoid duplicates
   // such as summary list row "items" versus card action "items"
   if ((!option.isComponent || option.params) && parent?.name) {
-    option.name = `${parent.name} ${option.name}`
+    option.name = `${parent.name}.<wbr>${option.name}`
   }
 
   if (option.params) {
@@ -211,25 +215,18 @@ function getMacroOptions(componentName) {
     }
   ]
     .concat(
-      nestedOptions.map(([option]) => {
-        const names = option.name.split(' ')
-
-        // Wrap option name with `<code>` (excluding parents)
-        names[names.length - 1] = `<code>${names.at(-1)}</code>`
-
-        return {
-          ...option,
+      nestedOptions.map(([option]) => ({
+        ...option,
 
-          // Append "objects" to the table caption for arrays of nested objects
-          // to clarify that the options are for arrays of objects, not arrays
-          name:
-            option.type === 'array' && option.params
-              ? `Options for ${names.join(' ')} ${option.type} objects`
-              : `Options for ${names.join(' ')} ${option.type}`,
+        // Append "objects" to the table caption for arrays of nested objects
+        // to clarify that the options are for arrays of objects, not arrays
+        name:
+          option.type === 'array' && option.params
+            ? `Options for <code>${option.name}</code> objects`
+            : `Options for <code>${option.name}</code> ${option.type}`,
 
-          options: option.params
-        }
-      })
+        options: option.params
+      }))
     )
     .concat(
       additionalComponents.map(([option, parent]) => ({

diff --git a/views/partials/_example.njk b/views/partials/_example.njk
@@ -104,8 +104,8 @@
               </thead>
               <tbody class="govuk-table__body">
                 {% for option in table.options -%}
-                  {# Option name only, without parent prefix -#}
-                  {% set optionName = option.name.split(" ") | last %}
+                  {# Option name with parent prefix -#}
+                  {% set optionName = option.name.split('.').splice(-2).join('.') %}
                   <tr class="govuk-table__row">
                     <th class="govuk-table__header" scope="row">{{ optionName | safe }}</th>
                     <td class="govuk-table__cell">{{ option.type }}</td>