design_system 0.7.0

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

@@ -0,0 +1,50 @@
+@include govuk-exports("govuk/component/skip-link") {
+  .govuk-skip-link {
+    @include govuk-visually-hidden-focusable;
+    @include govuk-typography-common;
+    @include govuk-link-decoration;
+    @include govuk-link-style-text;
+    @include govuk-font-size($size: 16);
+
+    display: block;
+    padding: govuk-spacing(2) govuk-spacing(3);
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (padding: unquote("max(calc(0px))")) {
+      $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
+
+      // Use max() to pick largest padding, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
+      padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
+    }
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+      background-color: $govuk-focus-colour;
+
+      // Undo unwanted changes when global styles are enabled
+      @if $govuk-global-styles {
+        @include govuk-link-decoration;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .govuk-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;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/skip-link/_skip-link.scss

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

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

@@ -0,0 +1,267 @@
+@include govuk-exports("govuk/component/summary-list") {
+  .govuk-summary-list {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-media-query($from: tablet) {
+      display: table;
+      width: 100%;
+      table-layout: fixed; // Required to allow us to wrap words that overflow.
+      border-collapse: collapse;
+    }
+    margin: 0; // Reset default user agent styles
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-summary-list__row {
+    border-bottom: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+    }
+    @include govuk-media-query($from: tablet) {
+      display: table-row;
+    }
+  }
+
+  // Remove right padding from the last column in the row
+  .govuk-summary-list__row:not(.govuk-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.
+  .govuk-summary-list__row--no-actions {
+    @include govuk-media-query($from: tablet) {
+      &::after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value,
+  .govuk-summary-list__actions {
+    margin: 0; // Reset default user agent styles
+
+    @include govuk-media-query($from: tablet) {
+      display: table-cell;
+      padding-top: govuk-spacing(2);
+      padding-right: govuk-spacing(4);
+      padding-bottom: govuk-spacing(2);
+    }
+  }
+
+  .govuk-summary-list__actions {
+    margin-bottom: govuk-spacing(3);
+    @include govuk-media-query($from: tablet) {
+      width: 20%;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value {
+    // Automatic wrapping for unbreakable text (e.g. URLs)
+    word-wrap: break-word; // Fallback for older browsers only
+    overflow-wrap: break-word;
+  }
+
+  .govuk-summary-list__key {
+    margin-bottom: govuk-spacing(1);
+    @include govuk-typography-weight-bold;
+    @include govuk-media-query($from: tablet) {
+      width: 30%;
+    }
+  }
+
+  .govuk-summary-list__value {
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+    }
+  }
+
+  .govuk-summary-list__value > p {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-summary-list__value > :last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-summary-list__actions-list {
+    width: 100%;
+    margin: 0; // Reset default user agent styles
+    padding: 0; // Reset default user agent styles
+  }
+
+  .govuk-summary-list__actions-list-item,
+  .govuk-summary-card__action {
+    display: inline-block;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    .govuk-summary-list__actions-list-item,
+    .govuk-summary-card__action {
+      margin-right: govuk-spacing(2);
+      padding-right: govuk-spacing(2);
+      border-right: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:last-child,
+    .govuk-summary-card__action:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
+  }
+
+  @include govuk-media-query($from: tablet) {
+    .govuk-summary-list__actions-list-item,
+    .govuk-summary-card__action {
+      margin-left: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:first-child),
+    .govuk-summary-card__action:not(:first-child) {
+      border-left: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:first-child,
+    .govuk-summary-card__action: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'.
+  .govuk-summary-list__actions-list-item .govuk-link:focus {
+    isolation: isolate;
+  }
+
+  // No border on entire summary list
+  .govuk-summary-list--no-border {
+    .govuk-summary-list__row {
+      border: 0;
+    }
+
+    // Increase padding by 1px to compensate for 'missing' border
+    @include govuk-media-query($from: tablet) {
+      .govuk-summary-list__key,
+      .govuk-summary-list__value,
+      .govuk-summary-list__actions {
+        padding-bottom: govuk-spacing(2) + 1px;
+      }
+    }
+  }
+
+  // No border on specific rows
+  .govuk-summary-list__row--no-border {
+    border: 0;
+
+    // Increase padding by 1px to compensate for 'missing' border
+    @include govuk-media-query($from: tablet) {
+      .govuk-summary-list__key,
+      .govuk-summary-list__value,
+      .govuk-summary-list__actions {
+        padding-bottom: govuk-spacing(2) + 1px;
+      }
+    }
+  }
+
+  // Additional block for the summary card
+  .govuk-summary-card {
+    @include govuk-responsive-margin(6, "bottom");
+    border: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-card__title-wrapper {
+    padding: govuk-spacing(3);
+
+    // Ensures the card header appears separate to the summary list in forced
+    // colours mode
+    border-bottom: 1px solid transparent;
+    background-color: govuk-colour("light-grey");
+
+    @include govuk-media-query($from: "tablet") {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-card__title {
+    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-colour;
+    margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__actions {
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-bold;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    margin: govuk-spacing(1) 0;
+    padding: 0;
+    list-style: none;
+
+    @include govuk-media-query($from: "tablet") {
+      justify-content: right;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-card__action {
+    display: inline;
+
+    // We use the following media query to target IE11 and 10 only to add margin
+    // between actions.
+    //
+    // We do this because we're using row-gap to create space between actions on
+    // more evergreen browsers which IE doesn't support. @supports currently isn't
+    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+    //
+    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+    // which also includes an explanation of why this works
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__action:last-child {
+    // See above comment for why this is here
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-summary-card__content {
+    padding: govuk-spacing(3) govuk-spacing(3) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+
+    .govuk-summary-list {
+      margin-bottom: 0;
+    }
+
+    .govuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/summary-list/_summary-list.scss

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

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

@@ -0,0 +1,73 @@
+@include govuk-exports("govuk/component/table") {
+  .govuk-table {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: 100%;
+    @include govuk-responsive-margin(6, "bottom");
+
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  @if $govuk-new-typography-scale {
+    // Modifier for tables with a lot of data. Tables with lots of data benefit
+    // from a smaller font size on small screens.
+    .govuk-table--small-text-until-tablet {
+      @include govuk-media-query($until: tablet) {
+        @include govuk-font-size($size: 16);
+      }
+    }
+  }
+
+  .govuk-table__header {
+    @include govuk-typography-weight-bold;
+  }
+
+  .govuk-table__header,
+  .govuk-table__cell {
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .govuk-table__cell--numeric {
+    @include govuk-font-tabular-numbers;
+  }
+
+  .govuk-table__header--numeric,
+  .govuk-table__cell--numeric {
+    text-align: right;
+  }
+
+  .govuk-table__header:last-child,
+  .govuk-table__cell:last-child {
+    padding-right: 0;
+  }
+
+  .govuk-table__caption {
+    @include govuk-typography-weight-bold;
+
+    display: table-caption;
+    text-align: left;
+  }
+
+  // Modifiers that make captions look more like their equivalent headings
+  .govuk-table__caption--xl,
+  .govuk-table__caption--l,
+  .govuk-table__caption--m {
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--xl {
+    @include govuk-font-size($size: 48);
+  }
+
+  .govuk-table__caption--l {
+    @include govuk-font-size($size: 36);
+  }
+
+  .govuk-table__caption--m {
+    @include govuk-font-size($size: 24);
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/table/_table.scss

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

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

@@ -0,0 +1,132 @@
+@include govuk-exports("govuk/component/tabs") {
+  .govuk-tabs {
+    @include govuk-responsive-margin(1, "top");
+    @include govuk-responsive-margin(6, "bottom");
+    @include govuk-font($size: 19);
+  }
+
+  .govuk-tabs__title {
+    // Set the size and weight again because this element is a heading and the
+    // user agent font size overrides the inherited font size
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-regular;
+    @include govuk-text-colour;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-tabs__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__list-item {
+    margin-left: govuk-spacing(5);
+
+    &::before {
+      @include govuk-text-colour;
+      content: "\2014 "; // "— "
+      margin-left: govuk-spacing(-5);
+      padding-right: govuk-spacing(1);
+    }
+  }
+
+  .govuk-tabs__tab {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+
+    display: inline-block;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-tabs__panel {
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
+    @include govuk-media-query($from: tablet) {
+      .govuk-tabs__list {
+        @include govuk-clearfix;
+        margin-bottom: 0;
+        border-bottom: 1px solid $govuk-border-colour;
+      }
+
+      .govuk-tabs__title {
+        display: none;
+      }
+
+      .govuk-tabs__list-item {
+        position: relative;
+
+        margin-right: govuk-spacing(1);
+        margin-bottom: 0;
+        margin-left: 0;
+        padding: govuk-spacing(2) govuk-spacing(4);
+
+        float: left;
+        background-color: govuk-colour("light-grey");
+        text-align: center;
+
+        &::before {
+          content: none;
+        }
+      }
+
+      .govuk-tabs__list-item--selected {
+        $border-width: 1px;
+
+        position: relative;
+
+        margin-top: govuk-spacing(-1);
+
+        // Compensation for border (otherwise we get a shift)
+        margin-bottom: -$border-width;
+        padding-top: govuk-spacing(3) - $border-width;
+        padding-right: govuk-spacing(4) - $border-width;
+        padding-bottom: govuk-spacing(3) + $border-width;
+        padding-left: govuk-spacing(4) - $border-width;
+
+        border: $border-width solid $govuk-border-colour;
+        border-bottom: 0;
+
+        background-color: $govuk-body-background-colour;
+
+        .govuk-tabs__tab {
+          text-decoration: none;
+        }
+      }
+
+      .govuk-tabs__tab {
+        @include govuk-link-style-text;
+
+        margin-bottom: 0;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      .govuk-tabs__panel {
+        @include govuk-responsive-margin(0, "bottom");
+        padding: govuk-spacing(6) govuk-spacing(4);
+        border: 1px solid $govuk-border-colour;
+        border-top: 0;
+
+        & > :last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .govuk-tabs__panel--hidden {
+        display: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/tabs/_tabs.scss

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

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

@@ -0,0 +1,95 @@
+@include govuk-exports("govuk/component/tag") {
+  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
+
+  .govuk-tag {
+    @include govuk-font($size: 19);
+
+    display: inline-block;
+
+    // set a max-width along with overflow-wrap: break-word below for instances
+    // where a tag has a single long word and could overflow its boundaries.
+    // The max-width is necessary as break-word requires a bounding box to base
+    // where to break off of.
+    max-width: $govuk-tag-max-width;
+
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
+    //
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
+    margin-top: -2px;
+    margin-bottom: -3px;
+
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 3px;
+    padding-left: 8px;
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
+    text-decoration: none;
+    overflow-wrap: break-word;
+
+    // When forced colour mode is active, for example to provide high contrast,
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
+    //
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
+    @media screen and (forced-colors: active) {
+      font-weight: bold;
+    }
+  }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey"), 50%);
+    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("bright-purple"), 50%);
+    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60%);
+    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  }
+
+  .govuk-tag--light-blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 90%);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65%);
+    background-color: govuk-tint(govuk-colour("yellow"), 75%);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55%);
+    background-color: govuk-tint(govuk-colour("orange"), 70%);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 80%);
+    background-color: govuk-tint(govuk-colour("red"), 75%);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 50%);
+    background-color: govuk-tint(govuk-colour("pink"), 85%);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20%);
+    background-color: govuk-tint(govuk-colour("green"), 80%);
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/tag/_tag.scss

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