govuk_tech_docs 2.2.0 → 2.4.0

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

@@ -1,9 +1,7 @@
 ////
-/// @group helpers
+/// @group helpers/layout
 ////
 
-
-
 // =========================================================
 // Wrangle sass-mq config...
 // =========================================================
@@ -41,8 +39,6 @@ $sass-mq-already-included: false !default;
 
 $sass-mq-already-included: true;
 
-
-
 // =========================================================
 // Helpers
 // =========================================================
@@ -91,5 +87,5 @@ $sass-mq-already-included: true;
 @mixin govuk-media-query($args...) {
   @include mq($args...) {
     @content;
-  };
+  }
 }

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/shapes
 ////
 
 /// Calculate the height of an equilateral triangle

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

@@ -1,7 +1,9 @@
 ////
-/// @group helpers
+/// @group helpers/spacing
 ////
 
+// stylelint-disable indentation
+
 /// Single point spacing
 ///
 /// Returns measurement corresponding to the spacing point requested.
@@ -146,7 +148,6 @@
 ///
 /// @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);
 }

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/typography
 ////
 
 @import "../tools/px-to-rem";
@@ -127,7 +127,8 @@
     $font-size-rem: govuk-px-to-rem($font-size);
 
     $line-height: _govuk-line-height(
-      $line-height: if($override-line-height,
+      $line-height: if(
+        $override-line-height,
         $override-line-height,
         map-get($breakpoint-map, "line-height")
       ),
@@ -142,9 +143,9 @@
     $line-height: $line-height if($important, !important, null);
 
     @if $breakpoint == null {
-      font-size: $font-size; // sass-lint:disable no-duplicate-properties
+      font-size: $font-size;
       @if $govuk-typography-use-rem {
-        font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+        font-size: $font-size-rem;
       }
       line-height: $line-height;
     } @else if $breakpoint == "print" {
@@ -154,9 +155,9 @@
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
-        font-size: $font-size; // sass-lint:disable no-duplicate-properties
+        font-size: $font-size;
         @if $govuk-typography-use-rem {
-          font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+          font-size: $font-size-rem;
         }
         line-height: $line-height;
       }
@@ -184,7 +185,7 @@
       -webkit-font-feature-settings: "tnum" 1;
               font-feature-settings: "tnum" 1;
 
-      @supports(font-variant-numeric: tabular-nums) {
+      @supports (font-variant-numeric: tabular-nums) {
         -webkit-font-feature-settings: normal;
                 font-feature-settings: normal;
         font-variant-numeric: tabular-nums;

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/accessibility
 ////
 
 /// Hide an element visually, but have it available for screen readers

data/node_modules/govuk-frontend/govuk/objects/_all.scss

@@ -1,3 +1,4 @@
+@import "button-group";
 @import "form-group";
 @import "grid";
 @import "main-wrapper";

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

@@ -0,0 +1,101 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/button-group") {
+  // 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: govuk-spacing(3);
+    $vertical-gap: govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: govuk-spacing(2);
+    $button-shadow-size: $govuk-border-width-form-element;
+
+    $link-spacing: govuk-spacing(1);
+
+    @include 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: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            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 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
+    @include govuk-media-query($from: tablet) {
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      -webkit-box-orient: horizontal;
+
+      -webkit-box-direction: normal;
+
+      -webkit-flex-direction: row;
+
+          -ms-flex-direction: row;
+
+              flex-direction: row;
+      -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
+      -webkit-box-align: baseline;
+      -webkit-align-items: baseline;
+          -ms-flex-align: baseline;
+              align-items: baseline;
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}

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

@@ -1,9 +1,6 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@import "../base";
 
 @include govuk-exports("govuk/objects/form-group") {
-
   .govuk-form-group {
     @include govuk-clearfix;
     @include govuk-responsive-margin(6, "bottom");

data/node_modules/govuk-frontend/govuk/objects/_grid.scss

@@ -1,9 +1,6 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@import "../base";
 
 @include govuk-exports("govuk/objects/grid") {
-
   .govuk-grid-row {
     @include govuk-clearfix;
     margin-right: - ($govuk-gutter-half);
@@ -12,7 +9,7 @@
 
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width} {
-      @include govuk-grid-column($width)
+      @include govuk-grid-column($width);
     }
   }
 
@@ -21,7 +18,7 @@
   // them in the outputted CSS
   @each $width in map-keys($govuk-grid-widths) {
     .govuk-grid-column-#{$width}-from-desktop {
-      @include govuk-grid-column($width, $at: desktop)
+      @include govuk-grid-column($width, $at: desktop);
     }
   }
 }

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

@@ -1,6 +1,8 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@import "../base";
+
+////
+/// @group objects/layout
+////
 
 // Example usage with Breadcrumbs, phase banners, back links:
 // <div class="govuk-width-container">
@@ -19,7 +21,6 @@
 //   </div>
 // </div>
 
-
 /// @deprecated Replace this mixin with more direct references to the [spacing
 /// mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper {

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

@@ -1,9 +1,7 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@import "../base";
 
 ////
-/// @group objects
+/// @group objects/layout
 ////
 
 /// Width container mixin
@@ -30,7 +28,9 @@
 
   // Respect 'display cutout' safe area (avoids notches and rounded corners)
   @supports (margin: unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
     $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
     $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
     // Use max() to pick largest margin, default or with safe area
@@ -46,7 +46,9 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (margin: unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
       $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
       $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
       // Use max() to pick largest margin, default or with safe area

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

@@ -1,9 +1,11 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
 
-@include govuk-exports("govuk/overrides/display") {
+@import "../base";
 
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/display") {
   .govuk-\!-display-inline {
     display: inline !important;
   }

data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss

@@ -1,6 +1,8 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
 
 ////
 /// @group overrides

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

@@ -1,6 +1,8 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
 
 @include govuk-exports("govuk/overrides/typography") {
   // Font size and line height

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

@@ -1,7 +1,10 @@
-@import "../settings/all";
-@import "../tools/all";
-@import "../helpers/all";
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
 
+// stylelint-disable declaration-no-important
 @include govuk-exports("govuk/overrides/width") {
   .govuk-\!-width-full {
     width: 100% !important;

data/node_modules/govuk-frontend/govuk/settings/_all.scss

@@ -19,3 +19,5 @@
 @import "typography-font-families";
 @import "typography-font";
 @import "typography-responsive";
+
+@import "links";

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

@@ -4,8 +4,6 @@
 
 @import "../helpers/colour";
 
-
-
 // =========================================================
 // Generic
 // =========================================================
@@ -52,7 +50,7 @@ $govuk-print-text-colour: #000000 !default;
 
 /// Secondary text colour
 ///
-/// Used for 'muted' text, help text, etc.
+/// Used in for example 'muted' text and help text.
 ///
 /// @type Colour
 /// @access public
@@ -88,9 +86,18 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
 
 $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 for borders, separators, rules, keylines etc.
+/// Used in for example borders, separators, rules and keylines.
 ///
 /// @type Colour
 /// @access public
@@ -115,7 +122,6 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 
 $govuk-hover-colour: govuk-colour("mid-grey", $legacy: "grey-3");
 
-
 // =============================================================================
 // Links
 // =============================================================================

data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss

@@ -70,6 +70,9 @@ $govuk-colours-organisations: (
     colour: #00ad93,
     colour-websafe: #39836e
   ),
+  "foreign-commonwealth-development-office": (
+    colour: #012169
+  ),
   "foreign-commonwealth-office": (
     colour: #003e74,
     colour-websafe: #406e97

data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss

@@ -1,5 +1,8 @@
 @import "compatibility";
 
+// stylelint-disable value-list-max-empty-lines -- allow empty lines in lists
+// in this file to allow grouping
+
 ////
 /// @group settings/colours
 ////
@@ -13,11 +16,48 @@
 /// @type Boolean
 /// @access public
 
-$govuk-use-legacy-palette: if((
+$govuk-use-legacy-palette: if(
+  (
     $govuk-compatibility-govukfrontendtoolkit or
     $govuk-compatibility-govuktemplate or
     $govuk-compatibility-govukelements
-  ), true, false) !default;
+  ),
+  true,
+  false
+) !default;
+
+/// Modern colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-modern: (
+  "red": #d4351c,
+  "yellow": #ffdd00,
+  "green": #00703c,
+  "blue": #1d70b8,
+  "dark-blue": #003078,
+  "light-blue": #5694ca,
+  "purple": #4c2c92,
+
+  "black": #0b0c0c,
+  "dark-grey": #505a5f,
+  "mid-grey": #b1b4b6,
+  "light-grey": #f3f2f1,
+  "white": #ffffff,
+
+  "light-purple": #6f72af,
+  "bright-purple": #912b88,
+  "pink": #d53880,
+  "light-pink": #f499be,
+  "orange": #f47738,
+  "brown": #b58840,
+  "light-green": #85994b,
+  "turquoise": #28a197
+);
 
 /// Legacy colour palette
 ///
@@ -52,39 +92,6 @@ $_govuk-colour-palette-legacy: (
   "white": #ffffff
 );
 
-/// Modern colour palette
-///
-/// This exists only because you cannot easily set a !default variable
-/// conditionally (thanks to the way scope works in Sass) so we set
-/// `$govuk-colour-palette` using the `if` function.
-///
-/// @access private
-
-$_govuk-colour-palette-modern: (
-  "red": #d4351c,
-  "yellow": #ffdd00,
-  "green": #00703c,
-  "blue": #1d70b8,
-  "dark-blue": #003078,
-  "light-blue": #5694ca,
-  "purple": #4c2c92,
-
-  "black": #0b0c0c,
-  "dark-grey": #626a6e,
-  "mid-grey": #b1b4b6,
-  "light-grey": #f3f2f1,
-  "white": #ffffff,
-
-  "light-purple": #6f72af,
-  "bright-purple": #912b88,
-  "pink": #d53880,
-  "light-pink": #f499be,
-  "orange": #f47738,
-  "brown": #b58840,
-  "light-green": #85994b,
-  "turquoise": #28a197
-);
-
 /// Colour palette
 ///
 /// @type Map