design_system 0.10.0 → 0.12.0

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

@@ -0,0 +1,354 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@forward "../error-message";
+@forward "../fieldset";
+@forward "../hint";
+@forward "../label";
+
+////
+/// Radios component
+///
+/// @group components/radios
+////
+
+$nhsuk-radios-size: nhsuk-px-to-rem(nhsuk-spacing(6));
+$nhsuk-radios-small-size: nhsuk-px-to-rem(nhsuk-spacing(4));
+
+$nhsuk-radios-label-padding-left-right: nhsuk-px-to-rem(12px);
+
+// When the default focus width is used on a curved edge it looks visually
+// smaller. So for the circular radios we bump the default to make it look
+// visually consistent.
+$nhsuk-radios-focus-width: nhsuk-px-to-rem($nhsuk-focus-width + 1px);
+
+// Offset 2px due to 40px form control with 44px clickable area
+// https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/
+$nhsuk-radios-offset: $nhsuk-border-width-form-element;
+
+@include nhsuk-exports("nhsuk/components/radios") {
+  $nhsuk-touch-target-gutter: nhsuk-px-to-rem(4px);
+  $nhsuk-touch-target-size: $nhsuk-radios-size + $nhsuk-touch-target-gutter;
+
+  .nhsuk-radios {
+    margin: -$nhsuk-radios-offset;
+    margin-right: 0;
+  }
+
+  .nhsuk-radios__item {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    margin-top: nhsuk-spacing(2) - $nhsuk-radios-offset;
+
+    .nhsuk-radios__conditional:not(.nhsuk-radios__conditional--hidden) + & {
+      @include nhsuk-responsive-margin(4, "top", $adjustment: - $nhsuk-radios-offset);
+    }
+  }
+
+  .nhsuk-radios__item:first-child {
+    margin-top: 0;
+  }
+
+  .nhsuk-radios__input {
+    // Allow the input to sit above the label, enabling its proper detection
+    // when exploring by touch or using automation tools like Selenium
+    z-index: 1;
+
+    width: $nhsuk-touch-target-size;
+    height: $nhsuk-touch-target-size;
+    margin: 0;
+
+    opacity: 0;
+
+    cursor: pointer;
+  }
+
+  .nhsuk-radios__label {
+    box-sizing: border-box;
+
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input. This prevents the label from wrapping due to
+    // __item using flex-wrap because we want hints on a separate line
+    max-width: calc(100% - $nhsuk-touch-target-size);
+    margin-bottom: 0;
+    padding: (nhsuk-spacing(1) + $nhsuk-border-width-form-element) $nhsuk-radios-label-padding-left-right;
+
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+  }
+
+  // ( ) Radio ring
+  .nhsuk-radios__label::before {
+    content: "";
+
+    box-sizing: border-box;
+
+    position: absolute;
+    top: math.div($nhsuk-touch-target-gutter, 2);
+    left: math.div($nhsuk-touch-target-gutter, 2);
+
+    width: $nhsuk-radios-size;
+    height: $nhsuk-radios-size;
+
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+    border-radius: 50%;
+
+    background: $nhsuk-input-background-colour;
+  }
+
+  //  •  Radio button
+  //
+  // We create the 'button' entirely out of 'border' so that they remain
+  // 'filled' even when colours are overridden in the browser.
+  .nhsuk-radios__label::after {
+    $radio-button-size: nhsuk-px-to-rem(10px);
+
+    content: "";
+
+    position: absolute;
+
+    // Positioned by getting half the touch target, so we have the centre of the
+    // input, and then moving back by the button's border width, thus positioning
+    // the centre of the button in the centre of the input.
+    top: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;
+    left: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;
+
+    width: 0;
+    height: 0;
+
+    border: $radio-button-size solid currentcolor;
+    border-radius: 50%;
+
+    opacity: 0;
+
+    background: currentcolor;
+  }
+
+  .nhsuk-radios__hint {
+    display: block;
+    width: 100%;
+    margin-top: nhsuk-spacing(-1);
+    padding-right: $nhsuk-radios-label-padding-left-right;
+    padding-left: ($nhsuk-radios-label-padding-left-right + $nhsuk-touch-target-size);
+  }
+
+  // This is to bypass nhsuk-hint's specificity on hints following labels having
+  // a margin bottom of 8px (nhsuk-spacing(2)). Because radios are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-radios__hint {
+    margin-bottom: 0;
+  }
+
+  // Focused state
+  .nhsuk-radios__input:focus + .nhsuk-radios__label::before {
+    @include nhsuk-focused-radio($nhsuk-radios-focus-width);
+  }
+
+  // Selected state
+  .nhsuk-radios__input:checked + .nhsuk-radios__label::after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .nhsuk-radios__input:disabled,
+  .nhsuk-radios__input:disabled + .nhsuk-radios__label {
+    cursor: not-allowed;
+  }
+
+  .nhsuk-radios__input:disabled + .nhsuk-radios__label,
+  .nhsuk-radios__input:disabled ~ .nhsuk-hint {
+    opacity: 0.5;
+  }
+
+  // =========================================================
+  // Inline radios
+  // =========================================================
+
+  .nhsuk-radios--inline {
+    @include nhsuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .nhsuk-radios__item {
+        margin-top: 0;
+        margin-right: nhsuk-spacing(4);
+      }
+    }
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .nhsuk-radios__divider {
+    $nhsuk-divider-size: $nhsuk-radios-size !default;
+    width: $nhsuk-divider-size;
+    margin-top: nhsuk-spacing(2) - $nhsuk-radios-offset;
+    padding: 0 $nhsuk-radios-offset;
+    text-align: center;
+    @include nhsuk-text-colour;
+    @include nhsuk-font($size: 19);
+  }
+
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
+  // Calculate the amount of padding needed to keep the border centered against
+  // the radios.
+  $conditional-border-padding: math.div($nhsuk-touch-target-size, 2) - nhsuk-px-to-rem($nhsuk-border-width-form-element);
+  // Move the border centered with the radios
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $nhsuk-radios-label-padding-left-right;
+
+  .nhsuk-radios__conditional {
+    margin-top: nhsuk-spacing(2) - $nhsuk-radios-offset;
+    margin-bottom: $nhsuk-radios-offset;
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $nhsuk-border-width solid $nhsuk-input-border-colour;
+
+    .nhsuk-frontend-supported &--hidden {
+      display: none;
+    }
+  }
+
+  // =========================================================
+  // Small radios
+  // =========================================================
+
+  .nhsuk-radios--small {
+    $input-offset: math.div($nhsuk-touch-target-size - $nhsuk-radios-small-size, 2);
+
+    .nhsuk-radios__item {
+      margin-top: 0;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆Which colour is your favourite?
+    //  ┌┆───┐
+    //  │┆() │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Radio pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .nhsuk-radios__input {
+      margin-left: $input-offset * -1;
+    }
+
+    .nhsuk-radios__label {
+      // Create a tiny space between the small radio hover state so that it
+      // doesn't clash with the label
+      padding-left: 1px;
+    }
+
+    // ( ) Radio ring
+    //
+    // Reduce the size of the control [1], vertically centering it within the
+    // touch target [2]
+    // Left here is 0 because we've shifted the input into the left margin
+    .nhsuk-radios__label::before {
+      top: $input-offset; // 2
+      left: 0;
+      width: $nhsuk-radios-small-size; // 1
+      height: $nhsuk-radios-small-size; // 1
+    }
+
+    //  •  Radio button
+    //
+    // Reduce the size of the 'button' and center it within the ring
+    .nhsuk-radios__label::after {
+      $radio-button-size: nhsuk-px-to-rem(5px);
+
+      // The same calculation as normal radio buttons but reduce the border width
+      top: math.div($nhsuk-touch-target-size, 2) - $radio-button-size;
+      left: (math.div($nhsuk-touch-target-size, 2) - $radio-button-size) - $input-offset;
+      border-width: $radio-button-size;
+    }
+
+    // Fix position of hint with small radios
+    //
+    // Do not use hints with small radios – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .nhsuk-radios__hint {
+      padding-left: ($nhsuk-radios-small-size + $input-offset);
+    }
+
+    // Align conditional reveals with small radios
+    .nhsuk-radios__conditional {
+      $margin-left: math.div($nhsuk-radios-small-size, 2) - nhsuk-px-to-rem($nhsuk-border-width-form-element);
+      margin-left: $margin-left;
+      padding-left: ($nhsuk-touch-target-size - $input-offset) - ($margin-left + nhsuk-px-to-rem($nhsuk-border-width));
+    }
+
+    .nhsuk-radios__divider {
+      width: $nhsuk-radios-small-size;
+      margin: nhsuk-spacing(1) - $nhsuk-radios-offset 0;
+      padding: 0;
+    }
+
+    // Hover state for small radios.
+    //
+    // We use a hover state for small radios because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which radio they will select when their
+    // cursor is outside of the visible area.
+    .nhsuk-radios__input:not(:disabled):hover + .nhsuk-radios__label::before,
+    .nhsuk-radios__input:not(:disabled) + .nhsuk-radios__label:hover::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $nhsuk-radios-focus-width dashed transparent;
+      outline-offset: 1px;
+      box-shadow: 0 0 0 $nhsuk-hover-width $nhsuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .nhsuk-radios__input:focus:hover + .nhsuk-radios__label::before,
+    .nhsuk-radios__input:focus + .nhsuk-radios__label:hover::before {
+      // prettier-ignore
+      box-shadow:
+        0 0 0 $nhsuk-radios-focus-width $nhsuk-focus-colour, // 1
+        0 0 0 $nhsuk-hover-width $nhsuk-hover-colour; // 2
+
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .nhsuk-radios__input:not(:disabled):hover + .nhsuk-radios__label::before,
+      .nhsuk-radios__input:not(:disabled) + .nhsuk-radios__label:hover::before {
+        box-shadow: initial;
+      }
+
+      .nhsuk-radios__input:focus:hover + .nhsuk-radios__label::before,
+      .nhsuk-radios__input:focus + .nhsuk-radios__label:hover::before {
+        box-shadow: 0 0 0 $nhsuk-radios-focus-width $nhsuk-focus-colour;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,63 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/objects/input-wrapper";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
+
+////
+/// Select component
+///
+/// @group components/select
+////
+
+@include nhsuk-exports("nhsuk/components/select") {
+  .nhsuk-select {
+    box-sizing: border-box;
+
+    min-width: 100%;
+    max-width: 100%;
+    height: nhsuk-px-to-rem(40px);
+    padding: nhsuk-px-to-rem(nhsuk-spacing(1));
+
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (https://github.com/alphagov/govuk-frontend/issues/2435)
+    color: $nhsuk-text-colour;
+    background-color: $nhsuk-input-background-colour;
+
+    @include nhsuk-font($size: 19, $line-height: 1.25);
+
+    &:focus {
+      @include nhsuk-focused-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      // This min-width was chosen because:
+      // - it makes the Select wider than it is tall (which is what users expect)
+      // - 20ex + 3ex matches the 'length-10' variant of the input component
+      min-width: 20ex + 3ex;
+    }
+  }
+
+  .nhsuk-select option:active,
+  .nhsuk-select option:checked,
+  .nhsuk-select:focus::-ms-value {
+    color: $nhsuk-reverse-text-colour;
+    background-color: nhsuk-colour("blue");
+  }
+
+  .nhsuk-select--error {
+    border-color: $nhsuk-error-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,48 @@
+@use "sass:string";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Skip link component
+///
+/// 1. Hide until the skip link gains focus from keyboard tabbing.
+///
+/// @group components/skip-link
+////
+
+@include nhsuk-exports("nhsuk/components/skip-link") {
+  .nhsuk-skip-link {
+    position: absolute;
+    z-index: 2;
+    top: nhsuk-spacing(3);
+    left: nhsuk-spacing(3);
+    padding: nhsuk-px-to-rem(nhsuk-spacing(2));
+    @include nhsuk-visually-hidden-focusable; // [1]
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (left: string.unquote("max(calc(0px))")) {
+      $safe-area-left: calc(#{nhsuk-spacing(3)} + env(safe-area-inset-left));
+
+      // Use max() to pick largest offset, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      left: string.unquote("max(#{nhsuk-spacing(3)}, #{$safe-area-left})");
+    }
+  }
+
+  .nhsuk-skip-link-focused-element {
+    &:focus {
+      // Remove the native visible focus indicator when the element is
+      // programmatically focused.
+      //
+      // We set the focus on the linked element (this is usually the <main>
+      // element) when the skip link is activated to improve screen reader
+      // announcements. However, we remove the visible focus indicator from the
+      // linked element because the user cannot interact with it.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/skip-link/_skip-link.scss

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

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

@@ -0,0 +1,215 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Summary list component
+///
+/// @group components/summary-list
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+////
+
+@include nhsuk-exports("nhsuk/components/summary-list") {
+  .nhsuk-summary-list {
+    margin: 0; // Reset default user agent styles
+
+    @include nhsuk-font($size: 19);
+    @include nhsuk-responsive-margin(6, "bottom");
+
+    @include nhsuk-media-query($from: tablet) {
+      display: table;
+      width: 100%;
+      table-layout: fixed; // Required to allow us to wrap words that overflow.
+      border-collapse: collapse;
+    }
+  }
+
+  .nhsuk-summary-list__row {
+    border-bottom: 1px solid $nhsuk-border-colour;
+
+    @include nhsuk-media-query($until: tablet) {
+      margin-bottom: nhsuk-spacing(3);
+    }
+
+    @include nhsuk-media-query($from: tablet) {
+      display: table-row;
+    }
+  }
+
+  // Remove right padding from the last column in the row
+  .nhsuk-summary-list__row:not(.nhsuk-summary-list__row--no-actions) > :last-child {
+    padding-right: 0;
+  }
+
+  // Provide an empty 'cell' for rows that don't have actions – otherwise the
+  // bottom border is not drawn for that part of the row in some browsers.
+  .nhsuk-summary-list__row--no-actions {
+    @include nhsuk-media-query($from: tablet) {
+      &::after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
+  }
+
+  .nhsuk-summary-list__key,
+  .nhsuk-summary-list__value,
+  .nhsuk-summary-list__actions {
+    margin: 0; // Reset default user agent styles
+
+    @include nhsuk-media-query($from: tablet) {
+      display: table-cell;
+      padding-top: nhsuk-spacing(2);
+      padding-right: nhsuk-spacing(4);
+      padding-bottom: nhsuk-spacing(2);
+    }
+  }
+
+  .nhsuk-summary-list__actions {
+    margin-top: nhsuk-spacing(-1);
+    margin-bottom: nhsuk-spacing(3);
+
+    @include nhsuk-media-query($from: tablet) {
+      width: 20%;
+      text-align: right;
+    }
+  }
+
+  .nhsuk-summary-list__key,
+  .nhsuk-summary-list__value {
+    // Automatic wrapping for unbreakable text (e.g. URLs)
+    @include nhsuk-text-break-word;
+  }
+
+  .nhsuk-summary-list__key {
+    margin-bottom: nhsuk-spacing(1);
+    @include nhsuk-typography-weight-bold;
+
+    @include nhsuk-media-query($from: tablet) {
+      width: 30%;
+    }
+  }
+
+  .nhsuk-summary-list__value {
+    @include nhsuk-media-query($until: tablet) {
+      margin-bottom: nhsuk-spacing(3);
+    }
+  }
+
+  .nhsuk-summary-list__value > p {
+    margin-bottom: nhsuk-spacing(2);
+  }
+
+  .nhsuk-summary-list__value > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nhsuk-summary-list__actions-list {
+    display: flex;
+
+    flex-wrap: wrap;
+    row-gap: 10px;
+
+    width: 100%;
+    margin: 0; // Reset default user agent styles
+    padding: 0; // Reset default user agent styles
+
+    list-style: none;
+
+    @include nhsuk-media-query($from: tablet) {
+      justify-content: right;
+      text-align: right;
+    }
+  }
+
+  .nhsuk-summary-list__actions-list-item {
+    display: inline-block;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    .nhsuk-summary-list__actions-list-item {
+      margin-right: nhsuk-spacing(2);
+      padding-right: nhsuk-spacing(2);
+      border-right: 1px solid $nhsuk-border-colour;
+    }
+
+    .nhsuk-summary-list__actions-list-item:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    .nhsuk-summary-list__actions-list-item {
+      margin-bottom: 0;
+      margin-left: nhsuk-spacing(2);
+      padding-left: nhsuk-spacing(2);
+    }
+
+    .nhsuk-summary-list__actions-list-item:not(:first-child) {
+      border-left: 1px solid $nhsuk-border-colour;
+    }
+
+    .nhsuk-summary-list__actions-list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
+  }
+
+  // Large groups of action links may wrap onto multiple lines. Because the link
+  // focus styles are applied outside of the link's bounding box, there are
+  // situations where the focus style on a link can be overlapped by subsequent
+  // links. We don't want this, so let's create a new stacking context on focus
+  // so the link always appears to be 'on top'.
+  .nhsuk-summary-list__actions-list-item .nhsuk-link:focus {
+    isolation: isolate;
+  }
+
+  // No border on entire summary list
+  .nhsuk-summary-list--no-border {
+    .nhsuk-summary-list__row {
+      border: 0;
+    }
+
+    // Increase padding by 1px to compensate for 'missing' border
+    @include nhsuk-media-query($from: tablet) {
+      .nhsuk-summary-list__key,
+      .nhsuk-summary-list__value,
+      .nhsuk-summary-list__actions {
+        padding-bottom: nhsuk-spacing(2) + 1px;
+      }
+    }
+  }
+
+  // No border on specific rows
+  .nhsuk-summary-list__row--no-border {
+    border: 0;
+
+    // Increase padding by 1px to compensate for 'missing' border
+    @include nhsuk-media-query($from: tablet) {
+      .nhsuk-summary-list__key,
+      .nhsuk-summary-list__value,
+      .nhsuk-summary-list__actions {
+        padding-bottom: nhsuk-spacing(2) + 1px;
+      }
+    }
+  }
+
+  .nhsuk-card__content {
+    .nhsuk-summary-list:last-child .nhsuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .nhsuk-summary-list--no-border:last-child .nhsuk-summary-list__row:last-of-type > :last-child,
+    .nhsuk-summary-list:last-child .nhsuk-summary-list__row--no-border:last-of-type > :last-child {
+      @include nhsuk-media-query($until: tablet) {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/summary-list/_summary-list.scss

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