hof 22.8.4 → 22.9.0-beta

package/package/frontend/toolkit/assets/javascript/vendor/details.polyfill.js

@@ -0,0 +1,189 @@
+/* eslint-disable max-len, no-var, no-cond-assign, no-param-reassign, vars-on-top */
+// <details> polyfill
+// http://caniuse.com/#feat=details
+
+// FF Support for HTML5's <details> and <summary>
+// https://bugzilla.mozilla.org/show_bug.cgi?id=591737
+
+// http://www.sitepoint.com/fixing-the-details-element/
+
+(function () {
+  'use strict';
+
+  var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean';
+
+  // Add event varruct for modern browsers or IE
+  // which fires the callback with a pre-converted target reference
+  function addEvent(node, type, callback) {
+    if (node.addEventListener) {
+      node.addEventListener(type, function (e) {
+        callback(e, e.target);
+      }, false);
+    } else if (node.attachEvent) {
+      node.attachEvent('on' + type, function (e) {
+        callback(e, e.srcElement);
+      });
+    }
+  }
+
+  // Handle cross-modal click events
+  function addClickEvent(node, callback) {
+    // Prevent space(32) from scrolling the page
+    addEvent(node, 'keypress', function (e, target) {
+      if (target.nodeName === 'SUMMARY') {
+        if (e.keyCode === 32) {
+          if (e.preventDefault) {
+            e.preventDefault();
+          } else {
+            e.returnValue = false;
+          }
+        }
+      }
+    });
+    // When the key comes up - check if it is enter(13) or space(32)
+    addEvent(node, 'keyup', function (e, target) {
+      if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target); }
+    });
+    addEvent(node, 'mouseup', function (e, target) {
+      callback(e, target);
+    });
+  }
+
+  // Get the nearest ancestor element of a node that matches a given tag name
+  function getAncestor(node, match) {
+    do {
+      if (!node || node.nodeName.toLowerCase() === match) {
+        break;
+      }
+    } while (node = node.parentNode);
+
+    return node;
+  }
+
+  // Create a started flag so we can prevent the initialisation
+  // function firing from both DOMContentLoaded and window.onload
+  var started = false;
+
+  // Initialisation function
+  function addDetailsPolyfill(list) {
+    // If this has already happened, just return
+    // else set the flag so it doesn't happen again
+    if (started) {
+      return;
+    }
+    started = true;
+
+    // Get the collection of details elements, but if that's empty
+    // then we don't need to bother with the rest of the scripting
+    if ((list = document.getElementsByTagName('details')).length === 0) {
+      return;
+    }
+
+    // else iterate through them to apply their initial state
+    var n = list.length; var i = 0;
+    for (i; i < n; i++) {
+      var details = list[i];
+
+      // Save shortcuts to the inner summary and content elements
+      details.__summary = details.getElementsByTagName('summary').item(0);
+      details.__content = details.getElementsByTagName('div').item(0);
+
+      // If the content doesn't have an ID, assign it one now
+      // which we'll need for the summary's aria-controls assignment
+      if (!details.__content.id) {
+        details.__content.id = 'details-content-' + i;
+      }
+
+      // Add ARIA role="group" to details
+      details.setAttribute('role', 'group');
+
+      // Add role=button to summary
+      details.__summary.setAttribute('role', 'button');
+
+      // Add aria-controls
+      details.__summary.setAttribute('aria-controls', details.__content.id);
+
+      // Set tabIndex so the summary is keyboard accessible for non-native elements
+      // http://www.saliences.com/browserBugs/tabIndex.html
+      if (!NATIVE_DETAILS) {
+        details.__summary.tabIndex = 0;
+      }
+
+      // Detect initial open state
+      var openAttr = details.getAttribute('open') !== null;
+      if (openAttr === true) {
+        details.__summary.setAttribute('aria-expanded', 'true');
+        details.__content.setAttribute('aria-hidden', 'false');
+      } else {
+        details.__summary.setAttribute('aria-expanded', 'false');
+        details.__content.setAttribute('aria-hidden', 'true');
+        if (!NATIVE_DETAILS) {
+          details.__content.style.display = 'none';
+        }
+      }
+
+      // Create a circular reference from the summary back to its
+      // parent details element, for convenience in the click handler
+      details.__summary.__details = details;
+
+      // If this is not a native implementation, create an arrow
+      // inside the summary
+      if (!NATIVE_DETAILS) {
+        var twisty = document.createElement('i');
+
+        if (openAttr === true) {
+          twisty.className = 'arrow arrow-open';
+          twisty.appendChild(document.createTextNode('\u25bc'));
+        } else {
+          twisty.className = 'arrow arrow-closed';
+          twisty.appendChild(document.createTextNode('\u25ba'));
+        }
+
+        details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
+        details.__summary.__twisty.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    // Define a statechange function that updates aria-expanded and style.display
+    // Also update the arrow position
+    function statechange(summary) {
+      var expanded = summary.__details.__summary.getAttribute('aria-expanded') === 'true';
+      var hidden = summary.__details.__content.getAttribute('aria-hidden') === 'true';
+
+      summary.__details.__summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
+      summary.__details.__content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
+
+      if (!NATIVE_DETAILS) {
+        summary.__details.__content.style.display = (expanded ? 'none' : '');
+
+        var hasOpenAttr = summary.__details.getAttribute('open') !== null;
+        if (!hasOpenAttr) {
+          summary.__details.setAttribute('open', 'open');
+        } else {
+          summary.__details.removeAttribute('open');
+        }
+      }
+
+      if (summary.__twisty) {
+        summary.__twisty.firstChild.nodeValue = (expanded ? '\u25ba' : '\u25bc');
+        summary.__twisty.setAttribute('class', (expanded ? 'arrow arrow-closed' : 'arrow arrow-open'));
+      }
+
+      return true;
+    }
+
+    // Bind a click event to handle summary elements
+    addClickEvent(document, function (e, summary) {
+      if (!(summary = getAncestor(summary, 'summary'))) {
+        return true;
+      }
+      return statechange(summary);
+    });
+  }
+
+  // Bind two load events for modern and older browsers
+  // If the first one fires it will set a flag to block the second one
+  // but if it's not supported then the second one will fire
+  addEvent(document, 'DOMContentLoaded', addDetailsPolyfill);
+  addEvent(window, 'load', addDetailsPolyfill);
+})();

