Merge pull request #124 from hmrc/PLATUI-924_ur_banner

PLATUI-924: Add new user research component

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [1.26.0] - 2021-02-19
+
+## Added
+
+- HMRC user research banner
+
 ## [1.25.0] - 2021-02-17
 
 ## Updated

check-compatibility.js

@@ -14,7 +14,7 @@ if (!knownPrototypeKitNames.includes(consumerPackageJson.name)) {
 }
 
 const compatibility = {
-  1.25: {
+  1.26: {
     'prototype-kit': ['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', '9.9', '9.10', '9.11'],
   },
   0.6: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",
@@ -10,7 +10,7 @@
     "build:dist": "gulp build:dist --destination 'dist' && npm run test:build:dist",
     "build": "npm run build:dist && npm run build:package",
     "lint": "stylelint 'src/**/*.scss' && eslint .",
-    "lint:fix": "stylelint 'src/**/*.scss' && eslint --fix .",
+    "lint:fix": "stylelint 'src/**/*.scss' --fix && eslint --fix .",
     "test": "npm run build:dist && jest src && npm run lint",
     "test:update-snapshots": "jest src -u",
     "test:compatibility": "jest __tests__/check-compatibility.test.js",
@@ -72,6 +72,7 @@
     "js-yaml": "^3.14.1",
     "merge-stream": "^1.0.1",
     "mkdirp": "^1.0.4",
+    "mockdate": "^3.0.2",
     "node-sass": "^5.0.0",
     "nodemon": "^2.0.3",
     "nunjucks": "^3.2.1",

src/all.js

@@ -1,5 +1,6 @@
 import AccountMenu from './components/account-menu/account-menu';
 import TimeoutDialog from './components/timeout-dialog/timeout-dialog';
+import UserResearchBanner from './components/user-research-banner/user-research-banner';
 
 function initAll() {
   const $AccountMenuSelector = '[data-module="hmrc-account-menu"]';
@@ -11,10 +12,16 @@ function initAll() {
   if ($TimeoutDialog) {
     new TimeoutDialog($TimeoutDialog).init();
   }
+
+  const $UserResearchBanner = document.querySelector('[data-module="hmrc-user-research-banner"]');
+  if ($UserResearchBanner) {
+    new UserResearchBanner($UserResearchBanner).init();
+  }
 }
 
 export default {
   initAll,
   AccountMenu,
   TimeoutDialog,
+  UserResearchBanner,
 };

src/components/_all.scss

@@ -9,3 +9,4 @@
 @import "add-to-a-list/add-to-a-list";
 @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";

src/components/header/_header.scss

@@ -52,3 +52,9 @@
     }
   }
 }
+
+// Shift user research banner up 10px to compensate for govuk header border
+// only when adjacent to govuk header
+.hmrc-header + .hmrc-user-research-banner {
+  top: -10px;
+}

src/components/header/header.yaml

@@ -64,7 +64,45 @@ params:
   type: string
   required: false
   description: Either "en" for english or "cy" for welsh.
-
+- name: displayHmrcBanner
+  type: boolean
+  required: false
+  description: Display the HMRC banner or not
+- name: userResearchBanner
+  type: object
+  required: false
+  description: User research banner parameters. If not supplied, the user research banner will not be displayed.
+  params:
+    - name: url
+      type: string
+      required: true
+      description: The URL the user research banner should link to
+- name: phaseBanner
+  type: object
+  required: false
+  description: Phase banner parameters. If not supplied, the phase banner will not be displayed.
+  params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within the phase banner. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within the phase banner. If `html` is provided, the `text` argument will be ignored.
+    - name: tag
+      type: object
+      required: false
+      description: Options for the tag component.
+      isComponent: true
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the phase banner container.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the phase banner container.
 previewLayout: full-width
 accessibilityCriteria: |
   Text and links in the Header must:
@@ -89,7 +127,13 @@ examples:
 - name: default
   description: The standard header as used on information pages on GOV.UK
   data:
-    {}
+    userResearchBanner:
+      url: '/sign-up-for-user-research'
+    phaseBanner:
+      tag:
+        text: alpha
+      html: This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
+    displayHmrcBanner: true
 
 - name: with service name
   description: If your service is more than a few pages long, you can help users understand where they are by adding the service name.

src/components/header/template.njk

@@ -1,5 +1,7 @@
 {% set language = params.language | default('en') %}
 {% from "../banner/macro.njk" import hmrcBanner %}
+{% from "../user-research-banner/macro.njk" import hmrcUserResearchBanner %}
+  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 
 <header role="banner">
   <div class="govuk-header hmrc-header {{ params.classes if params.classes }} {{ 'hmrc-header--with-additional-navigation' if params.signOutHref or params.languageToggle }}" data-module="header"
@@ -104,6 +106,14 @@
       {% endif %}
     </div>
   </div>
+  {% if params.userResearchBanner %}
+    {{ hmrcUserResearchBanner({language: params.language, url: params.userResearchBanner.url }) }}
+  {% endif %}
+  {% if params.phaseBanner %}
+    <div class="govuk-width-container">
+      {{ govukPhaseBanner(params.phaseBanner) }}
+    </div>
+  {% endif %}
   {% if params.displayHmrcBanner %}
     <div class="govuk-width-container">
       {{ hmrcBanner({language: params.language}) }}

