Style macro options with <code> for table captions

alphagov · Sep 28, 2023 · 112d29c · 112d29c
1 parent cb8ef1e
commit 112d29c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
@@ -219,15 +219,20 @@ 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,
 
           // 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 ${option.name} ${option.type} objects`
-              : `Options for ${option.name} ${option.type}`,
+              ? `Options for ${names.join(' ')} ${option.type} objects`
+              : `Options for ${names.join(' ')} ${option.type}`,
 
           options: option.params
         }

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -248,6 +248,7 @@ $colour-list-breakpoint: 980px;
 
 // Add styling for inline code
 li code,
+caption code,
 td code,
 p code {
   padding: 1px 3px;