govuk_tech_docs 3.5.0 → 4.1.0

data/node_modules/govuk-frontend/{govuk → dist/govuk}/helpers/_links.scss

@@ -30,14 +30,12 @@
 @mixin govuk-link-decoration {
   text-decoration: underline;
 
-  @if $govuk-new-link-styles {
-    @if $govuk-link-underline-thickness {
-      text-decoration-thickness: $govuk-link-underline-thickness;
-    }
+  @if $govuk-link-underline-thickness {
+    text-decoration-thickness: $govuk-link-underline-thickness;
+  }
 
-    @if $govuk-link-underline-offset {
-      text-underline-offset: $govuk-link-underline-offset;
-    }
+  @if $govuk-link-underline-offset {
+    text-underline-offset: $govuk-link-underline-offset;
   }
 }
 
@@ -50,7 +48,7 @@
 /// @access public
 
 @mixin govuk-link-hover-decoration {
-  @if $govuk-new-link-styles and $govuk-link-hover-underline-thickness {
+  @if $govuk-link-hover-underline-thickness {
     text-decoration-thickness: $govuk-link-hover-underline-thickness;
     // Disable ink skipping on underlines on hover. Browsers haven't
     // standardised on this part of the spec yet, so set both properties
@@ -98,17 +96,6 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited link  s a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
 }
 
 /// Error link styles
@@ -146,17 +133,6 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited link  s a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
 }
 
 /// Success link styles
@@ -194,17 +170,6 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited link  s a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
 }
 
 /// Muted link styles
@@ -239,15 +204,6 @@
   &:focus {
     color: $govuk-focus-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector designed
-  // to make unvisited links a slightly darker blue when focussed, so we need to
-  // override the text colour for that combination of selectors.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      @include govuk-text-colour;
-    }
-  }
 }
 
 /// Text link styles
@@ -273,10 +229,10 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover {
     @if type-of($govuk-text-colour) == color {
-      color: rgba($govuk-text-colour, .99);
+      color: rgba($govuk-text-colour, 0.99);
     }
   }
 
@@ -284,15 +240,6 @@
   &:focus {
     @include govuk-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector designed
-  // to make unvisited links a slightly darker blue when focussed, so we need to
-  // override the text colour for that combination of selectors.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      @include govuk-text-colour;
-    }
-  }
 }
 
 /// Inverse link styles
@@ -318,24 +265,15 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover,
   &:active {
-    color: rgba(govuk-colour("white"), .99);
+    color: rgba(govuk-colour("white"), 0.99);
   }
 
   &:focus {
     color: $govuk-focus-text-colour;
   }
-
-  // alphagov/govuk_template includes a specific a:link:focus selector designed
-  // to make unvisited links a slightly darker blue when focussed, so we need to
-  // override the text colour for that combination of selectors.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
 }
 
 /// Default link styles, without a visited state
@@ -385,8 +323,7 @@
 /// Remove underline from links
 ///
 /// Remove underlines from links unless the link is active or a user hovers
-/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
-/// because IE8 does not support `:not`.
+/// their cursor over it.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -414,8 +351,9 @@
   @include govuk-media-query($media-type: print) {
     &[href^="/"],
     &[href^="http://"],
-    &[href^="https://"] {
-      &:after {
+    &[href^="https://"]
+    {
+      &::after {
         content: " (" attr(href) ")";
         font-size: 90%;
 
@@ -427,3 +365,27 @@
     }
   }
 }
+
+/// Image link styles
+///
+/// Prepares and provides the focus state for links that only contain images
+/// with no accompanying text.
+///
+/// @access public
+
+@mixin govuk-link-image {
+  // Needed to draw the focus around the entire image
+  display: inline-block;
+
+  // Remove extra space at the bottom of the image that's added by line-height
+  line-height: 0;
+
+  // Don't render an underline
+  text-decoration: none;
+
+  &:focus {
+    @include govuk-focused-box;
+  }
+}
+
+/*# sourceMappingURL=_links.scss.map */

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

@@ -6,9 +6,8 @@
 // Wrangle sass-mq config...
 // =========================================================
 
-// Pass our breakpoints and static breakpoint definitions through to sass-mq.
+// Pass our breakpoint definitions through to sass-mq.
 $mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
-$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
 
 $mq-show-breakpoints: ();
 
@@ -16,14 +15,6 @@ $mq-show-breakpoints: ();
   $mq-show-breakpoints: map-keys($govuk-breakpoints);
 }
 
-// When building a stylesheet for IE8, set $mq-responsive to false in order to
-// 'rasterize' any media queries.
-
-$mq-responsive: true;
-@if variable-exists(govuk-is-ie8) and $govuk-is-ie8 {
-  $mq-responsive: false;
-}
-
 // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
 // the current breakpoint from being included multiple times.
 //
@@ -55,8 +46,6 @@ $sass-mq-already-included: true;
 ///
 /// @ignore Undocumented mq API, for advanced use only:
 /// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
-/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint]
-/// @ignore @param {Boolean} $responsive [$govuk-is-ie8]
 ///
 /// @content styling rules, wrapped into a @media query when $responsive is true
 ///
