defra_ruby_template 3.15.0 → 5.4.0

data/vendor/assets/stylesheets/helpers/_typography.scss

@@ -19,11 +19,7 @@
 
   // If the user is using the default GDS Transport font we need to include
   // the font-face declarations.
-  //
-  // We do not need to include the GDS Transport font-face declarations if
-  // alphagov/govuk_template is being used since nta will already be included by
-  // default.
-  @if ($govuk-include-default-font-face) {
+  @if $govuk-include-default-font-face {
     @include _govuk-font-face-gds-transport;
   }
 
@@ -66,6 +62,23 @@
   font-weight: $govuk-font-weight-bold if($important, !important, null);
 }
 
+/// Tabular number helper
+///
+/// Switches numerical glyphs (0–9) to use alternative forms with a
+/// monospaced bounding box. This ensures that columns of numbers, such
+/// as those in tables, remain horizontally aligned with one another.
+/// This also has the useful side effect of making numbers more legible
+/// in some situations, such as reference codes, as the numbers are more
+/// distinct and visually separated from one another.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-font-tabular-numbers($important: false) {
+  font-variant-numeric: tabular-nums if($important, !important, null);
+}
+
 /// 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.
@@ -84,14 +97,40 @@
   @return $line-height;
 }
 
-/// Responsive typography helper
+/// Font size and line height helper
 ///
-/// Takes a 'font map' as an argument and uses it to create font-size and
-/// line-height declarations for different breakpoints, and for print.
+/// @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
+/// would appear on tablet and above), and uses it to create font-size and
+/// line-height declarations for different breakpoints, and print.
 ///
 /// Example font map:
 ///
-/// $my-font-map: (
+/// ```scss
+/// 19: (
 ///   null: (
 ///     font-size: 16px,
 ///     line-height: 20px
@@ -105,33 +144,71 @@
 ///     line-height: 1.15
 ///   )
 /// );
+/// ```
 ///
-/// @param {Map} $font-map - Font map
-/// @param {Number} $override-line-height [false] - Non responsive custom line
+/// @param {Number | String} $size - Point from the type scale (the size as
+///   it would appear on tablet and above)
+/// @param {Number} $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
 
