dxw_govuk_frontend_rails 4.0.0 → 4.6.0

data/vendor/assets/stylesheets/all-ie8.scss

@@ -1,3 +1,11 @@
+// Ignore IE8 related warnings whilst we continue to generate IE8 specific
+// stylesheets for the review app or dist versions of GOV.UK Frontend
+$govuk-suppressed-warnings: if(
+  variable-exists(govuk-suppressed-warnings),
+  append($govuk-suppressed-warnings, "ie8"),
+  ("ie8")
+);
+
 // By setting $govuk-is-ie8 to true, we create a version of the stylesheet that
 // targets IE8 – e.g. conditionally including or excluding styles, and
 // rasterizing media queries.

data/vendor/assets/stylesheets/components/_all.scss

@@ -7,7 +7,6 @@
 @import "checkboxes/index";
 @import "character-count/index";
 @import "cookie-banner/index";
-@import "summary-list/index";
 @import "date-input/index";
 @import "details/index";
 @import "error-message/index";
@@ -21,6 +20,7 @@
 @import "inset-text/index";
 @import "label/index";
 @import "notification-banner/index";
+@import "pagination/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";
@@ -28,6 +28,7 @@
 @import "radios/index";
 @import "select/index";
 @import "skip-link/index";
+@import "summary-list/index";
 @import "table/index";
 @import "textarea/index";
 @import "warning-text/index";

data/vendor/assets/stylesheets/components/accordion/_index.scss

@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/accordion") {
   $govuk-accordion-base-colour: govuk-colour("black");
   $govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
-  $govuk-accordion-icon-focus-colour: govuk-colour("yellow");
+  $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 
   .govuk-accordion {
@@ -22,6 +22,7 @@
   }
 
   .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
     @include govuk-text-colour;
 
     display: block;
@@ -29,10 +30,6 @@
     padding-top: govuk-spacing(3);
   }
 
-  .govuk-accordion__section-heading-text {
-    @include govuk-font($size: 24, $weight: bold);
-  }
-
   // Remove the bottom margin from the last item inside the content
   .govuk-accordion__section-content > :last-child {
     margin-bottom: 0;
@@ -49,12 +46,28 @@
       padding-top: 0;
     }
 
-    // Hide the body of collapsed sections
+    // Hide the body of collapsed sections by default for browsers that lack
+    // support for `content-visibility` paired with [hidden=until-found]
     .govuk-accordion__section-content {
       display: none;
+
+      @include govuk-responsive-padding(3, "top");
       @include govuk-responsive-padding(8, "bottom");
     }
 
