govuk_tech_docs 5.2.2 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss

@@ -76,25 +76,25 @@
 
 @mixin govuk-link-style-default {
   &:link {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:visited {
-    color: $govuk-link-visited-colour;
+    color: govuk-functional-colour(link-visited);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:active {
-    color: $govuk-link-active-colour;
+    color: govuk-functional-colour(link-active);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -117,21 +117,21 @@
 @mixin govuk-link-style-error {
   &:link,
   &:visited {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   &:hover {
-    color: scale-color($govuk-error-colour, $lightness: -30%);
+    color: govuk-colour("red", $variant: "shade-50");
   }
 
   &:active {
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -154,21 +154,21 @@
 @mixin govuk-link-style-success {
   &:link,
   &:visited {
-    color: $govuk-success-colour;
+    color: govuk-functional-colour(success);
   }
 
   &:hover {
-    color: scale-color($govuk-success-colour, $lightness: -30%);
+    color: govuk-colour("green", $variant: "shade-50");
   }
 
   &:active {
-    color: $govuk-success-colour;
+    color: govuk-functional-colour(success);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -191,18 +191,18 @@
 @mixin govuk-link-style-muted {
   &:link,
   &:visited {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   &:hover,
   &:active {
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -228,14 +228,6 @@
     @include govuk-text-colour;
   }
 
-  // Force a colour change on hover to work around a bug in Safari
-  // https://webkit.org/b/224483
-  &:hover {
-    @if type-of($govuk-text-colour) == color {
-      color: rgba($govuk-text-colour, 0.99);
-    }
-  }
-
   &:active,
   &:focus {
     @include govuk-text-colour;
@@ -264,15 +256,8 @@
     color: govuk-colour("white");
   }
 
-  // Force a colour change on hover to work around a bug in Safari
-  // https://webkit.org/b/224483
-  &:hover,
-  &:active {
-    color: rgba(govuk-colour("white"), 0.99);
-  }
-
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -298,25 +283,25 @@
 
 @mixin govuk-link-style-no-visited-state {
   &:link {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:visited {
-    color: $govuk-link-colour;
+    color: govuk-functional-colour(link);
   }
 
   &:hover {
-    color: $govuk-link-hover-colour;
+    color: govuk-functional-colour(link-hover);
   }
 
   &:active {
-    color: $govuk-link-active-colour;
+    color: govuk-functional-colour(link-active);
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-focus-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }
 
@@ -348,11 +333,10 @@
 /// @access public
 
 @mixin govuk-link-print-friendly {
-  @include govuk-media-query($media-type: print) {
+  @media print {
     &[href^="/"],
     &[href^="http://"],
-    &[href^="https://"]
-    {
+    &[href^="https://"] {
       &::after {
         content: " (" attr(href) ")";
         font-size: 90%;

data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss

@@ -2,52 +2,168 @@
 /// @group helpers/layout
 ////
 
+@import "../settings/media-queries";
+@import "../tools/px-to-em";
+
 // =========================================================
-// Wrangle sass-mq config...
+// Helpers
 // =========================================================
 
-// Pass our breakpoint definitions through to sass-mq.
-$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+/// Get the value of a breakpoint by name.
+///
+/// @param {String | Number} $value - If a string, the name of a breakpoint
+///   in $breakpoints. If a number without units, it will convert to px. If a
+///   number with units, it will return the value unaltered.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $value.
+/// @returns {Number} - The set (minimum) value of the breakpoint
+///
+/// @example scss
+///  .element {
+///    width: govuk-breakpoint-value(tablet);
+///    @media (min-width: #{govuk-breakpoint-value(desktop)}) {
+///      color: red;
+///    }
+///    @media (min-width: #{govuk-breakpoint-value(400px)}) {
+///      color: green;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media (orientation: landscape) and (min-width: #{govuk-breakpoint-value(extra-large, $custom-breakpoint-map)}) {
+///      color: blue;
+///    }
+///  }
+///
+/// @access public
 
-$mq-show-breakpoints: ();
+@function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {
+  // If $value is a number
+  @if type-of($value) == "number" {
+    // If the number is unitless, coerce it into a pixel value
+    @if unitless($value) {
+      $value: $value * 1px;
+    }
 
-@if variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints {
-  $mq-show-breakpoints: map-keys($govuk-breakpoints);
-}
+    @return $value;
+  }
 
-// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
-// the current breakpoint from being included multiple times.
-//
-// We can't use the `exports` mixin for this because import directives cannot be
-// used within control directives 😠
-$sass-mq-already-included: false !default;
+  // If $value is a string and exists as a key in in $breakpoints,
+  // look up and use the value of it
+  @if type-of($value) == "string" and map-has-key($breakpoints, $value) {
+    @return map-get($breakpoints, $value);
+  }
 
-@if $sass-mq-already-included {
-  $mq-show-breakpoints: ();
+  // If we get this far, we can't use the value, so return an error
+  @error "Could not find a breakpoint given `#{$value}`.";
 }
 
-@import "../vendor/sass-mq";
+/// Generate the `min-width` segment of a media query given a breakpoint key
+///
+/// Pixel values are converted to ems for backwards compatibility with
+/// sass-mq. Unlike sass-mq, non-px and em values can be used as well.
+///
+/// @param {String | Number} $from - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $from.
+/// @returns {String} - A `min-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-from-breakpoint(tablet)} {
+///      color: red;
+///    }
+///    @media #{govuk-from-breakpoint(30em)} {
+///      color: green;
+///    }
+///    @media #{govuk-from-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-from-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
 
-$sass-mq-already-included: true;
+@function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($from, $breakpoints);
 
-// =========================================================
-// Helpers
-// =========================================================
+  @if type-of($value) == "number" and unit($value) == "px" {
+    $value: govuk-em($value);
+  }
+
+  @return "(min-width: #{$value})";
+}
 
-/// Media Query
+/// Generate the `max-width` segment of a media query given a breakpoint key
 ///
-/// This is a currently a wrapper for sass-mq - abstracted so that we can
-/// replace it in the future if we so choose.
+/// sass-mq converted pixel values to ems, and only performed subtractions on
+/// named breakpoints. These have been retained for backwards compatibility,
+/// though unlike sass-mq, this also supports using non-px and em values.
 ///
-/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
-/// @param {String | Boolean} $and [false] - Additional media query parameters
-/// @param {String} $media-type [all] - Media type: screen, print…
+/// @param {String | Number} $until - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $until.
+/// @returns {String} - A `max-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-until-breakpoint(desktop)} {
+///      color: red;
+///    }
+///    @media #{govuk-until-breakpoint(40em)} {
+///      color: green;
+///    }
+///    @media #{govuk-until-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-until-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
+
+@function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($until, $breakpoints);
+
+  @if type-of($value) == "number" and unit($value) == "px" {
+    // If it's a pixel value, convert it to ems.
+    $value: govuk-em($value);
+  }
+
+  // If $value derives from a named breakpoint, additionally subtract .01em
+  @if type-of($until) != "number" and unit($value) == "em" {
+    $value: $value - 0.01em;
+  }
+
+  @return "(max-width: #{$value})";
+}
+
+/// Media query
 ///
-/// @ignore Undocumented mq API, for advanced use only:
-/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
+/// @param {String | Boolean} $from [false] - One of $breakpoints
+/// @param {String | Boolean} $until [false] - One of $breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [all] - Override media type: screen, print…
+/// @param {Map} $breakpoints [$govuk-breakpoints] - Map of breakpoints to use
 ///
-/// @content styling rules, wrapped into a @media query when $responsive is true
+/// @content styling rules to use for the given media query range
 ///
 /// @example scss
 ///  .element {
@@ -67,14 +183,37 @@ $sass-mq-already-included: true;
 ///      color: hotpink;
 ///    }
 ///    @include govuk-media-query(tablet, $media-type: screen) {
-///      color: hotpink;
+///      color: rebeccapurple;
 ///    }
 ///  }
 ///
 /// @access public
 
-@mixin govuk-media-query($args...) {
-  @include mq($args...) {
+@mixin govuk-media-query($from: null, $until: null, $and: null, $media-type: "all", $breakpoints: $govuk-breakpoints) {
+  $media-query: "";
+  $min-width: if($from, govuk-from-breakpoint($from, $breakpoints), null);
+  $max-width: if($until, govuk-until-breakpoint($until, $breakpoints), null);
+
+  // Assemble the media query string
+  @if $media-type != "all" {
+    $media-query: "#{$media-type}";
+  }
+  @if $min-width {
+    $media-query: "#{$media-query} and #{$min-width}";
+  }
+  @if $max-width {
+    $media-query: "#{$media-query} and #{$max-width}";
+  }
+  @if $and {
+    $media-query: "#{$media-query} and #{$and}";
+  }
+
+  // If $media-query currently begins with an orphaned ' and ', remove it.
+  @if str-index($media-query, " and ") == 1 {
+    $media-query: str-slice($media-query, 6);
+  }
+
+  @media #{$media-query} {
     @content;
   }
 }

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss

@@ -107,7 +107,7 @@
         #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         @if $direction == all {
           #{$property}: $breakpoint-value if($important, !important, null);
         } @else {

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

@@ -23,7 +23,7 @@
     @include _govuk-font-face-gds-transport;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     font-family: $govuk-font-family-print;
   }
 }
@@ -35,10 +35,10 @@
 /// @access public
 
 @mixin govuk-text-colour {
-  color: $govuk-text-colour;
+  color: govuk-functional-colour(text);
 
-  @include govuk-media-query($media-type: print) {
-    color: $govuk-print-text-colour;
+  @media print {
+    color: govuk-functional-colour(print-text);
   }
 }
 
@@ -114,30 +114,6 @@
   @return $line-height;
 }
 
-/// Font size and line height helper
-///
-/// @param {Number} $size - Point from the type scale (the size as it would
-///   appear on tablet and above)
-/// @param {Number} $override-line-height [false] - Non responsive custom line
-///   height. Omit to use the line height from the font map.
-/// @param {Boolean} $important [false] - Whether to mark declarations as
-///   `!important`.
-///
-/// @throw if `$size` is not a valid point from the type scale
-///
-/// @access public
-///
-/// @alias govuk-font-size
-/// @deprecated Use `govuk-font-size` instead
-
-@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
-  @include _warning(
-    "govuk-typography-responsive",
-    "govuk-typography-responsive is deprecated. Use govuk-font-size instead."
-  );
-  @include govuk-font-size($size, $override-line-height, $important);
-}
-
 /// Font size and line height helper
 ///
 /// Takes a point from the responsive 'font map' as an argument (the size as it
@@ -240,12 +216,12 @@
       font-size: $font-size-rem;
       line-height: $calculated-line-height;
     } @else if $breakpoint == "print" {
-      @include govuk-media-query($media-type: print) {
+      @media print {
         font-size: $font-size;
         line-height: $calculated-line-height;
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         font-size: $font-size-rem;
         line-height: $calculated-line-height;
       }

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

@@ -55,7 +55,7 @@ class I18n {
       return 'other';
     }
     const translation = this.translations[lookupKey];
-    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
+    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : 'other';
     if (isObject(translation)) {
       if (preferredForm in translation) {
         return preferredForm;
@@ -66,132 +66,7 @@ class I18n {
     }
     throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
   }
-  selectPluralFormUsingFallbackRules(count) {
-    count = Math.abs(Math.floor(count));
-    const ruleset = this.getPluralRulesForLocale();
-    if (ruleset) {
-      return I18n.pluralRules[ruleset](count);
-    }
-    return 'other';
-  }
-  getPluralRulesForLocale() {
-    const localeShort = this.locale.split('-')[0];
-    for (const pluralRule in I18n.pluralRulesMap) {
-      const languages = I18n.pluralRulesMap[pluralRule];
-      if (languages.includes(this.locale) || languages.includes(localeShort)) {
-        return pluralRule;
-      }
-    }
-  }
 }
-I18n.pluralRulesMap = {
-  arabic: ['ar'],
-  chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
-  french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
-  german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
-  irish: ['ga'],
-  russian: ['ru', 'uk'],
-  scottish: ['gd'],
-  spanish: ['pt-PT', 'it', 'es'],
-  welsh: ['cy']
-};
-I18n.pluralRules = {
-  arabic(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n % 100 >= 3 && n % 100 <= 10) {
-      return 'few';
-    }
-    if (n % 100 >= 11 && n % 100 <= 99) {
-      return 'many';
-    }
-    return 'other';
-  },
-  chinese() {
-    return 'other';
-  },
-  french(n) {
-    return n === 0 || n === 1 ? 'one' : 'other';
-  },
-  german(n) {
-    return n === 1 ? 'one' : 'other';
-  },
-  irish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 6) {
-      return 'few';
-    }
-    if (n >= 7 && n <= 10) {
-      return 'many';
-    }
-    return 'other';
-  },
-  russian(n) {
-    const lastTwo = n % 100;
-    const last = lastTwo % 10;
-    if (last === 1 && lastTwo !== 11) {
-      return 'one';
-    }
-    if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-      return 'few';
-    }
-    if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-      return 'many';
-    }
-    return 'other';
-  },
-  scottish(n) {
-    if (n === 1 || n === 11) {
-      return 'one';
-    }
-    if (n === 2 || n === 12) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-      return 'few';
-    }
-    return 'other';
-  },
-  spanish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n % 1000000 === 0 && n !== 0) {
-      return 'many';
-    }
-    return 'other';
-  },
-  welsh(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n === 3) {
-      return 'few';
-    }
-    if (n === 6) {
-      return 'many';
-    }
-    return 'other';
-  }
-};
 
 export { I18n };
 //# sourceMappingURL=i18n.mjs.map

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

@@ -7,7 +7,6 @@ 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';
@@ -47,7 +46,7 @@ function initAll(scopeOrConfig = {}) {
     }
     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 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);
   });

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