-@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+@mixin govuk-font-size($size, $line-height: false, $important: false) {
+  // Flag font sizes that start with underscores so we can suppress warnings on
+  // deprecated sizes used internally, for example `govuk-font($size: "_14")`
+  $size-internal-use-only: str-slice(#{$size}, 1, 1) == "_";
 
-  @if not map-has-key($govuk-typography-scale, $size) {
-    @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
+  // Remove underscore from font sizes flagged for internal use
+  @if $size-internal-use-only {
+    $size: str-slice(#{$size}, 2);
   }
 
+  // Check for a font map exactly matching the given size
   $font-map: map-get($govuk-typography-scale, $size);
 
+  // No match? Try with string type (e.g. $size: "16" not 16)
+  @if not $font-map {
+    @each $font-size in map-keys($govuk-typography-scale) {
+      @if not $font-map and #{$font-size} == #{$size} {
+        $font-map: map-get($govuk-typography-scale, $font-size);
+      }
+    }
+  }
+
+  // Still no match? Throw error
+  @if not $font-map {
+    @error "Unknown font size `#{$size}` - expected a point from the type scale.";
+  }
+
+  // Check for a deprecation within the type scale
+  $deprecation: map-get($font-map, "deprecation");
+
+  @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"));
+    }
+
+    // remove the deprecation map keys so they do not break the breakpoint loop
+    $font-map: map-remove($font-map, "deprecation");
+  }
+
   @each $breakpoint, $breakpoint-map in $font-map {
     $font-size: map-get($breakpoint-map, "font-size");
     $font-size-rem: govuk-px-to-rem($font-size);
 
-    $line-height: _govuk-line-height(
-      $line-height: if(
-        $override-line-height,
-        $override-line-height,
-        map-get($breakpoint-map, "line-height")
-      ),
+    // $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.
+    //
+    // We continue to call the param $line-height to stay consistent with the
+    // naming with govuk-font.
+    $calculated-line-height: _govuk-line-height(
+      $line-height: if($line-height, $line-height, map-get($breakpoint-map, "line-height")),
       $font-size: $font-size
     );
 
@@ -140,26 +217,20 @@
     // are used in calculations
     $font-size: $font-size if($important, !important, null);
     $font-size-rem: $font-size-rem if($important, !important, null);
-    $line-height: $line-height if($important, !important, null);
+    $calculated-line-height: $calculated-line-height if($important, !important, null);
 
-    @if $breakpoint == null {
-      font-size: $font-size;
-      @if $govuk-typography-use-rem {
-        font-size: $font-size-rem;
-      }
-      line-height: $line-height;
+    @if not $breakpoint {
+      font-size: $font-size-rem;
+      line-height: $calculated-line-height;
     } @else if $breakpoint == "print" {
       @include govuk-media-query($media-type: print) {
         font-size: $font-size;
-        line-height: $line-height;
+        line-height: $calculated-line-height;
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
-        font-size: $font-size;
-        @if $govuk-typography-use-rem {
-          font-size: $font-size-rem;
-        }
-        line-height: $line-height;
+        font-size: $font-size-rem;
+        line-height: $calculated-line-height;
       }
     }
   }
@@ -167,32 +238,23 @@
 
 /// Font helper
 ///
-/// @param {Number} $size - Size of the font as it would appear on desktop -
-///   uses the responsive font size map
+/// @param {Number | Boolean | String} $size Point from the type scale (the
+///   size as it would appear on tablet and above). Use `false` to avoid setting
+///   a size.
 /// @param {String} $weight [regular] - Weight: `bold` or `regular`
 /// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
-/// @param {Number} $line-height [false] - Line-height, if overriding the default
+/// @param {Number} $line-height [false] - Line-height, if overriding the
+///   default
+///
+/// @throw if `$size` is not a valid point from the type scale (or false)
 ///
 /// @access public
 
 @mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
+  @include govuk-typography-common;
+
   @if $tabular {
-    // if govuk-font-family-tabular is set use $govuk-font-family-tabular
-    @if $govuk-font-family-tabular {
-      @include govuk-typography-common($font-family: $govuk-font-family-tabular);
-    } @else {
-      @include govuk-typography-common;
-      -webkit-font-feature-settings: "tnum" 1;
-              font-feature-settings: "tnum" 1;
-
-      @supports (font-variant-numeric: tabular-nums) {
-        -webkit-font-feature-settings: normal;
-                font-feature-settings: normal;
-        font-variant-numeric: tabular-nums;
-      }
-    }
-  } @else {
-    @include govuk-typography-common;
+    @include govuk-font-tabular-numbers;
   }
 
   @if $weight == regular {
@@ -202,6 +264,8 @@
   }
 
   @if $size {
-    @include govuk-typography-responsive($size, $override-line-height: $line-height);
+    @include govuk-font-size($size, $line-height);
   }
 }
+
+/*# sourceMappingURL=_typography.scss.map */

data/vendor/assets/stylesheets/helpers/_visually-hidden.scss

@@ -16,6 +16,18 @@
 @mixin govuk-visually-hidden($important: true) {
   position: absolute if($important, !important, null);
 
+  // Absolute positioning has the unintended consequence of removing any
+  // whitespace surrounding visually hidden text from the accessibility tree.
+  // Insert a space character before and after visually hidden text to separate
+  // it from any visible text surrounding it.
+  &::before {
+    content: "\00a0";
+  }
+
+  &::after {
+    content: "\00a0";
+  }
+
   width: 1px if($important, !important, null);
   height: 1px if($important, !important, null);
   // If margin is set to a negative value it can cause text to be announced in
@@ -34,6 +46,13 @@
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   white-space: nowrap if($important, !important, null);
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 /// Hide an element visually, but have it available for screen readers whilst
@@ -66,6 +85,13 @@
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   white-space: nowrap if($important, !important, null);
 
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+
   &:active,
   &:focus {
     position: static if($important, !important, null);
@@ -80,5 +106,12 @@
             clip-path: none if($important, !important, null);
 
     white-space: inherit if($important, !important, null);
+
+    // Allow the text to be selectable now it's visible
+    -webkit-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
   }
 }
+
+/*# sourceMappingURL=_visually-hidden.scss.map */

data/vendor/assets/stylesheets/index.scss

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

data/vendor/assets/stylesheets/objects/_all.scss

@@ -1,5 +1,10 @@
-@import "button-group";
-@import "form-group";
-@import "grid";
-@import "main-wrapper";
-@import "width-container";
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/objects/all' is deprecated. Update your import statement to import 'govuk/objects/index'.",
+  $silence-further-warnings: false
+);
+
+/*# sourceMappingURL=_all.scss.map */

data/vendor/assets/stylesheets/objects/_button-group.scss

@@ -29,19 +29,9 @@
     // 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;
+    flex-direction: column;
+    align-items: center;
 
     // Give links within the button group the same font-size and line-height
     // as buttons.
@@ -71,22 +61,9 @@
       // 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;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: baseline;
 
       .govuk-button,
       .govuk-link {
@@ -99,3 +76,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_button-group.scss.map */

data/vendor/assets/stylesheets/objects/_form-group.scss

@@ -21,3 +21,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_form-group.scss.map */

data/vendor/assets/stylesheets/objects/_grid.scss

@@ -3,8 +3,8 @@
 @include govuk-exports("govuk/objects/grid") {
   .govuk-grid-row {
     @include govuk-clearfix;
-    margin-right: - ($govuk-gutter-half);
-    margin-left: - ($govuk-gutter-half);
+    margin-right: -($govuk-gutter-half);
+    margin-left: -($govuk-gutter-half);
   }
 
   @each $width in map-keys($govuk-grid-widths) {
@@ -22,3 +22,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_grid.scss.map */

data/vendor/assets/stylesheets/objects/_index.scss

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

data/vendor/assets/stylesheets/objects/_main-wrapper.scss

@@ -21,37 +21,22 @@
 //   </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 {
-  // 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: govuk-spacing(4);
-  padding-bottom: govuk-spacing(4);
-
-  @include govuk-media-query($from: 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: govuk-spacing(7);
-    padding-bottom: govuk-spacing(7);
-  }
-}
-
-/// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase
-/// banners or back links.
-///
-/// @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--l {
-  @include govuk-responsive-padding(8, "top");
-}
-
 @include govuk-exports("govuk/objects/main-wrapper") {
   .govuk-main-wrapper {
-    @include 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: govuk-spacing(4);
+    padding-bottom: govuk-spacing(4);
+
+    @include govuk-media-query($from: 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: govuk-spacing(7);
+      padding-bottom: govuk-spacing(7);
+    }
   }
 
   // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
@@ -63,6 +48,8 @@
   // `govuk-main-wrapper--l` modifier instead.
   .govuk-main-wrapper--auto-spacing:first-child,
   .govuk-main-wrapper--l {
-    @include govuk-main-wrapper--l;
+    @include govuk-responsive-padding(8, "top");
   }
 }
+
+/*# sourceMappingURL=_main-wrapper.scss.map */

data/vendor/assets/stylesheets/objects/_template.scss

@@ -0,0 +1,53 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/template") {
+  // Applied to the <html> element
+  .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.
+    background-color: $govuk-canvas-background-colour;
+
+    // Prevent automatic text sizing, as we already cater for small devices and
+    // would like the browser to stay on 100% text zoom by default.
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+
+    // Add scroll padding to the top of govuk-template but remove it if the
+    // exit this page component is present.
+    //
+    // This is a solution to exit this page potentially failing WCAG SC 2.4.12:
+    // Focus Not Obscured (https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)
+    // due to it's sticky positioning.
+    //
+    // This will apply scroll-padding-top in any browsers that don't support :has
+    // (https://caniuse.com/css-has). This is part of the reason we do this in
+    // a "wrong way round" way as we hypothesise that the risks of having
+    // scroll-padding unnecessarily is better than risking not having scroll-padding
+    // and needing it to account for exit this page.
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
+      scroll-padding-top: govuk-spacing(9);
+
+      &:not(:has(.govuk-exit-this-page)) {
+        scroll-padding-top: 0;
+      }
+    }
+
+    // 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) {
+      overflow-y: scroll;
+    }
+  }
+
+  // Applied to the <body> element
+  .govuk-template__body {
+    // The default margins set by user-agents are not required since we have our
+    // own containers.
+    margin: 0;
+    // Set the overall body of the page back to the typical background colour.
+    background-color: $govuk-body-background-colour;
+  }
+}
+
+/*# sourceMappingURL=_template.scss.map */

