govuk_tech_docs 6.3.0.beta → 6.4.0.beta

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

@@ -1,14 +1,13 @@
-@import "clearfix";
-@import "colour";
-@import "device-pixels";
-@import "focused";
-@import "font-faces";
-@import "grid";
-@import "links";
-@import "media-queries";
-@import "shape-arrow";
-@import "spacing";
-@import "typography";
-@import "visually-hidden";
+@forward "clearfix";
+@forward "colour";
+@forward "device-pixels";
+@forward "focused";
+@forward "grid";
+@forward "links";
+@forward "media-queries";
+@forward "shape-arrow";
+@forward "spacing";
+@forward "typography";
+@forward "visually-hidden";
+@forward "width-container";
 
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,2 @@
+@forward "links";
+

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

@@ -2,6 +2,12 @@
 /// @group helpers/links
 ////
 
+@use "../settings/links" as *;
+@use "../settings/measurements" as *;
+@use "colour" as *;
+@use "focused" as *;
+@use "typography" as *;
+
 /// Common link styles
 ///
 /// Provides the typography and focus state, regardless of link style.
@@ -253,7 +259,7 @@
 @mixin govuk-link-style-inverse {
   &:link,
   &:visited {
-    color: govuk-colour("white");
+    color: govuk-functional-colour(inverse-text);
   }
 
   &:focus {
@@ -372,4 +378,3 @@
   }
 }
 
-/*# sourceMappingURL=_links.scss.map */

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

@@ -0,0 +1,2 @@
+@forward "media-queries";
+

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

@@ -6,8 +6,8 @@
 @use "sass:meta";
 @use "sass:string";
 
-@import "../settings/media-queries";
-@import "../tools/px-to-em";
+@use "../settings/media-queries" as *;
+@use "../tools/px-to-em" as *;
 
 // =========================================================
 // Helpers
@@ -220,4 +220,3 @@
   }
 }
 
-/*# sourceMappingURL=_media-queries.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.import.scss

@@ -0,0 +1,2 @@
+@forward "shape-arrow";
+

data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss

@@ -79,4 +79,3 @@
   }
 }
 
-/*# sourceMappingURL=_shape-arrow.scss.map */

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

