design_system 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 595e6566bee790e2e58689975b8d3a04fca3d7c82dae7a7cdc7c83a2d4af994f
-  data.tar.gz: fbe54327bb743981ed087ae04a70961ca3ef5251830a63f6a68770916976640e
+  metadata.gz: 682961e5ace6d1fb7a0e9efbd5f5bf9d588eb4858f7ec7013db2188771d25de8
+  data.tar.gz: 9ea72be49b3b50294ef562c7254e94b2b29f908e4f064700106bd22231033be0
 SHA512:
-  metadata.gz: 33641e32c8413442ac88b5efc2d08564de2f0aa5696f0a4ae6b7ff37a72f6219c1387a0bcd9c11f28440b76ca7574e5280c5e2e69c45870f0ba10f77da956bea
-  data.tar.gz: fa37c40c5bf864018d67bc3c721188dab80e046bc92f20905ee4615a16099232b3bb592afba5192622302c54c58ef413b9e03026905a63563479ebac53bacdc3
+  metadata.gz: 4a65a069154023e6768451a889247e824a2dd6a5842d8a219ce4f76e1575b567f369395c0652ea3468bb2a428ab9d29bc95c5894755eadbc9ef2aeafd5f23fc6
+  data.tar.gz: fefa5477b56eaf6dddd30c22697bfbb506842e008c4f8650aa33a5f93b29470a1b576636b22fd06b6c97e0bd68bc44bb225536e7c309fd064c85010db13ccd04

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

@@ -2,37 +2,53 @@
 /// Components
 ////
 
-@forward "action-link";
-@forward "back-link";
-@forward "breadcrumb";
+// Form elements
 @forward "button";
-@forward "card";
-@forward "contents-list";
-@forward "date-input";
-@forward "details";
-@forward "do-dont-list";
 @forward "error-message";
 @forward "error-summary";
 @forward "fieldset";
-@forward "footer";
-@forward "header";
-@forward "hero";
 @forward "hint";
-@forward "images";
-@forward "input";
-@forward "inset-text";
 @forward "label";
-@forward "pagination";
-@forward "panel";
+
+// Form components
 @forward "checkboxes";
+@forward "input";
 @forward "radios";
 @forward "select";
-@forward "skip-link";
+@forward "textarea";
+
+// Form components (composite)
+@forward "character-count";
+@forward "date-input";
+@forward "file-upload";
+@forward "password-input";
+
+// Content presentation
+@forward "details";
+@forward "do-dont-list";
+@forward "hero";
+@forward "images";
+@forward "inset-text";
+@forward "notification-banner";
+@forward "panel";
 @forward "summary-list";
 @forward "tables";
+@forward "tabs";
 @forward "tag";
 @forward "task-list";
-@forward "textarea";
 @forward "warning-callout";
-@forward "character-count";
-@forward "tabs";
+
+// Navigation
+@forward "action-link";
+@forward "back-link";
+@forward "contents-list";
+@forward "footer";
+@forward "pagination";
+@forward "skip-link";
+
+// Navigation (composite)
+@forward "breadcrumb";
+@forward "card";
+@forward "header";
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/action-link/_action-link.scss

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

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/action-link/_index.scss

