Add inverse variant to Service navigation component

[querkmachine]

Add 'inverse' (white on blue) variant of the Service navigation component. For #6013.

This variant is intended for use on pages where the GOV.UK header and Service navigation are followed by another element with a blue background, such as on Digital Service Platforms pages, to create a seamless blue area at the top of the page.

Changes

• Adds an inversely coloured variant of the Service navigation component.
• Change how line-height is calculated on service name and navigation items.
• Review app:
  • Adds an example of the inverse styles to the review app.
  • Updates the 'product page' full page example to use the inverse variant.

Thoughts

• The appearance of the inverse component means that non-linked service names and navigation items look identical to their linked equivalents. This might be okay—the non-inverse version of the component doesn't distinguish between linked and non-linked service names either, and links are distinguished only by colour—but could potentially be better.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	127.91 KiB
dist/govuk-frontend-development.min.js	48.07 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	102.18 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	95.96 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.28 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	127.9 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	48.06 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.89 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	90.17 KiB	45.67 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.79 KiB
character-count.mjs	25.48 KiB	11 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.55 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
file-upload.mjs	20.83 KiB	11.11 KiB
header.mjs	6.48 KiB	3.28 KiB
notification-banner.mjs	9.35 KiB	3.71 KiB
password-input.mjs	18.16 KiB	8.34 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.39 KiB	3.26 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.99 KiB	6.67 KiB

View stats and visualisations on the review app

---

