hmrc-frontend 2.2.0 → 2.4.0

package/README.md

@@ -2,11 +2,14 @@
 
 HMRC Frontend contains the code and documentation for patterns specifically designed for HMRC.
 
-[GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) and the [GOV.UK Design System](https://design-system.service.gov.uk/) contains the code and documentation for design patterns designed to be used by all government departments.
+[GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) and the 
+[GOV.UK Design System](https://design-system.service.gov.uk/) contains the code and documentation for 
+design patterns designed to be used by all government departments.
 
 The two sets of code and documentation are separate but used together.
 
-See [HMRC Design Patterns](https://design.tax.service.gov.uk/hmrc-design-patterns/) for examples of what the design patterns look like and guidance on how to use them in your service.
+See [HMRC Design Patterns](https://design.tax.service.gov.uk/hmrc-design-patterns/) for examples 
+of what the design patterns look like and guidance on how to use them in your service.
 
 ## Quick Start
 
@@ -15,13 +18,14 @@ See [HMRC Design Patterns](https://design.tax.service.gov.uk/hmrc-design-pattern
 * [Node.js](https://nodejs.org/en/) `>= 10.12.0`
 * [npm](https://www.npmjs.com/) `>= 6.4.1`
 
-To install more than one version of Node.js, it may be easier to use a node version manager like [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n).
+To install more than one version of Node.js, it may be easier to use a node version manager 
+like [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n).
 
 ### How to install
 
 Clone this repository and install its dependencies.
 
-```bash
+```shell script
 git clone https://github.com/hmrc/hmrc-frontend.git
 cd hmrc-frontend
 npm install
@@ -30,7 +34,7 @@ npm install
 ### How to run
 
 1. Run `npm start`
-2. Components are available at http://localhost:3000
+2. Components are available at [http://localhost:3000]()
 
 ## Using HMRC Frontend locally
 

package/check-compatibility.js

@@ -14,7 +14,7 @@ if (!knownPrototypeKitNames.includes(consumerPackageJson.name)) {
 }
 
 const compatibility = {
-  2.1: {
+  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.2.0
+2.4.0

package/hmrc/all.js

@@ -2902,7 +2902,7 @@
   });
   });
 
-  // https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/character-count/character-count.js
+  // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/character-count/character-count.js
   // with the change to support Welsh language messages. At the moment, there is no ability to pass
   // in custom messages to the component for the dynamic count. If GDS release a version supporting
   // custom dynamic count messages, this version should be removed.

package/hmrc/components/_all.scss

@@ -7,6 +7,7 @@
 @import "header/header";
 @import "internal-header/internal-header";
 @import "add-to-a-list/add-to-a-list";
+@import "list-with-actions/list-with-actions";
 @import "timeout-dialog/timeout-dialog";
 @import "status-tags-in-task-list-pages/status-tags-in-task-list-pages";
 @import "user-research-banner/user-research-banner";

package/hmrc/components/add-to-a-list/template.njk

@@ -1,5 +1,7 @@
 {% from "govuk/components/button/macro.njk" import govukButton with context %}
 {% from "govuk/components/radios/macro.njk" import govukRadios with context %}
+{% from "../list-with-actions/macro.njk" import hmrcListWithActions with context %}
+
 {% if params.language == 'cy' %}
     {% set messages = {
     itemTypeDefault: {singular: 'eitem', plural: 'o eitemau'},
@@ -27,6 +29,26 @@
     no: 'No'
   } %}
 {% endif %}
+{% set items = [] %}
+{% for item in params.itemList %}
+  {% set items = (items.push({ name: { text: item.name }, actions: [{
+    text: messages.change,
+    visuallyHiddenText: messages.change + ' ' +item.name,
+    href: item.changeUrl
+  }, {
+    text: messages.remove,
+    visuallyHiddenText: messages.aria.before + ' ' + item.name + ' ' + messages.aria.after,
+    href: item.removeUrl
+  }] }), items) %}
+{% endfor %}
+
+{%- set listWithActionsClasses = '' -%}
+{% if params.itemSize == 'long' %}
+  {% set listWithActionsClasses = 'hmrc-list-with-actions--long' %}
+{% else %}
+  {% set listWithActionsClasses = 'hmrc-list-with-actions--short' %}
+{% endif -%}
+
 <h1 class="govuk-heading-xl">{%- if params.itemList | length === 0 -%}
   {{ messages.emptyList }}
 {%- else -%}
@@ -37,31 +59,7 @@
 {%- endif -%}
 </h1>
 <div class="govuk-form-group">
-  <dl class="hmrc-add-to-a-list hmrc-add-to-a-list--{{ params.itemSize | default('short') }}">
-    {# loop through items in  the itemList #}
-    {% for item in params.itemList %}
-    <div class="hmrc-add-to-a-list__contents">
-      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
-        {{ item.name }}
-      </dt>
-      <dd class="hmrc-add-to-a-list__change">
-        <a class="govuk-link" href="{{ item.changeUrl }}">
-          <span aria-hidden="true">{{messages.change}}</span>
-          <span class="govuk-visually-hidden">{{messages.change}} {{ item.name }}</span>
-        </a>
-      </dd>
-      <dd class="hmrc-add-to-a-list__remove">
-        <a class="govuk-link" href="{{ item.removeUrl }}">
-          <span aria-hidden="true">{{messages.remove}}</span>
-          <span class="govuk-visually-hidden">{{messages.aria.before}} {{ item.name }} {{messages.aria.after}}</span>
-        </a>
-      </dd>
-    </div>
-    {% else %}
-      {# empty list stuff goes here #}
-    {% endfor %}
-    {# end loop #}
-  </dl>
+  {{ hmrcListWithActions({ items: items, classes: listWithActionsClasses }) }}
 </div>
 <form method="post" novalidate action="{{ params.formAction }}">
   {{ govukRadios({

package/hmrc/components/character-count/character-count.js

@@ -3,7 +3,7 @@ import 'govuk-frontend/govuk/vendor/polyfills/Event'; // addEventListener and ev
 import 'govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList';
 
 // This CharacterCount is a direct copy from govuk-frontend:
-// https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/character-count/character-count.js
+// https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/character-count/character-count.js
 // with the change to support Welsh language messages. At the moment, there is no ability to pass
 // in custom messages to the component for the dynamic count. If GDS release a version supporting
 // custom dynamic count messages, this version should be removed.

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>

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

@@ -0,0 +1,76 @@
+@import "../../../../govuk-frontend/govuk/settings/all";
+@import "../../../../govuk-frontend/govuk/tools/all";
+@import "../../../../govuk-frontend/govuk/helpers/all";
+
+.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-list-with-actions__name {
+      width: 30%;
+    }
+  }
+}
+
+// Kept for backward compatibility with add-to-a-list
+.hmrc-list-with-actions--long {
+  @include govuk-media-query($from: desktop) {
+    .hmrc-list-with-actions__name {
+      width: 50%;
+    }
+  }
+}
+
+.hmrc-list-with-actions__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: govuk-spacing(3) 0;
+  border-bottom: 1px solid $govuk-border-colour;
+}
+
+.hmrc-list-with-actions__name {
+  font-weight: normal;
+}
+
+.hmrc-list-with-actions__actions {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+
+  @include govuk-media-query($from: desktop) {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+}
+
+.hmrc-list-with-actions__action {
+  margin-bottom: govuk-spacing(2);
+  text-align: right;
+
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: 0;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+}
+
+.hmrc-list-with-actions__action:last-of-type {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,3 @@
+{% macro hmrcListWithActions(params) %}
+  {% include "./template.njk" %}
+{% endmacro %}

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

@@ -0,0 +1,33 @@
+{%- 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 %}
+  </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>
+  {% endfor %}
+</dl>
+{% endif -%}

package/hmrc/components/user-research-banner/template.njk

@@ -8,7 +8,7 @@
             Help improve HMRC services
           {% endif %}
         </div>
-        <a class="govuk-link hmrc-user-research-banner__link" href="{{ params.url }}" target="_blank">
+        <a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="{{ params.url }}" target="_blank">
           {% if params.language == 'cy' %}
             Cofrestrwch i gymryd rhan mewn ymchwil defnyddwyr (yn agor tab newydd)
           {% else %}