+    // Hide the body of collapsed sections using `content-visibility` to enable
+    // page search within [hidden=until-found] regions where browser supported
+    .govuk-accordion__section-content[hidden] {
+      @supports (content-visibility: hidden) {
+        content-visibility: hidden;
+        display: inherit;
+      }
+
+      // Hide the padding of collapsed sections
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
     // Show the body of expanded sections
     .govuk-accordion__section--expanded .govuk-accordion__section-content {
       display: block;
@@ -76,7 +89,7 @@
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-media-query ($from: desktop) {
+      @include govuk-media-query ($from: tablet) {
         margin-bottom: 14px;
       }
 
@@ -142,7 +155,7 @@
       vertical-align: middle;
 
       // IE8 fallback of icon
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         display: inline-block;
         max-height: 20px;
         line-height: 1;
@@ -171,7 +184,7 @@
         border-right: govuk-px-to-rem(2px) solid;
 
         // IE8 fallback of icon with HTML symbol
-        @include govuk-if-ie8 {
+        @include _govuk-if-ie8 {
           content: "\25B2"; // "▲"
           position: relative;
           border: 0;
@@ -186,7 +199,7 @@
               transform: rotate(180deg);
 
       // IE8 fallback of arrow icon
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         &:after {
           content: "\25BC"; // "▼"
           -webkit-transform: none;
@@ -276,8 +289,12 @@
     // relates to the content below. Adjust padding to maintain the height of the element.
     // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
     .govuk-accordion__section--expanded .govuk-accordion__section-button {
-      padding-bottom: govuk-spacing(4);
+      padding-bottom: govuk-spacing(3);
       border-bottom: 0;
+
+      @include govuk-media-query ($from: tablet) {
+        padding-bottom: govuk-spacing(4);
+      }
     }
 
     // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
@@ -305,7 +322,8 @@
 
     // Add toggle link with Chevron icon on left.
     .govuk-accordion__section-toggle {
-      @include govuk-font($size: 19);
+      @include govuk-typography-responsive($size: 19);
+      @include govuk-typography-weight-regular;
       color: $govuk-link-colour;
     }
 

data/vendor/assets/stylesheets/components/back-link/_index.scss

@@ -1,16 +1,19 @@
 @include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: 16);
+    @include govuk-typography-responsive($size: $font-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -21,7 +24,7 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: 14px;
+    padding-left: govuk-em(14px, $font-size);
   }
 
   // Prepend left pointing chevron
@@ -35,14 +38,15 @@
     @if $govuk-use-legacy-font {
       // Begin adjustments for font baseline offset
       // These should be removed when legacy font support is dropped
-      top: -1px;
-      bottom: 1px;
+      $offset: govuk-em(1px, $font-size);
+      top: $offset * -1;
+      bottom: $offset;
     } @else {
       top: 0;
       bottom: 0;
     }
 
-    left: 3px;
+    left: govuk-em(3px, $font-size);
 
     width: $chevron-size;
     height: $chevron-size;
@@ -56,11 +60,18 @@
             transform: rotate(225deg);
 
     border: solid;
-    border-width: $chevron-border-width $chevron-border-width 0 0;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
     border-color: $chevron-border-colour;
 
+    @supports (border-width: unquote("max(0px)")) {
+      border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+      // Ensure that the chevron never gets smaller than 16px
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
+    }
+
     // Fall back to a less than sign for IE8
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       content: "\003c"; // Less than sign (<)
       width: auto;
       height: auto;
@@ -85,15 +96,4 @@
     bottom: -14px;
     left: 0;
   }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when legacy font support is dropped
-    .govuk-back-link:before {
-      $offset: 1px;
-
-      top: $offset * -1;
-      bottom: $offset;
-    }
-  }
 }

data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss

@@ -1,10 +1,13 @@
 @include govuk-exports("govuk/component/breadcrumbs") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -13,10 +16,10 @@
   // of length 8 (7px + 1px border):
   //
   // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: 5.655px;
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: $font-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -40,8 +43,8 @@
 
     // Add both margin and padding such that the chevron appears centrally
     // between each breadcrumb item
-    margin-left: govuk-spacing(2);
-    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
 
     float: left;
 
@@ -55,8 +58,9 @@
       @if $govuk-use-legacy-font {
         // Begin adjustments for font baseline offset
         // These should be removed when legacy font support is dropped
-        top: -1px;
-        bottom: 1px;
+        $offset: govuk-em(1px, $font-size);
+        top: $offset * -1;
+        bottom: $offset;
       } @else {
         top: 0;
         bottom: 0;
@@ -78,11 +82,18 @@
               transform: rotate(45deg);
 
       border: solid;
-      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
       border-color: $chevron-border-colour;
 
+      @supports (border-width: unquote("max(0px)")) {
+        border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+        // Ensure that the chevron never gets smaller than 16px
+        font-size: unquote("max(#{$font-size * 1px}, 1em)");
+      }
+
       // Fall back to a greater than sign for IE8
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         content: "\003e"; // Greater than sign (>)
         width: auto;
         height: auto;
@@ -122,14 +133,12 @@
         }
 
         &:before {
-          top: 6px;
+          top: govuk-em(6px, $font-size);
           margin: 0;
         }
       }
 
       .govuk-breadcrumbs__list {
-        display: -webkit-box;
-        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

data/vendor/assets/stylesheets/components/button/_index.scss

@@ -1,8 +1,26 @@
+////
+/// @group components/button
+////
+
+/// Button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
+
+/// Button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-text-colour: govuk-colour("white") !default;
+
 @include govuk-exports("govuk/component/button") {
-  $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
+  $govuk-button-colour: $govuk-button-background-colour;
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
-  $govuk-button-text-colour: govuk-colour("white");
+  $govuk-button-text-colour: $govuk-button-text-colour;
 
   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
@@ -43,7 +61,7 @@
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
     }
 
@@ -74,7 +92,7 @@
       // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
@@ -85,11 +103,11 @@
       // backgrounds and box-shadows disappear, so we need to ensure there's a
       // transparent outline which will be set to a visible colour.
       // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
-      @include govuk-not-ie8 {
+      @include _govuk-not-ie8 {
         outline: $govuk-focus-width solid transparent;
       }
       // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         color: $govuk-focus-text-colour;
         background-color: $govuk-focus-colour;
       }
@@ -101,7 +119,7 @@
     // we need to override the text colour for that combination of selectors so
     // so that unvisited links styled as buttons do not end up with dark blue
     // text when focussed.
-    @include govuk-compatibility(govuk_template) {
+    @include _govuk-compatibility(govuk_template) {
       &:link:focus {
         color: $govuk-button-text-colour;
       }
@@ -148,6 +166,8 @@
     }
   }
 
+  // @deprecated Disabling buttons using the .govuk-button--disabled class is
+  // deprecated and will be removed in the next major version.
   .govuk-button--disabled,
   .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
@@ -155,13 +175,13 @@
 
     &:hover {
       background-color: $govuk-button-colour;
-      cursor: default;
+      cursor: not-allowed;
     }
 
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }
     }
