govuk_tech_docs 6.5.2.1 → 6.6.0.rc.0

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

@@ -29,6 +29,9 @@
   function isObject(option) {
     return !!option && typeof option === 'object' && !isArray(option);
   }
+  function isScope($scope) {
+    return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+  }
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
@@ -47,11 +50,14 @@
     /**
      * Checks if GOV.UK Frontend is supported on this page
      *
-     * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+     * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
      */
-    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">`');
+    constructor(scopeOrMessage = document.body) {
+      let 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';
+      if (!isScope(scopeOrMessage)) {
+        supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+      }
+      super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
       this.name = 'SupportError';
     }
   }
@@ -92,6 +98,7 @@
    * @import { ComponentWithModuleName } from '../common/index.mjs'
    */
 
+  const _self = typeof globalThis !== 'undefined' ? globalThis : self;
   class Component {
     /**
      * Returns the root element of the component
@@ -145,7 +152,7 @@
   /**
    * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  Component.elementType = HTMLElement;
+  Component.elementType = _self.HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
   class ConfigurableComponent extends Component {
@@ -170,10 +177,14 @@
         throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
       }
       const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+      this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
     }
   }
   function normaliseString(value, property) {
+    if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+      return;
+    }
     const trimmedValue = value ? value.trim() : '';
     let output;
     let outputType = property == null ? void 0 : property.type;
@@ -293,6 +304,17 @@
    * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
    */
 
+  function createElement(tagName, attributes = {}, children = []) {
+    const $element = document.createElement(tagName);
+    Object.entries(attributes).forEach(([name, value]) => {
+      $element.setAttribute(name, value);
+    });
+    for (const child of children) {
+      $element.append(child);
+    }
+    return $element;
+  }
+
   class I18n {
     constructor(translations = {}, config = {}) {
       var _config$locale;
@@ -410,9 +432,10 @@
       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.$updateSpan = createElement('span', {
+        role: 'status',
+        class: 'govuk-visually-hidden'
+      });
       this.$root.appendChild(this.$updateSpan);
     }
     initButtonClickHandler() {
@@ -422,13 +445,14 @@
       }
     }
     buildIndicator() {
-      this.$indicatorContainer = document.createElement('div');
-      this.$indicatorContainer.className = 'govuk-exit-this-page__indicator';
-      this.$indicatorContainer.setAttribute('aria-hidden', 'true');
+      this.$indicatorContainer = createElement('div', {
+        class: 'govuk-exit-this-page__indicator',
+        '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.$indicatorContainer.appendChild(createElement('div', {
+          class: 'govuk-exit-this-page__indicator-light'
+        }));
       }
       this.$button.appendChild(this.$indicatorContainer);
     }
@@ -448,9 +472,10 @@
       }
       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');
+      this.$overlay = createElement('div', {
+        class: 'govuk-exit-this-page-overlay',
+        role: 'alert'
+      });
       document.body.appendChild(this.$overlay);
       this.$overlay.textContent = this.i18n.t('activated');
       window.location.href = this.$button.href;

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

@@ -23,6 +23,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function isScope($scope) {
+  return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -41,11 +44,14 @@ 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
+   * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
    */
-  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">`');
+  constructor(scopeOrMessage = document.body) {
+    let 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';
+    if (!isScope(scopeOrMessage)) {
+      supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+    }
+    super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
     this.name = 'SupportError';
   }
 }