package/package/frontend/toolkit/assets/javascript/vendor/indexof.polyfill.js

@@ -0,0 +1,39 @@
+/* eslint-disable max-len, no-var, no-cond-assign, no-param-reassign, vars-on-top, no-extend-native */
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function (searchElement, fromIndex) {
+    var k;
+
+    if (this === null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var O = Object(this);
+
+    var len = O.length >>> 0;
+
+    if (len === 0) {
+      return -1;
+    }
+
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    if (n >= len) {
+      return -1;
+    }
+
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    while (k < len) {
+      if (k in O && O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}

package/package/frontend/toolkit/assets/javascript/vendor/safari-cachebuster.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-var */
+window.onpageshow = function (event) {
+  if (event.persisted) {
+    window.location.reload();
+  }
+};

package/package/frontend/toolkit/assets/stylesheets/_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/toolkit/assets/stylesheets/_helpers.scss

@@ -0,0 +1,5 @@
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}

package/package/frontend/toolkit/assets/stylesheets/_layout.scss

@@ -0,0 +1,118 @@
+#global-header-bar {
+    @extend %site-width-container;
+    .inner-block {
+        padding: 0;
+    }
+}
+
+.main {
+    @extend %site-width-container;
+    padding-bottom: $gutter;
+    @include media(desktop) {
+        padding-bottom: $gutter*3;
+    }
+}
+
+.grid-row {
+    @extend %grid-row;
+    position: relative;
+}
+
+.column-full {
+    @include grid-column(1);
+}
+
+.column-one-third {
+    @include grid-column(1/3, $full-width: desktop);
+}
+
+.column-half {
+    @include grid-column(1/2, $full-width: desktop);
+}
+
+.column-two-thirds {
+    @include grid-column(2/3, $full-width: desktop);
+}
+
+.column-right {
+    @include media(desktop) {
+        float: right;
+    }
+}
+
+header {
+    @extend %contain-floats;
+}
+
+.sidebar {
+    border-top: 10px solid $mainstream-brand;
+}
+
+// layout for ie < 9
+$ie8-column-one-third: ( $site-width + $gutter ) / 3;
+$ie8-column-half: ( $site-width + $gutter ) / 2;
+$ie8-column-two-thirds: $ie8-column-one-third * 2;
+
+@mixin ie8-grid-column {
+    float: left;
+    padding: 0 $gutter-half;
+    box-sizing: content-box;
+}
+@mixin ie8-column-two-thirds {
+    @include ie8-grid-column;
+    width: $ie8-column-two-thirds - $gutter;
+}
+@mixin ie8-column-half {
+    @include ie8-grid-column;
+    width: $ie8-column-half - $gutter;
+}
+@mixin ie8-column-one-third {
+    @include ie8-grid-column;
+    width: $ie8-column-one-third - $gutter;
+}
+
+.lte-ie8 {
+    #global-header-bar, #global-breadcrumb {
+        width: $site-width;
+        max-width: inherit;
+        margin: 0 auto;
+        .inner-block {
+            margin: 0;
+            padding: 0;
+        }
+    }
+    #content {
+        width: $site-width;
+        max-width: inherit;
+        margin: 0 auto;
+        padding-bottom: 3*$gutter;
+    }
+    .grid-row {
+        width: $site-width + $gutter;
+    }
+    .column-two-thirds {
+        @include ie8-column-two-thirds;
+        .grid-row {
+            width: $ie8-column-two-thirds;
+        }
+        .column-two-thirds {
+            width: $ie8-column-two-thirds / 3 * 2 - $gutter;
+        }
+        .column-one-third {
+            width: $ie8-column-two-thirds / 3 - $gutter;
+        }
+    }
+    .column-half {
+        @include ie8-column-half;
+    }
+    .column-one-third {
+        @include ie8-column-one-third;
+    }
+    .column-right {
+        float: right;
+    }
+    .phase-banner, #back {
+        width: $site-width;
+        margin: 0 auto;
+    }
+}