@@ -0,0 +1,84 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/styles/icons";
+
+////
+/// Action link component
+///
+/// 1. Display inline-block so top and bottom margins are respected.
+/// 2. Add sufficient space between icon and text.
+/// 3. Position is relative so the arrow icon can display absolute.
+/// 4. Text decoration none used to override default <a> styling.
+///
+/// @group components/action-link
+////
+
+@include nhsuk-exports("nhsuk/components/action-link") {
+  $_small-icon-size: nhsuk-px-to-rem($nhsuk-icon-size);
+  $_small-icon-spacing: math.div($_small-icon-size, 10);
+
+  $_large-icon-size: nhsuk-px-to-rem(36px);
+  $_large-icon-spacing: math.div($_large-icon-size, 10);
+
+  .nhsuk-action-link {
+    box-sizing: border-box;
+    display: inline-block; // [1]
+    position: relative; // [3]
+    padding-left: $_small-icon-size + $_small-icon-spacing; // [2]
+    text-decoration: none; // [4]
+
+    &:not(:focus):hover {
+      .nhsuk-action-link__text {
+        text-decoration: underline; // [5]
+      }
+    }
+
+    @include nhsuk-font(22, $weight: bold, $line-height: $_small-icon-size);
+
+    @include nhsuk-print-colour {
+      @include nhsuk-link-style-text($nhsuk-print-text-colour);
+    }
+
+    @include nhsuk-responsive-margin(6, "bottom");
+
+    @include nhsuk-media-query($from: tablet) {
+      padding-left: $_large-icon-size + $_large-icon-spacing; // [2]
+      line-height: nhsuk-line-height($_large-icon-size, $font-size: 22px);
+    }
+
+    .nhsuk-icon {
+      position: absolute;
+      left: -$_small-icon-spacing;
+      // stylelint-disable-next-line declaration-no-important
+      fill: nhsuk-colour("green") !important;
+
+      @include nhsuk-media-query($from: tablet) {
+        left: -$_large-icon-spacing;
+        width: $_large-icon-size;
+        height: $_large-icon-size;
+      }
+    }
+
+    &:focus .nhsuk-icon {
+      // stylelint-disable-next-line declaration-no-important
+      fill: $nhsuk-focus-text-colour !important;
+    }
+  }
+
+  .nhsuk-action-link--reverse {
+    @include nhsuk-link-style-white;
+
+    &:link {
+      text-decoration: none; // [4]
+    }
+
+    &:not(:focus) .nhsuk-icon {
+      // stylelint-disable-next-line declaration-no-important
+      fill: $nhsuk-reverse-text-colour !important;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/back-link/_back-link.scss

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

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/back-link/_index.scss

@@ -0,0 +1,56 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Back link component
+///
+/// 1. Allow space for the chevron.
+/// 2. Hide back link on print stylesheets.
+///
+/// @group components/back-link
+////
+
+@include nhsuk-exports("nhsuk/components/back-link") {
+  $_font-size: 16;
+
+  .nhsuk-back-link {
+    box-sizing: border-box;
+    display: inline-block;
+
+    position: relative;
+
+    padding: 0;
+    padding-left: nhsuk-em($_font-size, $_font-size);
+
+    border: 0;
+
+    background: none;
+
+    cursor: pointer;
+
+    @include nhsuk-font($_font-size);
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+    @include nhsuk-responsive-margin(4, "top");
+    @include nhsuk-print-hide; // [2]
+
+    &::before {
+      content: "";
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
+
+      @include nhsuk-shape-chevron(left, $colour: currentcolor, $font-size: 19);
+    }
+  }
+
+  .nhsuk-back-link--reverse {
+    @include nhsuk-link-style-white;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,103 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../back-link";
+
+////
+/// Breadcrumb component
+///
+/// 1. Hide the breadcrumb on print stylesheets.
+/// 2. Don't show the full breadcrumb below tablet size.
+/// 3. Center chevron between breadcrumb items.
+///
+/// @group components/breadcrumb
+////
+
+@include nhsuk-exports("nhsuk/components/breadcrumb") {
+  $_font-size: 16;
+  $_chevron-colour: $nhsuk-secondary-text-colour;
+  $_chevron-size: nhsuk-em(nhsuk-chevron-size(), $_font-size);
+
+  .nhsuk-breadcrumb {
+    box-sizing: border-box;
+    display: inline-block;
+    color: $nhsuk-text-colour;
+
+    @include nhsuk-responsive-margin(4, "top");
+    @include nhsuk-print-hide; // [1]
+
+    .nhsuk-back-link {
+      margin: 0;
+
+      @include nhsuk-media-query($from: tablet) {
+        display: none; // [2]
+      }
+    }
+  }
+
+  .nhsuk-breadcrumb__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    @include nhsuk-clearfix;
+    @include nhsuk-font($_font-size);
+
+    @include nhsuk-media-query($until: tablet) {
+      display: none; // [2]
+    }
+  }
+
+  .nhsuk-breadcrumb__list-item {
+    position: relative;
+    margin-bottom: 0;
+    margin-left: nhsuk-em(nhsuk-spacing(3), $_font-size); // [3]
+    padding-left: nhsuk-em(nhsuk-spacing(3), $_font-size) + $_chevron-size; // [3]
+    float: left;
+
+    &::before {
+      content: "";
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
+
+      @include nhsuk-shape-chevron(right, $_chevron-colour);
+    }
+
+    // Hide chevron before first breadcrumb item
+    &:first-child {
+      margin-left: 0;
+      padding-left: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .nhsuk-breadcrumb__link {
+    display: inline-block;
+
+    @include nhsuk-font($_font-size);
+    @include nhsuk-link-style-no-visited-state;
+  }
+
+  .nhsuk-breadcrumb--reverse {
+    color: $nhsuk-reverse-text-colour;
+
+    .nhsuk-breadcrumb__link,
+    .nhsuk-back-link {
+      @include nhsuk-link-style-white;
+    }
+
+    .nhsuk-breadcrumb__list-item::before {
+      color: rgba($nhsuk-reverse-text-colour, 0.6);
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,207 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Button component
+///
+/// 1. Ensure that any global link styles are overridden.
+/// 2. Fix unwanted button padding in Firefox.
+/// 3. Use a pseudo element to expand the click target area to include the
+///    button's shadow as well, in case users try to click it.
+/// 4. Use a pseudo element to expand and cover the button's bounds, used to
+///    add a button shadow or border without affecting the total height
+/// 5. Adjust margin and padding to accommodate button shadow
+///
+/// @group components/button
+////
+
+$nhsuk-button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);
+$nhsuk-button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);
+$nhsuk-button-padding-top-bottom-small: nhsuk-px-to-rem(6px);
+$nhsuk-button-padding-left-right: nhsuk-px-to-rem(16px);
+$nhsuk-button-padding-left-right-small: nhsuk-px-to-rem(12px);
+
+// @deprecated To be removed in v11.0
+$button-border-radius: $nhsuk-button-border-radius;
+$button-padding-top-bottom-mobile: $nhsuk-button-padding-top-bottom-mobile;
+$button-padding-top-bottom-desktop: $nhsuk-button-padding-top-bottom-desktop;
+$button-padding-left-right: $nhsuk-button-padding-left-right;
+$button-shadow-size: $nhsuk-button-shadow-size;
+
+@include nhsuk-exports("nhsuk/components/button") {
+  .nhsuk-button {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    position: relative;
+
+    width: 100%;
+    min-height: nhsuk-px-to-rem(44px);
+    margin-top: 0;
+    padding: $nhsuk-button-padding-top-bottom-mobile $nhsuk-button-padding-left-right; // [5]
+
+    overflow: visible;
+
+    border: $nhsuk-border-width-form-element solid transparent;
+    border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);
+
+    text-align: center;
+    vertical-align: top;
+
+    cursor: pointer;
+
+    -webkit-appearance: none;
+
+            appearance: none;
+
+    @include nhsuk-button-style;
+    @include nhsuk-font(19, $line-height: 19px, $weight: bold);
+    @include nhsuk-responsive-margin(5, "bottom", $adjustment: $nhsuk-button-shadow-size); // [5]
+
+    @include nhsuk-media-query($from: tablet) {
+      width: auto;
+      min-height: nhsuk-px-to-rem(56px);
+      padding: $nhsuk-button-padding-top-bottom-desktop $nhsuk-button-padding-left-right; // [5]
+      line-height: nhsuk-line-height(24px, $font-size: 19px);
+    }
+
+    // [1]
+    &,
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+
+    // [2]
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    // Reset focus styles added to buttons as links
+    &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
+    // Add button focus styles ensuring the active "pressed" state has priority
+    &:focus:not(:active),
+    &:focus:not(:active):hover {
+      @include nhsuk-focused-button;
+    }
+
+    // Remove button shadow when pressed
+    &:active,
+    &:active:focus {
+      top: $nhsuk-button-shadow-size;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      pointer-events: none;
+      opacity: (0.5);
+    }
+
+    // Default pseudo element styles for [3] and [4]
+    &::before,
+    &::after {
+      content: "";
+
+      display: block;
+
+      position: absolute;
+      top: -$nhsuk-border-width-form-element;
+      right: -$nhsuk-border-width-form-element;
+      bottom: -$nhsuk-border-width-form-element;
+      left: -$nhsuk-border-width-form-element;
+
+      border-radius: nhsuk-px-to-rem($nhsuk-button-border-radius);
+    }
+
+    // Use a pseudo element to expand the click target area to include the
+    // button's shadow as well, in case users try to click it [3]
+    &::before {
+      bottom: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);
+      border: $nhsuk-border-width-form-element solid transparent;
+      background-color: transparent;
+    }
+
+    // When the button is active it is shifted down by $nhsuk-button-shadow-size to
+    // denote a 'pressed' state. If the user happened to click at the very top
+    // of the button, their mouse is no longer over the button (because it has
+    // 'moved beneath them') and so the click event is not fired.
+    //
+    // This corrects that by shifting the top of the pseudo element so that it
+    // continues to cover the area that the user originally clicked, which means
+    // the click event is still fired.
+    &:active::before {
+      top: -($nhsuk-border-width-form-element + $nhsuk-button-shadow-size);
+      bottom: -$nhsuk-border-width-form-element;
+    }
+  }
+
+  // Button variations
+
+  .nhsuk-button--secondary,
+  .nhsuk-button--secondary-solid {
+    @include nhsuk-button-style(
+      $button-colour: $nhsuk-secondary-button-colour,
+      $button-border-colour: $nhsuk-secondary-button-border-colour,
+      $button-hover-colour: $nhsuk-secondary-button-hover-colour,
+      $button-active-colour: $nhsuk-secondary-button-active-colour,
+      $button-text-colour: $nhsuk-secondary-button-text-colour,
+      $button-shadow-colour: $nhsuk-secondary-button-shadow-colour
+    );
+  }
+
+  .nhsuk-button--secondary-solid {
+    background-color: $nhsuk-secondary-button-solid-background-colour;
+  }
+
+  .nhsuk-button--reverse {
+    @include nhsuk-button-style(
+      $button-colour: $nhsuk-reverse-button-colour,
+      $button-hover-colour: $nhsuk-reverse-button-hover-colour,
+      $button-active-colour: $nhsuk-reverse-button-active-colour,
+      $button-text-colour: $nhsuk-reverse-button-text-colour,
+      $button-shadow-colour: $nhsuk-reverse-button-shadow-colour
+    );
+  }
+
+  .nhsuk-button--warning {
+    @include nhsuk-button-style(
+      $button-colour: $nhsuk-warning-button-colour,
+      $button-hover-colour: $nhsuk-warning-button-hover-colour,
+      $button-active-colour: $nhsuk-warning-button-active-colour,
+      $button-shadow-colour: $nhsuk-warning-button-shadow-colour
+    );
+  }
+
+  .nhsuk-button--login {
+    @include nhsuk-button-style(
+      $button-colour: $nhsuk-login-button-colour,
+      $button-hover-colour: $nhsuk-login-button-hover-colour,
+      $button-active-colour: $nhsuk-login-button-active-colour,
+      $button-shadow-colour: $nhsuk-login-button-shadow-colour
+    );
+  }
+
+  // =========================================================
+  // Small buttons
+  // =========================================================
+
+  .nhsuk-button--small {
+    min-height: nhsuk-px-to-rem(36px);
+    padding: $nhsuk-button-padding-top-bottom-small $nhsuk-button-padding-left-right-small; // [5]
+
+    @include nhsuk-responsive-margin(4, "bottom", $adjustment: $nhsuk-button-shadow-size); // [5]
+
+    @include nhsuk-media-query($from: tablet) {
+      @include nhsuk-font(16, $line-height: 19px, $weight: bold);
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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