hmrc-frontend 6.85.0 → 6.87.0

package/govuk-prototype-kit.config.json

@@ -99,6 +99,10 @@
       "macroName": "hmrcReportTechnicalIssue",
       "importFrom": "hmrc/components/report-technical-issue/macro.njk"
     },
+    {
+      "macroName": "hmrcServiceNavigationLanguageSelect",
+      "importFrom": "hmrc/components/service-navigation-language-select/macro.njk"
+    },
     {
       "macroName": "hmrcTimeline",
       "importFrom": "hmrc/components/timeline/macro.njk"

package/hmrc/VERSION.txt

@@ -1 +1 @@
-6.85.0
+6.87.0

package/hmrc/{accessible-autocomplete-6.85.0.css → accessible-autocomplete-6.87.0.css}

@@ -1,2 +1,2 @@
 .autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #0b0c0c;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;height:2.5rem;line-height:1.25;margin-bottom:0;width:100%}.autocomplete__input{background-color:rgba(0,0,0,0);position:relative}.autocomplete__hint{color:#505a5f;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{-webkit-box-shadow:inset 0 0 0 2px;box-shadow:inset 0 0 0 2px;outline:3px solid #fd0;outline-offset:0}.autocomplete__input--show-all-values{cursor:pointer;padding:5px 35px 5px 5px}.autocomplete__dropdown-arrow-down{display:inline-block;height:24px;position:absolute;right:8px;top:10px;width:24px;z-index:-1}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{-webkit-box-shadow:0 2px 6px rgba(0,0,0,.257);box-shadow:0 2px 6px rgba(0,0,0,.257);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:1px solid #b1b4b6;border-left-width:0;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#f3f2f1}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:none}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{background-color:Highlight;background-color:SelectedItem;border-color:SelectedItem;color:HighlightText;color:SelectedItemText;forced-color-adjust:none;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#f3f2f1;color:#505a5f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1rem;font-weight:400}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1.1875rem;line-height:1.3157894737}}.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-family:sans-serif}}@media (min-width:40.0625em){.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:1.1875rem;line-height:1.3157894737}}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__option,.autocomplete__wrapper{font-size:14pt;line-height:1.15}}.govuk-form-group--error div:has(+.govuk-select--error[data-module=hmrc-accessible-autocomplete])>.autocomplete__wrapper .autocomplete__input{border-color:#d4351c}.autocomplete__dropdown-arrow-down{z-index:0;pointer-events:none}
-/*# sourceMappingURL=maps/accessible-autocomplete-6.85.0.css.map */
+/*# sourceMappingURL=maps/accessible-autocomplete-6.87.0.css.map */

package/hmrc/components/_all.scss

@@ -10,6 +10,7 @@
 @import "add-to-a-list/add-to-a-list";
 @import "list-with-actions/list-with-actions";
 @import "timeout-dialog/timeout-dialog";
+@import "service-navigation-language-select/service-navigation-language-select";
 @import "status-tags-in-task-list-pages/status-tags-in-task-list-pages";
 @import "user-research-banner/user-research-banner";
 @import "timeline/timeline";

package/hmrc/components/header/template.njk

@@ -2,6 +2,7 @@
 {% from "../banner/macro.njk" import hmrcBanner %}
 {% from "../user-research-banner/macro.njk" import hmrcUserResearchBanner %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
 
 {% from "govuk/macros/attributes.njk" import govukAttributes %}
 {% from "govuk/macros/logo.njk" import govukLogo -%}
@@ -11,7 +12,7 @@
 {%- set menuButtonText = params.menuButtonText if params.menuButtonText else ('Dewislen' if language == 'cy' else 'Menu') -%}
 
 <header>
-<div class="govuk-header hmrc-header {%- if params.classes %} {{ params.classes }}{% endif %}{{ ' hmrc-header--with-additional-navigation' if params.signOutHref or params.languageToggle }}" data-module="govuk-header"
+<div class="govuk-header hmrc-header {%- if params.classes %} {{ params.classes }}{% endif %}{{ ' hmrc-header--with-additional-navigation' if params.signOutHref or params.languageToggle }}{{ ' govuk-header--full-width-border' if params.serviceNavigation }}" data-module="govuk-header"
   {{- govukAttributes(params.attributes) }}>
   <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
     <div class="govuk-header__logo">
@@ -88,6 +89,14 @@
   {% endif %}
   </div>
 </div>
+{% if params.displayHmrcBanner and not params.useDeprecatedPositionForHmrcBanner %}
+  <div class="govuk-width-container">
+    {{ hmrcBanner({language: params.language, useTudorCrown: params.useTudorCrown}) }}
+  </div>
+{% endif %}
+{% if params.serviceNavigation %}
+    {{ govukServiceNavigation(params.serviceNavigation) }}
+{% endif %}
 {%- if params.phaseBanner %}
   <div class="govuk-width-container">
     {{ govukPhaseBanner(params.phaseBanner) }}
@@ -96,7 +105,7 @@
 {%- if params.userResearchBanner %}
     {{ hmrcUserResearchBanner({language: params.language, url: params.userResearchBanner.url }) }}
 {% endif %}
-{%- if params.displayHmrcBanner %}
+{% if params.displayHmrcBanner and params.useDeprecatedPositionForHmrcBanner %}
   <div class="govuk-width-container">
     {{ hmrcBanner({language: params.language, useTudorCrown: params.useTudorCrown}) }}
   </div>

package/hmrc/components/service-navigation-language-select/README.md

@@ -0,0 +1,20 @@
+# Service Navigation Language Select
+
+Choose between Welsh and English.
+
+This component is intended to be passed into the end slot of a Service Navigation component.
+
+A Service Navigation component containing this language select will need to have the class
+`.hmrc-service-navigation--with-language-select` added for it to be displayed correctly, if it's not included then the
+language select will appear on a separate line.
+
+## Accessibility
+
+This component should not be used at the same time in a user journey or on a page as the Language Select component which
+is displayed in the main area of the page. A journey which contains the language select displayed in both positions,
+even if only displayed on separate pages, the inconsistent placement of the language select controls will be an
+accessibility failure, according to the WCAG 2.2 Consistent Navigation Success Criteria.
+
+### License
+
+This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").

package/hmrc/components/service-navigation-language-select/_service-navigation-language-select.scss

@@ -0,0 +1,77 @@
+.hmrc-service-navigation-language-select {
+  @include govuk-font($size: 16);
+  @include govuk-clearfix;
+}
+
+.hmrc-service-navigation-language-select__list {
+  margin-top: 1em;
+  float: right;
+  text-align: right;
+}
+
+.hmrc-service-navigation-language-select__list-item {
+  display: inline-block;
+
+  &:first-child::after {
+    content: "";
+    display: inline-block;
+    position: relative;
+    top: 0.1875em;
+    height: 1em;
+    // stylelint-disable-next-line number-max-precision -- gives a 1.5px border width
+    border-right: 0.09375em solid $govuk-text-colour;
+  }
+
+  a,
+  [aria-current] {
+    padding: 0.3125em;
+  }
+}
+
+.hmrc-service-navigation--with-language-select {
+  .govuk-width-container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.govuk-service-navigation .hmrc-service-navigation-language-select {
+  display: inline;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  margin-top: auto;
+  margin-left: auto;
+}
+
+.govuk-service-navigation .hmrc-service-navigation-language-select .hmrc-service-navigation-language-select__list {
+  position: relative;
+  padding-left: 0;
+
+  @include govuk-responsive-margin(6, $direction: left);
+
+  @include govuk-media-query($from: tablet) {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: govuk-spacing(4) 0;
+
+    @include _govuk-rebrand {
+      padding: govuk-spacing(3) 0;
+
+      // some magic numbers from govuk-frontend service nav rebrand,
+      // adapted for the 16px font-size of the language switcher
+      line-height: (29 / 16);
+    }
+  }
+}
+
+.hmrc-service-navigation-language-select .govuk-service-navigation__item {
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-responsive-margin(6, $direction: left);
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: 0;
+  }
+}

package/hmrc/components/service-navigation-language-select/layout.njk

@@ -0,0 +1,40 @@
+{% extends "layout.njk" %}
+
+{% from "../header/macro.njk" import hmrcHeader %}
+
+{% block header %}
+  {{ hmrcHeader({
+    serviceNavigation: {
+      serviceName: "Example service",
+      classes: 'hmrc-service-navigation--with-language-select',
+      navigation: [
+        {
+          href: "#",
+          text: "Navigation item 1"
+        },
+        {
+          href: "#",
+          text: "Navigation item 2",
+          active: true
+        },
+        {
+          href: "#",
+          text: "Navigation item 3"
+        }
+      ],
+      slots: {
+        end: componentView
+      }
+    }
+  }) }}
+{% endblock %}
+
+{% block main %}
+  <div class="govuk-width-container">
+          <main class="govuk-main-wrapper" id="main-content">
+
+              <div style="height:300px;"></div>
+
+          </main>
+        </div>
+{% endblock %}

package/hmrc/components/service-navigation-language-select/macro.njk

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

package/hmrc/components/service-navigation-language-select/template.njk

@@ -0,0 +1,39 @@
+{% if params.language === 'en' %}
+  <nav class="hmrc-service-navigation-language-select" aria-label="Language switcher">
+    <ul class="hmrc-service-navigation-language-select__list">
+      <li class="hmrc-service-navigation-language-select__list-item">
+        <span aria-current="true">ENG</span>
+      </li>
+      <li class="hmrc-service-navigation-language-select__list-item">
+        <a href="{{ params.cy.href }}"
+          hreflang="cy"
+          lang="cy"
+          rel="alternate"
+          class="govuk-link govuk-service-navigation__link"
+          data-journey-click="link - click:lang-select:Cymraeg">
+          CYM<span class="govuk-visually-hidden"> – Newid yr iaith ir Gymraeg</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+{% endif %}
+
+{% if params.language === 'cy' %}
+  <nav class="hmrc-service-navigation-language-select" aria-label="Switcher iaith">
+    <ul class="hmrc-service-navigation-language-select__list">
+      <li class="hmrc-service-navigation-language-select__list-item">
+        <a href="{{ params.en.href }}"
+          hreflang="en"
+          lang="en"
+          rel="alternate"
+          class="govuk-link govuk-service-navigation__link"
+          data-journey-click="link - click:lang-select:English">
+          ENG<span class="govuk-visually-hidden"> – Change the language to English</span>
+        </a>
+      </li>
+      <li class="hmrc-service-navigation-language-select__list-item">
+        <span aria-current="true">CYM</span>
+      </li>
+    </ul>
+  </nav>
+{% endif %}