Allow long option names to wrap at full stops and capital letters

alphagov · Jul 7, 2023 · 7147016 · 7147016
1 parent cd8492b
commit 7147016
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
@@ -25,6 +25,25 @@ function addSlugs (option) {
   return option
 }
 
+function renderNameWithBreaks (option) {
+  if (option.params) {
+    option.params = option.params
+      .map(renderNameWithBreaks)
+  }
+
+  // Add suggested word breaks before capital letters to allow
+  // browsers to break long option names in sensible places
+  option.name = option.name
+    .replace(/(?<!<wbr>)([A-Z])/g, '<wbr>$1')
+
+  // Also add suggested word breaks after full stops for options
+  // that are manually given parent prefixes like `summary.text`
+  option.name = option.name
+    .replace(/(\.)(?!<wbr>)/g, '$1<wbr>')
+
+  return option
+}
+
 function renderDescriptionsAsMarkdown (option) {
   if (option.description) {
     // Explicity set deprecated properties to false
@@ -149,33 +168,39 @@ function getMacroOptions (componentName) {
     componentName = 'input'
   }
 
-  const options =
-    getMacroOptionsJson(componentName)
-      .map(addSlugs)
-      .map(renderDescriptionsAsMarkdown)
+  // Macro options
+  const options = getMacroOptionsJson(componentName)
+    .map(addSlugs)
+
+  // Macro options with formatting
+  const optionsFormatted = structuredClone(options)
+    .map(renderNameWithBreaks)
+    .map(renderDescriptionsAsMarkdown)
 
-  const nestedOptions = getNestedOptions(options)
+  const nestedOptions = getNestedOptions(optionsFormatted)
   const additionalComponents = getAdditionalComponentOptions(options)
 
   const optionGroups = [
     {
       name: 'Primary options',
       id: 'primary',
-      options
+      options: optionsFormatted
     }
   ].concat(
     nestedOptions
       .map(option => ({
-        name: 'Options for ' + option.name,
+        name: `Options for ${option.name}`,
         id: option.slug,
         options: option.params
       }))
   ).concat(
     additionalComponents
       .map(option => ({
-        name: 'Options for ' + option.name,
+        name: `Options for ${option.name}`,
         id: option.slug,
         options: getMacroOptionsJson(option.name)
+          .map(addSlugs)
+          .map(renderNameWithBreaks)
           .map(renderDescriptionsAsMarkdown)
       }))
   )

diff --git a/src/stylesheets/components/_options.scss b/src/stylesheets/components/_options.scss
@@ -16,7 +16,10 @@
     .govuk-table__header,
     .govuk-table__cell {
       padding-right: govuk-spacing(2);
-      word-break: break-word;
+
+      // Automatic wrapping for unbreakable option names
+      word-wrap: break-word; // Fallback for older browsers only
+      overflow-wrap: break-word;
     }
   }
 }

diff --git a/views/partials/_example.njk b/views/partials/_example.njk
@@ -96,7 +96,7 @@
           </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 }}</caption>
+              <caption class="govuk-table__caption govuk-heading-m {% if table.id == 'primary' %} govuk-visually-hidden{% endif %}">{{ table.name | safe }}</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>
@@ -107,23 +107,23 @@
               <tbody class="govuk-table__body">
                 {% for option in table.options -%}
                   <tr class="govuk-table__row">
-                    <th class="govuk-table__header" scope="row">{{option.name}}</th>
-                    <td class="govuk-table__cell ">{{option.type}}</td>
-                    <td class="govuk-table__cell ">
+                    <th class="govuk-table__header" scope="row">{{ option.name | safe }}</th>
+                    <td class="govuk-table__cell">{{ option.type }}</td>
+                    <td class="govuk-table__cell">
                       {% if (option.required === true) %}
                         <strong>Required.</strong>
                       {% endif %}
                       {{ option.description | safe }}
                       {% if (option.isComponent) -%}
                         {# Create separate table data for components that are hidden in the Design System -#}
                         {% if ["hint", "label"].includes(option.slug) %}
-                          See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name }}</a>.
+                          See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name | safe }}</a>.
                         {% else %}
-                          See <a href="/components/{{ option.slug }}/#options-{{ option.slug }}-example">{{ option.name }}</a>.
+                          See <a href="/components/{{ option.slug }}/#options-{{ option.slug }}-example">{{ option.name | safe }}</a>.
                         {% endif %}
                       {% endif %}
                       {% if (option.params) %}
-                        See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name }}</a>.
+                        See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name | safe }}</a>.
                       {% endif -%}
                     </td>
                   </tr>