hof 22.8.4 → 22.9.0-beta

package/package/frontend/themes/gov-uk/client-js/session-timeout-dialog.js

@@ -0,0 +1,348 @@
+/* eslint max-len: 0 */
+'use strict';
+
+const $ = require('jquery');
+window.dialogPolyfill = require('dialog-polyfill');
+
+// Modal dialog prototype
+window.GOVUK.sessionDialog = {
+  el: document.getElementById('js-modal-dialog'),
+  $el: $('#js-modal-dialog'),
+  $lastFocusedEl: null,
+  $closeButton: $('.modal-dialog .js-dialog-close'),
+  $fallBackElement: $('.govuk-timeout-warning-fallback'),
+  dialogIsOpenClass: 'dialog-is-open',
+  timers: [],
+  warningTextPrefix: $('.dialog-text-prefix').text(),
+  warningTextSuffix: '.',
+  warningText: $('.dialog-text').text(),
+  warningTextExtra: '',
+
+  // Timer specific markup. If these are not present, timeout and redirection are disabled
+  $timer: $('#js-modal-dialog .timer'),
+  $accessibleTimer: $('#js-modal-dialog .at-timer'),
+
+  secondsSessionTimeout: parseInt($('#js-modal-dialog').data('session-timeout'), 10 || 1800),
+  secondsTimeoutWarning: parseInt($('#js-modal-dialog').data('session-timeout-warning'), 10 || 300),
+  timeoutRedirectUrl: $('#js-modal-dialog').data('url-redirect'),
+  timeSessionRefreshed: new Date(),
+
+  bindUIElements: function () {
+    window.GOVUK.sessionDialog.$closeButton.on('click', function (e) {
+      e.preventDefault();
+      window.GOVUK.sessionDialog.closeDialog();
+    });
+
+    // Close modal when ESC pressed
+    $(document).keydown(function (e) {
+      if (window.GOVUK.sessionDialog.isDialogOpen() && e.keyCode === 27) {
+        window.GOVUK.sessionDialog.closeDialog();
+      }
+    });
+  },
+
+  isDialogOpen: function () {
+    return window.GOVUK.sessionDialog.el && window.GOVUK.sessionDialog.el.open;
+  },
+
+  isConfigured: function () {
+    return window.GOVUK.sessionDialog.$timer.length > 0 &&
+      window.GOVUK.sessionDialog.$accessibleTimer.length > 0 &&
+      window.GOVUK.sessionDialog.secondsSessionTimeout &&
+      window.GOVUK.sessionDialog.secondsTimeoutWarning &&
+      window.GOVUK.sessionDialog.timeoutRedirectUrl;
+  },
+
+  openDialog: function () {
+    if (!window.GOVUK.sessionDialog.isDialogOpen()) {
+      $('html, body').addClass(window.GOVUK.sessionDialog.dialogIsOpenClass);
+      window.GOVUK.sessionDialog.saveLastFocusedEl();
+      window.GOVUK.sessionDialog.makePageContentInert();
+      window.GOVUK.sessionDialog.el.showModal();
+      window.GOVUK.sessionDialog.el.open = true;
+    }
+  },
+
+  closeDialog: function () {
+    if (window.GOVUK.sessionDialog.isDialogOpen()) {
+      $('html, body').removeClass(window.GOVUK.sessionDialog.dialogIsOpenClass);
+      window.GOVUK.sessionDialog.el.close();
+      window.GOVUK.sessionDialog.el.open = false;
+      window.GOVUK.sessionDialog.setFocusOnLastFocusedEl();
+      window.GOVUK.sessionDialog.removeInertFromPageContent();
+      window.GOVUK.sessionDialog.refreshSession();
+    }
+  },
+
+  saveLastFocusedEl: function () {
+    window.GOVUK.sessionDialog.$lastFocusedEl = document.activeElement;
+    if (!window.GOVUK.sessionDialog.$lastFocusedEl || window.GOVUK.sessionDialog.$lastFocusedEl === document.body) {
+      window.GOVUK.sessionDialog.$lastFocusedEl = null;
+    } else if (document.querySelector) {
+      window.GOVUK.sessionDialog.$lastFocusedEl = document.querySelector(':focus');
+    }
+  },
+
+  // Set focus back on last focused el when modal closed
+  setFocusOnLastFocusedEl: function () {
+    if (window.GOVUK.sessionDialog.$lastFocusedEl) {
+      window.setTimeout(function () {
+        window.GOVUK.sessionDialog.$lastFocusedEl.focus();
+      }, 0);
+    }
+  },
+
+  // Set page content to inert to indicate to screenreaders it's inactive
+  // NB: This will look for #content for toggling inert state
+  makePageContentInert: function () {
+    if (document.querySelector('#content')) {
+      document.querySelector('#content').inert = true;
+      document.querySelector('#content').setAttribute('aria-hidden', 'true');
+    }
+  },
+
+  // Make page content active when modal is not open
+  // NB: This will look for #content for toggling inert state
+  removeInertFromPageContent: function () {
+    if (document.querySelector('#content')) {
+      document.querySelector('#content').inert = false;
+      document.querySelector('#content').setAttribute('aria-hidden', 'false');
+    }
+  },
+
+  numberToWords: function (n) {
+    const string = n.toString();
+    let start;
+    let end;
+    let chunk;
+    let ints;
+    let i;
+    let words = 'and';
+
+    if (parseInt(string, 10) === 0) {
+      return 'zero';
+    }
+
+    /* Array of units as words */
+    const units = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+
+    /* Array of tens as words */
+    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+
+    /* Array of scales as words */
+    const scales = ['', 'thousand', 'million', 'billion', 'trillion', 'quadrillion', 'quintillion', 'sextillion', 'septillion', 'octillion', 'nonillion', 'decillion', 'undecillion', 'duodecillion', 'tredecillion', 'quatttuor-decillion', 'quindecillion', 'sexdecillion', 'septen-decillion', 'octodecillion', 'novemdecillion', 'vigintillion', 'centillion'];
+
+    /* Split user argument into 3 digit chunks from right to left */
+    start = string.length;
+    const chunks = [];
+    while (start > 0) {
+      end = start;
+      chunks.push(string.slice((start = Math.max(0, start - 3)), end));
+    }
+
+    /* Check if function has enough scale words to be able to stringify the user argument */
+    const chunksLen = chunks.length;
+    if (chunksLen > scales.length) {
+      return '';
+    }
+
+    /* Stringify each integer in each chunk */
+    words = [];
+    for (i = 0; i < chunksLen; i++) {
+      chunk = parseInt(chunks[i], 10);
+
+      if (chunk) {
+        /* Split chunk into array of individual integers */
+        ints = chunks[i].split('').reverse().map(parseFloat);
+
+        /* If tens integer is 1, i.e. 10, then add 10 to units integer */
+        if (ints[1] === 1) {
+          ints[0] += 10;
+        }
+
+        /* Add scale word if chunk array item exists */
+        if (scales[i]) {
+          words.push(scales[i]);
+        }
+
+        /* Add unit word if array item exists */
+        if (units[ints[0]]) {
+          words.push(units[ints[0]]);
+        }
+
+        /* Add tens word if array item exists */
+        if (tens[ints[1]]) {
+          words.push(tens[ints[1]]);
+        }
+
+        /* Add hundreds word if array item exists */
+        if (units[ints[2]]) {
+          words.push(units[ints[2]] + ' hundred');
+        }
+      }
+    }
+    return words.reverse().join(' ');
+  },
+
+  // Attempt to convert numerics into text as OS VoiceOver
+  // occasionally stalled when encountering numbers
+  timeToWords: function (t, unit) {
+    let words;
+    if (t > 0) {
+      try {
+        words = window.GOVUK.sessionDialog.numberToWords(t);
+      } catch (e) {
+        words = t;
+      }
+      words = words + ' ' + window.GOVUK.sessionDialog.pluralise(t, unit);
+    } else {
+      words = '';
+    }
+    return words;
+  },
+
+  pluralise: function (n, unit) {
+    return n === 1 ? unit : unit + 's';
+  },
+
+  numericSpan: function (n, unit) {
+    return '<span class="tabular-numbers">' + n + '</span> ' + window.GOVUK.sessionDialog.pluralise(n, unit);
+  },
+
+  countdownText: function (minutes, seconds) {
+    const minutesText = window.GOVUK.sessionDialog.numericSpan(minutes, 'minute');
+    const secondsText = window.GOVUK.sessionDialog.numericSpan(seconds, 'second');
+    return minutes > 0 ? minutesText : secondsText;
+  },
+
+  countdownAtText: function (minutes, seconds) {
+    const minutesText = window.GOVUK.sessionDialog.timeToWords(minutes, 'minute');
+    const secondsText = window.GOVUK.sessionDialog.timeToWords(seconds, 'second');
+    return minutes > 0 ? minutesText : secondsText;
+  },
+
+  startCountdown: function () {
+    const $timer = window.GOVUK.sessionDialog.$timer;
+    const $accessibleTimer = window.GOVUK.sessionDialog.$accessibleTimer;
+    let timerRunOnce = false;
+    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+    const seconds = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+    const minutes = seconds / 60;
+
+    $timer.text(minutes + ' minute' + (minutes > 1 ? 's' : ''));
+
+    (function countdown() {
+      const secondsUntilSessionTimeout = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+      const timerExpired = secondsUntilSessionTimeout <= 0;
+
+      if (!timerExpired) {
+        const minutesLeft = parseInt(secondsUntilSessionTimeout / 60, 10);
+        const secondsLeft = parseInt(secondsUntilSessionTimeout % 60, 10);
+
+        // Below string will get read out by screen readers every time
+        // the timeout refreshes.
+        // Add additional information in extraText which will get announced to AT the
+        // first time the time out opens
+        const countdownText = window.GOVUK.sessionDialog.countdownText(minutesLeft, secondsLeft);
+        const text = window.GOVUK.sessionDialog.warningTextPrefix + '<strong>' + countdownText + '</strong>' + window.GOVUK.sessionDialog.warningTextSuffix + '<p>' + window.GOVUK.sessionDialog.warningText + '</p>';
+        const countdownAtText = window.GOVUK.sessionDialog.countdownAtText(minutesLeft, secondsLeft);
+        const atText = window.GOVUK.sessionDialog.warningTextPrefix + countdownAtText + window.GOVUK.sessionDialog.warningTextSuffix + ' ' + window.GOVUK.sessionDialog.warningText;
+        const extraText = '\n' + window.GOVUK.sessionDialog.warningTextExtra;
+
+        $timer.html(text + ' ' + extraText);
+
+        // Update screen reader friendly content every 20 secs
+        if (secondsLeft % 20 === 0) {
+          // Read out the extra content only once.
+          // Don't read out on iOS VoiceOver which stalls on the longer text
+          if (!timerRunOnce && !iOS) {
+            $accessibleTimer.text(atText + extraText);
+            timerRunOnce = true;
+          } else {
+            $accessibleTimer.text(atText);
+          }
+        }
+
+        window.GOVUK.sessionDialog.addTimer(countdown, 20);
+      }
+    })();
+  },
+
+  // Clears all timers
+  clearTimers: function () {
+    for (let i = 0; i < window.GOVUK.sessionDialog.timers.length; i++) {
+      clearInterval(window.GOVUK.sessionDialog.timers[i]);
+    }
+  },
+
+  refreshSession: function () {
+    $.get('');
+    window.GOVUK.sessionDialog.timeSessionRefreshed = new Date();
+    window.GOVUK.sessionDialog.controller();
+  },
+
+  redirect: function () {
+    window.location = window.GOVUK.sessionDialog.timeoutRedirectUrl;
+  },
+
+  // JS doesn't allow resetting timers globally so timers need
+  // to be retained for resetting.
+  addTimer: function (f, seconds) {
+    window.GOVUK.sessionDialog.timers.push(setInterval(f, seconds * 1000));
+  },
+
+  secondsSinceRefresh: function () {
+    return Math.round(Math.abs((window.GOVUK.sessionDialog.timeSessionRefreshed - new Date()) / 1000));
+  },
+
+  secondsUntilSessionTimeout: function () {
+    return window.GOVUK.sessionDialog.secondsSessionTimeout - window.GOVUK.sessionDialog.secondsSinceRefresh();
+  },
+
+  secondsUntilTimeoutWarning: function () {
+    return window.GOVUK.sessionDialog.secondsUntilSessionTimeout() - window.GOVUK.sessionDialog.secondsTimeoutWarning;
+  },
+
+  // countdown controller logic
+  controller: function () {
+    window.GOVUK.sessionDialog.clearTimers();
+
+    const secondsUntilSessionTimeout = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+
+    if (secondsUntilSessionTimeout <= 0) {
+      // timed out - redirect
+      window.GOVUK.sessionDialog.redirect();
+    } else if (secondsUntilSessionTimeout <= window.GOVUK.sessionDialog.secondsTimeoutWarning) {
+      // timeout warning - show countdown and schedule redirect
+      window.GOVUK.sessionDialog.openDialog();
+      window.GOVUK.sessionDialog.startCountdown();
+      window.GOVUK.sessionDialog.addTimer(window.GOVUK.sessionDialog.controller, window.GOVUK.sessionDialog.secondsUntilSessionTimeout());
+    } else {
+      // wait for warning
+      window.GOVUK.sessionDialog.addTimer(window.GOVUK.sessionDialog.controller, window.GOVUK.sessionDialog.secondsUntilTimeoutWarning());
+    }
+  },
+
+  init: function (options) {
+    $.extend(window.GOVUK.sessionDialog, options);
+    if (window.GOVUK.sessionDialog.el && window.GOVUK.sessionDialog.isConfigured()) {
+      // Native dialog is not supported by some browsers so use polyfill
+      if (typeof HTMLDialogElement !== 'function') {
+        try {
+          window.dialogPolyfill.registerDialog(window.GOVUK.sessionDialog.el);
+          return true;
+        } catch (error) {
+          // Doesn't support polyfill (IE8) - display fallback element
+          window.GOVUK.sessionDialog.$fallBackElement.classList.add('govuk-!-display-block');
+          return false;
+        }
+      }
+      window.GOVUK.sessionDialog.bindUIElements();
+      window.GOVUK.sessionDialog.controller();
+      return true;
+    }
+    return false;
+  }
+};
+window.GOVUK.sessionDialog.init();

