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/all.scss

@@ -1,4 +1,4 @@
-@use "settings/warnings" as *;
+@use "settings" as *;
 @forward ".";
 
 @include nhsuk-warning(
@@ -6,3 +6,5 @@
   "Importing using 'core/all' is deprecated. Update your import statement to import 'core'.",
   $silence-further-warnings: false
 );
+
+/*# sourceMappingURL=all.scss.map */

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

@@ -1,4 +1,4 @@
-///
+////
 /// Forms
 ///
 /// Make sure our form elements don’t use any UA-specific font styles: we want
@@ -6,7 +6,7 @@
 /// available, and we start putting together more complete forms.
 ///
 /// @group elements
-///
+////
 
 button,
 input,
@@ -14,3 +14,5 @@ select,
 textarea {
   font-family: inherit;
 }
+
+/*# sourceMappingURL=_forms.scss.map */

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

@@ -6,3 +6,5 @@
 @forward "links";
 @forward "page";
 @forward "table";
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -5,7 +5,6 @@
 /// Links
 ///
 /// Our basic `<a>` elements only need very minimal styling.
-/// It uses the @mixin nhsuk-link-style-default within tools/links.
 /// Anything more opinionated (e.g. buttons, calls-to-action, etc.) will need a
 /// class defining in the Components layer.
 ///
@@ -20,8 +19,8 @@ a {
 
   @include nhsuk-media-query($media-type: print) {
     &::after {
-      color: $nhsuk-text-color;
       content: " (Link: " attr(href) ")"; // [1]
+      color: $nhsuk-text-colour;
       font-size: inherit; // [2]
     }
   }
@@ -40,3 +39,5 @@ a {
     }
   }
 }
+
+/*# sourceMappingURL=_links.scss.map */

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

@@ -0,0 +1,66 @@
+@use "../generic" as *;
+@use "../settings" as *;
+@use "../tools" as *;
+@use "../helpers" as *;
+
+////
+/// Page
+///
+/// High-level, page-level styling.
+///
+/// @group elements
+////
+
+html {
+  // Force the scrollbar to always display in IE, to prevent horizontal page
+  // jumps as content height changes (e.g. autocomplete results open).
+  overflow-y: scroll;
+
+  // 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: $nhsuk-template-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%;
+
+  // If the user is using the Apple Dynamic Type feature we need to include
+  // the @support CSS at-rule to enable it.
+  @if $nhsuk-include-dynamic-type {
+    @include nhsuk-font-dynamic-type;
+  }
+
+  // If the user is using the default Frutiger W01 font we need to include
+  // the font-face declarations.
+  @if $nhsuk-include-default-font-face {
+    @include nhsuk-font-face-frutiger;
+
+    & {
+      font-family: $nhsuk-font-family;
+    }
+  }
+}
+
+body {
+  // Ensure the page always fills at least the entire height of the viewport.
+  min-height: 100%;
+
+  // 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: $nhsuk-body-background-colour;
+
+  // Fonts on OSX will look more consistent with other systems that do not
+  // render text using sub-pixel anti-aliasing.
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  // Set the overall text colour, including a suitable override for print.
+  @include nhsuk-text-colour;
+}
+
+/*# sourceMappingURL=_page.scss.map */

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