@@ -0,0 +1,80 @@
+////
+/// @group helpers/spacing
+////
+@use "sass:map";
+@use "sass:meta";
+
+@use "../settings/spacing" as *;
+@use "media-queries" as *;
+
+@use "../tools/if" as *;
+
+/// Responsive spacing
+///
+/// Adds responsive spacing (either padding or margin, depending on `$property`)
+/// by fetching a 'spacing map' from the responsive spacing scale, which defines
+/// different spacing values at different breakpoints.
+///
+/// To generate responsive spacing, use 'govuk-responsive-margin' or
+/// 'govuk-responsive-padding' mixins
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+///   scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @access private
+
+@mixin responsive-spacing(
+  $responsive-spacing-point,
+  $property,
+  $direction: "all",
+  $important: false,
+  $adjustment: false
+) {
+  $actual-input-type: meta.type-of($responsive-spacing-point);
+  @if $actual-input-type != "number" {
+    @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
+  }
+
+  @if not map.has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+    @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
+      + "responsive spacing scale in `_settings/spacing.scss`.";
+  }
+
+  // Make sure that the return value from `_settings/spacing.scss` is a map.
+  $scale-map: map.get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+  $actual-map-type: meta.type-of($scale-map);
+  @if $actual-map-type != "map" {
+    @error "Expected a number (integer), but got a "
+      + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
+  }
+
+  // Loop through each breakpoint in the map
+  @each $breakpoint, $breakpoint-value in $scale-map {
+    @if $adjustment {
+      $breakpoint-value: $breakpoint-value + $adjustment;
+    }
+
+    // The 'null' breakpoint is for mobile.
+    @if not $breakpoint {
+      @if $direction == all {
+        #{$property}: $breakpoint-value govuk-if($important, !important);
+      } @else {
+        #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
+      }
+    } @else {
+      @media #{govuk-from-breakpoint($breakpoint)} {
+        @if $direction == all {
+          #{$property}: $breakpoint-value govuk-if($important, !important);
+        } @else {
+          #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
+        }
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+@forward "spacing";
+

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

@@ -5,8 +5,9 @@
 @use "sass:math";
 @use "sass:meta";
 
-@import "../tools/if";
-@import "../helpers/media-queries";
+@use "../tools/if" as *;
+@use "../settings/spacing" as *;
+@use "spacing--internal";
 
 /// Single point spacing
 ///
@@ -55,82 +56,11 @@
   @return govuk-if($is-negative, $value * -1, $value);
 }
 
-/// Responsive spacing
-///
-/// Adds responsive spacing (either padding or margin, depending on `$property`)
-/// by fetching a 'spacing map' from the responsive spacing scale, which defines
-/// different spacing values at different breakpoints.
-///
-/// To generate responsive spacing, use 'govuk-responsive-margin' or
-/// 'govuk-responsive-padding' mixins
-///
-/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
-///   scale, corresponds to a map of breakpoints and spacing values
-/// @param {String} $property - Property to add spacing to (e.g. 'margin')
-/// @param {String} $direction [all] - Direction to add spacing to
-///   (`top`, `right`, `bottom`, `left`, `all`)
-/// @param {Boolean} $important [false] - Whether to mark as `!important`
-/// @param {Number} $adjustment [false] - Offset to adjust spacing by
-///
-/// @access private
-
-@mixin _govuk-responsive-spacing(
-  $responsive-spacing-point,
-  $property,
-  $direction: "all",
-  $important: false,
-  $adjustment: false
-) {
-  $actual-input-type: meta.type-of($responsive-spacing-point);
-  @if $actual-input-type != "number" {
-    @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
-  }
-
-  @if not map.has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
-    @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
-      + "responsive spacing scale in `_settings/spacing.scss`.";
-  }
-
-  // Make sure that the return value from `_settings/spacing.scss` is a map.
-  $scale-map: map.get($govuk-spacing-responsive-scale, $responsive-spacing-point);
-  $actual-map-type: meta.type-of($scale-map);
-  @if $actual-map-type != "map" {
-    @error "Expected a number (integer), but got a "
-      + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
-  }
-
-  // Loop through each breakpoint in the map
-  @each $breakpoint, $breakpoint-value in $scale-map {
-    @if $adjustment {
-      $breakpoint-value: $breakpoint-value + $adjustment;
-    }
-
-    // The 'null' breakpoint is for mobile.
-    @if not $breakpoint {
-      @if $direction == all {
-        #{$property}: $breakpoint-value govuk-if($important, !important);
-      } @else {
-        #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
-      }
-    } @else {
-      @media #{govuk-from-breakpoint($breakpoint)} {
-        @if $direction == all {
-          #{$property}: $breakpoint-value govuk-if($important, !important);
-        } @else {
-          #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
-        }
-      }
-    }
-  }
-}
-
 /// Responsive margin
 ///
 /// Adds responsive margin by fetching a 'spacing map' from the responsive
 /// spacing scale, which defines different spacing values at different
-/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
-///
-/// @see {mixin} _govuk-responsive-spacing
+/// breakpoints. Wrapper for the `govuk-responsive-spacing.govuk-responsive-spacing` mixin.
 ///
 /// @param {Number} $responsive-spacing-point - Point on the responsive spacing
 /// scale, corresponds to a map of breakpoints and spacing values
@@ -147,7 +77,13 @@
 /// @access public
 
 @mixin govuk-responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
-  @include _govuk-responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
+  @include spacing--internal.responsive-spacing(
+    $responsive-spacing-point,
+    "margin",
+    $direction,
+    $important,
+    $adjustment
+  );
 }
 
 /// Responsive padding
@@ -156,8 +92,6 @@
 /// spacing scale, which defines different spacing values at different
 /// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
 ///
-/// @see {mixin} _govuk-responsive-spacing
-///
 /// @param {Number} $responsive-spacing-point - Point on the responsive spacing
 ///   scale, corresponds to a map of breakpoints and spacing values
 /// @param {String} $direction [all] - Direction to add spacing to
