RubyGems - govuk_tech_docs - Versions diffs - 3.5.0 → 4.1.0 - Mend

govuk_tech_docs 3.5.0 → 4.1.0

Files changed (328) hide show

data/node_modules/govuk-frontend/dist/govuk/components/header/header.bundle.mjs ADDED Viewed

@@ -0,0 +1,244 @@
+function getBreakpoint(name) {
+  const property = `--govuk-frontend-breakpoint-${name}`;
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
+  return {
+    property,
+    value: value || undefined
+  };
+}
+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 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
+ */
+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;
+/**
+ * Header component
+ *
+ * @preserve
+ */
+class Header extends GOVUKFrontendComponent {
+  /**
+   * Apply a matchMedia for desktop which will trigger a state sync if the
+   * browser viewport moves between states.
+   *
+   * @param {Element | null} $root - HTML element to use for header
+   */
+  constructor($root) {
+    super($root);
+    this.$menuButton = void 0;
+    this.$menu = void 0;
+    this.menuIsOpen = false;
+    this.mql = null;
+    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
+    if (!$menuButton) {
+      return this;
+    }
+    const menuId = $menuButton.getAttribute('aria-controls');
+    if (!menuId) {
+      throw new ElementError({
+        component: Header,
+        identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
+      });
+    }
+    const $menu = document.getElementById(menuId);
+    if (!$menu) {
+      throw new ElementError({
+        component: Header,
+        element: $menu,
+        identifier: `Navigation (\`<ul id="${menuId}">\`)`
+      });
+    }
+    this.$menu = $menu;
+    this.$menuButton = $menuButton;
+    this.setupResponsiveChecks();
+    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
+  }
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('desktop');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: Header,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode());
+    } else {
+      this.mql.addListener(() => this.checkMode());
+    }
+    this.checkMode();
+  }
+  checkMode() {
+    if (!this.mql || !this.$menu || !this.$menuButton) {
+      return;
+    }
+    if (this.mql.matches) {
+      this.$menu.removeAttribute('hidden');
+      this.$menuButton.setAttribute('hidden', '');
+    } else {
+      this.$menuButton.removeAttribute('hidden');
+      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
+      if (this.menuIsOpen) {
+        this.$menu.removeAttribute('hidden');
+      } else {
+        this.$menu.setAttribute('hidden', '');
+      }
+    }
+  }
+  handleMenuButtonClick() {
+    this.menuIsOpen = !this.menuIsOpen;
+    this.checkMode();
+  }
+}
+Header.moduleName = 'govuk-header';
+export { Header };
+//# sourceMappingURL=header.bundle.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/header/header.mjs ADDED Viewed

@@ -0,0 +1,88 @@
+import { getBreakpoint } from '../../common/index.mjs';
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+/**
+ * Header component
+ *
+ * @preserve
+ */
+class Header extends GOVUKFrontendComponent {
+  /**
+   * Apply a matchMedia for desktop which will trigger a state sync if the
+   * browser viewport moves between states.
+   *
+   * @param {Element | null} $root - HTML element to use for header
+   */
+  constructor($root) {
+    super($root);
+    this.$menuButton = void 0;
+    this.$menu = void 0;
+    this.menuIsOpen = false;
+    this.mql = null;
+    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
+    if (!$menuButton) {
+      return this;
+    }
+    const menuId = $menuButton.getAttribute('aria-controls');
+    if (!menuId) {
+      throw new ElementError({
+        component: Header,
+        identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
+      });
+    }
+    const $menu = document.getElementById(menuId);
+    if (!$menu) {
+      throw new ElementError({
+        component: Header,
+        element: $menu,
+        identifier: `Navigation (\`<ul id="${menuId}">\`)`
+      });
+    }
+    this.$menu = $menu;
+    this.$menuButton = $menuButton;
+    this.setupResponsiveChecks();
+    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
+  }
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('desktop');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: Header,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      });
+    }
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode());
+    } else {
+      this.mql.addListener(() => this.checkMode());
+    }
+    this.checkMode();
+  }
+  checkMode() {
+    if (!this.mql || !this.$menu || !this.$menuButton) {
+      return;
+    }
+    if (this.mql.matches) {
+      this.$menu.removeAttribute('hidden');
+      this.$menuButton.setAttribute('hidden', '');
+    } else {
+      this.$menuButton.removeAttribute('hidden');
+      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
+      if (this.menuIsOpen) {
+        this.$menu.removeAttribute('hidden');
+      } else {
+        this.$menu.setAttribute('hidden', '');
+      }
+    }
+  }
+  handleMenuButtonClick() {
+    this.menuIsOpen = !this.menuIsOpen;
+    this.checkMode();
+  }
+}
+Header.moduleName = 'govuk-header';
+export { Header };
+//# sourceMappingURL=header.mjs.map

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/hint/_hint.scss RENAMED Viewed

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

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/hint/_index.scss RENAMED Viewed