package/package/frontend/themes/gov-uk/client-js/skip-to-main.js

@@ -0,0 +1,19 @@
+const skipToMain = function () {
+  const skipToMainLink = document.getElementById('skip-to-main');
+  const firstControlId = skipToMainLink.hash.split('#')[1] ? skipToMainLink.hash.split('#')[1] : 'main-content';
+  if(firstControlId === 'main-content') {
+    skipToMainLink.setAttribute('href', '#main-content');
+  }
+  if(firstControlId) {
+    // eslint-disable-next-line no-unused-vars
+    skipToMainLink.onclick = function (e) {
+      // here timeout added just to make this functionality asynchronous
+      // to focus on form as well as non form contents
+      setTimeout(() => {
+        const firstControl = document.getElementById(firstControlId);
+        firstControl.focus();
+      }, 10);
+    };
+  }
+};
+skipToMain();

package/package/frontend/themes/gov-uk/index.js

@@ -0,0 +1,9 @@
+const template = require('../../govuk-template');
+const path = require('path');
+
+const partials = require('../../template-partials');
+
+module.exports = options => template(options);
+
+module.exports.views = [path.resolve(__dirname, './views'), partials.views];
+module.exports.translations = partials.resources();

package/package/frontend/themes/gov-uk/styles/_base.scss