@@ -173,7 +107,12 @@
 /// @access public
 
 @mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
-  @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
+  @include spacing--internal.responsive-spacing(
+    $responsive-spacing-point,
+    "padding",
+    $direction,
+    $important,
+    $adjustment
+  );
 }
 
-/*# sourceMappingURL=_spacing.scss.map */

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

@@ -0,0 +1,24 @@
+////
+/// @group helpers/typography
+////
+
+@use "sass:math";
+
+/// Convert line-heights specified in pixels into a relative value, unless
+/// they are already unit-less (and thus already treated as relative values)
+/// or the units do not match the units used for the font size.
+///
+/// @param {Number} $line-height Line height
+/// @param {Number} $font-size Font size
+/// @return {Number} The line height as either a relative value or unmodified
+///
+/// @access private
+
+@function line-height($line-height, $font-size) {
+  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
+    $line-height: math.div($line-height, $font-size);
+  }
+
+  @return $line-height;
+}
+

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

@@ -0,0 +1,2 @@
+@forward "typography";
+

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

@@ -2,20 +2,22 @@
 /// @group helpers/typography
 ////
 @use "sass:map";
-@use "sass:math";
 @use "sass:string";
 
-@import "../settings/assets";
-@import "../settings/colours-functional";
-@import "../settings/spacing";
-@import "../settings/typography-font";
-@import "../settings/warnings";
-@import "../tools/font-url";
-@import "../tools/px-to-rem";
-@import "../tools/if";
-@import "font-faces";
-@import "media-queries";
-@import "spacing";
+@use "../settings/warnings--internal";
+
+@use "../settings/assets" as *;
+@use "../settings/colours-functional" as *;
+@use "../settings/spacing" as *;
+@use "../settings/typography-font" as *;
+@use "../settings/typography-responsive" as *;
+@use "../tools/font-url" as *;
+@use "../tools/px-to-rem" as *;
+@use "../tools/if" as *;
+@use "colour" as *;
+@use "font-faces--internal";
+@use "typography--internal";
+@use "media-queries" as *;
 
 /// 'Common typography' helper
 ///