Action run for 6a1a125

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index d4676a216..8861ef2c5 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -5579,7 +5579,7 @@ screen and (forced-colors:active) {
     .govuk-template--rebranded .govuk-service-navigation__item,
     .govuk-template--rebranded .govuk-service-navigation__service-name {
         padding: 15px 0;
-        line-height: 1.5
+        line-height: 1.5263157895
     }
 
     .govuk-service-navigation__item:not(:last-child),
@@ -5871,6 +5871,44 @@ screen and (min-width:40.0625em) and (-ms-high-contrast:active) {
     font-weight: inherit
 }
 
+.govuk-template--rebranded .govuk-service-navigation--inverse {
+    border-bottom: none;
+    background-color: #1d70b8
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-width-container {
+    border-color: #8eb8dc;
+    border-style: solid;
+    border-width: 1px 0
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__container {
+    margin-top: -1px
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__item,
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__service-name {
+    border-color: #fff
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__link:link,
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__link:visited {
+    color: #fff
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__link:active,
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__link:hover {
+    color: hsla(0, 0%, 100%, .99)
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-template--rebranded .govuk-service-navigation--inverse .govuk-service-navigation__toggle:not(:focus) {
+    color: #fff
+}
+
 .govuk-skip-link {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

---

Action run for 6a1a125

[github-actions]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
new file mode 100644
index 000000000..8fb4bdade
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/template-inverse.html
@@ -0,0 +1,63 @@
+
+  <section aria-label="Service information" class="govuk-service-navigation govuk-service-navigation--inverse"
+data-module="govuk-service-navigation"
+>
+      <div class="govuk-width-container">
+
+    <div class="govuk-service-navigation__container">
+      
+        <span class="govuk-service-navigation__service-name">
+            <a href="#/" class="govuk-service-navigation__link">
+              Apply for a juggling license
+            </a>
+        </span>
+
+      
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
+            Menu
+          </button>
+
+          <ul class="govuk-service-navigation__list" id="navigation" >
+
+            
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/1">
+                                    
+Navigation item 1
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item govuk-service-navigation__item--active">
+                  <a class="govuk-service-navigation__link" href="#/2" aria-current="true">
+                                    
+                  <strong class="govuk-service-navigation__active-fallback">Navigation item 2</strong>
+
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/3">
+                                    
+Navigation item 3
+                  </a>
+              </li>
+
+              
+              <li class="govuk-service-navigation__item">
+                  <a class="govuk-service-navigation__link" href="#/4">
+                                    
+Navigation item 4
+                  </a>
+              </li>
+
+            </ul>
+        </nav>
+    </div>
+
+    </div>
+
+  </section>

---

Action run for 6a1a125

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
index 2d28020e3..4afae52d3 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/_index.scss
@@ -48,7 +48,13 @@
 
       @include _govuk-rebrand {
         padding: govuk-spacing(3) 0;
-        line-height: 1.5;
+
+        // More magic numbers ahoy:
+        // 29 is the desired height of the element (60), minus top and bottom
+        // padding (2×15), minus bottom border (1); 19 is the font-size at this
+        // point. This gives us the perfect fractional line height to make the
+        // overall component 60px high
+        line-height: (29 / 19);
       }
 
       &:not(:last-child) {
@@ -182,6 +188,42 @@
   .govuk-service-navigation__active-fallback {
     font-weight: inherit;
   }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    @include _govuk-rebrand {
+      // Remove bottom border to add width-container ones
+      border-bottom: none;
+      background-color: $govuk-brand-colour;
+
+      .govuk-width-container {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
+      }
+
+      // Subtract 1px of space to account for the extra border-top
+      .govuk-service-navigation__container {
+        margin-top: -1px;
+      }
+
+      // Override the 'active' border colour
+      .govuk-service-navigation__item,
+      .govuk-service-navigation__service-name {
+        border-color: govuk-colour("white");
+      }
+
+      // Override link styles
+      .govuk-service-navigation__link {
+        @include govuk-link-style-inverse;
+      }
+
+      // Override mobile menu toggle colour when not focused
+      .govuk-service-navigation__toggle:not(:focus) {
+        color: govuk-colour("white");
+      }
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
index 0305468d5..7b8b1e33d 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/fixtures.json
@@ -274,6 +274,40 @@
             "screenshot": false,
             "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
         },
+        {
+            "name": "inverse",
+            "options": {
+                "classes": "govuk-service-navigation--inverse",
+                "serviceName": "Apply for a juggling license",
+                "serviceUrl": "#/",
+                "navigation": [
+                    {
+                        "href": "#/1",
+                        "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2",
+                        "active": true
+                    },
+                    {
+                        "href": "#/3",
+                        "text": "Navigation item 3"
+                    },
+                    {
+                        "href": "#/4",
+                        "text": "Navigation item 4"
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "Service navigation that appears between other areas of brand blue. Rebrand only.",
+            "previewLayoutModifiers": [
+                "inverse"
+            ],
+            "screenshot": false,
+            "html": "<section aria-label=\"Service information\" class=\"govuk-service-navigation govuk-service-navigation--inverse\"\ndata-module=\"govuk-service-navigation\"\n>\n      <div class=\"govuk-width-container\">\n\n    <div class=\"govuk-service-navigation__container\">\n      \n        <span class=\"govuk-service-navigation__service-name\">\n            <a href=\"#/\" class=\"govuk-service-navigation__link\">\n              Apply for a juggling license\n            </a>\n        </span>\n\n      \n        <nav aria-label=\"Menu\" class=\"govuk-service-navigation__wrapper\">\n          <button type=\"button\" class=\"govuk-service-navigation__toggle govuk-js-service-navigation-toggle\" aria-controls=\"navigation\" hidden>\n            Menu\n          </button>\n\n          <ul class=\"govuk-service-navigation__list\" id=\"navigation\" >\n\n            \n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/1\">\n                                    \nNavigation item 1\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item govuk-service-navigation__item--active\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/2\" aria-current=\"true\">\n                                    \n                  <strong class=\"govuk-service-navigation__active-fallback\">Navigation item 2</strong>\n\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/3\">\n                                    \nNavigation item 3\n                  </a>\n              </li>\n\n              \n              <li class=\"govuk-service-navigation__item\">\n                  <a class=\"govuk-service-navigation__link\" href=\"#/4\">\n                                    \nNavigation item 4\n                  </a>\n              </li>\n\n            </ul>\n        </nav>\n    </div>\n\n    </div>\n\n  </section>"
+        },
         {
             "name": "with no options set",
             "options": {},

---

Action run for 6a1a125

[36degrees]

This currently looks right when the rebrand feature flag is not enabled, but incorrect when it is. I think this is likely because of the specificity of .govuk-template--rebranded .govuk-service-navigation…

Would you mind updating the 'product page' full page example (possibly just when the brand feature flag is enabled…?) so we can see how it looks in situ?

[querkmachine]

@36degrees D'oh, forgot to copy over the specificity-overriding bit when duplicating my spike from the DS website. Fixed now.

I've been assuming that this new variant is only expected to be available with the rebrand active, given it's intended to tie the new header background colour into a masthead below, but if we want it available pre-rebrand too, that becomes a more awkward kettle of fish.

[36degrees]

Realised this doesn't have a changelog entry – @querkmachine are you OK to draft something and raise another PR?

Aware we probably need to align the changelog with any potential guidance on usage.