hmrc-frontend 2.3.0 → 2.4.0

package/check-compatibility.js

@@ -14,7 +14,7 @@ if (!knownPrototypeKitNames.includes(consumerPackageJson.name)) {
 }
 
 const compatibility = {
-  2.3: {
+  2.4: {
     'prototype-kit': ['9.14', '9.13', '9.12', '9.11', '9.10', '9.9', '9.8', '9.7', '9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0'],
   },
   1.38: {

package/hmrc/VERSION.txt

@@ -1 +1 @@
-2.3.0
+2.4.0

package/hmrc/components/header/_header.scss

@@ -1,3 +1,5 @@
+$govuk-header-link-underline-thickness: 3px;
+
 .hmrc-header.hmrc-header--with-additional-navigation {
   .govuk-header__link--service-name {
     float: left;
@@ -53,6 +55,33 @@
   }
 }
 
+.hmrc-header__service-name {
+  display: inline-block;
+  margin-bottom: govuk-spacing(2);
+
+  @include govuk-font($size: 24, $weight: bold);
+}
+
+.hmrc-header__service-name--linked {
+  @include govuk-typography-common;
+  @include govuk-link-style-inverse;
+
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+    @if ($govuk-link-underline-offset) {
+      text-underline-offset: $govuk-link-underline-offset;
+    }
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
 // Shift user research banner up 10px to compensate for govuk header border
 // only when adjacent to govuk header
 .hmrc-header + .hmrc-user-research-banner {

package/hmrc/components/header/template.njk

@@ -61,9 +61,10 @@
       {% if params.serviceName or params.navigation | length or params.signOutHref or params.languageToggle %}
       <div class="govuk-header__content">
       {% if params.serviceName %}
-      <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
-        {{ params.serviceName }}
-      </a>
+        {% set serviceNameTag = 'a' if params.serviceUrl else 'span' %}
+        <{{ serviceNameTag }} {% if (serviceNameTag == 'a') %}href="{{ params.serviceUrl }}" {% endif %} class="hmrc-header__service-name {% if (serviceNameTag == 'a') %}hmrc-header__service-name--linked{% endif %}">
+          {{ params.serviceName }}
+        </{{ serviceNameTag }}>
       {% endif %}
       {% if params.navigation | length %}
       <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>