govuk_tech_docs 3.5.0 → 4.1.0

data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.mjs

@@ -0,0 +1,154 @@
+import { closestAttributeValue } from '../../common/closest-attribute-value.mjs';
+import { mergeConfigs } from '../../common/index.mjs';
+import { normaliseDataset } from '../../common/normalise-dataset.mjs';
+import { ElementError } from '../../errors/index.mjs';
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
+import { I18n } from '../../i18n.mjs';
+
+/**
+ * Password input component
+ *
+ * @preserve
+ */
+class PasswordInput extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for password input
+   * @param {PasswordInputConfig} [config] - Password input config
+   */
+  constructor($root, config = {}) {
+    super($root);
+    this.config = void 0;
+    this.i18n = void 0;
+    this.$input = void 0;
+    this.$showHideButton = void 0;
+    this.$screenReaderStatusMessage = void 0;
+    const $input = this.$root.querySelector('.govuk-js-password-input-input');
+    if (!($input instanceof HTMLInputElement)) {
+      throw new ElementError({
+        component: PasswordInput,
+        element: $input,
+        expectedType: 'HTMLInputElement',
+        identifier: 'Form field (`.govuk-js-password-input-input`)'
+      });
+    }
+    if ($input.type !== 'password') {
+      throw new ElementError('Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.');
+    }
+    const $showHideButton = this.$root.querySelector('.govuk-js-password-input-toggle');
+    if (!($showHideButton instanceof HTMLButtonElement)) {
+      throw new ElementError({
+        component: PasswordInput,
+        element: $showHideButton,
+        expectedType: 'HTMLButtonElement',
+        identifier: 'Button (`.govuk-js-password-input-toggle`)'
+      });
+    }
+    if ($showHideButton.type !== 'button') {
+      throw new ElementError('Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.');
+    }
+    this.$input = $input;
+    this.$showHideButton = $showHideButton;
+    this.config = mergeConfigs(PasswordInput.defaults, config, normaliseDataset(PasswordInput, this.$root.dataset));
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue(this.$root, 'lang')
+    });
+    this.$showHideButton.removeAttribute('hidden');
+    const $screenReaderStatusMessage = document.createElement('div');
+    $screenReaderStatusMessage.className = 'govuk-password-input__sr-status govuk-visually-hidden';
+    $screenReaderStatusMessage.setAttribute('aria-live', 'polite');
+    this.$screenReaderStatusMessage = $screenReaderStatusMessage;
+    this.$input.insertAdjacentElement('afterend', $screenReaderStatusMessage);
+    this.$showHideButton.addEventListener('click', this.toggle.bind(this));
+    if (this.$input.form) {
+      this.$input.form.addEventListener('submit', () => this.hide());
+    }
+    window.addEventListener('pageshow', event => {
+      if (event.persisted && this.$input.type !== 'password') {
+        this.hide();
+      }
+    });
+    this.hide();
+  }
+  toggle(event) {
+    event.preventDefault();
+    if (this.$input.type === 'password') {
+      this.show();
+      return;
+    }
+    this.hide();
+  }
+  show() {
+    this.setType('text');
+  }
+  hide() {
+    this.setType('password');
+  }
+  setType(type) {
+    if (type === this.$input.type) {
+      return;
+    }
+    this.$input.setAttribute('type', type);
+    const isHidden = type === 'password';
+    const prefixButton = isHidden ? 'show' : 'hide';
+    const prefixStatus = isHidden ? 'passwordHidden' : 'passwordShown';
+    this.$showHideButton.innerText = this.i18n.t(`${prefixButton}Password`);
+    this.$showHideButton.setAttribute('aria-label', this.i18n.t(`${prefixButton}PasswordAriaLabel`));
+    this.$screenReaderStatusMessage.innerText = this.i18n.t(`${prefixStatus}Announcement`);
+  }
+}
+
+/**
+ * Password input config
+ *
+ * @typedef {object} PasswordInputConfig
+ * @property {PasswordInputTranslations} [i18n=PasswordInput.defaults.i18n] - Password input translations
+ */
+
+/**
+ * Password input translations
+ *
+ * @see {@link PasswordInput.defaults.i18n}
+ * @typedef {object} PasswordInputTranslations
+ *
+ * Messages displayed to the user indicating the state of the show/hide toggle.
+ * @property {string} [showPassword] - Visible text of the button when the
+ *   password is currently hidden. Plain text only.
+ * @property {string} [hidePassword] - Visible text of the button when the
+ *   password is currently visible. Plain text only.
+ * @property {string} [showPasswordAriaLabel] - aria-label of the button when
+ *   the password is currently hidden. Plain text only.
+ * @property {string} [hidePasswordAriaLabel] - aria-label of the button when
+ *   the password is currently visible. Plain text only.
+ * @property {string} [passwordShownAnnouncement] - Screen reader
+ *   announcement to make when the password has just become visible.
+ *   Plain text only.
+ * @property {string} [passwordHiddenAnnouncement] - Screen reader
+ *   announcement to make when the password has just been hidden.
+ *   Plain text only.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+ */
+PasswordInput.moduleName = 'govuk-password-input';
+PasswordInput.defaults = Object.freeze({
+  i18n: {
+    showPassword: 'Show',
+    hidePassword: 'Hide',
+    showPasswordAriaLabel: 'Show password',
+    hidePasswordAriaLabel: 'Hide password',
+    passwordShownAnnouncement: 'Your password is visible',
+    passwordHiddenAnnouncement: 'Your password is hidden'
+  }
+});
+PasswordInput.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: 'object'
+    }
+  }
+});
+
+export { PasswordInput };
+//# sourceMappingURL=password-input.mjs.map

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