data/vendor/assets/stylesheets/objects/_width-container.scss

@@ -18,7 +18,6 @@
 /// @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;
 
@@ -28,9 +27,7 @@
 
   // 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,9 +43,7 @@
 
     // 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
@@ -71,14 +66,6 @@
       margin-left: auto;
     }
   }
-
-  @include govuk-if-ie8 {
-    width: $width;
-    // Since media queries are not supported in IE8,
-    // we need to duplicate this margin that centers the page.
-    margin-right: auto;
-    margin-left: auto;
-  }
 }
 
 @include govuk-exports("govuk/objects/width-container") {
@@ -86,3 +73,5 @@
     @include govuk-width-container;
   }
 }
+
+/*# sourceMappingURL=_width-container.scss.map */

data/vendor/assets/stylesheets/overrides/_all.scss

@@ -1,4 +1,9 @@
-@import "display";
-@import "spacing";
-@import "typography";
-@import "width";
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/overrides/all' is deprecated. Update your import statement to import 'govuk/overrides/index'."
+);
+
+/*# sourceMappingURL=_all.scss.map */

data/vendor/assets/stylesheets/overrides/_display.scss

@@ -1,9 +1,3 @@
-@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/display") {
   .govuk-\!-display-inline {
@@ -28,3 +22,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_display.scss.map */

data/vendor/assets/stylesheets/overrides/_index.scss

@@ -0,0 +1,7 @@
+@import "display";
+@import "spacing";
+@import "text-align";
+@import "typography";
+@import "width";
+
+/*# sourceMappingURL=_index.scss.map */