package/package/frontend/toolkit/assets/stylesheets/_typography.scss

@@ -0,0 +1,27 @@
+.bold {
+    font-weight: bold;
+}
+.uppercase {
+    text-transform: uppercase;
+}
+
+h1 {
+    @extend .heading-large;
+}
+h2 {
+    @extend .heading-medium;
+}
+h3 {
+    @extend .heading-small;
+}
+strong {
+    font-weight: bold;
+}
+
+.new-window {
+    padding-right: 17px;
+    background: file-url("passports/new-window-link.png") right center no-repeat;
+    &:hover {
+        background-image: file-url("passports/new-window-link-blue.png");
+    }
+}

package/package/frontend/toolkit/assets/stylesheets/_variables.scss

@@ -0,0 +1,11 @@
+// layout
+$header-border-width: 10px;
+$header-border: $header-border-width solid $govuk-blue;
+
+// forms
+$focus-border-width: 3px;
+$focus-outline: $focus-border-width solid $yellow;
+
+// validation
+$validation-bdr-size: 3px;
+$validation-bdr-size-lg: $validation-bdr-size + 1;

package/package/frontend/toolkit/assets/stylesheets/app.scss

@@ -0,0 +1,30 @@
+// App styles
+
+// govuk_frontend_toolkit
+@import "mixins";
+
+// govuk-elements
+@import "govuk-elements/helpers";
+@import "govuk-elements/reset";
+@import "govuk-elements/elements-typography";
+@import "govuk-elements/forms";
+@import "govuk-elements/buttons";
+@import "govuk-elements/details";
+@import "govuk-elements/lists";
+@import "govuk-elements/panels";
+@import "govuk-elements/tables";
+
+// Custom
+@import "base";
+@import "layout";
+@import "typography";
+
+// Modules
+@import "modules/validation";
+@import "modules/progressive-reveal";
+@import "modules/buttons";
+@import "modules/lists";
+@import "modules/alerts";
+
+// Pages
+@import "modules/confirm-page";

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_buttons.scss

@@ -0,0 +1,47 @@
+// Buttons
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+
+.button {
+  @include button ($button-colour);
+  margin: 0 $gutter-half $gutter-half 0;
+  padding: em(10) em(15) em(5) em(15);
+  vertical-align: top;
+}
+
+// Fix unwanted button padding in Firefox
+.button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button:focus {
+  outline: 3px solid $yellow;
+}
+
+// Disabled buttons
+.button[disabled="disabled"] {
+  background: $button-colour;
+}
+
+.button[disabled="disabled"]:focus {
+  outline: none;
+}
+
+// Start now buttons
+.button-get-started {
+  @include bold-24;
+  background-image: file-url("icons/icon-pointer.png");
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  padding: em(7) em(41) em(4) em(16);
+
+  @include device-pixel-ratio {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+
+  @include ie(6) {
+    background-image: file-url("icons/icon-pointer-2x.png");
+  }
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_details.scss

@@ -0,0 +1,38 @@
+// Details
+// ==========================================================================
+
+details {
+  display: block;
+}
+
+details summary {
+  display: inline-block;
+  color: $govuk-blue;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: em(5);
+}
+
+details summary:hover {
+  color: $link-hover-colour;
+}
+
+details summary:focus {
+  outline: 3px solid $yellow;
+}
+
+// Underline only summary text (not the arrow)
+details .summary {
+  text-decoration: underline;
+}
+
+// Match fallback arrow spacing with -webkit default
+details .arrow {
+  margin-right: 0.35em;
+  font-style: normal;
+}
+
+// Remove top margin from bordered panel
+details .panel-indent {
+  margin-top: 0;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_elements-typography.scss

@@ -0,0 +1,175 @@
+// Typography
+// ==========================================================================
+
+// Increase the base font size to 19px for the main content area
+// Using the core-19 mixin from the govuk_toolkit _typography.scss file
+
+main {
+  @include core-19;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Core font sizes
+.font-xxlarge {
+  @include core-80;
+}
+.font-xlarge {
+  @include core-48;
+}
+.font-large {
+  @include core-36;
+}
+.font-medium {
+  @include core-24;
+}
+.font-small {
+  @include core-19;
+}
+.font-xsmall {
+  @include core-16;
+}
+
+// Bold font sizes
+.bold-xxlarge {
+  @include bold-80();
+}
+.bold-xlarge {
+  @include bold-48();
+}
+.bold-large {
+  @include bold-36();
+}
+.bold-medium {
+  @include bold-24();
+}
+.bold-small {
+  @include bold-19();
+}
+.bold-xsmall {
+  @include bold-16();
+}
+
+// Common heading sizes
+// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
+// Spacing is set in em, using the px to em function in the elements _helpers.scss file
+
+// Headings
+.heading-xlarge {
+  @include bold-48();
+
+  margin-top: em(15, 32);
+  margin-bottom: em(30, 32);
+
+  @include media(tablet) {
+    margin-top: em(30, 48);
+    margin-bottom: em(60, 48);
+  }
+
+  .heading-secondary {
+    @include heading-27();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-large {
+  @include bold-36();
+
+  margin-top: em(25, 24);
+  margin-bottom: em(10, 24);
+
+  @include media(tablet) {
+    margin-top: em(45, 36 );
+    margin-bottom: em(20, 36);
+  }
+
+  .heading-secondary {
+    @include heading-24();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-medium {
+  @include bold-24();
+
+  margin-top: em(25, 20);
+  margin-bottom: em(10, 20);
+
+  @include media(tablet) {
+    margin-top: em(45, 24);
+    margin-bottom: em(20, 24);
+  }
+
+}
+
+.heading-small {
+  @include bold-19();
+
+  margin-top: em(10, 16);
+  margin-bottom: em(5, 16);
+
+  @include media(tablet) {
+    margin-top: em(20, 19);
+  }
+
+}
+
+// Text
+p {
+  margin-top: em(5, 16 );
+  margin-bottom: em(20, 16);
+
+  @include media(tablet) {
+    margin-top: em(5);
+    margin-bottom: em(20);
+  }
+
+}
+
+// Lede, or intro text
+.lede {
+  @include core-24;
+}
+
+// Set a max-width for text blocks
+// Less than 75 characters per line of text
+.text {
+  max-width: 30em;
+}
+
+.text-secondary {
+  color: $secondary-text-colour;
+}
+
+// Link styles
+.link {
+  color: $link-colour;
+  text-decoration: underline;
+}
+.link:visited {
+  color: $link-visited-colour;
+}
+.link:hover {
+  color: $link-hover-colour;
+}
+.link:active {
+  color: $link-colour;
+}
+
+// Code styles
+pre,
+code {
+  font-size: 13px;
+  line-height: 19px;
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 3px 7px;
+}
+
+