govuk_tech_docs 3.4.5 → 4.0.0

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.mjs

@@ -0,0 +1,226 @@
+import { mergeConfigs } from '../../common/index.mjs';
+import { normaliseDataset } from '../../common/normalise-dataset.mjs';
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+import { I18n } from '../../i18n.mjs';
+
+/**
+ * Exit this page component
+ *
+ * @preserve
+ */
+class ExitThisPage extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element that wraps the Exit This Page button
+   * @param {ExitThisPageConfig} [config] - Exit This Page config
+   */
+  constructor($root, config = {}) {
+    super($root);
+    this.config = void 0;
+    this.i18n = void 0;
+    this.$button = void 0;
+    this.$skiplinkButton = null;
+    this.$updateSpan = null;
+    this.$indicatorContainer = null;
+    this.$overlay = null;
+    this.keypressCounter = 0;
+    this.lastKeyWasModified = false;
+    this.timeoutTime = 5000;
+    this.keypressTimeoutId = null;
+    this.timeoutMessageId = null;
+    const $button = this.$root.querySelector('.govuk-exit-this-page__button');
+    if (!($button instanceof HTMLAnchorElement)) {
+      throw new ElementError({
+        component: ExitThisPage,
+        element: $button,
+        expectedType: 'HTMLAnchorElement',
+        identifier: 'Button (`.govuk-exit-this-page__button`)'
+      });
+    }
+    this.config = mergeConfigs(ExitThisPage.defaults, config, normaliseDataset(ExitThisPage, this.$root.dataset));
+    this.i18n = new I18n(this.config.i18n);
+    this.$button = $button;
+    const $skiplinkButton = document.querySelector('.govuk-js-exit-this-page-skiplink');
+    if ($skiplinkButton instanceof HTMLAnchorElement) {
+      this.$skiplinkButton = $skiplinkButton;
+    }
+    this.buildIndicator();
+    this.initUpdateSpan();
+    this.initButtonClickHandler();
+    if (!('govukFrontendExitThisPageKeypress' in document.body.dataset)) {
+      document.addEventListener('keyup', this.handleKeypress.bind(this), true);
+      document.body.dataset.govukFrontendExitThisPageKeypress = 'true';
+    }
+    window.addEventListener('pageshow', this.resetPage.bind(this));
+  }
+  initUpdateSpan() {
+    this.$updateSpan = document.createElement('span');
+    this.$updateSpan.setAttribute('role', 'status');
+    this.$updateSpan.className = 'govuk-visually-hidden';
+    this.$root.appendChild(this.$updateSpan);
+  }
+  initButtonClickHandler() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+    if (this.$skiplinkButton) {
+      this.$skiplinkButton.addEventListener('click', this.handleClick.bind(this));
+    }
+  }
+  buildIndicator() {
+    this.$indicatorContainer = document.createElement('div');
+    this.$indicatorContainer.className = 'govuk-exit-this-page__indicator';
+    this.$indicatorContainer.setAttribute('aria-hidden', 'true');
+    for (let i = 0; i < 3; i++) {
+      const $indicator = document.createElement('div');
+      $indicator.className = 'govuk-exit-this-page__indicator-light';
+      this.$indicatorContainer.appendChild($indicator);
+    }
+    this.$button.appendChild(this.$indicatorContainer);
+  }
+  updateIndicator() {
+    if (!this.$indicatorContainer) {
+      return;
+    }
+    this.$indicatorContainer.classList.toggle('govuk-exit-this-page__indicator--visible', this.keypressCounter > 0);
+    const $indicators = this.$indicatorContainer.querySelectorAll('.govuk-exit-this-page__indicator-light');
+    $indicators.forEach(($indicator, index) => {
+      $indicator.classList.toggle('govuk-exit-this-page__indicator-light--on', index < this.keypressCounter);
+    });
+  }
+  exitPage() {
+    if (!this.$updateSpan) {
+      return;
+    }
+    this.$updateSpan.textContent = '';
+    document.body.classList.add('govuk-exit-this-page-hide-content');
+    this.$overlay = document.createElement('div');
+    this.$overlay.className = 'govuk-exit-this-page-overlay';
+    this.$overlay.setAttribute('role', 'alert');
+    document.body.appendChild(this.$overlay);
+    this.$overlay.textContent = this.i18n.t('activated');
+    window.location.href = this.$button.href;
+  }
+  handleClick(event) {
+    event.preventDefault();
+    this.exitPage();
+  }
+  handleKeypress(event) {
+    if (!this.$updateSpan) {
+      return;
+    }
+    if (event.key === 'Shift' && !this.lastKeyWasModified) {
+      this.keypressCounter += 1;
+      this.updateIndicator();
+      if (this.timeoutMessageId) {
+        window.clearTimeout(this.timeoutMessageId);
+        this.timeoutMessageId = null;
+      }
+      if (this.keypressCounter >= 3) {
+        this.keypressCounter = 0;
+        if (this.keypressTimeoutId) {
+          window.clearTimeout(this.keypressTimeoutId);
+          this.keypressTimeoutId = null;
+        }
+        this.exitPage();
+      } else {
+        if (this.keypressCounter === 1) {
+          this.$updateSpan.textContent = this.i18n.t('pressTwoMoreTimes');
+        } else {
+          this.$updateSpan.textContent = this.i18n.t('pressOneMoreTime');
+        }
+      }
+      this.setKeypressTimer();
+    } else if (this.keypressTimeoutId) {
+      this.resetKeypressTimer();
+    }
+    this.lastKeyWasModified = event.shiftKey;
+  }
+  setKeypressTimer() {
+    if (this.keypressTimeoutId) {
+      window.clearTimeout(this.keypressTimeoutId);
+    }
+    this.keypressTimeoutId = window.setTimeout(this.resetKeypressTimer.bind(this), this.timeoutTime);
+  }
+  resetKeypressTimer() {
+    if (!this.$updateSpan) {
+      return;
+    }
+    if (this.keypressTimeoutId) {
+      window.clearTimeout(this.keypressTimeoutId);
+      this.keypressTimeoutId = null;
+    }
+    const $updateSpan = this.$updateSpan;
+    this.keypressCounter = 0;
+    $updateSpan.textContent = this.i18n.t('timedOut');
+    this.timeoutMessageId = window.setTimeout(() => {
+      $updateSpan.textContent = '';
+    }, this.timeoutTime);
+    this.updateIndicator();
+  }
+  resetPage() {
+    document.body.classList.remove('govuk-exit-this-page-hide-content');
+    if (this.$overlay) {
+      this.$overlay.remove();
+      this.$overlay = null;
+    }
+    if (this.$updateSpan) {
+      this.$updateSpan.setAttribute('role', 'status');
+      this.$updateSpan.textContent = '';
+    }
+    this.updateIndicator();
+    if (this.keypressTimeoutId) {
+      window.clearTimeout(this.keypressTimeoutId);
+    }
+    if (this.timeoutMessageId) {
+      window.clearTimeout(this.timeoutMessageId);
+    }
+  }
+}
+
+/**
+ * Exit this Page config
+ *
+ * @see {@link ExitThisPage.defaults}
+ * @typedef {object} ExitThisPageConfig
+ * @property {ExitThisPageTranslations} [i18n=ExitThisPage.defaults.i18n] - Exit this page translations
+ */
+
+/**
+ * Exit this Page translations
+ *
+ * @see {@link ExitThisPage.defaults.i18n}
+ * @typedef {object} ExitThisPageTranslations
+ *
+ * Messages used by the component programatically inserted text, including
+ * overlay text and screen reader announcements.
+ * @property {string} [activated] - Screen reader announcement for when EtP
+ *   keypress functionality has been successfully activated.
+ * @property {string} [timedOut] - Screen reader announcement for when the EtP
+ *   keypress functionality has timed out.
+ * @property {string} [pressTwoMoreTimes] - Screen reader announcement informing
+ *   the user they must press the activation key two more times.
+ * @property {string} [pressOneMoreTime] - Screen reader announcement informing
+ *   the user they must press the activation key one more time.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ */
+ExitThisPage.moduleName = 'govuk-exit-this-page';
+ExitThisPage.defaults = Object.freeze({
+  i18n: {
+    activated: 'Loading.',
+    timedOut: 'Exit this page expired.',
+    pressTwoMoreTimes: 'Shift, press 2 more times to exit.',
+    pressOneMoreTime: 'Shift, press 1 more time to exit.'
+  }
+});
+ExitThisPage.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: 'object'
+    }
+  }
+});
+
+export { ExitThisPage };
+//# sourceMappingURL=exit-this-page.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_fieldset.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_fieldset.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/fieldset/_index.scss