@@ -86,6 +92,7 @@ class InitError extends GOVUKFrontendError {
  * @import { ComponentWithModuleName } from '../common/index.mjs'
  */
 
+const _self = typeof globalThis !== 'undefined' ? globalThis : self;
 class Component {
   /**
    * Returns the root element of the component
@@ -139,7 +146,7 @@ class Component {
 /**
  * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-Component.elementType = HTMLElement;
+Component.elementType = _self.HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
 class ConfigurableComponent extends Component {
@@ -164,10 +171,14 @@ class ConfigurableComponent extends Component {
       throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
     }
     const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+    this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
   }
 }
 function normaliseString(value, property) {
+  if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+    return;
+  }
   const trimmedValue = value ? value.trim() : '';
   let output;
   let outputType = property == null ? void 0 : property.type;
@@ -287,6 +298,17 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
  */
 
+function createElement(tagName, attributes = {}, children = []) {
+  const $element = document.createElement(tagName);
+  Object.entries(attributes).forEach(([name, value]) => {
+    $element.setAttribute(name, value);
+  });
+  for (const child of children) {
+    $element.append(child);
+  }
+  return $element;
+}
+
 class I18n {
   constructor(translations = {}, config = {}) {
     var _config$locale;
@@ -404,9 +426,10 @@ class ExitThisPage extends ConfigurableComponent {
     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.$updateSpan = createElement('span', {
+      role: 'status',
+      class: 'govuk-visually-hidden'
+    });
     this.$root.appendChild(this.$updateSpan);
   }
   initButtonClickHandler() {
@@ -416,13 +439,14 @@ class ExitThisPage extends ConfigurableComponent {
     }
   }
   buildIndicator() {
-    this.$indicatorContainer = document.createElement('div');
-    this.$indicatorContainer.className = 'govuk-exit-this-page__indicator';
-    this.$indicatorContainer.setAttribute('aria-hidden', 'true');
+    this.$indicatorContainer = createElement('div', {
+      class: 'govuk-exit-this-page__indicator',
+      '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.$indicatorContainer.appendChild(createElement('div', {
+        class: 'govuk-exit-this-page__indicator-light'
+      }));
     }
     this.$button.appendChild(this.$indicatorContainer);
   }
@@ -442,9 +466,10 @@ class ExitThisPage extends ConfigurableComponent {
     }
     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');
+    this.$overlay = createElement('div', {
+      class: 'govuk-exit-this-page-overlay',
+      role: 'alert'
+    });
     document.body.appendChild(this.$overlay);
     this.$overlay.textContent = this.i18n.t('activated');
     window.location.href = this.$button.href;

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

@@ -1,4 +1,5 @@
 import { ConfigurableComponent } from '../../common/configuration.mjs';
+import { createElement } from '../../common/create-element.mjs';
 import { ElementError } from '../../errors/index.mjs';
 import { I18n } from '../../i18n.mjs';
 
@@ -51,9 +52,10 @@ class ExitThisPage extends ConfigurableComponent {
     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.$updateSpan = createElement('span', {
+      role: 'status',
+      class: 'govuk-visually-hidden'
+    });
     this.$root.appendChild(this.$updateSpan);
   }
   initButtonClickHandler() {
@@ -63,13 +65,14 @@ class ExitThisPage extends ConfigurableComponent {
     }
   }
   buildIndicator() {
-    this.$indicatorContainer = document.createElement('div');
-    this.$indicatorContainer.className = 'govuk-exit-this-page__indicator';
-    this.$indicatorContainer.setAttribute('aria-hidden', 'true');
+    this.$indicatorContainer = createElement('div', {
+      class: 'govuk-exit-this-page__indicator',
+      '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.$indicatorContainer.appendChild(createElement('div', {
+        class: 'govuk-exit-this-page__indicator-light'
+      }));
     }
     this.$button.appendChild(this.$indicatorContainer);
   }
@@ -89,9 +92,10 @@ class ExitThisPage extends ConfigurableComponent {
     }
     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');
+    this.$overlay = createElement('div', {
+      class: 'govuk-exit-this-page-overlay',
+      role: 'alert'
+    });
     document.body.appendChild(this.$overlay);
     this.$overlay.textContent = this.i18n.t('activated');
     window.location.href = this.$button.href;

data/node_modules/govuk-frontend/dist/govuk/components/feedback/_feedback.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("feedback");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/feedback/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/feedback") {
+  @include mixin.styles;
+}
+

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

@@ -0,0 +1,5 @@
+@use "../../custom-properties";
+@use "mixin";
+
+@include mixin.styles;
+

data/node_modules/govuk-frontend/dist/govuk/components/feedback/_mixin.scss

@@ -0,0 +1,48 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-feedback {
+    box-sizing: border-box;
+    // Tie left/right padding to page gutter as it stretches across the whole
+    // screen on smaller screens
+    padding: base.govuk-spacing(4) base.$govuk-gutter-half base.govuk-spacing(5);
+    border-top: 1px solid;
+    border-color: base.govuk-functional-colour("brand");
+    background-color: base.govuk-functional-colour("surface-background");
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding-right: base.govuk-spacing(4);
+      padding-left: base.govuk-spacing(4);
+    }
+
+    // Override $govuk-width-container's left and right margin as we want Feedback
+    // to go across the whole screen on smaller screens
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    @media print {
+      border-color: currentcolor;
+      background-color: transparent;
+    }
+  }
+
+  .govuk-feedback__title {
+    @include base.govuk-font($size: 24, $weight: bold);
+    margin-top: 0;
+    color: base.govuk-functional-colour(text);
+    @include base.govuk-responsive-margin(1, "bottom");
+  }
+
+  // Removes the bottom margin from the final child element eg: a paragraph
+  //
+  // Feedback body doesn't have any opinions about typography. Instead we defer
+  // to users to use typography classes in their input, or apply a `govuk-body`
+  // paragraph for if users pass `text`.
+  .govuk-feedback__body > :last-child {
+    margin-bottom: 0;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js

@@ -34,6 +34,9 @@
   function isObject(option) {
     return !!option && typeof option === 'object' && !isArray(option);
   }
+  function isScope($scope) {
+    return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+  }
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
@@ -52,11 +55,14 @@
     /**
      * Checks if GOV.UK Frontend is supported on this page
      *
-     * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+     * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
      */
-    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">`');
+    constructor(scopeOrMessage = document.body) {
+      let 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';
+      if (!isScope(scopeOrMessage)) {
+        supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+      }
+      super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
       this.name = 'SupportError';
     }
   }
