govuk_tech_docs 5.2.1 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/init.mjs

@@ -1,4 +1,5 @@
-import { isSupported } from './common/index.mjs';
+import { normaliseOptions } from './common/configuration.mjs';
+import { isSupported, isObject } from './common/index.mjs';
 import { Accordion } from './components/accordion/accordion.mjs';
 import { Button } from './components/button/button.mjs';
 import { CharacterCount } from './components/character-count/character-count.mjs';
@@ -6,14 +7,13 @@ import { Checkboxes } from './components/checkboxes/checkboxes.mjs';
 import { ErrorSummary } from './components/error-summary/error-summary.mjs';
 import { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
 import { FileUpload } from './components/file-upload/file-upload.mjs';
-import { Header } from './components/header/header.mjs';
 import { NotificationBanner } from './components/notification-banner/notification-banner.mjs';
 import { PasswordInput } from './components/password-input/password-input.mjs';
 import { Radios } from './components/radios/radios.mjs';
 import { ServiceNavigation } from './components/service-navigation/service-navigation.mjs';
 import { SkipLink } from './components/skip-link/skip-link.mjs';
 import { Tabs } from './components/tabs/tabs.mjs';
-import { SupportError } from './errors/index.mjs';
+import { SupportError, ElementError } from './errors/index.mjs';
 
 /**
  * Initialise all components
@@ -21,28 +21,34 @@ import { SupportError } from './errors/index.mjs';
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
+ * @param {Config | Element | Document | null} [scopeOrConfig] - Scope of the document to search within or config for all components (with optional scope)
  */
-function initAll(config) {
-  var _config$scope;
-  config = typeof config !== 'undefined' ? config : {};
-  if (!isSupported()) {
-    if (config.onError) {
-      config.onError(new SupportError(), {
+function initAll(scopeOrConfig = {}) {
+  const config = isObject(scopeOrConfig) ? scopeOrConfig : {};
+  const options = normaliseOptions(scopeOrConfig);
+  try {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        identifier: 'GOV.UK Frontend scope element (`$scope`)'
+      });
+    }
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return;
   }
-  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
-  const options = {
-    scope: (_config$scope = config.scope) != null ? _config$scope : document,
-    onError: config.onError
-  };
-  components.forEach(([Component, config]) => {
-    createAll(Component, config, options);
+  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+  components.forEach(([Component, componentConfig]) => {
+    createAll(Component, componentConfig, options);
   });
 }
 
@@ -58,42 +64,42 @@ function initAll(config) {
  * @template {CompatibleClass} ComponentClass
  * @param {ComponentClass} Component - class of the component to create
  * @param {ComponentConfig<ComponentClass>} [config] - Config supplied to component
- * @param {OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
+ * @param {OnErrorCallback<ComponentClass> | Element | Document | null | CreateAllOptions<ComponentClass>} [scopeOrOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<ComponentClass>>} - array of instantiated components
  */
-function createAll(Component, config, createAllOptions) {
-  let $scope = document;
-  let onError;
-  if (typeof createAllOptions === 'object') {
-    var _createAllOptions$sco;
-    createAllOptions = createAllOptions;
-    $scope = (_createAllOptions$sco = createAllOptions.scope) != null ? _createAllOptions$sco : $scope;
-    onError = createAllOptions.onError;
-  }
-  if (typeof createAllOptions === 'function') {
-    onError = createAllOptions;
-  }
-  if (createAllOptions instanceof HTMLElement) {
-    $scope = createAllOptions;
-  }
-  const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
-  if (!isSupported()) {
-    if (onError) {
-      onError(new SupportError(), {
+function createAll(Component, config, scopeOrOptions) {
+  let $elements;
+  const options = normaliseOptions(scopeOrOptions);
+  try {
+    var _options$scope;
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        component: Component,
+        identifier: 'Scope element (`$scope`)'
+      });
+    }
+    $elements = (_options$scope = options.scope) == null ? void 0 : _options$scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         component: Component,
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return [];
   }
-  return Array.from($elements).map($element => {
+  return Array.from($elements != null ? $elements : []).map($element => {
     try {
       return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
     } catch (error) {
-      if (onError) {
-        onError(error, {
+      if (options.onError) {
+        options.onError(error, {
           element: $element,
           component: Component,
           config
@@ -112,6 +118,8 @@ function createAll(Component, config, createAllOptions) {
  * Config for all components via `initAll()`
  *
  * @typedef {object} Config
+ * @property {Element | Document | null} [scope] - Scope of the document to search within
+ * @property {OnErrorCallback<CompatibleClass>} [onError] - Initialisation error callback
  * @property {AccordionConfig} [accordion] - Accordion config
  * @property {ButtonConfig} [button] - Button config
  * @property {CharacterCountConfig} [characterCount] - Character Count config
@@ -136,7 +144,7 @@ function createAll(Component, config, createAllOptions) {
 /**
  * Component config keys, e.g. `accordion` and `characterCount`
  *
- * @typedef {keyof Config} ConfigKey
+ * @typedef {keyof Omit<Config, 'scope' | 'onError'>} ConfigKey
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -147,7 +155,7 @@ function createAll(Component, config, createAllOptions) {
  * @typedef {object} ErrorContext
  * @property {Element} [element] - Element used for component module initialisation
  * @property {ComponentClass} [component] - Class of component
- * @property {ComponentConfig<ComponentClass>} config - Config supplied to component
+ * @property {Config | ComponentConfig<ComponentClass>} [config] - Config supplied to components
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -158,7 +166,7 @@ function createAll(Component, config, createAllOptions) {
 /**
  * @template {CompatibleClass} ComponentClass
  * @typedef {object} CreateAllOptions
- * @property {Element | Document} [scope] - scope of the document to search within
+ * @property {Element | Document | null} [scope] - scope of the document to search within
  * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
  */
 

data/node_modules/govuk-frontend/dist/govuk/objects/_button-group.scss

@@ -57,7 +57,7 @@
 
     // On tablet and above, we also introduce a 'column gap' between the
     // buttons and links in each row and left align links
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // Cancel out the column gap for the last item in each row
       margin-right: ($horizontal-gap * -1);
 

data/node_modules/govuk-frontend/dist/govuk/objects/_form-group.scss

@@ -12,7 +12,8 @@
 
   .govuk-form-group--error {
     padding-left: govuk-spacing(3);
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
+    border-left: $govuk-border-width-form-group-error solid;
+    border-left-color: govuk-functional-colour(error);
 
     .govuk-form-group {
       // Reset error styles in nested form groups that might have error class

data/node_modules/govuk-frontend/dist/govuk/objects/_main-wrapper.scss

@@ -30,7 +30,7 @@
     padding-top: govuk-spacing(4);
     padding-bottom: govuk-spacing(4);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // This spacing is manually adjusted to replicate the margin of
       // govuk-heading-xl (50px) minus the spacing of back link and
       // breadcrumbs (10px)

data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss

@@ -5,11 +5,7 @@
   .govuk-template {
     // Set the overall page background colour to the same colour as used by the
     // footer to give the illusion of a long footer.
-    @include _govuk-rebrand(
-      background-color,
-      $from: $govuk-template-background-colour,
-      $to: $_govuk-rebrand-template-background-colour
-    );
+    background-color: govuk-functional-colour(template-background);
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
@@ -39,7 +35,7 @@
 
     // Force the scrollbar to always display in IE, to prevent horizontal page
     // jumps as content height changes (e.g. autocomplete results open).
-    @include govuk-media-query($media-type: screen) {
+    @media screen {
       overflow-y: scroll;
     }
   }
@@ -50,7 +46,7 @@
     // own containers.
     margin: 0;
     // Set the overall body of the page back to the typical background colour.
-    background-color: $govuk-body-background-colour;
+    background-color: govuk-functional-colour(body-background);
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/objects/_width-container.scss

@@ -37,7 +37,7 @@
   }
 
   // On tablet, add full width gutters
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     margin-right: $govuk-gutter;
     margin-left: $govuk-gutter;
 
@@ -55,7 +55,7 @@
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+  @media (min-width: #{($width + $govuk-gutter * 2)}) {
     margin-right: auto;
     margin-left: auto;
 

data/node_modules/govuk-frontend/dist/govuk/overrides/_display.scss

@@ -16,7 +16,7 @@
     display: none !important;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     .govuk-\!-display-none-print {
       display: none !important;
     }

data/node_modules/govuk-frontend/dist/govuk/overrides/_typography.scss

@@ -3,8 +3,6 @@
 
   // Generate typography override classes for each responsive font map in the
   // typography scale eg .govuk-\!-font-size-80
-  //
-  // govuk-!-font-size-14 is deprecated
   @each $size, $font-map in $govuk-typography-scale {
     .govuk-\!-font-size-#{$size} {
       $font-map: map-get($govuk-typography-scale, $size);

data/node_modules/govuk-frontend/dist/govuk/overrides/_width.scss

@@ -7,7 +7,7 @@
   .govuk-\!-width-three-quarters {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 75% !important;
     }
   }
@@ -15,7 +15,7 @@
   .govuk-\!-width-two-thirds {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 66.66% !important;
     }
   }
@@ -23,7 +23,7 @@
   .govuk-\!-width-one-half {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 50% !important;
     }
   }
@@ -31,7 +31,7 @@
   .govuk-\!-width-one-third {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 33.33% !important;
     }
   }
@@ -39,7 +39,7 @@
   .govuk-\!-width-one-quarter {
     width: 100% !important;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 25% !important;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-applied.scss

@@ -2,194 +2,9 @@
 /// @group settings/colours
 ////
 
-@import "../helpers/colour";
+@warn "The '_colours-applied' file is deprecated. Please import '_colours-functional' instead. "
+  + "See https://github.com/alphagov/govuk-frontend/releases/tag/v6.0.0 for more details.";
 
-// =========================================================
-// Generic
-// =========================================================
-
-/// Brand colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-brand-colour: govuk-colour("blue") !default;
-
-/// Text colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-text-colour: govuk-colour("black") !default;
-
-/// Canvas background colour
-///
-/// Used by the footer component and template to give the illusion of a long
-/// footer.
-///
-/// @type Colour
-/// @access public
-/// @deprecated "$govuk-canvas-background-colour has been deprecated and will be removed in the next major
-/// version. Use `$govuk-template-background-colour` if you want to change the background of
-/// the `<html>` element and background colour of elements that need to match for visual
-/// continuity.
-$govuk-canvas-background-colour: govuk-colour("light-grey") !default;
-
-// Output a deprecation warning if $govuk-canvas-background-colour is being overridden
-// Remove in next major version.
-@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
-  @include _warning(
-    "$govuk-canvas-background-colour",
-    "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
-  );
-}
-
-/// Template background colour
-///
-/// Used by components that want to give the illusion of extending
-/// the template background (such as the footer and cookie banner).
-///
-/// @type Colour
-/// @access public
-
-$govuk-template-background-colour: govuk-colour("light-grey") !default;
-
-/// Body background colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-body-background-colour: govuk-colour("white") !default;
-
-/// Text colour for print media
-///
-/// Use 'true black' to avoid printers using colour ink to print body text
-///
-/// @type Colour
-/// @access public
-
-$govuk-print-text-colour: #000000 !default;
-
-/// Secondary text colour
-///
-/// Used in for example 'muted' text and help text.
-///
-/// @type Colour
-/// @access public
-
-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
-
-/// Focus colour
-///
-/// Used for outline (and background, where appropriate) when interactive
-/// elements (links, form controls) have keyboard focus.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-colour: govuk-colour("yellow") !default;
-
-/// Focused text colour
-///
-/// Ensure that the contrast between the text and background colour passes
-/// WCAG Level AA contrast requirements.
-///
-/// @type Colour
-/// @access public
-
-$govuk-focus-text-colour: govuk-colour("black") !default;
-
-/// Error colour
-///
-/// Used to highlight error messages and form controls in an error state
-///
-/// @type Colour
-/// @access public
-
-$govuk-error-colour: govuk-colour("red") !default;
-
-/// Success colour
-///
-/// Used to highlight success messages and banners
-///
-/// @type Colour
-/// @access public
-
-$govuk-success-colour: govuk-colour("green") !default;
-
-/// Border colour
-///
-/// Used in for example borders, separators, rules and keylines.
-///
-/// @type Colour
-/// @access public
-
-$govuk-border-colour: govuk-colour("mid-grey") !default;
-
-/// Input border colour
-///
-/// Used for form inputs and controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-input-border-colour: govuk-colour("black") !default;
-
-/// Input hover colour
-///
-/// Used for hover states on form controls
-///
-/// @type Colour
-/// @access public
-
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
-
-// =============================================================================
-// Links
-// =============================================================================
-
-/// Link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-colour: govuk-colour("blue") !default;
-
-/// Visited link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-visited-colour: govuk-colour("purple") !default;
-
-/// Link hover colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
-
-/// Active link colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-link-active-colour: govuk-colour("black") !default;
-
-// =============================================================================
-// Brand refresh
-// =============================================================================
-
-/// Updated template background colour
-///
-/// @type Colour
-/// @access private
-$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 95%);
-
-/// Border colour for areas on a light-blue background
-///
-/// @type Colour
-/// @access private
-$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
+@import "./colours-functional";
 
 /*# sourceMappingURL=_colours-applied.scss.map */