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

alphagov · Aug 15, 2023 · 5cd1b9d · 5cd1b9d
1 parent f452d01
commit 5cd1b9d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
@@ -28,6 +28,22 @@ 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) {
     option.description = marked(option.description, { renderer })
@@ -146,34 +162,39 @@ function getMacroOptions(componentName) {
     componentName = 'input'
   }
 
-  const options = getMacroOptionsJson(componentName)
-    .map(addSlugs)
+  // 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(
-          renderDescriptionsAsMarkdown
-        )
+        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
@@ -94,7 +94,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>
@@ -105,23 +105,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>