Add Nunjucks logic to insert <span> element around HTML in start buttons

[querkmachine]

Start buttons use flexbox for layout and alignment. Part of how flexbox works involves it ignoring whitespace between adjacent flex children (elements and text nodes), causing them to render 'squashed' together.

For example, HTML in a start button like this:

Apply for <abbr>PIP</abbr> now

Would render like this:

Apply forPIPnow

By wrapping the entire HTML string in an element, we remove the elements and text nodes from being flex children, and whitespace renders as expected.

Fixes #3406.

Changes

• Added Nunjucks logic to check if isStartButton is true and the content is being provided by html parameter.
  • If so, it renders the button HTML with a <span> element surrounding it.
  • Otherwise, it renders the button content the same as previous.
  • To avoid duplication across the link and <button> variants of the component, this has been abstracted into a buttonText variable set in the Nunjucks template.
• Added hidden review app example of a start button with HTML content.

Thoughts

Making the insertion of the <span> element highly conditional is in aid of reducing the footprint of additional code generated by the macro. There's no point including it for text-only inner content or on non-start buttons, as the issue is not present there. A few extra bytes is still a lot of data at scale!

I have, controversially, listed this as a fix. I don't think we need to list it as a recommended change because:

• The <span> only needs to be added in this one, specific situation.
• In that situation and without the <span>, the component looked visually broken. Presumably, any developer user that encountered this issue before either inserted a wrapping element themselves or altered the button content to not exhibit the issue.
• As there is likely no current thing that needs to be changed by users, there is no reason to issue a 'recommended change'.

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
index 3cde8da8f..4a800bcf5 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/button/fixtures.json
@@ -467,6 +467,19 @@
             "screenshot": false,
             "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now link button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg>\n</a>"
         },
+        {
+            "name": "start link with html",
+            "options": {
+                "href": "/",
+                "html": "Start <em>now</em>",
+                "isStartButton": true
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  <span>Start <em>now</em></span>\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg>\n</a>"
+        },
         {
             "name": "prevent double click",
             "options": {

---

Action run for 5f0c6c5

[github-actions]

📋 Stats

No changes to any distributed file sizes!

---

Action run for 5f0c6c5