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

govuk_tech_docs 3.5.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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 */