@@ -0,0 +1,17 @@
+html {
+    background: $grey-3;
+}
+body {
+    background: $white;
+}
+.main-content {
+    img {
+        max-width: 100%;
+    }
+    .svg {
+        width: 100%;
+    }
+}
+.hmpo {
+    white-space: nowrap;
+}

package/package/frontend/themes/gov-uk/styles/_check_your_answers.scss

@@ -0,0 +1,155 @@
+
+.phase-banner {
+  @include phase-banner(beta);
+}
+
+.govuk-table {
+    margin-bottom: 30px;
+}
+
+.table-details {
+  width: 100%;
+  margin-bottom: 3em;
+
+  tbody {
+    tr.spacer {
+      height: 3em;
+    }
+
+    td:nth-child(1) {
+      width: 40%;
+    }
+    td:nth-child(2) {
+      width: 60%;
+    }
+    td:nth-child(3) {
+      text-align: right;
+      padding-right: 0;
+    }
+  }
+
+  .button {
+    margin: 0;
+    background: #dde0e1;
+    color: #000;
+  }
+}
+
+.form-textarea--revealed {
+  @media (max-width: 40.0525em) {
+    width: 100%;
+  }
+  @media (min-width: 40.0625em){
+    width: 95%;
+  }
+}
+
+button.govuk-link {
+    background: none!important;
+    border: none;
+    padding: 0!important;
+    font-size: arial, sans-serif;
+    /* color: #069; */
+    text-decoration: underline;
+    cursor: pointer;
+    display: block;
+    margin-bottom: 1em;
+    color: #1d70b8;
+    font-size: 1em;
+}
+
+.govuk-font-weight-bold {
+  font-weight: 700!important;
+}
+
+.govuk-panel--confirmation {
+    color: #ffffff;
+    background: #00703c;
+}
+
+.govuk-panel {
+    font-family: "GDS Transport", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    margin-bottom: 15px;
+    padding: 35px;
+    border: 5px solid transparent;
+    text-align: center;
+    @media (max-width: 40.0525em) {
+        padding: 25px;
+    }
+    @media (min-width: 40.0625em){
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579;
+    }
+}
+
+.alert-complete {
+  @media (min-width: 40em) {
+    margin-left: 28.33%;
+    margin-right: -28.33%;
+  }
+}
+
+.action-col {
+    text-align: right;
+    vertical-align: top
+}
+
+.data-col {
+    min-width: 150px;
+    width: 300px;
+}
+
+details {
+    margin-top: 34px;
+}
+
+span.form-hint {
+  display: block;
+  padding-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.govuk-details__text {
+    padding: 15px;
+    padding-left: 20px;
+    border-left: 5px solid #b1b4b6;
+}
+
+.error-summary ul li a { color: #B00E1F; }
+
+// Check your answers page styles
+.confirm-label {
+  font-weight: bold;
+  width: 40%;
+}
+
+.confirm-value {
+  width: 60%;
+  word-break: break-word;
+}
+
+.confirm-row {
+  display: table-row;
+  > * {
+    border-bottom: 1px solid $grey-2;
+    display: table-cell;
+  }
+  .confirm-label, .confirm-value {
+    padding: 10px 20px 10px 0;
+  }
+}
+
+dl {
+  margin-bottom: 40px;
+  @media (min-width: 641px) {
+    margin-bottom: 60px;
+  }
+}

package/package/frontend/themes/gov-uk/styles/_cookie-banner.scss

@@ -0,0 +1,111 @@
+#global-cookie-message {
+  background: $panel-colour;
+  padding: 0;
+  .js-enabled {
+    display: none;
+  }
+}
+
+#cookie-banner {
+  margin: 0 15px;
+  p {
+    margin: 0;
+  }
+  .column-two-thirds {
+    padding: 0;
+  }
+  .heading-medium {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 1.2;
+    margin: 0.5em 0;
+  }
+  #cookie-banner-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 15px 0;
+    button {
+      flex-grow: 1;
+      margin: 0 15px 15px 0;
+    }
+  }
+  @media (min-width: 641px) {
+    margin: 0 30px;
+    .heading-medium {
+      font-size: 24px;
+      line-height: 1.25;
+      margin: 0.83333em 0;
+    }
+    #cookie-banner-actions {
+      .button {
+        margin: 0 15px 0 0;
+      }
+    }
+  }
+  @media (min-width: 1020px) {
+    margin: 0 auto;
+  }
+}
+
+#cookie-banner-submitted {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  button {
+    margin: 0.5em 0;
+    height: fit-content;
+  }
+}
+
+// the following are additional hof specific govuk cookie banner styling
+.govuk-banner--success {
+  border-color: #00703c;
+  color: #00703c;
+}
+
+.govuk-banner {
+  border: 5px solid #1d70b8;
+  font-size: 0;
+  margin-bottom: 30px;
+  padding: 10px;
+}
+
+.govuk-banner__icon{
+  display: inline-block;
+}
+
+.govuk-banner__message {
+  font-family: "GDS Transport", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  display: block;
+  overflow: hidden;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.govuk-banner__assistive {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  }
+
+.cookie-table-holder > table > tbody > tr > td:first-child{
+  font-weight:bold;
+}
+
+.js-enabled #global-cookie-message {
+  display: none;
+}

package/package/frontend/themes/gov-uk/styles/_cookie-settings.scss

@@ -0,0 +1,33 @@
+#cookie-settings {
+  .js-enabled {
+    display: none;
+  }
+}
+
+#cookie-notification {
+  border: 4px solid $govuk-blue;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  padding: 15px 10px;
+  display: none;
+  .heading-medium {
+    margin-top: 0;
+  }
+  p {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+  @media (min-width: 641px) {
+    border: 5px solid $govuk-blue;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    padding: 20px 15px 15px;
+    p {
+      font-size: 19px;
+    }
+  }
+}
+
+#cookie-notification:focus {
+  outline: 3px solid #ffbf47;
+}