@@ -31,6 +31,7 @@
   // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
+  // prettier-ignore
   .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
     margin-bottom: govuk-spacing(2);
   }
@@ -40,3 +41,5 @@
     margin-top: govuk-spacing(-1);
   }
 }
+/*# sourceMappingURL=_index.scss.map */

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

@@ -8,15 +8,13 @@
     box-sizing: border-box;
     width: 100%;
-    height: 40px;
-    @if $govuk-typography-use-rem {
-      height: govuk-px-to-rem(40px);
-    }
+    height: govuk-px-to-rem(40px);
     margin-top: 0;
     padding: govuk-spacing(1);
-    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
-    // as background-color and color need to always be set together, color should not be set either
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
@@ -28,21 +26,16 @@
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element
       outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
+      // Double the border by adding its width again. Use `box-shadow` for this
+      // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
       // it will change the element size. Also, `outline` cannot be utilised
       // here as it is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-      @include _govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
     }
     &:disabled {
-      opacity: .5;
+      opacity: 0.5;
       color: inherit;
       background-color: transparent;
       cursor: not-allowed;
@@ -68,12 +61,12 @@
   }
   .govuk-input--extra-letter-spacing {
-    @include govuk-font(false, $tabular: true);
-    letter-spacing: .05em;
+    @include govuk-font-tabular-numbers;
+    letter-spacing: 0.05em;
   }
   // em measurements are based on the point size of the typeface
-  // Extra space is added on the right hand side to allow for the Safari prefill icon
+  // Extra space is added on the right to allow for the Safari prefill icon
   .govuk-input--width-30 {
     max-width: 29.5em;
@@ -104,12 +97,10 @@
   }
   .govuk-input__wrapper {
-    display: -ms-flexbox;
     display: flex;
     .govuk-input {
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
+      flex: 0 1 auto;
     }
     .govuk-input:focus {
@@ -131,35 +122,21 @@
   .govuk-input__prefix,
   .govuk-input__suffix {
     @include govuk-font($size: 19);
     box-sizing: border-box;
-    display: inline-block;
-    min-width: 40px;
-    @if $govuk-typography-use-rem {
-      min-width: govuk-px-to-rem(40px);
-    }
-    height: 40px;
-    @if $govuk-typography-use-rem {
-      height: govuk-px-to-rem(40px);
-    }
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: govuk-px-to-rem(40px);
+    height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+    background-color: govuk-colour("light-grey");
     text-align: center;
-    @include govuk-media-query($until: tablet) {
-      line-height: 1.6;
-    }
     white-space: nowrap;
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
-    -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
+    flex: 0 0 auto;
     // Split prefix/suffix onto separate lines on narrow screens
     @include govuk-media-query($until: mobile) {
       display: block;
@@ -173,9 +150,7 @@
       border-bottom: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include _govuk-not-ie8 {
-        border-right: 0;
-      }
+      border-right: 0;
     }
   }
@@ -185,9 +160,9 @@
       border-top: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include _govuk-not-ie8 {
-        border-left: 0;
-      }
+      border-left: 0;
     }
   }
 }
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/input/_input.scss RENAMED Viewed

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

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/inset-text/_index.scss RENAMED Viewed

@@ -22,3 +22,5 @@
     }
   }
 }
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/inset-text/_inset-text.scss ADDED Viewed

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

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/label/_index.scss RENAMED Viewed

@@ -9,24 +9,27 @@
   }
   // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
   .govuk-label--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 48);
   }
   .govuk-label--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 36);
   }
   .govuk-label--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(2);
+    @include govuk-font-size($size: 24);
   }
   .govuk-label--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
   // When the label is nested inside a heading, override the heading so that it
@@ -39,3 +42,5 @@
     margin: 0;
   }
 }
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/label/_label.scss RENAMED Viewed

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

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/notification-banner/_index.scss RENAMED Viewed

@@ -15,7 +15,8 @@
   .govuk-notification-banner__header {
     padding: 2px govuk-spacing(3) govuk-spacing(1);
-    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    // Ensures the notification header appears separate to the notification body
+    // text in high contrast mode
     border-bottom: 1px solid transparent;
     @include govuk-media-query($from: tablet) {
@@ -24,12 +25,12 @@
   }
   .govuk-notification-banner__title {
-    @include govuk-font($size: 19, $weight: bold);
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-bold;
     margin: 0;
     padding: 0;
     color: govuk-colour("white");
   }
@@ -65,9 +66,10 @@
   }
   .govuk-notification-banner__heading {
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-font-size($size: 24);
+    @include govuk-typography-weight-bold;
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
     padding: 0;
   }
@@ -87,3 +89,5 @@
     }
   }
 }
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_notification-banner.scss ADDED Viewed

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