@@ -97,6 +103,7 @@
    * @import { ComponentWithModuleName } from '../common/index.mjs'
    */
 
+  const _self = typeof globalThis !== 'undefined' ? globalThis : self;
   class Component {
     /**
      * Returns the root element of the component
@@ -150,7 +157,7 @@
   /**
    * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  Component.elementType = HTMLElement;
+  Component.elementType = _self.HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
   class ConfigurableComponent extends Component {
@@ -175,10 +182,14 @@
         throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
       }
       const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+      this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
     }
   }
   function normaliseString(value, property) {
+    if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+      return;
+    }
     const trimmedValue = value ? value.trim() : '';
     let output;
     let outputType = property == null ? void 0 : property.type;
@@ -298,6 +309,17 @@
    * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
    */
 
+  function createElement(tagName, attributes = {}, children = []) {
+    const $element = document.createElement(tagName);
+    Object.entries(attributes).forEach(([name, value]) => {
+      $element.setAttribute(name, value);
+    });
+    for (const child of children) {
+      $element.append(child);
+    }
+    return $element;
+  }
+
   class I18n {
     constructor(translations = {}, config = {}) {
       var _config$locale;
@@ -418,46 +440,48 @@
       this.$input.addEventListener('change', this.onChange.bind(this));
       this.updateDisabledState();
       this.observeDisabledState();
-      this.$announcements = document.createElement('span');
-      this.$announcements.classList.add('govuk-file-upload-announcements');
-      this.$announcements.classList.add('govuk-visually-hidden');
-      this.$announcements.setAttribute('aria-live', 'assertive');
+      this.$announcements = createElement('span', {
+        class: 'govuk-file-upload-announcements govuk-visually-hidden',
+        'aria-live': 'assertive'
+      });
       this.$root.insertAdjacentElement('afterend', this.$announcements);
       this.bindDraggingEvents();
     }
     createStatus() {
-      const $status = document.createElement('span');
-      $status.className = 'govuk-body govuk-file-upload-button__status';
-      $status.setAttribute('aria-live', 'polite');
+      const $status = createElement('span', {
+        class: 'govuk-body govuk-file-upload-button__status',
+        'aria-live': 'polite'
+      });
       $status.innerText = this.i18n.t('noFileChosen');
       return $status;
     }
     createButton() {
-      const $button = document.createElement('button');
-      $button.classList.add('govuk-file-upload-button');
-      $button.type = 'button';
-      $button.id = this.id;
-      $button.classList.add('govuk-file-upload-button--empty');
+      const $button = createElement('button', {
+        class: 'govuk-file-upload-button govuk-file-upload-button--empty',
+        type: 'button',
+        id: this.id
+      });
       const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
       if (ariaDescribedBy) {
         $button.setAttribute('aria-describedby', ariaDescribedBy);
       }
       $button.appendChild(this.$status);
-      const commaSpan = document.createElement('span');
-      commaSpan.className = 'govuk-visually-hidden';
-      commaSpan.innerText = ', ';
-      commaSpan.id = `${this.id}-comma`;
+      const commaSpan = createElement('span', {
+        class: 'govuk-visually-hidden',
+        id: `${this.id}-comma`
+      }, [', ']);
       $button.appendChild(commaSpan);
-      const containerSpan = document.createElement('span');
-      containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
-      const buttonSpan = document.createElement('span');
-      buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
-      buttonSpan.innerText = this.i18n.t('chooseFilesButton');
+      const containerSpan = createElement('span', {
+        class: 'govuk-file-upload-button__pseudo-button-container'
+      });
+      const buttonSpan = createElement('span', {
+        class: 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button'
+      }, [this.i18n.t('chooseFilesButton')]);
       containerSpan.appendChild(buttonSpan);
       containerSpan.insertAdjacentText('beforeend', ' ');
-      const instructionSpan = document.createElement('span');
-      instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
-      instructionSpan.innerText = this.i18n.t('dropInstruction');
+      const instructionSpan = createElement('span', {
+        class: 'govuk-body govuk-file-upload-button__instruction'
+      }, [this.i18n.t('dropInstruction')]);
       containerSpan.appendChild(instructionSpan);
       $button.appendChild(containerSpan);
       $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);