govuk_tech_docs 6.3.0.beta → 6.3.0

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_mixin.scss

@@ -0,0 +1,217 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $file-upload-border-width: 2px;
+  $component-padding: base.govuk-spacing(1);
+  $empty-button-background-colour: base.govuk-colour("white");
+  $empty-pseudo-button-background-colour: base.govuk-colour("black", $variant: "tint-95");
+  $empty-status-background-colour: base.govuk-colour("blue", $variant: "tint-80");
+
+  .govuk-file-upload {
+    @include base.govuk-font($size: 19);
+
+    max-width: 100%;
+    margin-left: -$component-padding;
+    padding: $component-padding;
+    color: base.govuk-functional-colour(text);
+
+    // The default file upload button in Safari does not support setting a
+    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the
+    // native appearance so the font-size is set to 19px
+    // https://webkit.org/b/224746
+    &::-webkit-file-upload-button {
+      color: inherit;
+      font: inherit;
+      -webkit-appearance: button;
+    }
+
+    &:focus {
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+      // Use `box-shadow` to add border instead of changing `border-width`
+      // (which changes element size) and since `outline` is already used for
+      // the yellow focus state.
+      box-shadow: inset 0 0 0 4px base.govuk-functional-colour(input-border);
+    }
+
+    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
+    // receives focus in Firefox.
+    // This can't be set together with `:focus` as all versions of IE fail
+    // to recognise `focus-within` and don't set any styles from the block
+    // when it's a selector.
+    &:focus-within {
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+
+      box-shadow: inset 0 0 0 4px base.govuk-functional-colour(input-border);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-file-upload-wrapper,
+  // @deprecated .govuk-drop-zone class is deprecated in favour of .govuk-file-upload-wrapper
+  .govuk-drop-zone {
+    display: block;
+    position: relative;
+    z-index: 0;
+    background-color: base.govuk-functional-colour(body-background);
+  }
+
+  // required because disabling pointer events
+  // on the button means that the cursor style
+  // be applied on the button itself
+  .govuk-file-upload-wrapper--disabled {
+    cursor: not-allowed;
+  }
+
+  .govuk-file-upload-button__pseudo-button {
+    flex-shrink: 0;
+    width: auto;
+    margin-right: base.govuk-spacing(2);
+    margin-bottom: base.$govuk-border-width-form-element + 1;
+  }
+
+  .govuk-file-upload-button__instruction {
+    margin-top: base.govuk-spacing(2) - (base.$govuk-border-width-form-element + 1);
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .govuk-file-upload-button__status {
+    display: block;
+    margin-bottom: base.govuk-spacing(2);
+    padding: base.govuk-spacing(3) base.govuk-spacing(2);
+    color: base.govuk-colour("white");
+    background-color: base.govuk-colour("blue");
+    text-align: left;
+    @include base.govuk-text-break-word;
+  }
+
+  // bugs documented with button using flex
+  // https://github.com/philipwalton/flexbugs#flexbug-9
+  // so we need a container here
+  .govuk-file-upload-button__pseudo-button-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+  }
+
+  .govuk-file-upload-button {
+    width: 100%;
+    // align the padding to be same as notification banner and error summary accounting for the thicker borders
+    padding: (base.govuk-spacing(3) + base.$govuk-border-width - $file-upload-border-width);
+    border: $file-upload-border-width solid base.govuk-colour("black", $variant: "tint-80");
+    background-color: base.govuk-colour("white");
+    cursor: pointer;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding: (base.govuk-spacing(4) + base.$govuk-border-width - $file-upload-border-width);
+    }
+
+    @at-root .govuk-form-group--error & {
+      border-style: solid;
+      border-color: base.govuk-functional-colour("error");
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: base.govuk-colour("black", $variant: "tint-95");
+    }
+
+    &:hover {
+      border-style: dashed;
+      border-color: base.govuk-colour("black", $variant: "tint-50");
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: base.govuk-colour("black", $variant: "tint-80");
+      }
+
+      .govuk-file-upload-button__status {
+        background-color: base.govuk-colour("blue");
+      }
+    }
+
+    &:active,
+    &:focus {
+      border: $file-upload-border-width solid base.govuk-colour("black");
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      background-color: base.govuk-colour("black", $variant: "tint-95");
+      // 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 base.$govuk-border-width-form-element;
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: base.govuk-functional-colour(focus);
+        box-shadow: 0 2px 0 base.govuk-colour("black");
+      }
+
+      &:hover .govuk-file-upload-button__pseudo-button {
+        border-color: base.govuk-functional-colour(focus);
+        outline: 3px solid transparent;
+        background-color: base.govuk-colour("black", $variant: "tint-80");
+        box-shadow: inset 0 0 0 1px base.govuk-functional-colour(focus);
+      }
+    }
+  }
+
+  .govuk-file-upload-button--empty {
+    border-style: dashed;
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      color: base.govuk-colour("black");
+      background-color: $empty-status-background-colour;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: base.govuk-colour("black", $variant: "tint-95");
+
+      .govuk-file-upload-button__status {
+        background-color: base.govuk-colour("blue", $variant: "tint-80");
+      }
+    }
+  }
+
+  .govuk-file-upload-button--dragging {
+    border-style: solid;
+    border-color: base.govuk-colour("black");
+
+    // extra specificity to apply when
+    // empty
+    &.govuk-file-upload-button--empty {
+      background-color: base.govuk-colour("black", $variant: "tint-95");
+    }
+  }
+
+  .govuk-file-upload-button:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      background-color: $empty-status-background-colour;
+    }
+  }
+}
+

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