src/components/user-research-banner/README.md

@@ -0,0 +1 @@
+# HMRC User Research Banner

src/components/user-research-banner/_user-research-banner.scss

@@ -0,0 +1,58 @@
+@import "node_modules/govuk-frontend/govuk/helpers/typography";
+
+@mixin hmrc-white-link() {
+  color: govuk-colour("white");
+
+  &:link,
+  &:hover,
+  &:visited {
+    color: govuk-colour("white");
+  }
+
+  &:active,
+  &:focus {
+    color: govuk-colour("black");
+  }
+}
+
+.hmrc-user-research-banner {
+  display: none;
+  position: relative;
+  color: govuk-colour("white");
+  background-color: $govuk-brand-colour;
+  box-sizing: border-box;
+
+  @include govuk-responsive-padding(6, "top");
+  @include govuk-responsive-padding(6, "bottom");
+  @include govuk-font($size: 19);
+
+  &__container {
+    position: relative;
+  }
+
+  &__title {
+    @include govuk-responsive-margin(1, "bottom");
+  }
+
+  &__link {
+    @include hmrc-white-link();
+  }
+
+  &--show {
+    display: block;
+  }
+
+  &__close {
+    @include hmrc-white-link();
+    @include govuk-responsive-margin(2, "top");
+
+    outline: 0;
+    border: 0;
+    background: none;
+    text-decoration: underline;
+    box-shadow: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: inherit;
+  }
+}

src/components/user-research-banner/macro.njk

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

src/components/user-research-banner/template.njk

@@ -0,0 +1,27 @@
+<div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
+  <div class="hmrc-user-research-banner__container govuk-width-container">
+    <div class="hmrc-user-research-banner__text">
+        <div class="hmrc-user-research-banner__title govuk-!-font-weight-bold">
+          {% if params.language == 'cy' %}
+            Helpwch i wella gwasanaethau CThEM
+          {% else %}
+            Help improve HMRC services
+          {% endif %}
+        </div>
+        <a class="govuk-link hmrc-user-research-banner__link" href="{{ params.url }}" target="_blank">
+          {% if params.language == 'cy' %}
+            Cofrestrwch i gymryd rhan mewn ymchwil defnyddwyr (yn agor tab newydd)
+          {% else %}
+            Sign up to take part in user research (opens in new tab)
+          {% endif %}
+        </a>
+    </div>
+    <button class="govuk-link hmrc-user-research-banner__close">
+      {% if params.language == 'cy' %}
+        Dim diolch
+      {% else %}
+        No thanks
+      {% endif %}
+    </button>
+  </div>
+</div>

src/components/user-research-banner/template.test.js

@@ -0,0 +1,38 @@
+/* eslint-env jest */
+
+const axe = require('../../../lib/axe-helper');
+
+const { render, getExamples } = require('../../../lib/jest-helpers');
+
+const examples = getExamples('user-research-banner');
+
+describe('User Research Banner', () => {
+  describe('by default', () => {
+    it('passes accessibility tests', async () => {
+      const $ = render('user-research-banner', examples.default);
+
+      const results = await axe($.html(), {
+        rules: {
+          region: { enabled: false },
+        },
+      });
+
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should render the correct URL', () => {
+      const $ = render('user-research-banner', examples.default);
+      expect($('.hmrc-user-research-banner__link').attr('href')).toEqual('https://www.example.com/user-research');
+    });
+
+    it('should have English text by default', () => {
+      const $ = render('user-research-banner', examples.default);
+      expect($('.hmrc-user-research-banner__title').text().trim()).toEqual('Help improve HMRC services');
+    });
+
+    it('should have Welsh text when specified', () => {
+      const $ = render('user-research-banner', examples.welsh);
+      expect($('.hmrc-user-research-banner__title').text().trim()).toEqual('Helpwch i wella gwasanaethau CThEM');
+    });
+  });
+});

src/components/user-research-banner/user-research-banner.js

@@ -0,0 +1,28 @@
+import { getCookie, setCookie } from '../../utils/cookies';
+
+function UserResearchBanner($module) {
+  this.$module = $module;
+  this.$closeLink = this.$module.querySelector('.hmrc-user-research-banner__close');
+  this.cookieName = 'mdtpurr';
+  this.cookieExpiryDays = 28;
+}
+
+UserResearchBanner.prototype.init = function init() {
+  const cookieData = getCookie(this.cookieName);
+
+  if (cookieData == null) {
+    this.$module.classList.add('hmrc-user-research-banner--show');
+    this.$closeLink.addEventListener('click', this.eventHandlers.noThanksClick.bind(this));
+  }
+};
+
+UserResearchBanner.prototype.eventHandlers = {
+  noThanksClick(event) {
+    event.preventDefault();
+
+    setCookie(this.cookieName, 'suppress_for_all_services', { days: this.cookieExpiryDays });
+    this.$module.classList.remove('hmrc-user-research-banner--show');
+  },
+};
+
+export default UserResearchBanner;