@@ -184,7 +204,7 @@
     // we need to override the text colour for that combination of selectors so
     // so that unvisited links styled as buttons do not end up with dark blue
     // text when focussed.
-    @include govuk-compatibility(govuk_template) {
+    @include _govuk-compatibility(govuk_template) {
       &:link:focus {
         color: $govuk-secondary-button-text-colour;
       }
@@ -216,7 +236,7 @@
     // we need to override the text colour for that combination of selectors so
     // so that unvisited links styled as buttons do not end up with dark blue
     // text when focussed.
-    @include govuk-compatibility(govuk_template) {
+    @include _govuk-compatibility(govuk_template) {
       &:link:focus {
         color: $govuk-warning-button-text-colour;
       }
@@ -235,22 +255,14 @@
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
 
-    display: -webkit-inline-box;
-
-    display: -webkit-inline-flex;
-
     display: -ms-inline-flexbox;
 
     display: inline-flex;
     min-height: auto;
 
-    -webkit-box-pack: center;
-
-    -webkit-justify-content: center;
-
-        -ms-flex-pack: center;
+    -ms-flex-pack: center;
 
-            justify-content: center;
+        justify-content: center;
   }
 
   .govuk-button__start-icon {
@@ -260,12 +272,10 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-            flex-shrink: 0;
-    -webkit-align-self: center;
-        -ms-flex-item-align: center;
-            align-self: center;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -ms-flex-item-align: center;
+        align-self: center;
     // Work around SVGs not inheriting color from parent in forced color mode
     // (https://github.com/w3c/csswg-drafts/issues/6310)
     forced-color-adjust: auto;

data/vendor/assets/stylesheets/components/character-count/_index.scss

@@ -17,6 +17,15 @@
     @include govuk-font($size: false, $tabular: true);
     margin-top: 0;
     margin-bottom: 0;
+
+    &:after {
+      // Zero-width space that will reserve vertical space when no hint is provided
+      // as:
+      // - setting a min-height is not possible without a magic number
+      //   because the line-height is set by the `govuk-font` call above
+      // - using `:empty` is not possible as the hint macro outputs line breaks
+      content: "\200B";
+    }
   }
 
   .govuk-character-count__message--disabled {

data/vendor/assets/stylesheets/components/checkboxes/_index.scss

@@ -36,7 +36,7 @@
 
     // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
     // elements there.
-    @include govuk-not-ie8 {
+    @include _govuk-not-ie8 {
       position: absolute;
 
       z-index: 1;
@@ -50,7 +50,7 @@
       opacity: 0;
     }
 
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       margin-top: 10px;
       margin-right: $govuk-checkboxes-size / -2;
       margin-left: $govuk-checkboxes-size / -2;
@@ -73,7 +73,7 @@
         touch-action: manipulation;
   }
 
-  @include govuk-not-ie8 {
+  @include _govuk-not-ie8 {
     // [ ] Check box
     .govuk-checkboxes__label:before {
       content: "";
@@ -83,7 +83,7 @@
       left: 0;
       width: $govuk-checkboxes-size;
       height: $govuk-checkboxes-size;
-      border: $govuk-border-width-form-element solid currentColor;
+      border: $govuk-border-width-form-element solid currentcolor;
       background: transparent;
     }
 
@@ -152,10 +152,11 @@
   // Disabled state
   .govuk-checkboxes__input:disabled,
   .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
-    cursor: default;
+    cursor: not-allowed;
   }
 
-  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
+  .govuk-checkboxes__input:disabled ~ .govuk-hint {
     opacity: .5;
   }
 
@@ -228,11 +229,11 @@
     //  ▲┆└─ Check box pseudo element, aligned with margin
     //  └─── Touch target (invisible input), shifted into the margin
     .govuk-checkboxes__input {
-      @include govuk-not-ie8 {
+      @include _govuk-not-ie8 {
         left: $input-offset * -1;
       }
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         margin-left: $govuk-small-checkboxes-size * -1;
       }
     }

data/vendor/assets/stylesheets/components/file-upload/_index.scss

@@ -30,7 +30,7 @@
       // yellow focus state.
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         // IE8 doesn't support `box-shadow` so add an actual border
         border: 4px solid $govuk-input-border-colour;
       }
@@ -46,5 +46,10 @@
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
   }
 }

data/vendor/assets/stylesheets/components/footer/_index.scss

@@ -8,7 +8,7 @@
   $govuk-footer-text: $govuk-text-colour;
   $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
 
-  @if ($govuk-use-legacy-palette) {
+  @if $govuk-use-legacy-palette {
     $govuk-footer-border-top: #a1acb2;
     $govuk-footer-border: govuk-colour("grey-2");
     $govuk-footer-text: #454a4c;
@@ -35,7 +35,7 @@
   .govuk-footer__link {
     @include govuk-link-common;
 
-    @if ($govuk-use-legacy-palette) {
+    @if $govuk-use-legacy-palette {
       &:link,
       &:visited {
         color: $govuk-footer-text;
@@ -52,7 +52,7 @@
     // alphagov/govuk_template includes a specific a:link:focus selector
     // designed to make unvisited links a slightly darker blue when focussed, so
     // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
+    @include _govuk-compatibility(govuk_template) {
       &:link:focus {
         @include govuk-text-colour;
       }
@@ -67,23 +67,16 @@
   }
 
   .govuk-footer__meta {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
-    -webkit-box-align: end;
-    -webkit-align-items: flex-end;
-        -ms-flex-align: end;
-            align-items: flex-end; // Support: Flexbox
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-align: end;
+        align-items: flex-end; // Support: Flexbox
+    -ms-flex-pack: center;
+        justify-content: center; // Support: Flexbox
   }
 
   .govuk-footer__meta-item {
@@ -93,14 +86,11 @@
   }
 
   .govuk-footer__meta-item--grow {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1; // Support: Flexbox
+    -ms-flex: 1;
+        flex: 1; // Support: Flexbox
     @include govuk-media-query ($until: tablet) {
-      -webkit-flex-basis: 320px;
-          -ms-flex-preferred-size: 320px;
-              flex-basis: 320px; // Support: Flexbox
+      -ms-flex-preferred-size: 320px;
+          flex-basis: 320px; // Support: Flexbox
     }
   }
 
@@ -179,13 +169,6 @@
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
-
-    // Disable thicker underlines on hover because of a bug in Chromium
-    // affecting links within columns
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
-    .govuk-footer__link:hover {
-      text-decoration-thickness: auto;
-    }
   }
 
   @include govuk-media-query ($from: desktop) {