@@ -7,14 +7,15 @@
     @include govuk-clearfix;
   }
 
-  // Fix for Firefox < 53
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
+  // Fix for Firefox < 53 (https://bugzil.la/504622)
+  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
   @supports not (caret-color: auto) {
     .govuk-fieldset,
-    x:-moz-any-link { // stylelint-disable-line selector-type-no-unknown
+    x:-moz-any-link {
       display: table-cell;
     }
   }
+  // stylelint-enable selector-type-no-unknown
 
   .govuk-fieldset__legend {
     @include govuk-font($size: 19);
@@ -24,41 +25,45 @@
     // 1. IE9-11 & Edge 12-13
     // 2. IE8-11
     box-sizing: border-box; // 1
-    display: table;         // 2
-    max-width: 100%;        // 1
+    display: table; // 2
+    max-width: 100%; // 1
     margin-bottom: govuk-spacing(2);
     padding: 0;
 
-    white-space: normal;    // 1
+    white-space: normal; // 1
   }
 
   // Modifiers that make legends look more like their equivalent headings
+  .govuk-fieldset__legend--xl,
+  .govuk-fieldset__legend--l,
+  .govuk-fieldset__legend--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-fieldset__legend--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 48);
   }
 
   .govuk-fieldset__legend--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 36);
   }
 
   .govuk-fieldset__legend--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 24);
   }
 
   .govuk-fieldset__legend--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from