@@ -33,7 +35,7 @@
   // If the user is using the default GDS Transport font we need to include
   // the font-face declarations.
   @if $govuk-include-default-font-face {
-    @include _govuk-font-face-gds-transport;
+    @include font-faces--internal.gds-transport;
   }
 
   @media print {
@@ -49,9 +51,9 @@
 /// @access public
 
 @mixin govuk-text-colour {
-  @include _warning(
+  @include warnings--internal.warning(
     "govuk-text-colour",
-    "The `govuk-text-colour` mixin is deprecated. Use `color: govuk-colour(text)` instead."
+    "The `govuk-text-colour` mixin is deprecated. Use `color: govuk-functional-colour(text)` instead."
   );
 
   color: govuk-functional-colour(text);
@@ -111,24 +113,6 @@
   overflow-wrap: break-word govuk-if($important, !important);
 }
 
-/// Convert line-heights specified in pixels into a relative value, unless
-/// they are already unit-less (and thus already treated as relative values)
-/// or the units do not match the units used for the font size.
-///
-/// @param {Number} $line-height Line height
-/// @param {Number} $font-size Font size
-/// @return {Number} The line height as either a relative value or unmodified
-///
-/// @access private
-
-@function _govuk-line-height($line-height, $font-size) {
-  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
-    $line-height: math.div($line-height, $font-size);
-  }
-
-  @return $line-height;
-}
-
 /// Font size and line height helper
 ///
 /// Takes a point from the responsive 'font map' as an argument (the size as it
@@ -198,7 +182,7 @@
   @if $deprecation {
     // Warn on deprecated font sizes unless flagged for internal use
     @if not $size-internal-use-only {
-      @include _warning(map.get($deprecation, "key"), map.get($deprecation, "message"));
+      @include warnings--internal.warning(map.get($deprecation, "key"), map.get($deprecation, "message"));
     }
 
     // remove the deprecation map keys so they do not break the breakpoint loop
@@ -211,7 +195,7 @@
 
     // $calculated-line-height is a separate variable from $line-height,
     // as otherwise the value would get redefined with each loop and
-    // eventually break _govuk-line-height.
+    // eventually break typography--internal.line-height.
     // 1. See if the function was called with a specific line-height
     $calculated-line-height: $line-height;
     // 2. Default to the breakpoint-map if no specific value was given
@@ -222,7 +206,7 @@
     // 3. Turn the value into a unitless line-height if possible
     // We continue to call the param $line-height to stay consistent with the
     // naming with govuk-font.
-    $calculated-line-height: _govuk-line-height(
+    $calculated-line-height: typography--internal.line-height(
       $line-height: $calculated-line-height,
       $font-size: $font-size
     );
@@ -283,4 +267,3 @@
   }
 }
 
-/*# sourceMappingURL=_typography.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.import.scss

@@ -0,0 +1,2 @@
+@forward "visually-hidden";
+

data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss

@@ -2,7 +2,7 @@
 /// @group helpers/accessibility
 ////
 
-@import "../tools/if";
+@use "../tools/if" as *;
 
 /// Helper function containing the common code for the following two mixins
 ///
@@ -87,4 +87,3 @@
   }
 }
 
-/*# sourceMappingURL=_visually-hidden.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_width-container.import.scss

@@ -0,0 +1,2 @@
+@forward "width-container";
+

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

@@ -0,0 +1,73 @@
+////
+/// @group helpers/width-container
+////
+
+@use "sass:string";
+
+@use "../settings/measurements" as *;
+@use "media-queries" as *;
+
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+///  .app-width-container--wide {
+///    @include govuk-width-container(1200px);
+///  }
+///
+/// @access public
+
+@mixin govuk-width-container($width: $govuk-page-width) {
+  // By default, limit the width of the container to the page width
+  max-width: $width;
+
+  // On mobile, add half width gutters
+  margin-right: $govuk-gutter-half;
+  margin-left: $govuk-gutter-half;
+
+  // Respect 'display cutout' safe area (avoids notches and rounded corners)
+  @supports (margin: string.unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+    // Use max() to pick largest margin, default or with safe area
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
+    margin-left: string.unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
+  }
+
+  // On tablet, add full width gutters
+  @media #{govuk-from-breakpoint(tablet)} {
+    margin-right: $govuk-gutter;
+    margin-left: $govuk-gutter;
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+      // Use max() to pick largest margin, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: string.unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
+      margin-left: string.unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
+    }
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @media (min-width: #{($width + $govuk-gutter * 2)}) {
+    margin-right: auto;
+    margin-left: auto;
+
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: string.unquote("max(calc(0px))")) {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/index.import.scss

@@ -0,0 +1,10 @@
+@import "base";
+
+@import "core";
+@import "objects";
+
+@import "components";
+
+@import "utilities";
+@import "overrides";
+

data/node_modules/govuk-frontend/dist/govuk/index.scss

@@ -1,11 +1,10 @@
-@import "base";
+@forward "base";
 
-@import "core/index";
-@import "objects/index";
+@use "core";
+@use "objects";
 
-@import "components/index";
+@use "components";
 
-@import "utilities/index";
-@import "overrides/index";
+@use "utilities";
+@use "overrides";
 
-/*# sourceMappingURL=index.scss.map */

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

@@ -0,0 +1,8 @@
+@use "button-group.mixin" as button-group;
+
+@import "../base";
+
+@include govuk-exports("govuk/objects/button-group") {
+  @include button-group.styles;
+}
+

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

@@ -0,0 +1,80 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .govuk-button-group {
+    $horizontal-gap: base.govuk-spacing(3);
+    $vertical-gap: base.govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: base.govuk-spacing(2);
+    $button-shadow-size: base.$govuk-border-width-form-element;
+
+    $link-spacing: base.govuk-spacing(1);
+
+    @include base.govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .govuk-link {
+      @include base.govuk-font($size: 19, $line-height: 19px);
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $link-spacing;
+      margin-bottom: $link-spacing + $vertical-gap;
+      text-align: center;
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    .govuk-button {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: baseline;
+
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}
+