@@ -17,7 +17,14 @@
   }
 
   .govuk-phase-banner__content__tag {
-    margin-right: govuk-spacing(2);
+    @include govuk-font-size($size: 16);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
+
+    @if $govuk-new-typography-scale {
+      @include govuk-media-query($from: tablet) {
+        margin-right: govuk-spacing(2);
+      }
+    }
   }
 
   .govuk-phase-banner__text {
@@ -25,3 +32,5 @@
     vertical-align: middle;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_phase-banner.scss

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

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

@@ -4,27 +4,21 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/radios") {
-
-  $govuk-touch-target-size: 44px;
+  $govuk-touch-target-gutter: 4px;
   $govuk-radios-size: 40px;
+  $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
   $govuk-small-radios-size: 24px;
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
-  // When the default focus width is used on a curved edge it looks visually smaller.
-  // So for the circular radios we bump the default to make it look visually consistent.
+  // When the default focus width is used on a curved edge it looks visually
+  // smaller. So for the circular radios we bump the default to make it look
+  // visually consistent.
   $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
-    @include govuk-font($size: 19);
-
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
-
-    min-height: $govuk-radios-size;
-
     margin-bottom: govuk-spacing(2);
-    padding-left: $govuk-radios-size;
-
-    clear: left;
   }
 
   .govuk-radios__item:last-child,
@@ -33,60 +27,40 @@
   }
 
   .govuk-radios__input {
-    $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
-
+    // Allow the input to sit above the label, enabling its proper detection
+    // when exploring by touch or using automation tools like Selenium
+    z-index: 1;
+    width: $govuk-touch-target-size;
+    height: $govuk-touch-target-size;
+    margin: 0;
+    opacity: 0;
     cursor: pointer;
-
-    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
-    // elements there.
-    @include _govuk-not-ie8 {
-      position: absolute;
-
-      z-index: 1;
-      top: $input-offset * -1;
-      left: $input-offset * -1;
-
-      width: $govuk-touch-target-size;
-      height: $govuk-touch-target-size;
-      margin: 0;
-
-      opacity: 0;
-    }
-
-    @include _govuk-if-ie8 {
-      margin-top: 10px;
-      margin-right: $govuk-radios-size / -2;
-      margin-left: $govuk-radios-size / -2;
-      float: left;
-
-      // add focus outline to input
-      &:focus {
-        outline: $govuk-focus-width solid $govuk-focus-colour;
-      }
-    }
   }
 
   .govuk-radios__label {
-    display: inline-block;
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input width minus the padding on either side of
+    // the label. This prevents the label from going onto the next line due to
+    // __item using flex-wrap because we want hints on a separate line
+    max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});
     margin-bottom: 0;