@@ -12,9 +12,9 @@
 ////
 
 table {
+  width: 100%; // [1]
   border-spacing: 0;
   vertical-align: top;
-  width: 100%; // [1]
 
   @include nhsuk-responsive-margin(7, "bottom");
 
@@ -30,15 +30,14 @@ table {
 
 thead {
   th {
-    border-bottom: $nhsuk-border-table-header-width solid $nhsuk-border-color;
+    border-bottom: $nhsuk-border-table-header-width solid $nhsuk-border-colour;
   }
 }
 
 th,
 td {
   padding-left: 0;
-
-  border-bottom: $nhsuk-border-table-cell-width solid $nhsuk-border-color;
+  border-bottom: $nhsuk-border-table-cell-width solid $nhsuk-border-colour;
   text-align: left;
   vertical-align: top;
 
@@ -53,10 +52,12 @@ td {
 }
 
 th {
-  font-weight: $nhsuk-font-bold;
+  font-weight: $nhsuk-font-weight-bold;
 }
 
 caption {
   text-align: left;
   @include nhsuk-font($size: 22, $weight: bold);
 }
+
+/*# sourceMappingURL=_table.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/generic/_box-sizing.scss

@@ -10,8 +10,6 @@
 ////
 
 html {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -19,8 +17,8 @@ html {
   &,
   &::before,
   &::after {
-    -moz-box-sizing: inherit;
-    -webkit-box-sizing: inherit;
     box-sizing: inherit;
   }
 }
+
+/*# sourceMappingURL=_box-sizing.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/generic/_font-face.scss

@@ -1,4 +1,6 @@
+@use "sass:math";
 @use "../settings" as *;
+@use "../tools/exports" as *;
 
 ////
 /// Font face
@@ -7,7 +9,7 @@
 /// NHS England has a licence for the Frutiger webfont which all NHS organisations in England can use.
 /// NHS organisations can register here: https://service-manual.nhs.uk/design-system/styles/use-frutiger-font/
 ///
-/// @group settings
+/// @group generic
 ////
 
 @function nhsuk-font-url($filename) {
@@ -17,31 +19,43 @@
 @mixin nhsuk-font-face-frutiger {
   @at-root {
     @font-face {
-      font-display: swap;
       font-family: "Frutiger W01";
       font-style: normal;
-      font-weight: $nhsuk-font-normal;
-      src: nhsuk-font-url("FrutigerLTW01-55Roman.eot?#iefix");
+      font-weight: $nhsuk-font-weight-normal;
+      font-display: fallback;
       src:
-        nhsuk-font-url("FrutigerLTW01-55Roman.eot?#iefix") format("eot"),
         nhsuk-font-url("FrutigerLTW01-55Roman.woff2") format("woff2"),
-        nhsuk-font-url("FrutigerLTW01-55Roman.woff") format("woff"),
-        nhsuk-font-url("FrutigerLTW01-55Roman.ttf") format("truetype"),
-        nhsuk-font-url("FrutigerLTW01-55Roman.svg#7def0e34-f28d-434f-b2ec-472bde847115") format("svg");
+        nhsuk-font-url("FrutigerLTW01-55Roman.woff") format("woff");
     }
 
     @font-face {
-      font-display: swap;
       font-family: "Frutiger W01";
       font-style: normal;
-      font-weight: $nhsuk-font-bold;
-      src: nhsuk-font-url("FrutigerLTW01-65Bold.eot?#iefix");
+      font-weight: $nhsuk-font-weight-bold;
+      font-display: fallback;
       src:
-        nhsuk-font-url("FrutigerLTW01-65Bold.eot?#iefix") format("eot"),
         nhsuk-font-url("FrutigerLTW01-65Bold.woff2") format("woff2"),
-        nhsuk-font-url("FrutigerLTW01-65Bold.woff") format("woff"),
-        nhsuk-font-url("FrutigerLTW01-65Bold.ttf") format("truetype"),
-        nhsuk-font-url("FrutigerLTW01-65Bold.svg#eae74276-dd78-47e4-9b27-dac81c3411ca") format("svg");
+        nhsuk-font-url("FrutigerLTW01-65Bold.woff") format("woff");
     }
   }
 }
+
+/// Font 'Dynamic Type' support
+///
+/// On Apple devices, uses the -apple-system-body font to enable system-level
+/// Dynamic Type for accessibility but prevents the system body font-family.
+
+@mixin nhsuk-font-dynamic-type {
+  @at-root {
+    html {
+      font-size: math.percentage(math.div($nhsuk-root-font-size, 16px));
+
+      @supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
+        // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
+        font: -apple-system-body;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_font-face.scss.map */

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

@@ -4,3 +4,5 @@
 
 @forward "box-sizing";
 @forward "font-face";
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,106 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../settings/colours-palette" as *;
+
+////
+/// @group helpers/colour
+////
+
+///
+/// Get colour
+///
+/// @param {String | Colour} $colour - Name of colour from the colour palette
+///   (`$nhsuk-colours`)
+/// @return {Colour} Representation of named colour
+///
+/// @throw if `$colour` is not a colour from the colour palette
+
+@function nhsuk-colour($colour) {
+  @if meta.type-of($colour) == "color" {
+    $colour: string.quote("#{$colour}");
+  }
+
+  @if not map.has-key($nhsuk-colours, $colour) {
+    @error "Unknown colour `#{$colour}`";
+  }
+
+  @return map.get($nhsuk-colours, $colour);
+}
+
+/// Converts a colour with potential float values for its RGB channels
+/// into hexadecimal notation where possible (e.g. no alpha transparency)
+///
+/// This ensures the colour is rendered properly by Safari < 12
+///
+/// @param {String | Colour} $colour - The colour to convert or name from the colour palette
+/// @return {Colour}
+
+@function nhsuk-colour-compatible($colour) {
+  @if meta.type-of($colour) == "string" {
+    $colour: nhsuk-colour($colour);
+  }
+
+  $alpha: color.alpha($colour);
+  $parts: ();
+
+  // Maintain compatibility with Sass < v1.79.0 where colour space functions
+  // are unavailable and RGB channels are automatically rounded to integers
+  // https://github.com/sass/dart-sass/blob/1.79.0/CHANGELOG.md
+  @if not meta.function-exists("channel", "color") {
+    $parts: (
+      "red": color.red($colour),
+      "green": color.green($colour),
+      "blue": color.blue($colour),
+      "alpha": $alpha
+    );
+  } @else {
+    $colour: color.to-space($colour, rgb);
+    $alpha: color.channel($colour, "alpha");
+
+    $parts: (
+      "red": math.round(color.channel($colour, "red")),
+      "green": math.round(color.channel($colour, "green")),
+      "blue": math.round(color.channel($colour, "blue")),
+      "alpha": $alpha
+    );
+  }
+
+  @return color.change($colour, $parts...);
+}
+
+/// Make a colour darker by mixing it with black
+///
+/// @example scss
+///   nhsuk-shade(color, percentage);
+///   nhsuk-shade(nhsuk-colour("blue"), 50%);
+///
+/// @param {Colour} $colour - colour to shade
+/// @param {Number} $percentage - percentage of black to mix with $colour
+/// @return {Colour}
+
+@function nhsuk-shade($colour, $percentage) {
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return nhsuk-colour-compatible(color.mix(black, $colour, $percentage));
+}
+
+/// Make a colour lighter by mixing it with white
+///
+/// @example scss
+///   nhsuk-tint(color, percentage);
+///   nhsuk-tint(nhsuk-colour("blue"), 10%);
+///
+/// @param {Colour} $colour - colour to tint
+/// @param {Number} $percentage - percentage of white to mix with $colour
+/// @return {Colour}
+
+@function nhsuk-tint($colour, $percentage) {
+  // Ensure the output is a hex string so that Safari <12 can render the colour
+  // without issues from float values in `rgb()`
+  @return nhsuk-colour-compatible(color.mix(white, $colour, $percentage));
+}
+
+/*# sourceMappingURL=_colour.scss.map */

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

@@ -0,0 +1,7 @@
+////
+/// Helpers
+////
+
+@forward "colour";
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/objects/_button-group.scss

@@ -0,0 +1,124 @@
+@use "sass:math";
+@use "../settings" as *;
+@use "../tools" as *;
+
+@include nhsuk-exports("nhsuk/core/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
+  .nhsuk-button-group {
+    $horizontal-gap: nhsuk-spacing(4);
+    $horizontal-gap-small: nhsuk-spacing(3);
+    $vertical-gap: nhsuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);
+    $button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);
+    $button-padding-top-bottom-small: nhsuk-px-to-rem(6px);
+
+    // 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;
+
+    @include nhsuk-responsive-margin(5, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Give paragraphs and 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.
+    .nhsuk-body,
+    .nhsuk-body-m,
+    p,
+    > .nhsuk-link,
+    > a:not(.nhsuk-button) {
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $button-padding-top-bottom-mobile;
+      margin-bottom: calc($button-padding-top-bottom-mobile + $nhsuk-button-shadow-size + $vertical-gap);
+      text-align: center;
+      @include nhsuk-font(19, $line-height: 19px);
+    }
+
+    &--small .nhsuk-body,
+    &--small .nhsuk-body-m,
+    &--small p,
+    &--small > .nhsuk-link,
+    &--small > a:not(.nhsuk-button) {
+      margin-top: $button-padding-top-bottom-small;
+      margin-bottom: calc($button-padding-top-bottom-small + $nhsuk-button-shadow-size + $vertical-gap);
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    > .nhsuk-button {
+      margin-bottom: $nhsuk-button-shadow-size + $vertical-gap;
+    }
+
+    // Deduct vertical gap from margin when nested in form groups
+    .nhsuk-form-group &:last-child {
+      margin-bottom: nhsuk-spacing(-3);
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @include nhsuk-media-query($from: 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);
+
+      &--small {
+        margin-right: ($horizontal-gap-small * -1);
+      }
+
+      .nhsuk-body,
+      .nhsuk-body-m,
+      p,
+      > .nhsuk-link,
+      > a:not(.nhsuk-button) {
+        margin: $button-padding-top-bottom-desktop 0;
+        margin-right: $horizontal-gap;
+        line-height: nhsuk-line-height(24px, $font-size: 19px);
+        text-align: left;
+      }
+
+      &--small .nhsuk-body,
+      &--small .nhsuk-body-m,
+      &--small p,
+      &--small > .nhsuk-link,
+      &--small > a:not(.nhsuk-button) {
+        margin: $button-padding-top-bottom-small 0;
+        margin-right: $horizontal-gap-small;
+        @include nhsuk-font(16, $line-height: 19px);
+      }
+
+      > .nhsuk-button {
+        margin-right: $horizontal-gap;
+      }
+
+      > .nhsuk-button--small {
+        margin-right: $horizontal-gap-small;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_button-group.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/objects/_form-group.scss

@@ -0,0 +1,47 @@
+@use "../settings" as *;
+@use "../tools" as *;
+
+@include nhsuk-exports("nhsuk/core/objects/form-group") {
+  .nhsuk-form-group {
+    box-sizing: border-box;
+
+    @include nhsuk-clearfix;
+    @include nhsuk-responsive-margin(5, "bottom");
+
+    .nhsuk-form-group:last-child,
+    .nhsuk-form-group:last-of-type {
+      margin-bottom: 0; // Remove margin from last item in nested groups
+    }
+  }
+
+  .nhsuk-form-group--error {
+    padding-left: nhsuk-spacing(3);
+    border-left: $nhsuk-border-width-form-group-error solid $nhsuk-error-colour;
+
+    .nhsuk-form-group {
+      padding: 0;
+      // Reset error styles in nested form groups that might have error class
+      border: 0;
+    }
+  }
+
+  .nhsuk-form-group--inline {
+    @include nhsuk-media-query($from: tablet) {
+      display: flex;
+      flex-direction: row;
+
+      // Align the bottom of inputs
+      align-items: flex-end;
+
+      .nhsuk-form-group {
+        margin-bottom: 0; // Remove margin when nested groups are inline
+      }
+
+      .nhsuk-form-group + .nhsuk-form-group {
+        margin-left: nhsuk-spacing(3);
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_form-group.scss.map */

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

@@ -5,19 +5,21 @@
 ////
 /// Grid
 ///
-/// @group objects
+/// @group objects/layout
 ////
 
 @include nhsuk-exports("nhsuk/core/objects/grid") {
   .nhsuk-grid-row {
-    @include nhsuk-clearfix;
     margin-right: -($nhsuk-gutter-half);
     margin-left: -($nhsuk-gutter-half);
+    @include nhsuk-clearfix;
   }
 
   @each $width in map.keys($nhsuk-grid-widths) {
     .nhsuk-grid-column-#{$width} {
-      @include nhsuk-grid-column($width, $class: false);
+      @include nhsuk-grid-column($width);
     }
   }
 }
+
+/*# sourceMappingURL=_grid.scss.map */

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

@@ -2,7 +2,11 @@
 /// Objects
 ////
 
+@forward "button-group";
 @forward "form-group";
 @forward "grid";
+@forward "input-wrapper";
 @forward "main-wrapper";
 @forward "width-container";
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/objects/_input-wrapper.scss

@@ -0,0 +1,81 @@
+@use "../settings" as *;
+@use "../tools" as *;
+
+@include nhsuk-exports("nhsuk/core/objects/input-wrapper") {
+  .nhsuk-input-wrapper,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-input__wrapper {
+    display: flex;
+
+    .nhsuk-input {
+      flex: 0 1 auto;
+    }
+
+    .nhsuk-input:focus {
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
+    }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include nhsuk-media-query($until: mobile) {
+      display: block;
+
+      .nhsuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
+  }
+
+  .nhsuk-input-wrapper {
+    .nhsuk-input,
+    .nhsuk-select,
+    .nhsuk-button {
+      margin-top: nhsuk-spacing(2);
+
+      // Remove margin when first or not following other inputs
+      &:first-child,
+      &:only-child {
+        margin-top: 0;
+      }
+    }
+
+    // Remove margin from button when last, but reserve space for button shadow
+    .nhsuk-button:last-child {
+      margin-bottom: $nhsuk-button-shadow-size;
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      flex-direction: row;
+
+      // The default of `stretch` makes small buttons appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+
+      .nhsuk-input,
+      .nhsuk-select,
+      .nhsuk-button {
+        margin-top: 0;
+        margin-left: nhsuk-spacing(2);
+
+        &:first-child,
+        &:only-child {
+          margin-left: 0;
+        }
+      }
+
+      .nhsuk-button {
+        flex-shrink: 0;
+
+        // Buttons are normally 100% wide on mobile, but we don't want that here
+        width: auto;
+
+        // Move spacing from top to left but reserve space for button shadow
+        margin-bottom: $nhsuk-button-shadow-size;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_input-wrapper.scss.map */