@@ -89,3 +78,5 @@ $sass-mq-already-included: true;
     @content;
   }
 }
+
+/*# sourceMappingURL=_media-queries.scss.map */

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

@@ -54,7 +54,7 @@
     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
             clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
 
-    border-width: 0 $perpendicular $height $perpendicular;
+    border-width: 0 $perpendicular $height;
     border-bottom-color: inherit; // 2
   } @else if $direction == "right" {
     -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
@@ -78,3 +78,5 @@
     @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
   }
 }
+
+/*# sourceMappingURL=_shape-arrow.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/helpers/_spacing.scss

@@ -2,8 +2,6 @@
 /// @group helpers/spacing
 ////
 
-// stylelint-disable indentation
-
 /// Single point spacing
 ///
 /// Returns measurement corresponding to the spacing point requested.
@@ -31,11 +29,10 @@
 /// @access public
 
 @function govuk-spacing($spacing-point) {
-
   $actual-input-type: type-of($spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a "
-    + "#{$actual-input-type}.";
+      + "#{$actual-input-type}.";
   }
 
   $is-negative: false;
@@ -71,8 +68,13 @@
 ///
 /// @access private
 
-@mixin _govuk-responsive-spacing($responsive-spacing-point, $property, $direction: "all", $important: false, $adjustment: false) {
-
+@mixin _govuk-responsive-spacing(
+  $responsive-spacing-point,
+  $property,
+  $direction: "all",
+  $important: false,
+  $adjustment: false
+) {
   $actual-input-type: type-of($responsive-spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
@@ -80,7 +82,7 @@
 
   @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`.";
+      + "responsive spacing scale in `_settings/spacing.scss`.";
   }
 
   // Make sure that the return value from `_settings/spacing.scss` is a map.
@@ -88,19 +90,17 @@
   $actual-map-type: 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`)";
+      + "#{$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 if($important, !important, null);
       } @else {
@@ -169,3 +169,5 @@
 @mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
   @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
 }
+
+/*# sourceMappingURL=_spacing.scss.map */

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

@@ -0,0 +1,288 @@
+////
+/// @group helpers/typography
+////
+
+@import "../tools/px-to-rem";
+
+/// 'Common typography' helper
+///
+/// Sets the font family and associated properties, such as font smoothing. Also
+/// overrides the font for print.
+///
+/// @param {List} $font-family [$govuk-font-family] Font family to use
+/// @access public
+
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // 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 govuk-media-query($media-type: print) {
+    font-family: $govuk-font-family-print;
+  }
+}
+
+/// Text colour helper
+///
+/// Sets the text colour, including a suitable override for print.
+///
+/// @access public
+
+@mixin govuk-text-colour {
+  color: $govuk-text-colour;
+
+  @include govuk-media-query($media-type: print) {
+    color: $govuk-print-text-colour;
+  }
+}
+
+/// Regular font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-regular($important: false) {
+  font-weight: $govuk-font-weight-regular if($important, !important, null);
+}
+
+/// Bold font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-bold($important: false) {
+  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);
+}
+
+/// Word break helper
+///
+/// Forcibly breaks long words that lack spaces, such as email addresses,
+/// across multiple lines when they wouldn't otherwise fit.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally used to create override classes.
+/// @access public
+
+@mixin govuk-text-break-word($important: false) {
+  // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
+  word-wrap: break-word if($important, !important, null);
+
+  // All other browsers support `overflow-wrap`
+  overflow-wrap: break-word 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.
+///
+/// @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 unitless($line-height) and unit($line-height) == unit($font-size) {
+    $line-height: $line-height / $font-size;
+  }
+
+  @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
+/// 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:
+///
+/// ```scss
+/// 19: (
+///   null: (
+///     font-size: 16px,
+///     line-height: 20px
+///   ),
+///   tablet: (
+///     font-size: 19px,
+///     line-height: 25px
+///   ),
+///   print: (
+///     font-size: 14pt,
+///     line-height: 1.15
+///   )
+/// );
+/// ```
+///
+/// @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-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) == "_";
+
+  // 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);
+
+    // $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
+    );
+
+    // Mark rules as !important if $important is true - this will result in
+    // these variables becoming strings, so this needs to happen *after* they
+    // are used in calculations
+    $font-size: $font-size if($important, !important, null);
+    $font-size-rem: $font-size-rem if($important, !important, null);
+    $calculated-line-height: $calculated-line-height if($important, !important, null);
+
+    @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: $calculated-line-height;
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        font-size: $font-size-rem;
+        line-height: $calculated-line-height;
+      }
+    }
+  }
+}
+
+/// Font helper
+///
+/// @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
+///
+/// @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 {
+    @include govuk-font-tabular-numbers;
+  }
+
+  @if $weight == regular {
+    @include govuk-typography-weight-regular;
+  } @else if $weight == bold {
+    @include govuk-typography-weight-bold;
+  }
+
+  @if $size {
+    @include govuk-font-size($size, $line-height);
+  }
+}
+
+/*# sourceMappingURL=_typography.scss.map */