@@ -382,6 +382,7 @@
       this.$input = void 0;
       this.$button = void 0;
       this.$status = void 0;
+      this.$label = void 0;
       this.i18n = void 0;
       this.id = void 0;
       this.$announcements = void 0;
@@ -411,8 +412,30 @@
       if (!$label.id) {
         $label.id = `${this.id}-label`;
       }
+      this.$label = $label;
       this.$input.id = `${this.id}-input`;
-      this.$input.setAttribute('hidden', 'true');
+      this.$input.setAttribute('hidden', 'hidden');
+      this.$status = this.createStatus();
+      this.$button = this.createButton();
+      this.$root.insertAdjacentElement('afterbegin', this.$button);
+      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.$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');
+      $status.innerText = this.i18n.t('noFileChosen');
+      return $status;
+    }
+    createButton() {
       const $button = document.createElement('button');
       $button.classList.add('govuk-file-upload-button');
       $button.type = 'button';
@@ -422,11 +445,7 @@
       if (ariaDescribedBy) {
         $button.setAttribute('aria-describedby', ariaDescribedBy);
       }
-      const $status = document.createElement('span');
-      $status.className = 'govuk-body govuk-file-upload-button__status';
-      $status.setAttribute('aria-live', 'polite');
-      $status.innerText = this.i18n.t('noFileChosen');
-      $button.appendChild($status);
+      $button.appendChild(this.$status);
       const commaSpan = document.createElement('span');
       commaSpan.className = 'govuk-visually-hidden';
       commaSpan.innerText = ', ';
@@ -444,24 +463,14 @@
       instructionSpan.innerText = this.i18n.t('dropInstruction');
       containerSpan.appendChild(instructionSpan);
       $button.appendChild(containerSpan);
-      $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+      $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
       $button.addEventListener('click', this.onClick.bind(this));
       $button.addEventListener('dragover', event => {
         event.preventDefault();
       });
-      this.$root.insertAdjacentElement('afterbegin', $button);
-      this.$input.setAttribute('tabindex', '-1');
-      this.$input.setAttribute('aria-hidden', 'true');
-      this.$button = $button;
-      this.$status = $status;
-      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.$root.insertAdjacentElement('afterend', this.$announcements);
+      return $button;
+    }
+    bindDraggingEvents() {
       this.$button.addEventListener('drop', this.onDrop.bind(this));
       document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
       document.addEventListener('dragenter', () => {
@@ -568,7 +577,7 @@
     }
     updateDisabledState() {
       this.$button.disabled = this.$input.disabled;
-      this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+      this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
     }
   }
 

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

@@ -376,6 +376,7 @@ class FileUpload extends ConfigurableComponent {
     this.$input = void 0;
     this.$button = void 0;
     this.$status = void 0;
+    this.$label = void 0;
     this.i18n = void 0;
     this.id = void 0;
     this.$announcements = void 0;
@@ -405,8 +406,30 @@ class FileUpload extends ConfigurableComponent {
     if (!$label.id) {
       $label.id = `${this.id}-label`;
     }
+    this.$label = $label;
     this.$input.id = `${this.id}-input`;
-    this.$input.setAttribute('hidden', 'true');
+    this.$input.setAttribute('hidden', 'hidden');
+    this.$status = this.createStatus();
+    this.$button = this.createButton();
+    this.$root.insertAdjacentElement('afterbegin', this.$button);
+    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.$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');
+    $status.innerText = this.i18n.t('noFileChosen');
+    return $status;
+  }
+  createButton() {
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
@@ -416,11 +439,7 @@ class FileUpload extends ConfigurableComponent {
     if (ariaDescribedBy) {
       $button.setAttribute('aria-describedby', ariaDescribedBy);
     }
-    const $status = document.createElement('span');
-    $status.className = 'govuk-body govuk-file-upload-button__status';
-    $status.setAttribute('aria-live', 'polite');
-    $status.innerText = this.i18n.t('noFileChosen');
-    $button.appendChild($status);
+    $button.appendChild(this.$status);
     const commaSpan = document.createElement('span');
     commaSpan.className = 'govuk-visually-hidden';
     commaSpan.innerText = ', ';
@@ -438,24 +457,14 @@ class FileUpload extends ConfigurableComponent {
     instructionSpan.innerText = this.i18n.t('dropInstruction');
     containerSpan.appendChild(instructionSpan);
     $button.appendChild(containerSpan);
-    $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+    $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
     $button.addEventListener('click', this.onClick.bind(this));
     $button.addEventListener('dragover', event => {
       event.preventDefault();
     });
-    this.$root.insertAdjacentElement('afterbegin', $button);
-    this.$input.setAttribute('tabindex', '-1');
-    this.$input.setAttribute('aria-hidden', 'true');
-    this.$button = $button;
-    this.$status = $status;
-    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.$root.insertAdjacentElement('afterend', this.$announcements);
+    return $button;
+  }
+  bindDraggingEvents() {
     this.$button.addEventListener('drop', this.onDrop.bind(this));
     document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
     document.addEventListener('dragenter', () => {
@@ -562,7 +571,7 @@ class FileUpload extends ConfigurableComponent {
   }
   updateDisabledState() {
     this.$button.disabled = this.$input.disabled;
-    this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+    this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs

@@ -20,6 +20,7 @@ class FileUpload extends ConfigurableComponent {
     this.$input = void 0;
     this.$button = void 0;
     this.$status = void 0;
+    this.$label = void 0;
     this.i18n = void 0;
     this.id = void 0;
     this.$announcements = void 0;
@@ -49,8 +50,30 @@ class FileUpload extends ConfigurableComponent {
     if (!$label.id) {
       $label.id = `${this.id}-label`;
     }
+    this.$label = $label;
     this.$input.id = `${this.id}-input`;
-    this.$input.setAttribute('hidden', 'true');
+    this.$input.setAttribute('hidden', 'hidden');
+    this.$status = this.createStatus();
+    this.$button = this.createButton();
+    this.$root.insertAdjacentElement('afterbegin', this.$button);
+    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.$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');
+    $status.innerText = this.i18n.t('noFileChosen');
+    return $status;
+  }
+  createButton() {
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
@@ -60,11 +83,7 @@ class FileUpload extends ConfigurableComponent {
     if (ariaDescribedBy) {
       $button.setAttribute('aria-describedby', ariaDescribedBy);
     }
-    const $status = document.createElement('span');
-    $status.className = 'govuk-body govuk-file-upload-button__status';
-    $status.setAttribute('aria-live', 'polite');
-    $status.innerText = this.i18n.t('noFileChosen');
-    $button.appendChild($status);
+    $button.appendChild(this.$status);
     const commaSpan = document.createElement('span');
     commaSpan.className = 'govuk-visually-hidden';
     commaSpan.innerText = ', ';
@@ -82,24 +101,14 @@ class FileUpload extends ConfigurableComponent {
     instructionSpan.innerText = this.i18n.t('dropInstruction');
     containerSpan.appendChild(instructionSpan);
     $button.appendChild(containerSpan);
-    $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+    $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
     $button.addEventListener('click', this.onClick.bind(this));
     $button.addEventListener('dragover', event => {
       event.preventDefault();
     });
-    this.$root.insertAdjacentElement('afterbegin', $button);
-    this.$input.setAttribute('tabindex', '-1');
-    this.$input.setAttribute('aria-hidden', 'true');
-    this.$button = $button;
-    this.$status = $status;
-    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.$root.insertAdjacentElement('afterend', this.$announcements);
+    return $button;
+  }
+  bindDraggingEvents() {
     this.$button.addEventListener('drop', this.onDrop.bind(this));
     document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
     document.addEventListener('dragenter', () => {
@@ -206,7 +215,7 @@ class FileUpload extends ConfigurableComponent {
   }
   updateDisabledState() {
     this.$button.disabled = this.$input.disabled;
-    this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+    this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/footer/_footer.import.scss

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

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

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