design_system 0.11.0 → 0.12.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_shape-chevron.scss

@@ -0,0 +1,65 @@
+@use "sass:math";
+@use "sass:string";
+@use "../settings" as *;
+@use "functions" as *;
+
+////
+/// Shape chevron
+///
+/// @group tools
+////
+
+/// Chevron mixin
+///
+/// Generate chevron by using a box with borders on two sides, then rotating it.
+///
+/// @param {String} $direction - Direction for chevron: up, right, down, left
+/// @param {Colour} $colour - Colour of chevron
+/// @param {Number} $font-size [16] - Font size to base chevron size on
+/// @param {String} $display [block] - CSS display property of the arrow
+
+@mixin nhsuk-shape-chevron($direction, $colour, $font-size: 16, $display: block) {
+  $outline-width: nhsuk-em($nhsuk-chevron-border, $font-size);
+  $box-size: nhsuk-em(math.div($font-size, 2), $font-size);
+  $size: nhsuk-em(nhsuk-chevron-size($font-size));
+  display: $display;
+
+  width: $box-size;
+  height: $box-size;
+
+  -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0);
+
+          clip-path: polygon(100% 100%, 100% 0, 0 0);
+
+  border-radius: $outline-width;
+
+  // Safari renders a hairline gap if we use borders, so use an inset outline
+  // instead. Because outlines are added to all sides of a box, we hide the
+  // outline on the two other two sides using clip-path.
+  outline: $outline-width solid currentcolor;
+  outline-offset: -$outline-width;
+
+  color: $colour;
+
+  @if $direction == "up" {
+    transform: translateY($outline-width) rotate(-45deg);
+  } @else if $direction == "right" {
+    transform: translateX(-$size + $outline-width) rotate(45deg);
+  } @else if $direction == "down" {
+    transform: translateY(-$size + $outline-width) rotate(135deg);
+  } @else if $direction == "left" {
+    transform: translateX($outline-width) rotate(225deg);
+  } @else {
+    @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
+  }
+
+  @supports (outline-width: string.unquote("max(0px)")) {
+    // Ensure that the chevron outline never gets smaller than 2px
+    outline-width: string.unquote("max(#{$nhsuk-chevron-border}, #{$outline-width})");
+
+    // Ensure that the chevron never gets smaller than 16px
+    font-size: string.unquote("max(#{$font-size * 1px}, 1em)");
+  }
+}
+
+/*# sourceMappingURL=_shape-chevron.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/tools/_shape-dash.scss

@@ -0,0 +1,31 @@
+@use "../settings" as *;
+@use "../tools/spacing" as *;
+@use "../helpers/colour" as *;
+@use "functions" as *;
+
+////
+/// Dash mixin
+///
+/// @group tools
+////
+
+@mixin nhsuk-shape-dash() {
+  position: relative;
+  padding: 0 0 0 nhsuk-spacing(4);
+
+  &::before {
+    content: "";
+
+    display: block;
+
+    position: absolute;
+    top: nhsuk-em(12, 16);
+    left: 0;
+
+    width: nhsuk-spacing(3);
+
+    border-top: 1px solid nhsuk-colour("grey-2");
+  }
+}
+
+/*# sourceMappingURL=_shape-dash.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/tools/_spacing.scss

@@ -1,8 +1,9 @@
+// stylelint-disable declaration-no-important
+
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
 @use "../settings" as *;
-@use "ifff" as *;
 @use "sass-mq" as *;
 
 ////
@@ -55,7 +56,12 @@
   }
 
   $value: map.get($nhsuk-spacing-points, $spacing-point);
-  @return if($is-negative, $value * -1, $value);
+
+  @if $is-negative {
+    @return $value * -1;
+  }
+
+  @return $value;
 }
 
 /// Responsive spacing
@@ -111,27 +117,34 @@
       + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
   }
 
+  // [2]
   @each $breakpoint, $breakpoint-value in $scale-map {
-    // [2]
-
     @if $adjustment {
-      $breakpoint-value: $breakpoint-value + $adjustment;
+      @if not math.compatible($breakpoint-value, $adjustment) {
+        $breakpoint-value: calc($breakpoint-value + $adjustment);
+      } @else {
+        $breakpoint-value: $breakpoint-value + $adjustment;
+      }
+    }
+
+    @if $important == true {
+      $breakpoint-value: $breakpoint-value !important;
     }
 
     & {
+      // [3]
       @if not $breakpoint {
-        // [3]
         @if $direction == all {
-          #{$property}: $breakpoint-value if($important, !important, null);
+          #{$property}: $breakpoint-value;
         } @else {
-          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+          #{$property}-#{$direction}: $breakpoint-value;
         }
       } @else {
         @include nhsuk-media-query($from: $breakpoint) {
           @if $direction == all {
-            #{$property}: $breakpoint-value if($important, !important, null);
+            #{$property}: $breakpoint-value;
           } @else {
-            #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+            #{$property}-#{$direction}: $breakpoint-value;
           }
         }
       }
@@ -145,8 +158,6 @@
 /// spacing scale, which defines different spacing values at different
 /// breakpoints. Wrapper for the `nhsuk-responsive-spacing` mixin.
 ///
-/// @see {mixin} nhsuk-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
@@ -171,8 +182,6 @@
 /// spacing scale, which defines different spacing values at different
 /// breakpoints. Wrapper for the `nhsuk-responsive-spacing` mixin.
 ///
-/// @see {mixin} nhsuk-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
@@ -190,3 +199,5 @@
 @mixin nhsuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
   @include nhsuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
 }
+
+/*# sourceMappingURL=_spacing.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/tools/_typography.scss

@@ -1,9 +1,10 @@
+// stylelint-disable declaration-no-important
+
 @use "sass:map";
 @use "sass:math";
 @use "sass:string";
 @use "../settings" as *;
 @use "functions" as *;
-@use "ifff" as *;
 @use "sass-mq" as *;
 
 ////
@@ -21,21 +22,35 @@
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
 
-@mixin nhsuk-text-color {
-  color: $nhsuk-text-color;
+@mixin nhsuk-text-colour {
+  color: $nhsuk-text-colour;
 
   @include nhsuk-media-query($media-type: print) {
-    color: $nhsuk-print-text-color;
+    color: $nhsuk-print-text-colour;
   }
 }
 
+/// Text colour (deprecated)
+///
+/// @alias nhsuk-text-colour
+/// @deprecated To be removed in v11.0, replaced by nhsuk-text-colour
+
+@mixin nhsuk-text-color {
+  @include nhsuk-warning("color-to-colour", "nhsuk-text-color is deprecated. Use nhsuk-text-colour instead.");
+  @include nhsuk-text-colour;
+}
+
 /// Normal font weight
 ///
 /// @param {Boolean} $important [false] - Whether to mark declarations as
 ///   `!important`. Generally Used to create override classes.
 
 @mixin nhsuk-typography-weight-normal($important: false) {
-  font-weight: $nhsuk-font-normal if($important, !important, null);
+  @if $important == true {
+    font-weight: $nhsuk-font-weight-normal !important;
+  } @else {
+    font-weight: $nhsuk-font-weight-normal;
+  }
 }
 
 /// Bold font weight
@@ -44,7 +59,11 @@
 ///   `!important`. Generally Used to create override classes.
 
 @mixin nhsuk-typography-weight-bold($important: false) {
-  font-weight: $nhsuk-font-bold if($important, !important, null);
+  @if $important == true {
+    font-weight: $nhsuk-font-weight-bold !important;
+  } @else {
+    font-weight: $nhsuk-font-weight-bold;
+  }
 }
 
 /// Word break helper
@@ -56,31 +75,52 @@
 ///   `!important`. Generally used to create override classes.
 
 @mixin nhsuk-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);
+  $properties: (
+    // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
+    "word-wrap": break-word,
+
+    // All other browsers support `overflow-wrap`
+    "overflow-wrap": break-word
+  );
 
-  // All other browsers support `overflow-wrap`
-  overflow-wrap: break-word if($important, !important, null);
+  // Workaround to avoid deprecated `if()` function
+  @each $property, $value in $properties {
+    @if $important == true {
+      #{$property}: $value !important;
+    } @else {
+      #{$property}: $value;
+    }
+  }
 }
 
 /// Line height
 ///
 ///
 /// 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.
+/// they are already unit-less (and thus already treated as relative values),
+/// in rems, 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
 
 @function nhsuk-line-height($line-height, $font-size) {
-  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
-    // Explicitly rounding to 5 decimal places to match the node-sass/libsass default precision.
-    // This is expanded to 10 in dart-sass and results in significant line height differences
-    // Therefore by rounding it here we achieve consistent rendering across node-sass and dart-sass
-    $ten-to-the-power-five: 100000;
-    $line-height: math.div(round(math.div($line-height, $font-size) * $ten-to-the-power-five), $ten-to-the-power-five);
+  @if not math.is-unitless($line-height) {
+    @if math.compatible($line-height, 1rem) and math.compatible($font-size, 1px) {
+      $line-height: math.div($line-height, 1rem) * $nhsuk-root-font-size;
+
+      @if math.is-unitless($font-size) {
+        $font-size: $font-size * 1px;
+      }
+    }
+
+    @if math.compatible($line-height, 1px) and math.compatible($font-size, 1rem) {
+      $font-size: math.div($font-size, 1rem) * $nhsuk-root-font-size;
+    }
+
+    @if math.unit($line-height) == math.unit($font-size) {
+      $line-height: math.div($line-height, $font-size);
+    }
   }
 
   @return $line-height;
@@ -169,24 +209,29 @@
     // $calculated-line-height is a separate variable from $line-height,
     // as otherwise the value would get redefined with each loop and
     // eventually break nhsuk-line-height.
-    //
+    $calculated-line-height: $line-height;
+    @if $line-height == false {
+      $calculated-line-height: map.get($breakpoint-map, "line-height");
+    }
+
     // We continue to call the param $line-height to stay consistent with the
     // naming with nhsuk-font.
     $calculated-line-height: nhsuk-line-height(
-      $line-height: if($line-height, $line-height, map.get($breakpoint-map, "line-height")),
+      $line-height: $calculated-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 $important == true {
+      $font-size: $font-size !important;
+      $font-size-rem: $font-size-rem !important;
+      $calculated-line-height: $calculated-line-height !important;
+    }
 
     & {
       @if not $breakpoint {
-        font-size: $font-size;
         font-size: $font-size-rem;
         line-height: $calculated-line-height;
       } @else if $breakpoint == "print" {
@@ -196,7 +241,6 @@
         }
       } @else {
         @include nhsuk-media-query($from: $breakpoint) {
-          font-size: $font-size;
           font-size: $font-size-rem;
           line-height: $calculated-line-height;
         }
@@ -257,3 +301,5 @@
     @include nhsuk-font-size($size, $line-height);
   }
 }
+
+/*# sourceMappingURL=_typography.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_clearfix.scss

@@ -13,3 +13,5 @@
 .nhsuk-u-clear {
   @include nhsuk-clearfix;
 }
+
+/*# sourceMappingURL=_clearfix.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_display.scss

@@ -13,3 +13,5 @@
 .nhsuk-u-display-inline-block {
   display: inline-block !important;
 }
+
+/*# sourceMappingURL=_display.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_float.scss

@@ -13,3 +13,5 @@
 .nhsuk-u-float-right {
   float: right !important;
 }
+
+/*# sourceMappingURL=_float.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_grid-widths.scss

@@ -21,77 +21,76 @@
 // stylelint-disable declaration-no-important
 
 .nhsuk-u-one-half {
-  float: left;
   width: math.percentage(math.div(1, 2)) !important;
+  float: left;
 }
 
 .nhsuk-u-one-third {
-  float: left;
   width: math.percentage(math.div(1, 3)) !important;
+  float: left;
 }
 
 .nhsuk-u-two-thirds {
-  float: left;
   width: math.percentage(math.div(2, 3)) !important;
+  float: left;
 }
 
 .nhsuk-u-one-quarter {
-  float: left;
   width: math.percentage(math.div(1, 4)) !important;
+  float: left;
 }
 
 .nhsuk-u-three-quarters {
-  float: left;
   width: math.percentage(math.div(3, 4)) !important;
+  float: left;
 }
 
-/// Force grid widths on screen sizes on tablet
-/// and above
-///
-/// By default all grid elements will go to 100% width
-/// on every screen size, these utilities can force
-/// custom widths on screen sizes on tablet
-/// and above
-///
-/// @example html
-///   <div class="nhsuk-u-one-half-tablet"></div>
+// Force grid widths on screen sizes on tablet
+// and above
+//
+// By default all grid elements will go to 100% width
+// on every screen size, these utilities can force
+// custom widths on screen sizes on tablet
+// and above
 
 .nhsuk-u-one-half-tablet {
   width: 100% !important;
   @include nhsuk-media-query($from: tablet) {
-    float: left;
     width: math.percentage(math.div(1, 2)) !important;
+    float: left;
   }
 }
 
 .nhsuk-u-one-third-tablet {
   width: 100% !important;
   @include nhsuk-media-query($from: tablet) {
-    float: left;
     width: math.percentage(math.div(1, 3)) !important;
+    float: left;
   }
 }
 
 .nhsuk-u-two-thirds-tablet {
   width: 100% !important;
   @include nhsuk-media-query($from: tablet) {
-    float: left;
     width: math.percentage(math.div(2, 3)) !important;
+    float: left;
   }
 }
 
 .nhsuk-u-one-quarter-tablet {
   width: 100% !important;
   @include nhsuk-media-query($from: tablet) {
-    float: left;
     width: math.percentage(math.div(1, 4)) !important;
+    float: left;
   }
 }
 
 .nhsuk-u-three-quarters-tablet {
   width: 100% !important;
   @include nhsuk-media-query($from: tablet) {
-    float: left;
     width: math.percentage(math.div(3, 4)) !important;
+    float: left;
   }
 }
+
+/*# sourceMappingURL=_grid-widths.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_index.scss

@@ -14,3 +14,5 @@
 @forward "typography";
 @forward "visually-hidden";
 @forward "widths";
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_link-nowrap.scss

@@ -17,3 +17,5 @@
     white-space: nowrap;
   }
 }
+
+/*# sourceMappingURL=_link-nowrap.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_list-border.scss

@@ -1,4 +1,6 @@
 @use "../settings" as *;
+@use "../tools/functions" as *;
+@use "../helpers" as *;
 
 ////
 /// List border
@@ -15,6 +17,8 @@
 ////
 
 .nhsuk-list--border li {
-  border-bottom: 1px solid $color_nhsuk-grey-4;
-  padding: 8px 0 16px;
+  padding: nhsuk-px-to-rem(8px) 0 nhsuk-px-to-rem(16px);
+  border-bottom: 1px solid $nhsuk-border-colour;
 }
+
+/*# sourceMappingURL=_list-border.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_reading-width.scss

@@ -14,3 +14,5 @@
 .nhsuk-u-reading-width {
   @include nhsuk-reading-width;
 }
+
+/*# sourceMappingURL=_reading-width.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_spacing.scss

@@ -13,6 +13,8 @@
 /// Directions for spacing
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @access private
 
 $_spacing-directions: ("top", "right", "bottom", "left") !default;
 
@@ -34,6 +36,7 @@ $_spacing-directions: ("top", "right", "bottom", "left") !default;
 ///     }
 ///   }
 ///
+/// @access private
 
 @mixin _nhsuk-generate-responsive-spacing-overrides($property) {
   // For each point in the spacing scale (defined in settings), create an
@@ -64,6 +67,7 @@ $_spacing-directions: ("top", "right", "bottom", "left") !default;
 ///      margin: 24px !important;
 ///   }
 ///
+/// @access private
 
 @mixin _nhsuk-generate-static-spacing-overrides($property) {
   @each $spacing-point in map.keys($nhsuk-spacing-points) {
@@ -86,3 +90,5 @@ $_spacing-directions: ("top", "right", "bottom", "left") !default;
   @include _nhsuk-generate-static-spacing-overrides("margin");
   @include _nhsuk-generate-static-spacing-overrides("padding");
 }
+
+/*# sourceMappingURL=_spacing.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_text-align.scss

@@ -17,3 +17,5 @@
 .nhsuk-u-text-align-right {
   text-align: right !important;
 }
+
+/*# sourceMappingURL=_text-align.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/utilities/_typography.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "../settings" as *;
+@use "../tools" as *;
+
+////
+/// Typography
+///
+/// @group utilities
+////
+
+// Font size and line height
+
+// Generate typography override classes for each responsive font map in the
+// typography scale eg .nhsuk-u-font-size-48
+// nhsuk-u-font-size-24 is deprecated
+@each $size, $font-map in $nhsuk-typography-scale {
+  .nhsuk-u-font-size-#{$size} {
+    $font-map: map.get($nhsuk-typography-scale, $size);
+
+    // Add underscore to deprecated typography scale keys
+    @if map.has-key($font-map, "deprecation") {
+      $size: _#{$size};
+    }
+
+    @include nhsuk-font-size($size, $important: true);
+  }
+}
+
+// Weights
+
+.nhsuk-u-font-weight-normal {
+  @include nhsuk-typography-weight-normal($important: true);
+}
+
+.nhsuk-u-font-weight-bold {
+  @include nhsuk-typography-weight-bold($important: true);
+}
+
+// Typography helpers
+
+.nhsuk-u-text-break-word {
+  @include nhsuk-text-break-word($important: true);
+}
+
+// Colours
+
+.nhsuk-u-secondary-text-colour {
+  // stylelint-disable-next-line declaration-no-important
+  color: $nhsuk-secondary-text-colour !important;
+}
+
+/*# sourceMappingURL=_typography.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_visually-hidden.scss

@@ -18,3 +18,5 @@
 .nhsuk-u-visually-hidden-focusable {
   @include nhsuk-visually-hidden-focusable;
 }
+
+/*# sourceMappingURL=_visually-hidden.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/utilities/_widths.scss

@@ -60,3 +60,5 @@
     width: math.percentage(math.div(1, 4)) !important;
   }
 }
+
+/*# sourceMappingURL=_widths.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/vendor/sass-mq.scss

@@ -1,4 +1,4 @@
-@use "../settings/warnings" as *;
+@use "../settings" as *;
 
 // mq() v6.0.0
 // sass-mq/sass-mq
@@ -304,7 +304,7 @@ $mq-media-type: all !default;
     // Loop through the breakpoints that should be shown
     @each $show-breakpoint in $show-breakpoints {
       $width: get-breakpoint-width($show-breakpoint, $breakpoints);
-      @include mq($show-breakpoint, $breakpoints: $breakpoints) {
+      @include mq($show-breakpoint, $breakpoints: $breakpoints, $silence-warning: true) {
         content: "#{$show-breakpoint} ≥ #{$width} (#{px2em($width)})";
       }
     }
@@ -314,3 +314,5 @@ $mq-media-type: all !default;
 @if list.length($mq-show-breakpoints) > 0 {
   @include show-breakpoints;
 }
+
+/*# sourceMappingURL=sass-mq.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/index.scss

@@ -0,0 +1,4 @@
+@forward "core";
+@forward "components";
+
+/*# sourceMappingURL=index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/nhsuk.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=nhsuk.scss.map */

data/app/assets/stylesheets/design_system/nhsuk.scss

@@ -1,5 +1,5 @@
 // Using the NHSUK frontend.
-@use 'nhsuk-frontend-9.6.4/core';
-@use 'nhsuk-frontend-9.6.4/components';
+@use 'nhsuk-frontend-10.3.1/core';
+@use 'nhsuk-frontend-10.3.1/components';
 
 // Use extreme caution when making any design system level style changes or additions here.