hmrc-frontend 4.8.0 → 5.0.0

package/hmrc/VERSION.txt

@@ -1 +1 @@
-4.8.0
+5.0.0

package/hmrc/components/account-menu/_account-menu.scss

@@ -87,28 +87,28 @@ $hmrc-transition-type: "all";
 
   &:hover,
   &:focus {
+    outline: none;
     border-bottom-width: 4px;
     border-bottom-style: solid;
-    color: govuk-colour("light-blue");
+    color: $govuk-link-hover-colour;
+    border-bottom-color: $govuk-link-hover-colour;
   }
 
-  &:hover {
-    border-bottom-color: govuk-colour("light-grey");
+  &:focus {
+    background-color: $govuk-focus-colour;
+    color: $govuk-focus-text-colour;
   }
 
-  &:focus {
-    border-bottom-color: $govuk-focus-colour;
-    background-color: transparent;
+  .hmrc-notification-badge {
+    // otherwise the line height is slightly larger than the menu items and we
+    // get a small gap under menu items without a notification badge.
+    line-height: inherit;
   }
 }
 
 .is-smaller .hmrc-account-menu__link {
   padding-left: 10px;
   color: govuk-colour("black");
-
-  &:hover {
-    color: govuk-colour("black");
-  }
 }
 
 .hmrc-account-menu__link--home {
@@ -120,27 +120,6 @@ $hmrc-transition-type: "all";
 .is-smaller .hmrc-account-menu__link--home,
 .is-smaller .hmrc-account-menu__link--menu {
   padding-left: 0;
-
-  &:hover {
-    border-bottom-color: transparent;
-  }
-
-  &:focus {
-    border-bottom-color: $hmrc-account-menu-yellow-1;
-    color: govuk-colour("light-blue");
-  }
-
-  &.hmrc-account-menu__link--active {
-    &:hover {
-      border-bottom-color: $govuk-brand-colour;
-      color: govuk-colour("black");
-    }
-
-    &:focus {
-      border-bottom-color: $hmrc-account-menu-yellow-1;
-      color: govuk-colour("light-blue");
-    }
-  }
 }
 
 .hmrc-account-menu__link--menu {
@@ -214,6 +193,7 @@ $hmrc-transition-type: "all";
 
     .hmrc-account-menu__link {
       border-bottom: 0;
+      display: block;
 
       &:hover {
         border-bottom: 0;

package/hmrc/components/header/_header.scss

@@ -31,13 +31,11 @@ $govuk-header-link-underline-thickness: 3px;
     .govuk-list {
       margin-bottom: 0;
 
-      a {
-        color: govuk-colour("white");
+      a:not(.govuk-header__link) {
+        @include govuk-font($size: 16, $weight: "bold");
 
-        &:not(.govuk-header__link) {
-          color: govuk-colour("mid-grey");
-          text-decoration: none;
-        }
+        color: govuk-colour("mid-grey");
+        text-decoration: none;
       }
     }
 

package/hmrc/components/list-with-actions/_list-with-actions.scss

@@ -4,22 +4,35 @@
 
 .hmrc-list-with-actions {
   @include govuk-font($size: 19);
-}
 
-// Kept for backward compatibility with add-to-a-list
-.hmrc-list-with-actions--short {
   @include govuk-media-query($from: desktop) {
+    .hmrc-summary-list__key {
+      width: 50%;
+    }
+
+    .hmrc-summary-list__actions {
+      width: 50%;
+    }
+
     .hmrc-list-with-actions__name {
-      width: 30%;
+      width: 50%;
     }
   }
 }
 
 // Kept for backward compatibility with add-to-a-list
-.hmrc-list-with-actions--long {
+.hmrc-list-with-actions--short {
   @include govuk-media-query($from: desktop) {
+    .hmrc-summary-list__key {
+      width: 30%;
+    }
+
+    .hmrc-summary-list__actions {
+      width: 70%;
+    }
+
     .hmrc-list-with-actions__name {
-      width: 50%;
+      width: 30%;
     }
   }
 }

package/hmrc/components/list-with-actions/template.njk

@@ -1,33 +1,50 @@
 {%- macro _actionLink(action) %}
   <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    {% if action.html %}
-      {{ action.html | safe }}
-    {% else %}
-      {%- if action.visuallyHiddenText -%}
-        <span aria-hidden="true">{{ action.text }}</span>
-        <span class="govuk-visually-hidden">{{ action.visuallyHiddenText }}</span>
-      {% else %}
-        {{ action.text }}
-      {% endif -%}
-    {% endif %}
+  {%- if action.html -%}
+    {{ action.html | safe }}
+  {%- else -%}
+    {%- if action.visuallyHiddenText -%}
+      <span aria-hidden="true">{{ action.text }}</span>{#- strip spaces -#}
+      <span class="govuk-visually-hidden">{{ action.visuallyHiddenText }}</span>
+    {%- else -%}
+      {{ action.text }}
+    {%- endif -%}
+  {%- endif -%}
   </a>
 {% endmacro -%}
 
-{% if params.items.length > 0 %}
-<dl class="hmrc-list-with-actions {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% for item in params.items %}
-  <div class="hmrc-list-with-actions__item">
-    <dt class="hmrc-list-with-actions__name">
-      {{ item.name.html | safe if item.name.html else item.name.text }}
-    </dt>
-    <div class="hmrc-list-with-actions__actions">
-      {% for action in item.actions %}
-        <dd class="hmrc-list-with-actions__action">
-          {{ _actionLink(action) | indent(6) | trim }}
-        </dd>
-      {% endfor %}
-    </div>
-  </div>
+{# Determine if we need 2 or 3 columns #}
+{% set anyRowHasActions = false %}
+{% for row in params.items %}
+  {% set anyRowHasActions = true if row.actions.length else anyRowHasActions %}
+{% endfor -%}
+
+{% if params.items.length %}
+  <dl class="govuk-summary-list hmrc-list-with-actions {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% for row in params.items %}
+    {% if row %}
+      <div class="govuk-summary-list__row {%- if anyRowHasActions and not row.actions %} govuk-summary-list__row--no-actions{% endif %} {%- if row.classes %} {{ row.classes }}{% endif %}">
+        <dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
+          {{ row.name.html | safe if row.name.html else row.name.text }}
+        </dt>
+        {% if row.actions.length %}
+          <dd class="govuk-summary-list__actions hmrc-summary-list__actions">
+            {% if row.actions.length == 1 %}
+              {{ _actionLink(row.actions[0]) | indent(12) | trim }}
+            {% else %}
+              <ul class="govuk-summary-list__actions-list">
+                {% for action in row.actions %}
+                  <li class="govuk-summary-list__actions-list-item">
+                    {{ _actionLink(action) | indent(18) | trim }}
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </dd>
+        {% endif %}
+      </div>
+    {% endif %}
   {% endfor %}
-</dl>
-{% endif -%}
+  </dl>
+{% endif %}
+

package/hmrc/components/page-heading/_page-heading.scss

@@ -1,18 +1,21 @@
 .hmrc-page-heading {
   display: table;
   width: 100%;
-  margin-top: govuk-em(60, 32);
-  margin-bottom: govuk-em(30, 32);
   padding-top: 8px;
   clear: both;
   table-layout: fixed;
 
+  .hmrc-caption {
+    display: table-header-group;
+  }
+}
+
+.hmrc-page-heading--with-margin {
+  margin-top: govuk-em(60, 32);
+  margin-bottom: govuk-em(30, 32);
+
   @include govuk-media-query($from: tablet) {
     margin-top: govuk-em(90, 48);
     margin-bottom: govuk-em(60, 48);
   }
-
-  .hmrc-caption-xl {
-    display: table-header-group;
-  }
 }

package/hmrc/components/page-heading/template.njk

@@ -1,6 +1,6 @@
-<header class="hmrc-page-heading">
-  <h1 class="govuk-heading-xl">{{ params.text }}</h1>
+<header class="hmrc-page-heading{%- if params.classes %} {{ params.classes }}{%- endif -%}">
+  <h1 class="{{ params.headingClasses | default('govuk-heading-xl') }}">{{ params.text }}</h1>
   {%- if params.section -%}
-    <p class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">{% if params.language === 'cy' %}Teitl yr adran hon yw{%else%}This section is{%endif%} </span>{{ params.section }}</p>
+    <p class="hmrc-caption {{ params.captionClasses | default('govuk-caption-xl') }}"><span class="govuk-visually-hidden">{% if params.language === 'cy' %}Teitl yr adran hon yw{%else%}This section is{%endif%} </span>{{ params.section }}</p>
   {%- endif -%}
 </header>