-  // the legend. Effectively we want to be able to treat the heading as if it is
-  // not there.
+  // the legend. Effectively treat the heading as if it is not there.
   .govuk-fieldset__heading {
     margin: 0;
     font-size: inherit;
     font-weight: inherit;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_file-upload.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_file-upload.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/file-upload/_index.scss

@@ -12,11 +12,10 @@
     margin-left: -$component-padding;
     padding: $component-padding;
 
-    // The default file upload button in Safari does not
-    // support setting a custom font-size. Set `-webkit-appearance`
-    // to `button` to drop out of the native appearance so the
-    // font-size is set to 19px
-    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    // The default file upload button in Safari does not support setting a
+    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the
+    // native appearance so the font-size is set to 19px
+    // https://webkit.org/b/224746
     &::-webkit-file-upload-button {
       -webkit-appearance: button;
       color: inherit;
@@ -26,18 +25,13 @@
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
-      // (which changes element size) and since `outline` is already used for the
-      // yellow focus state.
+      // (which changes element size) and since `outline` is already used for
+      // the yellow focus state.
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
-
-      @include _govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so add an actual border
-        border: 4px solid $govuk-input-border-colour;
-      }
     }
 
-    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
-    // so that component receives focus in Firefox.
+    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
+    // receives focus in Firefox.
     // This can't be set together with `:focus` as all versions of IE fail
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
@@ -48,8 +42,10 @@
     }
 
     &:disabled {
-      opacity: .5;
+      opacity: 0.5;
       cursor: not-allowed;
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/footer/_footer.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_footer.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/footer/_index.scss

@@ -1,62 +1,25 @@
 @include govuk-exports("govuk/component/footer") {
-
   $govuk-footer-background: $govuk-canvas-background-colour;
   $govuk-footer-border: $govuk-border-colour;
-  // This variable can be removed entirely once the legacy palette goes away,
-  // as it'll just be the same as $govuk-footer-border.
-  $govuk-footer-border-top: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
-
-  @if $govuk-use-legacy-palette {
-    $govuk-footer-border-top: #a1acb2;
-    $govuk-footer-border: govuk-colour("grey-2");
-    $govuk-footer-text: #454a4c;
-    $govuk-footer-link-hover-colour: #171819;
-  }
 
-  // Based on the govuk-crest-2x.png image dimensions.
-  $govuk-footer-crest-image-width-2x: 250px;
-  $govuk-footer-crest-image-height-2x: 204px;
-  // Half the 2x image so that it fits the regular 1x size.
-  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
-  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+  // Royal Arms image dimensions
+  $govuk-footer-crest-image-width: 125px;
+  $govuk-footer-crest-image-height: 102px;
 
   .govuk-footer {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border-top;
+    border-top: 1px solid $govuk-footer-border;
     color: $govuk-footer-text;
     background: $govuk-footer-background;
   }
 
   .govuk-footer__link {
     @include govuk-link-common;
-
-    @if $govuk-use-legacy-palette {
-      &:link,
-      &:visited {
-        color: $govuk-footer-text;
-      }
-
-      &:hover,
-      &:active {
-        color: $govuk-footer-link-hover-colour;
-      }
-    } @else {
-      @include govuk-link-style-text;
-    }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include _govuk-compatibility(govuk_template) {
-      &:link:focus {
-        @include govuk-text-colour;
-      }
-    }
+    @include govuk-link-style-text;
   }
 
   .govuk-footer__section-break {
@@ -67,16 +30,12 @@
   }
 
   .govuk-footer__meta {
-    display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
-    -ms-flex-align: end;
-        align-items: flex-end; // Support: Flexbox
-    -ms-flex-pack: center;
-        justify-content: center; // Support: Flexbox
+    flex-wrap: wrap; // Support: Flexbox
+    align-items: flex-end; // Support: Flexbox
+    justify-content: center; // Support: Flexbox
   }
 
   .govuk-footer__meta-item {
@@ -86,18 +45,16 @@
   }
 
   .govuk-footer__meta-item--grow {
-    -ms-flex: 1;
-        flex: 1; // Support: Flexbox
-    @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
+    flex: 1; // Support: Flexbox
+    @include govuk-media-query($until: tablet) {
+      flex-basis: 320px; // Support: Flexbox
     }
   }
 
   .govuk-footer__licence-logo {
     display: inline-block;
     margin-right: govuk-spacing(2);
-    @include govuk-media-query ($until: desktop) {
+    @include govuk-media-query($until: desktop) {
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
@@ -107,17 +64,18 @@
   }
 
   .govuk-footer__licence-description {
+    // This makes the license description reflow under the logo when space gets too narrow
     display: inline-block;
+    // This prevents the description from having orphans when space is narrow enough
+    // and makes the text reflow more nicely
+    text-wrap: balance;
   }
 
   .govuk-footer__copyright-logo {
     display: inline-block;
     min-width: $govuk-footer-crest-image-width;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
-    background-image: govuk-image-url("govuk-crest.png");
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("govuk-crest-2x.png");
-    }
+    background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
@@ -145,7 +103,7 @@
     margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(4);
 
-    @include govuk-media-query ($until: tablet) {
+    @include govuk-media-query($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
     border-bottom: 1px solid $govuk-footer-border;
@@ -167,19 +125,16 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    -webkit-column-gap: $govuk-gutter;
-            column-gap: $govuk-gutter; // Support: Columns
+    column-gap: $govuk-gutter; // Support: Columns
   }
 
-  @include govuk-media-query ($from: desktop) {
+  @include govuk-media-query($from: desktop) {
     .govuk-footer__list--columns-2 {
-      -webkit-column-count: 2;
-              column-count: 2; // Support: Columns
+      column-count: 2; // Support: Columns
     }
 
     .govuk-footer__list--columns-3 {
-      -webkit-column-count: 3;
-              column-count: 3; // Support: Columns
+      column-count: 3; // Support: Columns
     }
   }
 
@@ -191,3 +146,5 @@
     margin-bottom: 0;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/header/_header.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_header.scss.map */