govuk_tech_docs 4.2.0 → 4.3.0

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

@@ -1,22 +1,20 @@
-import { mergeConfigs } from '../../common/index.mjs';
-import { normaliseDataset } from '../../common/normalise-dataset.mjs';
+import { ConfigurableComponent } from '../../common/configuration.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 import { I18n } from '../../i18n.mjs';
 
 /**
  * Exit this page component
  *
  * @preserve
+ * @augments ConfigurableComponent<ExitThisPageConfig>
  */
-class ExitThisPage extends GOVUKFrontendComponent {
+class ExitThisPage extends ConfigurableComponent {
   /**
    * @param {Element | null} $root - HTML element that wraps the Exit This Page button
    * @param {ExitThisPageConfig} [config] - Exit This Page config
    */
   constructor($root, config = {}) {
-    super($root);
-    this.config = void 0;
+    super($root, config);
     this.i18n = void 0;
     this.$button = void 0;
     this.$skiplinkButton = null;
@@ -37,7 +35,6 @@ class ExitThisPage extends GOVUKFrontendComponent {
         identifier: 'Button (`.govuk-exit-this-page__button`)'
       });
     }
-    this.config = mergeConfigs(ExitThisPage.defaults, config, normaliseDataset(ExitThisPage, this.$root.dataset));
     this.i18n = new I18n(this.config.i18n);
     this.$button = $button;
     const $skiplinkButton = document.querySelector('.govuk-js-exit-this-page-skiplink');
@@ -203,7 +200,7 @@ class ExitThisPage extends GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {import('../../common/index.mjs').Schema} Schema
+ * @import { Schema } from '../../common/configuration.mjs'
  */
 ExitThisPage.moduleName = 'govuk-exit-this-page';
 ExitThisPage.defaults = Object.freeze({

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

@@ -3,7 +3,11 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/file-upload") {
+  $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
+  $empty-button-background-colour: govuk-colour("white");
+  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
+  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -46,6 +50,169 @@
       cursor: not-allowed;
     }
   }
+
+  .govuk-drop-zone {
+    display: block;
+    position: relative;
+    z-index: 0;
+    background-color: $govuk-body-background-colour;
+  }
+
+  // required because disabling pointer events
+  // on the button means that the cursor style
+  // be applied on the button itself
+  .govuk-drop-zone--disabled {
+    cursor: not-allowed;
+  }
+
+  .govuk-file-upload-button__pseudo-button {
+    width: auto;
+    margin-right: govuk-spacing(2);
+    margin-bottom: $govuk-border-width-form-element + 1;
+    flex-shrink: 0;
+  }
+
+  .govuk-file-upload-button__instruction {
+    margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .govuk-file-upload-button__status {
+    display: block;
+    margin-bottom: govuk-spacing(2);
+    padding: govuk-spacing(3) govuk-spacing(2);
+    background-color: govuk-colour("white");
+    text-align: left;
+  }
+
+  // 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;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .govuk-file-upload-button {
+    width: 100%;
+    // align the padding to be same as notification banner and error summary accounting for the thicker borders
+    padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
+    border: $file-upload-border-width govuk-colour("mid-grey") solid;
+    background-color: govuk-colour("light-grey");
+    cursor: pointer;
+
+    @include govuk-media-query($from: tablet) {
+      padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    &:hover {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      }
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+
+    &:active,
+    &:focus {
+      border: $file-upload-border-width solid govuk-colour("black");
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+      // 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;
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: $govuk-focus-colour;
+        box-shadow: 0 2px 0 govuk-colour("black");
+      }
+
+      &:hover .govuk-file-upload-button__pseudo-button {
+        border-color: $govuk-focus-colour;
+        outline: 3px solid transparent;
+        background-color: govuk-colour("light-grey");
+        box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+      }
+    }
+  }
+
+  .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: govuk-shade(govuk-colour("blue"), 60%);
+      background-color: $empty-status-background-colour;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: govuk-colour("light-grey");
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+  }
+
+  .govuk-file-upload-button--dragging {
+    border-style: solid;
+    border-color: govuk-colour("black");
+
+    // extra specificity to apply when
+    // empty
+    &.govuk-file-upload-button {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+    }
+
+    &.govuk-file-upload-button--empty {
+      background-color: govuk-colour("light-grey");
+    }
+
+    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
+    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+    }
+  }
+
+  .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;
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */