govuk_tech_docs 6.3.0.beta → 6.3.0

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;
+      }
+    }
+  }
+}
+

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

@@ -1,80 +1,5 @@
-@import "../base";
+@use "button-group.mixin" as button-group;
+@use "../custom-properties";
 
-@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);
+@include button-group.styles;
 
-    // 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: 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 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 #{govuk-from-breakpoint(tablet)} {
-      // Cancel out the column gap for the last item in each row
-      margin-right: ($horizontal-gap * -1);
-
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: baseline;
-
-      .govuk-button,
-      .govuk-link {
-        margin-right: $horizontal-gap;
-      }
-
-      .govuk-link {
-        text-align: left;
-      }
-    }
-  }
-}
-
-/*# sourceMappingURL=_button-group.scss.map */

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

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

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

@@ -0,0 +1,26 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  .govuk-form-group {
+    @include base.govuk-clearfix;
+    @include base.govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group:last-of-type {
+      margin-bottom: 0; // Remove margin from last item in nested groups
+    }
+  }
+
+  .govuk-form-group--error {
+    padding-left: base.govuk-spacing(3);
+    border-left: base.$govuk-border-width-form-group-error solid;
+    border-left-color: base.govuk-functional-colour(error);
+
+    .govuk-form-group {
+      // Reset error styles in nested form groups that might have error class
+      padding: 0;
+      border: 0;
+    }
+  }
+}
+

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

@@ -1,26 +1,5 @@
-@import "../base";
+@use "form-group.mixin" as form-group;
+@use "../custom-properties";
 
-@include govuk-exports("govuk/objects/form-group") {
-  .govuk-form-group {
-    @include govuk-clearfix;
-    @include govuk-responsive-margin(6, "bottom");
+@include form-group.styles;
 
-    .govuk-form-group:last-of-type {
-      margin-bottom: 0; // Remove margin from last item in nested groups
-    }
-  }
-
-  .govuk-form-group--error {
-    padding-left: govuk-spacing(3);
-    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
-      padding: 0;
-      border: 0;
-    }
-  }
-}
-
-/*# sourceMappingURL=_form-group.scss.map */

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

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

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

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@use "../base";
+
+/// @access private
+@mixin styles {
+  .govuk-grid-row {
+    @include base.govuk-clearfix;
+    margin-right: -(base.$govuk-gutter-half);
+    margin-left: -(base.$govuk-gutter-half);
+  }
+
+  @each $width in map.keys(base.$govuk-grid-widths) {
+    .govuk-grid-column-#{$width} {
+      @include base.govuk-grid-column($width);
+    }
+  }
+
+  // These *must* be defined in a separate loop as they have the same
+  // specificity as the non-breakpoint specific classes, so need to appear after
+  // them in the outputted CSS
+  @each $width in map.keys(base.$govuk-grid-widths) {
+    .govuk-grid-column-#{$width}-from-desktop {
+      @include base.govuk-grid-column($width, $at: desktop);
+    }
+  }
+}
+

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

@@ -1,28 +1,5 @@
-@use "sass:map";
+@use "grid.mixin" as grid;
+@use "../custom-properties";
 
-@import "../base";
+@include grid.styles;
 
-@include govuk-exports("govuk/objects/grid") {
-  .govuk-grid-row {
-    @include govuk-clearfix;
-    margin-right: -($govuk-gutter-half);
-    margin-left: -($govuk-gutter-half);
-  }
-
-  @each $width in map.keys($govuk-grid-widths) {
-    .govuk-grid-column-#{$width} {
-      @include govuk-grid-column($width);
-    }
-  }
-
-  // These *must* be defined in a separate loop as they have the same
-  // specificity as the non-breakpoint specific classes, so need to appear after
-  // 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);
-    }
-  }
-}
-
-/*# sourceMappingURL=_grid.scss.map */

data/node_modules/govuk-frontend/dist/govuk/objects/_index.import.scss

@@ -0,0 +1,7 @@
+@import "button-group";
+@import "form-group";
+@import "grid";
+@import "main-wrapper";
+@import "template";
+@import "width-container";
+

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

@@ -1,8 +1,7 @@
-@import "button-group";
-@import "form-group";
-@import "grid";
-@import "main-wrapper";
-@import "template";
-@import "width-container";
+@use "button-group";
+@use "form-group";
+@use "grid";
+@use "main-wrapper";
+@use "template";
+@use "width-container";
 
-/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,55 @@
+@use "../base";
+
+////
+/// @group objects/layout
+////
+
+// Example usage with Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+
+/// @access private
+@mixin styles {
+  .govuk-main-wrapper {
+    // In IE11 the `main` element can be used, but is not recognized  –
+    // meaning it's not defined in IE's default style sheet,
+    // so it uses CSS initial value, which is inline.
+    display: block;
+    padding-top: base.govuk-spacing(4);
+    padding-bottom: base.govuk-spacing(4);
+
+    @media #{base.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)
+      padding-top: base.govuk-spacing(7);
+      padding-bottom: base.govuk-spacing(7);
+    }
+  }
+
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
+  .govuk-main-wrapper--l {
+    @include base.govuk-responsive-padding(8, "top");
+  }
+}
+