design_system 0.10.0 → 0.12.0

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

@@ -1,4 +1,7 @@
+// stylelint-disable declaration-no-important
+
 @use "../settings" as *;
+@use "../helpers" as *;
 @use "sass-mq" as *;
 @use "spacing" as *;
 @use "typography" as *;
@@ -11,17 +14,15 @@
 
 /// Clearfix mixin
 ///
-/// @see utilities/clearfix
-///
 /// @example scss
-///   @include nhsuk-clearfix();
+///   @include nhsuk-clearfix;
 ///
 
-@mixin nhsuk-clearfix() {
+@mixin nhsuk-clearfix {
   &::after {
-    clear: both;
     content: "";
     display: block;
+    clear: both;
   }
 }
 
@@ -38,13 +39,11 @@
 /// Reading width mixin, add a maximum width
 /// to large pieces of content
 ///
-/// @see utilities/reading-width
-///
 /// @example scss
-///   @include nhsuk-reading-width();
+///   @include nhsuk-reading-width;
 ///
 
-@mixin nhsuk-reading-width() {
+@mixin nhsuk-reading-width {
   max-width: 44em;
 }
 
@@ -69,40 +68,53 @@
 /// @param {Boolean} $important [true] - Whether to mark as `!important`
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @access private
 
 @mixin _nhsuk-visually-hide-content($important: true) {
-  position: absolute if($important, !important, null);
+  $properties: (
+    "position": absolute,
+
+    "width": 1px,
+    "height": 1px,
 
-  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
-  // the wrong order in VoiceOver for OSX
-  margin: 0 if($important, !important, null);
-  padding: 0 if($important, !important, null);
+    // If margin is set to a negative value it can cause text to be announced in
+    // the wrong order in VoiceOver for OSX
+    "margin": 0,
+    "padding": 0,
 
-  overflow: hidden if($important, !important, null);
+    "overflow": hidden,
 
-  // `clip` is needed for IE11 support
-  clip: rect(0 0 0 0) if($important, !important, null);
-  clip-path: inset(50%) if($important, !important, null);
+    // `clip` is needed for IE11 support
+    "clip": rect(0 0 0 0),
+    "clip-path": inset(50%),
+    "border": 0,
 
-  border: 0 if($important, !important, null);
+    // For long content, line feeds are not interpreted as spaces and small width
+    // causes content to wrap 1 word per line:
+    // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+    "white-space": nowrap
+  );
 
-  // For long content, line feeds are not interpreted as spaces and small width
-  // 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);
+  // Workaround to avoid deprecated `if()` function
+  @each $property, $value in $properties {
+    @if $important == true {
+      #{$property}: $value !important;
+    } @else {
+      #{$property}: $value;
+    }
+  }
 
   // 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.
-  user-select: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 /// Hide an element visually, but have it available for screen readers
 ///
-/// @see utilities/visually-hidden
-///
 /// @param {Boolean} $important [true] - Whether to mark as `!important`
 ///
 /// @example scss
@@ -145,7 +157,10 @@
 
 @mixin nhsuk-visually-hidden-focusable($important: true) {
   // IE 11 doesn't support the combined `:not(:active, :focus)` syntax.
-  &:not(:active):not(:focus) {
+  // Also allows for ':focus' companion classes from postcss-pseudo-classes
+  // which the plugin unfortunately doesn't handle automatically.
+  // stylelint-disable-next-line selector-class-pattern
+  &:not(:active):not(:focus):not(.\:focus) {
     @include _nhsuk-visually-hide-content($important: $important);
   }
 }
@@ -180,17 +195,33 @@
     "visually-shown is deprecated. Use @media queries to apply `visually-hidden` instead."
   );
 
-  position: static if($important, !important, null);
-  width: auto if($important, !important, null);
-  height: auto if($important, !important, null);
-  margin: 0 if($important, !important, null);
-  padding: 0 if($important, !important, null);
-  overflow: visible if($important, !important, null);
-  clip: auto if($important, !important, null);
-  clip-path: none if($important, !important, null);
-  border: none if($important, !important, null);
-  white-space: normal if($important, !important, null);
-  user-select: auto if($important, !important, null);
+  $properties: (
+    "position": static,
+
+    "width": auto,
+    "height": auto,
+    "margin": 0,
+    "padding": 0,
+
+    "overflow": visible,
+
+    "clip": auto,
+    "clip-path": none,
+
+    "border": none,
+
+    "white-space": normal,
+    "user-select": auto
+  );
+
+  // Workaround to avoid deprecated `if()` function
+  @each $property, $value in $properties {
+    @if $important == true {
+      #{$property}: $value !important;
+    } @else {
+      #{$property}: $value;
+    }
+  }
 
   @if $display {
     display: $display;
@@ -200,13 +231,11 @@
 /// Top and bottom margin mixin, remove
 /// the top and bottom margin spacing
 ///
-/// @see utilities/top-and-bottom
-///
 /// @example scss
 ///   @include nhsuk-top-and-bottom;
 ///
 
-@mixin nhsuk-top-and-bottom() {
+@mixin nhsuk-top-and-bottom {
   & > *:first-child {
     margin-top: 0;
   }
@@ -231,21 +260,27 @@
 ///
 /// See components/_panel
 ///
+/// @param {Colour} $panel-background-colour - Panel background colour
+/// @param {Colour} $panel-text-colour - Panel text colour
+/// @param {Colour} $panel-border-colour [null] - Optional panel border colour
+///
 /// @example scss
-///   @include nhsuk-panel($color_nhsuk-blue, $color_nhsuk-white);
+///   @include nhsuk-panel($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-secondary-border-colour);
 ///
 
-@mixin nhsuk-panel($panel-background-color, $panel-text-color) {
-  background-color: $panel-background-color;
-  color: $panel-text-color;
+@mixin nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour: null) {
+  box-sizing: border-box;
+  @if $panel-border-colour {
+    border: 1px solid $panel-border-colour;
+  }
+  color: $panel-text-colour;
+  background-color: $panel-background-colour;
 
   @include nhsuk-top-and-bottom;
   @include nhsuk-responsive-margin(7, "bottom");
-  @include nhsuk-responsive-margin(7, "top");
-  @include nhsuk-responsive-padding(5);
 
   @include nhsuk-media-query($media-type: print) {
-    border: 1px solid $nhsuk-print-text-color;
+    border: 1px solid $nhsuk-print-text-colour;
     page-break-inside: avoid;
   }
 }
@@ -263,20 +298,21 @@
 /// Panel with label mixin, inherits panel styling
 /// and removes padding top for the label positioning
 ///
-/// Used in-conjunction with @mixin heading-label
-///
-/// @see components/_warning-component
+/// @param {Colour} $panel-background-colour - Panel background colour
+/// @param {Colour} $panel-text-colour - Panel text colour
+/// @param {Colour} $panel-border-colour - Panel border colour
 ///
 /// @example scss
-///   @include nhsuk-panel-with-label($color_nhsuk-blue, $color_nhsuk-white);
+///   @include nhsuk-panel-with-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour, $nhsuk-secondary-border-colour);
 ///
 
-@mixin nhsuk-panel-with-label($panel-background-color, $panel-text-color, $panel-border-color) {
-  border: 1px solid $panel-border-color;
-  // stylelint-disable-next-line declaration-no-important
+@mixin nhsuk-panel-with-label($panel-background-colour, $panel-text-colour, $panel-border-colour) {
   padding-top: 0 !important;
+  border: 1px solid $panel-border-colour;
 
-  @include nhsuk-panel($panel-background-color, $panel-text-color);
+  @include nhsuk-panel($panel-background-colour, $panel-text-colour, $panel-border-colour);
+  @include nhsuk-responsive-margin(7, "top");
+  @include nhsuk-responsive-padding(5);
 }
 
 /// Panel with label mixin, inherits panel styling
@@ -293,43 +329,48 @@
 /// Heading label mixin, adds a tab heading to
 /// warning callout, do and don't lists and panel
 ///
-/// Used in-conjunction with @mixin panel-with-label
-///
-/// @see components/_warning-component
-///
 /// 1. Background colour to be set on the @include.
-/// 2. Text colour to be set on the @include.
-/// 3. Display inline-block so it does not take up the full width.
-/// 4. Margin -24px left and right aligns the heading to the box.
-/// 5. Top positioning set to minus to make the heading
-///    sit just outside the box.
+/// 2. Ensures heading appears separate to the body text in high contrast mode.
+/// 3. Text colour to be set on the @include.
+/// 4. Display inline-block so it does not take up the full width.
+/// 5. Negative left margin aligns the heading to the box.
+/// 6. Top positioning set to minus to make heading sit just outside the box.
+///
+/// @param {Colour} $heading-background-colour - Heading background colour
+/// @param {Colour} $heading-text-colour - Heading text colour
 ///
 /// @example scss
-///   @include nhsuk-heading-label($color_nhsuk-blue, $color_nhsuk-white);
+///   @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
 ///
 
-@mixin nhsuk-heading-label($heading-background-color, $heading-text-color) {
-  background-color: $heading-background-color; // [1]
-  color: $heading-text-color; // [2]
-  display: inline-block; // [3]
-  margin: nhsuk-spacing(0) nhsuk-spacing(0) nhsuk-spacing(2) -33px;
-  padding: nhsuk-spacing(2) nhsuk-spacing(5);
+@mixin nhsuk-heading-label($heading-background-colour, $heading-text-colour) {
+  display: inline-block; // [4]
+
   position: relative;
-  top: -16px; // [5]
+  top: nhsuk-spacing(-3); // [6]
+
+  margin: 0;
+  margin-bottom: nhsuk-spacing(2);
+  margin-left: nhsuk-spacing(-5) - 1px; // [5]
+  padding: nhsuk-spacing(2) nhsuk-spacing(5);
+
+  outline: 1px solid transparent; // [2]
+  outline-offset: -1px;
+
+  color: $heading-text-colour; // [3]
+  background-color: $heading-background-colour; // [1]
 
   @include nhsuk-font-size(26);
 
   @include nhsuk-media-query($until: tablet) {
-    margin-left: -25px;
-    margin-right: 0;
+    top: nhsuk-spacing(-2); // [6]
+    margin-left: nhsuk-spacing(-4) - 1px; // [5]
     padding: nhsuk-spacing(2) nhsuk-spacing(4);
-    top: -8px; // [5]
   }
 
-  @include nhsuk-media-query($media-type: print) {
-    background: none;
-    color: $color_nhsuk-black;
+  @include nhsuk-print-colour {
     top: 0;
+    background: none;
   }
 }
 
@@ -347,21 +388,23 @@
 /// Care card mixin, used for creating
 /// different coloured care cards
 ///
-/// @see components/card/card
+/// @param {Colour} $heading-background-colour - Heading background colour
+/// @param {Colour} $heading-text-colour - Heading text colour
+/// @param {Number} $print-border-size - Print border size
 ///
 /// @example scss
-///   @include nhsuk-care-card($color_nhsuk-blue, $color_nhsuk-white, 4px);
+///   @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px);
 ///
 
-@mixin nhsuk-care-card($heading-background-color, $heading-text-color, $print-border-size) {
+@mixin nhsuk-care-card($heading-background-colour, $heading-text-colour, $print-border-size) {
+  .nhsuk-card__heading-container,
   .nhsuk-card--care__heading-container {
-    background-color: $heading-background-color;
-    color: $heading-text-color;
+    color: $heading-text-colour;
+    background-color: $heading-background-colour;
   }
 
-  @include nhsuk-media-query($media-type: print) {
-    border: $print-border-size solid $nhsuk-print-text-color;
-    color: $nhsuk-print-text-color;
+  @include nhsuk-print-colour {
+    border: $print-border-size solid $nhsuk-print-text-colour;
     page-break-inside: avoid;
   }
 }
@@ -380,43 +423,48 @@
 /// Print colour mixin, sets the text print colour
 /// warning callout, do and don't lists and panels
 ///
-/// @see components/_care-card
+/// @param {Colour} $print-colour [$nhsuk-print-text-colour] - Print colour
 ///
 /// @example scss
-///   @include nhsuk-print-color($nhsuk-print-text-color);
+///   @include nhsuk-print-colour($print-colour: inherit);
 ///
 
-@mixin nhsuk-print-color($print-color) {
+@mixin nhsuk-print-colour($print-colour: $nhsuk-print-text-colour) {
   @include nhsuk-media-query($media-type: print) {
-    color: $print-color;
-    fill: $print-color;
-
-    &:active,
-    &:focus,
-    &:visited {
-      color: $nhsuk-print-text-color;
-    }
+    color: $print-colour;
+    @content;
   }
 }
 
 /// Print colour mixin, sets the text print colour
 /// warning callout, do and don't lists and panels (deprecated)
 ///
-/// @alias nhsuk-print-color
-/// @deprecated To be removed in v11.0, replaced by nhsuk-print-color
+/// @alias nhsuk-print-colour
+/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour
+
+@mixin nhsuk-print-color($args...) {
+  @include nhsuk-warning("color-to-colour", "nhsuk-print-color is deprecated. Use nhsuk-print-colour instead.");
+  @include nhsuk-print-colour($args...);
+}
+
+/// Print colour mixin, sets the text print colour
+/// warning callout, do and don't lists and panels (deprecated)
+///
+/// @alias nhsuk-print-colour
+/// @deprecated To be removed in v11.0, replaced by nhsuk-print-colour
 
 @mixin print-color($args...) {
-  @include nhsuk-warning("print-color", "print-color is deprecated. Use nhsuk-print-color instead.");
-  @include nhsuk-print-color($args...);
+  @include nhsuk-warning("print-color", "print-color is deprecated. Use nhsuk-print-colour instead.");
+  @include nhsuk-print-colour($args...);
 }
 
 /// Print hide mixin, hides the element from print
 ///
 /// @example scss
-///   @include nhsuk-print-hide();
+///   @include nhsuk-print-hide;
 ///
 
-@mixin nhsuk-print-hide() {
+@mixin nhsuk-print-hide {
   @include nhsuk-media-query($media-type: print) {
     display: none;
   }
@@ -427,9 +475,9 @@
 /// @alias nhsuk-print-hide
 /// @deprecated To be removed in v11.0, replaced by nhsuk-print-hide
 
-@mixin print-hide($args...) {
+@mixin print-hide {
   @include nhsuk-warning("print-hide", "print-hide is deprecated. Use nhsuk-print-hide instead.");
-  @include nhsuk-print-hide($args...);
+  @include nhsuk-print-hide;
 }
 
 /// Flex mixin
@@ -438,7 +486,7 @@
 ///   @include nhsuk-flex;
 ///
 
-@mixin nhsuk-flex() {
+@mixin nhsuk-flex {
   display: flex;
   flex-wrap: wrap;
 }
@@ -448,9 +496,9 @@
 /// @alias nhsuk-flex
 /// @deprecated To be removed in v11.0, replaced by nhsuk-flex
 
-@mixin flex($args...) {
+@mixin flex {
   @include nhsuk-warning("flex", "flex is deprecated. Use nhsuk-flex instead.");
-  @include nhsuk-flex($args...);
+  @include nhsuk-flex;
 }
 
 /// Flex item mixin
@@ -459,7 +507,7 @@
 ///   @include nhsuk-flex-item;
 ///
 
-@mixin nhsuk-flex-item() {
+@mixin nhsuk-flex-item {
   display: flex;
 
   @include nhsuk-media-query($until: desktop) {
@@ -472,19 +520,19 @@
 /// @alias nhsuk-flex-item
 /// @deprecated To be removed in v11.0, replaced by nhsuk-flex-item
 
-@mixin flex-item($args...) {
+@mixin flex-item {
   @include nhsuk-warning("flex-item", "flex-item is deprecated. Use nhsuk-flex-item instead.");
-  @include nhsuk-flex-item($args...);
+  @include nhsuk-flex-item;
 }
 
 /// Remove margin mobile mixin
 ///
 /// Removes left and right margin at tablet breakpoint
 
-@mixin nhsuk-remove-margin-mobile() {
+@mixin nhsuk-remove-margin-mobile {
   @include nhsuk-media-query($until: tablet) {
-    margin-left: -$nhsuk-gutter-half;
     margin-right: -$nhsuk-gutter-half;
+    margin-left: -$nhsuk-gutter-half;
   }
 }
 
@@ -510,11 +558,13 @@
 /// Used in the header and footer.
 
 @mixin nhsuk-logo-size {
-  height: 40px;
   width: 100px;
+  height: 40px;
 }
 
 @mixin nhsuk-logo-size-small {
-  height: 32px;
   width: 80px;
+  height: 32px;
 }
+
+/*# sourceMappingURL=_mixins.scss.map */

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

@@ -4,28 +4,24 @@
 @use "../settings" as *;
 @use "../vendor/sass-mq" as * with (
   $mq-breakpoints: $nhsuk-breakpoints,
-  $mq-show-breakpoints: if(
-      meta.variable-exists(nhsuk-show-breakpoints) and $nhsuk-show-breakpoints,
-      map.keys($nhsuk-breakpoints),
-      ()
-    )
+  $mq-show-breakpoints: $nhsuk-show-breakpoints
 );
 
 ////
-/// Wrangle sass-mq config...
-///
 /// @group tools
 ////
 
+// Wrangle sass-mq config...
 @forward "../vendor/sass-mq";
 
-/// Helpers
-
 /// Media query
 ///
 /// This is a currently a wrapper for sass-mq - abstracted so that we can
 /// replace it in the future if we so choose.
 ///
+/// Due to Sass deprecated 'misplaced-rest' named argument warnings, all
+/// arguments must be passed to maintain `nhsuk-media-query(950px)` support.
+///
 /// @param {String | Boolean} $from [false] - One of $nhsuk-breakpoints
 /// @param {String | Boolean} $until [false] - One of $nhsuk-breakpoints
 /// @param {String | Boolean} $and [false] - Additional media query parameters
@@ -60,8 +56,8 @@
 ///
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
 
-@mixin nhsuk-media-query($args...) {
-  @include mq($args..., $silence-warning: true) {
+@mixin nhsuk-media-query($from: false, $until: false, $and: false, $media-type: $mq-media-type) {
+  @include mq($from, $until, $and, $media-type, $silence-warning: true) {
     @content;
   }
 }
@@ -77,3 +73,5 @@
     @content;
   }
 }
+
+/*# sourceMappingURL=_sass-mq.scss.map */

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

@@ -1,5 +1,6 @@
 @use "sass:math";
-@use "../settings/warnings" as *;
+@use "../settings" as *;
+@use "../tools/functions" as *;
 
 ////
 /// Shape arrow
@@ -15,6 +16,8 @@
 ///
 /// @param {Number} $base - Length of the base of the triangle
 /// @return {Number} Calculated height of the triangle
+///
+/// @access private
 
 @function _nhsuk-equilateral-height($base) {
   $square-root-of-three: 1.732;
@@ -42,13 +45,12 @@
 
 @mixin nhsuk-shape-arrow($direction, $base, $height: null, $display: block) {
   display: $display;
-
   width: 0;
   height: 0;
-
   border-style: solid;
   border-color: transparent; // 1
 
+  $base: nhsuk-px-to-rem($base);
   $perpendicular: math.div($base, 2);
 
   @if not $height {
@@ -56,23 +58,23 @@
   }
 
   @if $direction == "up" {
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
-
+    -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;
     border-bottom-color: inherit; // 2
   } @else if $direction == "right" {
-    clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
-
+    -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+            clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
     border-width: $perpendicular 0 $perpendicular $height;
     border-left-color: inherit; // 2
   } @else if $direction == "down" {
-    clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
-
+    -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+            clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
     border-width: $height $perpendicular 0 $perpendicular;
     border-top-color: inherit; // 2
   } @else if $direction == "left" {
-    clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
-
+    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
+            clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
     border-width: $perpendicular $height $perpendicular 0;
     border-right-color: inherit; // 2
   } @else {
@@ -80,12 +82,4 @@
   }
 }
 
-/// Arrow mixin (deprecated)
-///
-/// @alias nhsuk-shape-arrow
-/// @deprecated To be removed in v10.0, replaced by nhsuk-shape-arrow
-
-@mixin govuk-shape-arrow($args...) {
-  @include nhsuk-warning("govuk-shape-arrow", "govuk-shape-arrow is deprecated. Use nhsuk-shape-arrow instead.");
-  @include nhsuk-shape-arrow($args...);
-}
+/*# sourceMappingURL=_shape-arrow.scss.map */