Allow long option names to wrap at prefixes and capital letters

alphagov · Jul 3, 2023 · 553d5a1 · 553d5a1
1 parent 6cb61a3
commit 553d5a1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
@@ -13,12 +13,21 @@ function getMacroOptionsJson (componentName) {
   return JSON.parse(fs.readFileSync(optionsFilePath, 'utf8'))
 }
 
-function addSlugs (option) {
-  // camelCase into kebab-case
-  option.slug = (option.name).replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+function addWordBreaksAndSlugs (option) {
   if (option.params) {
-    option.params = option.params.map(addSlugs)
+    option.params = option.params
+      .map(addWordBreaksAndSlugs)
   }
+
+  // Add URL-safe slugs for hrefs and IDs
+  option.slug = option.name
+    .replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+
+  // Add suggested word breaks before capital letters to allow
+  // browsers to break long option names in sensible places
+  option.name = option.name
+    .replace(/([A-Z])/g, '<wbr>$1')
+
   return option
 }
 
@@ -146,7 +155,7 @@ function getMacroOptions (componentName) {
 
   const options =
     getMacroOptionsJson(componentName)
-      .map(addSlugs)
+      .map(addWordBreaksAndSlugs)
       .map(renderDescriptionsAsMarkdown)
 
   const nestedOptions = getNestedOptions(options)
@@ -179,7 +188,7 @@ function getMacroOptions (componentName) {
             // - Nested object: Use `parent.child` syntax
             // - Nested array objects: Use `parent[].child` syntax
             name: ['array', 'object'].includes(option.type)
-              ? `${option.name}${option.type === 'array' ? '[]' : ''}.${param.name}`
+              ? `${option.name}${option.type === 'array' ? '[]' : ''}.<wbr>${param.name}`
               : param.name
           }))
       }
@@ -198,7 +207,7 @@ function getMacroOptions (componentName) {
             ...option,
 
             // Add component name prefix
-            name: `${componentName}.${option.name}`
+            name: `${componentName}.<wbr>${option.name}`
           }))
       }
     })

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
@@ -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 (option.slug === "hint" or option.slug === "label") %}
-                          See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name }}</a>.
+                          See <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name | striptags }}</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 | striptags }}</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 | striptags }}</a>.
                       {% endif -%}
                     </td>
                   </tr>