-    padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
+    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
     cursor: pointer;
     // remove 300ms pause on mobile
-    -ms-touch-action: manipulation;
-        touch-action: manipulation;
+    touch-action: manipulation;
   }
 
   // ( ) Radio ring
-  .govuk-radios__label:before {
+  .govuk-radios__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
-    top: 0;
-    left: 0;
-
+    top: ($govuk-touch-target-gutter / 2);
+    left: ($govuk-touch-target-gutter / 2);
     width: $govuk-radios-size;
     height: $govuk-radios-size;
-
     border: $govuk-border-width-form-element solid currentcolor;
     border-radius: 50%;
     background: transparent;
@@ -96,17 +70,20 @@
   //
   // We create the 'button' entirely out of 'border' so that they remain
   // 'filled' even when colours are overridden in the browser.
-  .govuk-radios__label:after {
-    content: "";
+  .govuk-radios__label::after {
+    $radio-button-size: govuk-spacing(2);
 
+    content: "";
     position: absolute;
-    top: govuk-spacing(2);
-    left: govuk-spacing(2);
 
+    // Positioned by getting half the touch target, so we have the centre of the
+    // input, and then moving back by the button's border width, thus positioning
+    // the centre of the button in the centre of the input.
+    top: (($govuk-touch-target-size / 2) - $radio-button-size);
+    left: (($govuk-touch-target-size / 2) - $radio-button-size);
     width: 0;
     height: 0;
-
-    border: govuk-spacing(2) solid currentcolor;
+    border: $radio-button-size solid currentcolor;
     border-radius: 50%;
     opacity: 0;
     background: currentcolor;
@@ -114,12 +91,21 @@
 
   .govuk-radios__hint {
     display: block;
+    width: 100%;
+    margin-top: govuk-spacing(-1);
     padding-right: $govuk-radios-label-padding-left-right;
-    padding-left: $govuk-radios-label-padding-left-right;
+    padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);
+  }
+
+  // This is to bypass govuk-hint's specificity on hints following labels having
+  // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
+    margin-bottom: 0;
   }
 
   // Focused state
-  .govuk-radios__input:focus + .govuk-radios__label:before {
+  .govuk-radios__input:focus + .govuk-radios__label::before {
     border-width: 4px;
 
     // When colours are overridden, the yellow box-shadow becomes invisible
@@ -139,7 +125,7 @@
   }
 
   // Selected state
-  .govuk-radios__input:checked + .govuk-radios__label:after {
+  .govuk-radios__input:checked + .govuk-radios__label::after {
     opacity: 1;
   }
 
@@ -151,7 +137,7 @@
 
   .govuk-radios__input:disabled + .govuk-radios__label,
   .govuk-radios__input:disabled ~ .govuk-hint {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   // =========================================================
@@ -159,13 +145,13 @@
   // =========================================================
 
   .govuk-radios--inline {
-    @include govuk-media-query ($from: tablet) {
-      @include govuk-clearfix;
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
 
       .govuk-radios__item {
         margin-right: govuk-spacing(4);
-        float: left;
-        clear: none;
       }
     }
   }
@@ -175,9 +161,9 @@
   // =========================================================
 
   .govuk-radios__divider {
-    $govuk-divider-size: $govuk-radios-size !default;
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    $govuk-divider-size: $govuk-radios-size !default;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);
     text-align: center;
@@ -188,10 +174,11 @@
   // =========================================================
 
   // The narrow border is used in the conditional reveals because the border has
-  // to be an even number in order to be centred under the 40px checkbox or radio.
+  // to be an even number in order to be centred under the 40px checkbox radio.
   $conditional-border-width: $govuk-border-width-narrow;
-  // Calculate the amount of padding needed to keep the border centered against the radios.
-  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  // Calculate the amount of padding needed to keep the border centered against
+  // the radios.
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the radios
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -203,7 +190,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    .js-enabled &--hidden {
+    .govuk-frontend-supported &--hidden {
       display: none;
     }
 
@@ -217,16 +204,10 @@
   // =========================================================
 
   .govuk-radios--small {
-
     $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
-    $label-offset: $govuk-touch-target-size - $input-offset;
 
     .govuk-radios__item {
-      @include govuk-clearfix;
-      min-height: 0;
       margin-bottom: 0;
-      padding-left: $label-offset;
-      float: left;
     }
 
     // Shift the touch target into the left margin so that the visible edge of
@@ -239,36 +220,23 @@
     //  ▲┆└─ Radio pseudo element, aligned with margin
     //  └─── Touch target (invisible input), shifted into the margin
     .govuk-radios__input {
-      @include _govuk-not-ie8 {
-        left: $input-offset * -1;
-      }
-
-      @include _govuk-if-ie8 {
-        margin-left: $govuk-small-radios-size * -1;
-      }
+      margin-left: $input-offset * -1;
     }
 
-    // Adjust the size and position of the label.
-    //
-    // Unlike larger radios, we also have to float the label in order to
-    // 'shrink' it, preventing the hover state from kicking in across the full
-    // width of the parent element.
     .govuk-radios__label {
-      margin-top: -2px;
-      padding: 13px govuk-spacing(3) 13px 1px;
-      float: left;
-
-      @include govuk-media-query($from: tablet) {
-        padding: 11px govuk-spacing(3) 10px 1px;
-      }
+      // Create a tiny space between the small radio hover state so that it
+      // doesn't clash with the label
+      padding-left: 1px;
     }
 
     // ( ) Radio ring
     //
     // Reduce the size of the control [1], vertically centering it within the
     // touch target [2]
-    .govuk-radios__label:before {
-      top: $input-offset - $govuk-border-width-form-element; // 2
+    // Left here is 0 because we've shifted the input into the left margin
+    .govuk-radios__label::before {
+      top: $input-offset; // 2
+      left: 0;
       width: $govuk-small-radios-size; // 1
       height: $govuk-small-radios-size; // 1
     }
@@ -276,10 +244,13 @@
     //  •  Radio button
     //
     // Reduce the size of the 'button' and center it within the ring
-    .govuk-radios__label:after {
-      top: 15px;
-      left: 7px;
-      border-width: 5px;
+    .govuk-radios__label::after {
+      $radio-button-size: govuk-spacing(1);
+
+      // The same calculation as normal radio buttons but reduce the border width
+      top: (($govuk-touch-target-size / 2) - $radio-button-size);
+      left: ((($govuk-touch-target-size / 2) - $radio-button-size) - $input-offset);
+      border-width: $radio-button-size;
     }
 
     // Fix position of hint with small radios
@@ -291,17 +262,14 @@
     // (If you do use them, they won't look completely broken... but seriously,
     // don't use them)
     .govuk-radios__hint {
-      padding: 0;
-      clear: both;
-      pointer-events: none;
+      padding-left: ($govuk-small-radios-size + $input-offset);
     }
 
     // Align conditional reveals with small radios
     .govuk-radios__conditional {
       $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
       margin-left: $margin-left;
-      padding-left: $label-offset - ($margin-left + $conditional-border-width);
-      clear: both;
+      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
     .govuk-radios__divider {
@@ -315,7 +283,11 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which radio they will select when their
     // cursor is outside of the visible area.
-    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-radios-focus-width dashed transparent;
+      outline-offset: 1px;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -324,10 +296,15 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
+      // prettier-ignore
       box-shadow:
-        0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
-        0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
+        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
+        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -337,13 +314,15 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
         box-shadow: initial;
       }
 
-      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
         box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
       }
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/radios/_radios.scss

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