govuk_tech_docs 3.4.5 → 4.0.0

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

@@ -7,7 +7,7 @@
 /// @type Colour
 /// @access public
 
-$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
+$govuk-button-background-colour: govuk-colour("green") !default;
 
 /// Button component text colour
 ///
@@ -16,6 +16,20 @@ $govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !defaul
 
 $govuk-button-text-colour: govuk-colour("white") !default;
 
+/// Inverted button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-background-colour: govuk-colour("white") !default;
+
+/// Inverted button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-text-colour: $govuk-brand-colour !default;
+
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
   $govuk-button-text-colour: $govuk-button-text-colour;
@@ -23,7 +37,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-secondary-button-colour: govuk-colour("light-grey");
   $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
@@ -35,8 +49,8 @@ $govuk-button-text-colour: govuk-colour("white") !default;
   $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
 
   // Inverse button variables
-  $govuk-inverse-button-colour: govuk-colour("white");
-  $govuk-inverse-button-text-colour: govuk-colour("blue");
+  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
+  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
   $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
   $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
 
@@ -56,7 +70,8 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     margin-right: 0;
     margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
-    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)
+      (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
     border: $govuk-border-width-form-element solid transparent;
     border-radius: 0;
     color: $govuk-button-text-colour;
@@ -67,10 +82,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include _govuk-if-ie8 {
-      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
-    }
-
     @include govuk-media-query($from: tablet) {
       width: auto;
     }
@@ -97,40 +108,14 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     &:active {
       // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
-
-      @include _govuk-if-ie8 {
-        border-bottom-width: 0;
-      }
     }
 
     &:focus {
       border-color: $govuk-focus-colour;
-      // When colours are overridden, for example when users have a dark mode,
-      // backgrounds and box-shadows disappear, so we need to ensure there's a
-      // transparent outline which will be set to a visible colour.
-      // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
-      @include _govuk-not-ie8 {
-        outline: $govuk-focus-width solid transparent;
-      }
-      // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
-      @include _govuk-if-ie8 {
-        color: $govuk-focus-text-colour;
-        background-color: $govuk-focus-colour;
-      }
+      outline: $govuk-focus-width solid transparent;
       box-shadow: inset 0 0 0 1px $govuk-focus-colour;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include _govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-button-text-colour;
-      }
-    }
-
     &:focus:not(:active):not(:hover) {
       border-color: $govuk-focus-colour;
       color: $govuk-focus-text-colour;
@@ -143,7 +128,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
-    &:before {
+    &::before {
       content: "";
       display: block;
 
@@ -167,17 +152,13 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     // the click event is still fired.
     //
     // 🎉
-    &:active:before {
+    &:active::before {
       top: -($govuk-border-width-form-element + $button-shadow-size);
     }
   }
 
-  // @deprecated Disabling buttons using the .govuk-button--disabled class is
-  // deprecated and will be removed in the next major version.
-  .govuk-button--disabled,
-  .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
-    opacity: (.5);
+    opacity: (0.5);
 
     &:hover {
       background-color: $govuk-button-colour;
@@ -187,9 +168,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include _govuk-if-ie8 {
-        border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
-      }
     }
   }
 
@@ -205,17 +183,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       color: $govuk-secondary-button-text-colour;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include _govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-secondary-button-text-colour;
-      }
-    }
-
     &:hover {
       background-color: $govuk-secondary-button-hover-colour;
 
@@ -237,17 +204,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       color: $govuk-warning-button-text-colour;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include _govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-warning-button-text-colour;
-      }
-    }
-
     &:hover {
       background-color: $govuk-warning-button-hover-colour;
 
@@ -269,17 +225,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       color: $govuk-inverse-button-text-colour;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include _govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-inverse-button-text-colour;
-      }
-    }
-
     &:hover {
       background-color: $govuk-inverse-button-hover-colour;
 
@@ -291,16 +236,12 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
   .govuk-button--start {
     @include govuk-typography-weight-bold;
-    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
-
-    display: -ms-inline-flexbox;
+    @include govuk-font-size($size: 24, $line-height: 1);
 
     display: inline-flex;
     min-height: auto;
 
-    -ms-flex-pack: center;
-
-        justify-content: center;
+    justify-content: center;
   }
 
   .govuk-button__start-icon {
@@ -310,26 +251,12 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    flex-shrink: 0;
+    align-self: center;
     // Work around SVGs not inheriting color from parent in forced color mode
     // (https://github.com/w3c/csswg-drafts/issues/6310)
     forced-color-adjust: auto;
   }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset when using v1 of nta
-    $offset: 2;
-
-    .govuk-button {
-      padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
-      padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
-    }
-
-    .govuk-button__start-icon {
-      margin-top: -3px;
-    }
-  }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/button/button.bundle.js

@@ -0,0 +1,318 @@
+(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 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;
+
+  const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
+
+  /**
+   * JavaScript enhancements for the Button component
+   *
+   * @preserve
+   */
+  class Button extends GOVUKFrontendComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for button
+     * @param {ButtonConfig} [config] - Button config
+     */
+    constructor($root, config = {}) {
+      super($root);
+      this.config = void 0;
+      this.debounceFormSubmitTimer = null;
+      this.config = mergeConfigs(Button.defaults, config, normaliseDataset(Button, this.$root.dataset));
+      this.$root.addEventListener('keydown', event => this.handleKeyDown(event));
+      this.$root.addEventListener('click', event => this.debounce(event));
+    }
+    handleKeyDown(event) {
+      const $target = event.target;
+      if (event.key !== ' ') {
+        return;
+      }
+      if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
+        event.preventDefault();
+        $target.click();
+      }
+    }
+    debounce(event) {
+      if (!this.config.preventDoubleClick) {
+        return;
+      }
+      if (this.debounceFormSubmitTimer) {
+        event.preventDefault();
+        return false;
+      }
+      this.debounceFormSubmitTimer = window.setTimeout(() => {
+        this.debounceFormSubmitTimer = null;
+      }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+    }
+  }
+
+  /**
+   * Button config
+   *
+   * @typedef {object} ButtonConfig
+   * @property {boolean} [preventDoubleClick=false] - Prevent accidental double
+   *   clicks on submit buttons from submitting forms multiple times.
+   */
+
+  /**
+   * @typedef {import('../../common/index.mjs').Schema} Schema
+   */
+  Button.moduleName = 'govuk-button';
+  Button.defaults = Object.freeze({
+    preventDoubleClick: false
+  });
+  Button.schema = Object.freeze({
+    properties: {
+      preventDoubleClick: {
+        type: 'boolean'
+      }
+    }
+  });
+
+  exports.Button = Button;
+
+}));
+//# sourceMappingURL=button.bundle.js.map