govuk_tech_docs 3.4.5 → 4.0.0

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

@@ -1,18 +1,17 @@
 @include govuk-exports("govuk/component/cookie-banner") {
-
   // This needs to be kept in sync with the header component's styles
   $border-bottom-width: govuk-spacing(2);
 
   .govuk-cookie-banner {
     padding-top: govuk-spacing(4);
-    // The component does not set bottom spacing.
-    // The bottom spacing should be created by the items inside the component.
+    // The component does not set bottom spacing. The bottom spacing should be
+    // created by the items inside the component.
 
-    // Visually separate the cookie banner from content underneath
-    // when user changes colours in their browser.
+    // Visually separate the cookie banner from content underneath when user
+    // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: $govuk-canvas-background-colour;
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute
@@ -26,24 +25,29 @@
     margin-bottom: -$border-bottom-width;
 
     &[hidden] {
-      // Support older browsers which don't hide elements with the `hidden` attribute
-      // when the visibility of cookie and replacement messages is toggled.
+      // Support older browsers which don't hide elements with the `hidden`
+      // attribute when the visibility of cookie and replacement messages is
+      // toggled.
       display: none;
     }
 
     &:focus {
-      // Remove the native visible focus indicator when the element is programmatically focused.
+      // Remove the native visible focus indicator when the element is
+      // programmatically focused.
       //
-      // The focused cookie banner is the first element on the page and the last thing the user
-      // interacted with prior to it gaining focus.
-      // We therefore assume that moving focus to it is not going to surprise users, and that giving
-      // it a visible focus indicator could be more confusing than helpful, especially as the
-      // element is not normally keyboard operable.
+      // The focused cookie banner is the first element on the page and the last
+      // thing the user interacted with prior to it gaining focus. We therefore
+      // assume that moving focus to it is not going to surprise users, and that
+      // giving it a visible focus indicator could be more confusing than
+      // helpful, especially as the element is not normally keyboard operable.
       //
-      // We have flagged this in the research section of the guidance as something to monitor.
+      // We have flagged this in the research section of the guidance as
+      // something to monitor.
       //
       // A related discussion: https://github.com/w3c/wcag/issues/1001
       outline: none;
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/date-input/_date-input.scss

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

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

@@ -6,8 +6,7 @@
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {
     @include govuk-clearfix;
-    // font-size: 0 removes whitespace caused by inline-block
-    font-size: 0;
+    font-size: 0; // removes whitespace caused by inline-block
   }
 
   .govuk-date-input__item {
@@ -24,3 +23,5 @@
     margin-bottom: 0;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/details/_details.scss

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

data/node_modules/govuk-frontend/dist/govuk/components/details/_index.scss

@@ -0,0 +1,139 @@
+@include govuk-exports("govuk/component/details") {
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    display: block;
+  }
+
+  .govuk-details[open] .govuk-details__summary {
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-details__summary-text {
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-details__text {
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
+
+  // Hack to target IE8 - IE11 (and REALLY old Firefox)
+  // These browsers don't support the details element, so fall back to looking
+  // like inset text
+  @media screen\0 {
+    .govuk-details {
+      border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    }
+
+    .govuk-details__summary {
+      margin-top: govuk-spacing(3);
+    }
+
+    .govuk-details__summary-text {
+      @include govuk-typography-weight-bold;
+      @include govuk-responsive-margin(4, "bottom");
+      padding-left: govuk-spacing(4);
+    }
+  }
+
+  // We wrap styles for newer browsers in a feature query, which is ignored by
+  // older browsers, which always expand the details element.
+  //
+  // Additionally, -ms-ime-align is only supported by Edge 12 - 18
+  //
+  // This ensures we don't use these styles in browsers which:
+  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
+  //   - do not support ES6 modules or the <details> element (eg, IE8+)
+  @supports not (-ms-ime-align: auto) {
+    .govuk-details__summary {
+      // Absolutely position the marker against this element
+      position: relative;
+
+      // Make the focus outline shrink-wrap the text content of the summary
+      width: -webkit-fit-content;
+      width: fit-content;
+
+      // Allow for absolutely positioned marker and align with disclosed text
+      padding-left: govuk-spacing(4) + $govuk-border-width;
+
+      // Style the summary to look like a link...
+      color: $govuk-link-colour;
+      cursor: pointer;
+
+      &:hover {
+        color: $govuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+      }
+    }
+    // ...but only underline the text, not the arrow
+    .govuk-details__summary-text {
+      @include govuk-link-decoration;
+    }
+
+    .govuk-details__summary:hover .govuk-details__summary-text {
+      @include govuk-link-hover-decoration;
+    }
+
+    // Remove the underline when focussed to avoid duplicate borders
+    .govuk-details__summary:focus .govuk-details__summary-text {
+      text-decoration: none;
+    }
+
+    // Remove the default details marker so we can style our own consistently and
+    // ensure it displays in Firefox (see implementation.md for details)
+    .govuk-details__summary::-webkit-details-marker {
+      display: none;
+    }
+
+    // Append our own open / closed marker using a pseudo-element
+    .govuk-details__summary::before {
+      content: "";
+      position: absolute;
+
+      top: -1px;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
+
+      @include govuk-shape-arrow($direction: right, $base: 14px);
+
+      .govuk-details[open] > & {
+        @include govuk-shape-arrow($direction: down, $base: 14px);
+      }
+    }
+
+    .govuk-details__text {
+      border-left: $govuk-border-width solid $govuk-border-colour;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_error-message.scss

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

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

@@ -10,3 +10,5 @@
     color: $govuk-error-colour;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/_error-summary.scss

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

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

@@ -2,6 +2,7 @@
 
 @include govuk-exports("govuk/component/error-summary") {
   .govuk-error-summary {
+    @include govuk-font($size: 19);
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
@@ -14,24 +15,34 @@
   }
 
   .govuk-error-summary__title {
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-font-size($size: 24);
+    @include govuk-typography-weight-bold;
 
     margin-top: 0;
     @include govuk-responsive-margin(4, "bottom");
   }
 
   .govuk-error-summary__body {
-    @include govuk-font($size: 19);
-
     p {
-      margin-top: 0;
-      @include govuk-responsive-margin(4, "bottom");
+      margin-bottom: 0;
+    }
+
+    > * + * {
+      @include govuk-responsive-margin(4, "top");
+    }
+
+    > :last-child {
+      @include govuk-responsive-margin(1, "bottom");
     }
   }
 
   // Cross-component class - adjusts styling of list component
   .govuk-error-summary__list {
-    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  // Remove the bottom margin from the last list item
+  .govuk-error-summary__list li:last-child {
     margin-bottom: 0;
   }
 
@@ -41,3 +52,5 @@
     @include govuk-link-style-error;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js

@@ -0,0 +1,378 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = {}));
+})(this, (function (exports) { 'use strict';
+
+  function normaliseString(value, property) {
+    const trimmedValue = value ? value.trim() : '';
+    let output;
+    let outputType = property == null ? void 0 : property.type;
+    if (!outputType) {
+      if (['true', 'false'].includes(trimmedValue)) {
+        outputType = 'boolean';
+      }
+      if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
+        outputType = 'number';
+      }
+    }
+    switch (outputType) {
+      case 'boolean':
+        output = trimmedValue === 'true';
+        break;
+      case 'number':
+        output = Number(trimmedValue);
+        break;
+      default:
+        output = value;
+    }
+    return output;
+  }
+
+  /**
+   * @typedef {import('./index.mjs').SchemaProperty} SchemaProperty
+   */
+
+  function mergeConfigs(...configObjects) {
+    const formattedConfigObject = {};
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key];
+        const override = configObject[key];
+        if (isObject(option) && isObject(override)) {
+          formattedConfigObject[key] = mergeConfigs(option, override);
+        } else {
+          formattedConfigObject[key] = override;
+        }
+      }
+    }
+    return formattedConfigObject;
+  }
+  function extractConfigByNamespace(Component, dataset, namespace) {
+    const property = Component.schema.properties[namespace];
+    if ((property == null ? void 0 : property.type) !== 'object') {
+      return;
+    }
+    const newObject = {
+      [namespace]: ({})
+    };
+    for (const [key, value] of Object.entries(dataset)) {
+      let current = newObject;
+      const keyParts = key.split('.');
+      for (const [index, name] of keyParts.entries()) {
+        if (typeof current === 'object') {
+          if (index < keyParts.length - 1) {
+            if (!isObject(current[name])) {
+              current[name] = {};
+            }
+            current = current[name];
+          } else if (key !== namespace) {
+            current[name] = normaliseString(value);
+          }
+        }
+      }
+    }
+    return newObject[namespace];
+  }
+  function getFragmentFromUrl(url) {
+    if (!url.includes('#')) {
+      return undefined;
+    }
+    return url.split('#').pop();
+  }
+  function setFocus($element, options = {}) {
+    var _options$onBeforeFocu;
+    const isFocusable = $element.getAttribute('tabindex');
+    if (!isFocusable) {
+      $element.setAttribute('tabindex', '-1');
+    }
+    function onFocus() {
+      $element.addEventListener('blur', onBlur, {
+        once: true
+      });
+    }
+    function onBlur() {
+      var _options$onBlur;
+      (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
+      if (!isFocusable) {
+        $element.removeAttribute('tabindex');
+      }
+    }
+    $element.addEventListener('focus', onFocus, {
+      once: true
+    });
+    (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
+    $element.focus();
+  }
+  function isInitialised($root, moduleName) {
+    return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+  }
+
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * Some browsers will load and run our JavaScript but GOV.UK Frontend
+   * won't be supported.
+   *
+   * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+   * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+   */
+  function isSupported($scope = document.body) {
+    if (!$scope) {
+      return false;
+    }
+    return $scope.classList.contains('govuk-frontend-supported');
+  }
+  function isArray(option) {
+    return Array.isArray(option);
+  }
+  function isObject(option) {
+    return !!option && typeof option === 'object' && !isArray(option);
+  }
+  function formatErrorMessage(Component, message) {
+    return `${Component.moduleName}: ${message}`;
+  }
+
+  /**
+   * Schema for component config
+   *
+   * @typedef {object} Schema
+   * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+   * @property {SchemaCondition[]} [anyOf] - List of schema conditions
+   */
+
+  /**
+   * Schema property for component config
+   *
+   * @typedef {object} SchemaProperty
+   * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+   */
+
+  /**
+   * Schema condition for component config
+   *
+   * @typedef {object} SchemaCondition
+   * @property {string[]} required - List of required config fields
+   * @property {string} errorMessage - Error message when required config fields not provided
+   */
+  /**
+   * @typedef ComponentWithModuleName
+   * @property {string} moduleName - Name of the component
+   */
+
+  function normaliseDataset(Component, dataset) {
+    const out = {};
+    for (const [field, property] of Object.entries(Component.schema.properties)) {
+      if (field in dataset) {
+        out[field] = normaliseString(dataset[field], property);
+      }
+      if ((property == null ? void 0 : property.type) === 'object') {
+        out[field] = extractConfigByNamespace(Component, dataset, field);
+      }
+    }
+    return out;
+  }
+
+  class GOVUKFrontendError extends Error {
+    constructor(...args) {
+      super(...args);
+      this.name = 'GOVUKFrontendError';
+    }
+  }
+  class SupportError extends GOVUKFrontendError {
+    /**
+     * Checks if GOV.UK Frontend is supported on this page
+     *
+     * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+     */
+    constructor($scope = document.body) {
+      const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+      super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+      this.name = 'SupportError';
+    }
+  }
+  class ElementError extends GOVUKFrontendError {
+    constructor(messageOrOptions) {
+      let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+      if (typeof messageOrOptions === 'object') {
+        const {
+          component,
+          identifier,
+          element,
+          expectedType
+        } = messageOrOptions;
+        message = identifier;
+        message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+        message = formatErrorMessage(component, message);
+      }
+      super(message);
+      this.name = 'ElementError';
+    }
+  }
+  class InitError extends GOVUKFrontendError {
+    constructor(componentOrMessage) {
+      const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+      super(message);
+      this.name = 'InitError';
+    }
+  }
+  /**
+   * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
+   */
+
+  class GOVUKFrontendComponent {
+    /**
+     * Returns the root element of the component
+     *
+     * @protected
+     * @returns {RootElementType} - the root element of component
+     */
+    get $root() {
+      return this._$root;
+    }
+    constructor($root) {
+      this._$root = void 0;
+      const childConstructor = this.constructor;
+      if (typeof childConstructor.moduleName !== 'string') {
+        throw new InitError(`\`moduleName\` not defined in component`);
+      }
+      if (!($root instanceof childConstructor.elementType)) {
+        throw new ElementError({
+          element: $root,
+          component: childConstructor,
+          identifier: 'Root element (`$root`)',
+          expectedType: childConstructor.elementType.name
+        });
+      } else {
+        this._$root = $root;
+      }
+      childConstructor.checkSupport();
+      this.checkInitialised();
+      const moduleName = childConstructor.moduleName;
+      this.$root.setAttribute(`data-${moduleName}-init`, '');
+    }
+    checkInitialised() {
+      const constructor = this.constructor;
+      const moduleName = constructor.moduleName;
+      if (moduleName && isInitialised(this.$root, moduleName)) {
+        throw new InitError(constructor);
+      }
+    }
+    static checkSupport() {
+      if (!isSupported()) {
+        throw new SupportError();
+      }
+    }
+  }
+
+  /**
+   * @typedef ChildClass
+   * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+   */
+
+  /**
+   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   */
+  GOVUKFrontendComponent.elementType = HTMLElement;
+
+  /**
+   * Error summary component
+   *
+   * Takes focus on initialisation for accessible announcement, unless disabled in
+   * configuration.
+   *
+   * @preserve
+   */
+  class ErrorSummary extends GOVUKFrontendComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for error summary
+     * @param {ErrorSummaryConfig} [config] - Error summary config
+     */
+    constructor($root, config = {}) {
+      super($root);
+      this.config = void 0;
+      this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset(ErrorSummary, this.$root.dataset));
+      if (!this.config.disableAutoFocus) {
+        setFocus(this.$root);
+      }
+      this.$root.addEventListener('click', event => this.handleClick(event));
+    }
+    handleClick(event) {
+      const $target = event.target;
+      if ($target && this.focusTarget($target)) {
+        event.preventDefault();
+      }
+    }
+    focusTarget($target) {
+      if (!($target instanceof HTMLAnchorElement)) {
+        return false;
+      }
+      const inputId = getFragmentFromUrl($target.href);
+      if (!inputId) {
+        return false;
+      }
+      const $input = document.getElementById(inputId);
+      if (!$input) {
+        return false;
+      }
+      const $legendOrLabel = this.getAssociatedLegendOrLabel($input);
+      if (!$legendOrLabel) {
+        return false;
+      }
+      $legendOrLabel.scrollIntoView();
+      $input.focus({
+        preventScroll: true
+      });
+      return true;
+    }
+    getAssociatedLegendOrLabel($input) {
+      var _document$querySelect;
+      const $fieldset = $input.closest('fieldset');
+      if ($fieldset) {
+        const $legends = $fieldset.getElementsByTagName('legend');
+        if ($legends.length) {
+          const $candidateLegend = $legends[0];
+          if ($input instanceof HTMLInputElement && ($input.type === 'checkbox' || $input.type === 'radio')) {
+            return $candidateLegend;
+          }
+          const legendTop = $candidateLegend.getBoundingClientRect().top;
+          const inputRect = $input.getBoundingClientRect();
+          if (inputRect.height && window.innerHeight) {
+            const inputBottom = inputRect.top + inputRect.height;
+            if (inputBottom - legendTop < window.innerHeight / 2) {
+              return $candidateLegend;
+            }
+          }
+        }
+      }
+      return (_document$querySelect = document.querySelector(`label[for='${$input.getAttribute('id')}']`)) != null ? _document$querySelect : $input.closest('label');
+    }
+  }
+
+  /**
+   * Error summary config
+   *
+   * @typedef {object} ErrorSummaryConfig
+   * @property {boolean} [disableAutoFocus=false] - If set to `true` the error
+   *   summary will not be focussed when the page loads.
+   */
+
+  /**
+   * @typedef {import('../../common/index.mjs').Schema} Schema
+   */
+  ErrorSummary.moduleName = 'govuk-error-summary';
+  ErrorSummary.defaults = Object.freeze({
+    disableAutoFocus: false
+  });
+  ErrorSummary.schema = Object.freeze({
+    properties: {
+      disableAutoFocus: {
+        type: 'boolean'
+      }
+    }
+  });
+
+  exports.ErrorSummary = ErrorSummary;
+
+}));
+//# sourceMappingURL=error-summary.bundle.js.map