design_system 0.7.0

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/phase-banner/_index.scss

@@ -0,0 +1,34 @@
+@import "../tag/index";
+
+@include govuk-exports("govuk/component/phase-banner") {
+  .govuk-phase-banner {
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-phase-banner__content {
+    @include govuk-font($size: 16);
+    @include govuk-text-colour;
+
+    display: table;
+    margin: 0;
+  }
+
+  .govuk-phase-banner__content__tag {
+    @include govuk-font-size($size: 16);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
+
+    @if $govuk-new-typography-scale {
+      @include govuk-media-query($from: tablet) {
+        margin-right: govuk-spacing(2);
+      }
+    }
+  }
+
+  .govuk-phase-banner__text {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/phase-banner/_phase-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/radios/_index.scss

@@ -0,0 +1,326 @@
+@import "../error-message/index";
+@import "../fieldset/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/radios") {
+  $govuk-touch-target-gutter: 4px;
+  $govuk-radios-size: 40px;
+  $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
+  $govuk-small-radios-size: 24px;
+  $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // 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.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+  .govuk-radios__item {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-radios__item:last-child,
+  .govuk-radios__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-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: $govuk-touch-target-size;
+    height: $govuk-touch-target-size;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .govuk-radios__label {
+    align-self: center;
+
+    // Ensure that the width of the label is never more than the width of the
+    // container minus the input width minus the padding on either side of
+    // the label. This prevents the label from going onto the next line due to
+    // __item using flex-wrap because we want hints on a separate line
+    max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});
+    margin-bottom: 0;
+    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+  }
+
+  // ( ) Radio ring
+  .govuk-radios__label::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: ($govuk-touch-target-gutter / 2);
+    left: ($govuk-touch-target-gutter / 2);
+    width: $govuk-radios-size;
+    height: $govuk-radios-size;
+    border: $govuk-border-width-form-element solid currentcolor;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  //  •  Radio button
+  //
+  // We create the 'button' entirely out of 'border' so that they remain
+  // 'filled' even when colours are overridden in the browser.
+  .govuk-radios__label::after {
+    $radio-button-size: govuk-spacing(2);
+
+    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: (($govuk-touch-target-size / 2) - $radio-button-size);
+    left: (($govuk-touch-target-size / 2) - $radio-button-size);
+    width: 0;
+    height: 0;
+    border: $radio-button-size solid currentcolor;
+    border-radius: 50%;
+    opacity: 0;
+    background: currentcolor;
+  }
+
+  .govuk-radios__hint {
+    display: block;
+    width: 100%;
+    margin-top: govuk-spacing(-1);
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);
+  }
+
+  // This is to bypass govuk-hint's specificity on hints following labels having
+  // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,
+  // the margin doesn't collapse so we have to do this manually.
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {
+    margin-bottom: 0;
+  }
+
+  // Focused state
+  .govuk-radios__input:focus + .govuk-radios__label::before {
+    border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
+    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+  }
+
+  // Selected state
+  .govuk-radios__input:checked + .govuk-radios__label::after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-radios__input:disabled,
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    cursor: not-allowed;
+  }
+
+  .govuk-radios__input:disabled + .govuk-radios__label,
+  .govuk-radios__input:disabled ~ .govuk-hint {
+    opacity: 0.5;
+  }
+
+  // =========================================================
+  // Inline radios
+  // =========================================================
+
+  .govuk-radios--inline {
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .govuk-radios__item {
+        margin-right: govuk-spacing(4);
+      }
+    }
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-radios__divider {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    $govuk-divider-size: $govuk-radios-size !default;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox radio.
+  $conditional-border-width: $govuk-border-width-narrow;
+  // Calculate the amount of padding needed to keep the border centered against
+  // the radios.
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
+  // 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 + $govuk-radios-label-padding-left-right;
+
+  .govuk-radios__conditional {
+    @include govuk-responsive-margin(4, "bottom");
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $conditional-border-width solid $govuk-border-colour;
+
+    .govuk-frontend-supported &--hidden {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-radios--small {
+    $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
+
+    .govuk-radios__item {
+      margin-bottom: 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
+    .govuk-radios__input {
+      margin-left: $input-offset * -1;
+    }
+
+    .govuk-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
+    .govuk-radios__label::before {
+      top: $input-offset; // 2
+      left: 0;
+      width: $govuk-small-radios-size; // 1
+      height: $govuk-small-radios-size; // 1
+    }
+
+    //  •  Radio button
+    //
+    // Reduce the size of the 'button' and center it within the ring
+    .govuk-radios__label::after {
+      $radio-button-size: govuk-spacing(1);
+
+      // The same calculation as normal radio buttons but reduce the border width
+      top: (($govuk-touch-target-size / 2) - $radio-button-size);
+      left: ((($govuk-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)
+    .govuk-radios__hint {
+      padding-left: ($govuk-small-radios-size + $input-offset);
+    }
+
+    // Align conditional reveals with small radios
+    .govuk-radios__conditional {
+      $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
+    }
+
+    .govuk-radios__divider {
+      width: $govuk-small-radios-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
+    // 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.
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-radios-focus-width dashed transparent;
+      outline-offset: 1px;
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-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].
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      // 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;
+      }
+      // prettier-ignore
+      box-shadow:
+        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
+        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    }
+
+    // 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) {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+        box-shadow: initial;
+      }
+
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/radios/_radios.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/select/_index.scss

@@ -0,0 +1,57 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/select") {
+  .govuk-select {
+    @include govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+
+    // This min-width was chosen because:
+    // - it makes the Select wider than it is tall (which is what users expect)
+    // - 11.5em matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 11.5em;
+    max-width: 100%;
+    height: govuk-px-to-rem(40px);
+    padding: govuk-spacing(1);
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: $govuk-text-colour;
+    background-color: govuk-colour("white");
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-select option:active,
+  .govuk-select option:checked,
+  .govuk-select:focus::-ms-value {
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+  }
+
+  .govuk-select--error {
+    border-color: $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/select/_select.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/service-navigation/_index.scss

@@ -0,0 +1,252 @@
+@include govuk-exports("govuk/component/service-navigation") {
+  $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
+  $govuk-service-navigation-background: govuk-colour("light-grey");
+  $govuk-service-navigation-border-colour: $govuk-border-colour;
+
+  // We make the link colour a little darker than normal here so that it has
+  // better perceptual contrast with the navigation background.
+  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+
+  .govuk-service-navigation {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-service-navigation-border-colour,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
+    @include _govuk-rebrand(
+      "background-color",
+      $from: $govuk-service-navigation-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+  }
+
+  .govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+    @include govuk-media-query($from: tablet) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  // These styles are shared between nav items and the service name, they
+  // ensure that both of them remain vertically aligned with one another
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    position: relative;
+    margin: govuk-spacing(2) 0;
+    border: 0 solid $govuk-service-navigation-link-colour;
+
+    @include govuk-media-query($from: tablet) {
+      // inline-block is used as a fallback for browsers that don't support flexbox
+      display: inline-block;
+
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: govuk-spacing(4) 0;
+
+      @include _govuk-rebrand {
+        padding: govuk-spacing(3) 0;
+
+        // More magic numbers ahoy:
+        // 29 is the desired height of the element (60), minus top and bottom
+        // padding (2×15), minus bottom border (1); 19 is the font-size at this
+        // point. This gives us the perfect fractional line height to make the
+        // overall component 60px high
+        line-height: (29 / 19);
+      }
+
+      &:not(:last-child) {
+        @include govuk-responsive-margin(6, $direction: right);
+      }
+    }
+  }
+
+  // Remove the top margin of the first nav item if there is a service name but
+  // there's no menu button (either because it doesn't exist or it's hidden)
+  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
+    .govuk-service-navigation__list:first-child,
+    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
+      .govuk-service-navigation__item:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .govuk-service-navigation__item--active {
+    @include govuk-media-query($until: tablet) {
+      // Negative offset the left margin so we can place a current page indicator
+      // to the left without misaligning the list item text.
+      margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
+      padding-left: govuk-spacing(2);
+      border-left-width: $govuk-service-navigation-active-link-border-width;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      @include _govuk-rebrand(
+        "padding-bottom",
+        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
+        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
+      );
+      border-bottom-width: $govuk-service-navigation-active-link-border-width;
+    }
+  }
+
+  .govuk-service-navigation__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-underline;
+    @include govuk-link-style-no-visited-state;
+
+    &:not(:hover):not(:focus) {
+      // We set the colour here as we don't want to override the hover or
+      // focus colours
+      color: $govuk-service-navigation-link-colour;
+    }
+  }
+
+  //
+  // Service name specific code
+  //
+
+  .govuk-service-navigation__service-name {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // Annoyingly this requires a compound selector in order to overcome the
+  // specificity of the other link colour override we're doing
+  .govuk-service-navigation__service-name .govuk-service-navigation__link {
+    @include govuk-link-style-text;
+  }
+
+  // Allow navigation section to always take up maximum available space,
+  // rather than sizing to fit the content. This makes it easier to right align
+  // nav items and use slots.
+  .govuk-service-navigation__wrapper {
+    flex-grow: 1;
+  }
+
+  //
+  // Navigation list specific code
+  //
+
+  .govuk-service-navigation__toggle {
+    @include govuk-font($size: 19, $weight: bold);
+    display: inline-flex;
+    margin: govuk-spacing(2) 0;
+    padding: 0;
+    border: 0;
+    color: $govuk-service-navigation-link-colour;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center;
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+
+    &::after {
+      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    // Ensure the button stays hidden if the hidden attribute is present
+    &[hidden] {
+      display: none;
+    }
+
+    // If we have both a service name and navigation toggle, remove the
+    // margin-top so that there isn't a bunch of space between them
+    .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {
+      margin-top: 0;
+    }
+  }
+
+  .govuk-service-navigation__list {
+    @include govuk-font($size: 19);
+    margin: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+    list-style: none;
+
+    // Make the navigation list a flexbox. Doing so resolves a couple of
+    // accessibility problems caused by the list items being inline-blocks:
+    // - Removes the extra whitespace from between each list item that screen
+    //   readers would pointlessly announce.
+    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
+    //   all of the links as a run-on sentence.
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      // However... IE11 totally trips over flexbox and doesn't wrap anything,
+      // making all of the items into a single, horizontally scrolling row,
+      // which is no good. This CSS hack removes the flexbox definition for
+      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
+      //
+      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
+      @media screen and (min-width: 0\0) {
+        display: block;
+      }
+    }
+  }
+
+  // This is a <strong> element that is used as a fallback mechanism for
+  // visually indicating the current page in scenarios where CSS isn't
+  // available. We don't actually want it to be bold normally, so set it to
+  // inherit the parent font-weight.
+  .govuk-service-navigation__active-fallback {
+    font-weight: inherit;
+  }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    @include _govuk-rebrand {
+      // Remove bottom border to add width-container ones
+      border-bottom: none;
+
+      // Set colour here so non-link text (service name, slot content) can
+      // use it too.
+      color: govuk-colour("white");
+
+      background-color: $govuk-brand-colour;
+
+      .govuk-width-container {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
+      }
+
+      // Subtract 1px of space to account for the extra border-top
+      .govuk-service-navigation__container {
+        margin-top: -1px;
+      }
+
+      // Override the 'active' border colour
+      .govuk-service-navigation__item,
+      .govuk-service-navigation__service-name {
+        border-color: govuk-colour("white");
+      }
+
+      // Override link styles
+      .govuk-service-navigation__link {
+        @include govuk-link-style-inverse;
+      }
+
+      // Override mobile menu toggle colour when not focused
+      .govuk-service-navigation__toggle:not(:focus) {
+        color: currentcolor;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/service-navigation/_service-navigation.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";