dxw_govuk_frontend_rails 3.13.1 → 4.0.0

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

@@ -1,38 +1,36 @@
 @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-bottom-border-width: 1px;
+
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
 
-  // Borders between accordion sections
   .govuk-accordion__section {
     padding-top: govuk-spacing(3);
   }
 
-  .govuk-accordion__section-header {
-    padding-top: govuk-spacing(3);
-    padding-bottom: govuk-spacing(3);
-  }
-
   .govuk-accordion__section-heading {
     // Override browser defaults to ensure consistent element height
-    // Font size is set in .govuk-accordion__section-button
-    @include govuk-font(24);
+    margin-top: 0;
+    margin-bottom: 0;
 
-    margin-top: 0; // Override browser default
-    margin-bottom: 0; // Override browser default
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
   }
 
-  // Buttons within the sections don’t need default styling
   .govuk-accordion__section-button {
-    @include govuk-font($size: 24, $weight: bold);
-    display: inline-block;
+    @include govuk-text-colour;
+
+    display: block;
     margin-bottom: 0;
     padding-top: govuk-spacing(3);
   }
 
-  .govuk-accordion__section-summary {
-    margin-top: govuk-spacing(2);
-    margin-bottom: 0;
+  .govuk-accordion__section-heading-text {
+    @include govuk-font($size: 24, $weight: bold);
   }
 
   // Remove the bottom margin from the last item inside the content
@@ -44,10 +42,9 @@
   .js-enabled {
     .govuk-accordion {
       // Border at the bottom of the whole accordion
-      border-bottom: 1px solid $govuk-border-colour;
+      border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
     }
 
-    // Borders between accordion sections
     .govuk-accordion__section {
       padding-top: 0;
     }
@@ -55,8 +52,7 @@
     // Hide the body of collapsed sections
     .govuk-accordion__section-content {
       display: none;
-      @include govuk-responsive-padding(3, "top");
-      @include govuk-responsive-padding(3, "bottom");
+      @include govuk-responsive-padding(8, "bottom");
     }
 
     // Show the body of expanded sections
@@ -64,54 +60,209 @@
       display: block;
     }
 
-    // This is styled to look like a link not a button
-    .govuk-accordion__open-all {
-      @include govuk-font($size: 16);
+    .govuk-accordion__show-all {
+      @include govuk-font($size: 19);
       position: relative;
       z-index: 1;
-      margin: 0;
-      padding: 0;
+
+      margin-bottom: 9px;
+      padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
+
       border-width: 0;
+
       color: $govuk-link-colour;
       background: none;
+
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-link-common;
-      @include govuk-link-style-default;
+      @include govuk-media-query ($from: desktop) {
+        margin-bottom: 14px;
+      }
 
       // Remove default button focus outline in Firefox
       &::-moz-focus-inner {
         padding: 0;
         border: 0;
       }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of the hover state
+        // match the height of the focus state.
+        box-shadow: 0 -2px $govuk-accordion-hover-colour, 0 4px $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+
+        .govuk-accordion-nav__chevron {
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
+      }
+    }
+
+    .govuk-accordion__section-heading {
+      padding: 0;
     }
 
-    // Section headers have a pointer cursor as an additional affordance
-    .govuk-accordion__section-header {
+    // Create Chevron icon aligned with text
+    .govuk-accordion-nav__chevron {
+      box-sizing: border-box;
+      display: inline-block;
+
       position: relative;
-      // Safe area on the right to avoid clashing with icon
-      padding-right: 40px;
-      border-top: 1px solid $govuk-border-colour;
-      cursor: pointer;
+
+      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      width: govuk-px-to-rem(20px);
+      height: govuk-px-to-rem(20px);
+
+      border: govuk-px-to-rem(1px) solid;
+      border-radius: 50%;
+
+      vertical-align: middle;
+
+      // IE8 fallback of icon
+      @include govuk-if-ie8 {
+        display: inline-block;
+        max-height: 20px;
+        line-height: 1;
+      }
+
+      // Create inner chevron arrow
+      &:after {
+        content: "";
+        box-sizing: border-box;
+        display: block;
+
+        position: absolute;
+        bottom: govuk-px-to-rem(5px);
+        left: govuk-px-to-rem(6px);
+
+        width: govuk-px-to-rem(6px);
+        height: govuk-px-to-rem(6px);
+
+        -webkit-transform: rotate(-45deg);
+
+            -ms-transform: rotate(-45deg);
+
+                transform: rotate(-45deg);
+
+        border-top: govuk-px-to-rem(2px) solid;
+        border-right: govuk-px-to-rem(2px) solid;
+
+        // IE8 fallback of icon with HTML symbol
+        @include govuk-if-ie8 {
+          content: "\25B2"; // "▲"
+          position: relative;
+          border: 0;
+        }
+      }
+    }
+
+    // Rotate icon to create "Down" version
+    .govuk-accordion-nav__chevron--down {
+      -webkit-transform: rotate(180deg);
+          -ms-transform: rotate(180deg);
+              transform: rotate(180deg);
+
+      // IE8 fallback of arrow icon
+      @include govuk-if-ie8 {
+        &:after {
+          content: "\25BC"; // "▼"
+          -webkit-transform: none;
+              -ms-transform: none;
+                  transform: none;
+        }
+      }
     }
 
-    // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
-      @include govuk-typography-common;
-      margin-top: 0;
-      margin-bottom: 0;
-      margin-left: 0;
-      padding: 0;
-      border-width: 0;
-      color: $govuk-link-colour;
+      width: 100%;
+
+      padding: govuk-spacing(2) 0 0 0;
+
+      border: 0;
+
+      border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
+
+      // Visually separate the section from the one underneath when user changes colours in their
+      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      border-bottom: govuk-spacing(2) solid transparent;
+
+      color: $govuk-text-colour;
       background: none;
+
       text-align: left;
+      // Section headers have a pointer cursor as an additional affordance
       cursor: pointer;
       -webkit-appearance: none;
 
+      @include govuk-media-query ($from: tablet) {
+        padding-bottom: govuk-spacing(2);
+      }
+
+      &:active {
+        color: $govuk-link-active-colour;
+        background: none;
+      }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
       &:focus {
-        @include govuk-focused-text;
+        // Remove default focus border around button as
+        // styling is being applied to inner text elements that receive focus
+        outline: 0;
+
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus {
+          @include govuk-focused-text;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron:after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
       }
 
       // Remove default button focus outline in Firefox
@@ -121,77 +272,103 @@
       }
     }
 
-    // Extend the touch area of the button to span the section header
-    .govuk-accordion__section-button:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+    // Remove the transparent border when the section is expanded to make it clear that the heading
+    // 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);
+      border-bottom: 0;
     }
 
-    .govuk-accordion__section-button:hover:not(:focus) {
-      color: $govuk-link-hover-colour;
-      text-decoration: underline;
+    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
+    // Styling adds some spacing
+    .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
+      padding-bottom: 3px;
 
-      // This needs to come after the text-decoration property otherwise
-      // text-decoration, as a shorthand property, resets it to auto
-      @include govuk-link-hover-decoration;
-      text-underline-offset: $govuk-link-underline-offset;
+      @include govuk-media-query ($from: desktop) {
+        padding-bottom: 2px;
+      }
     }
 
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-button:hover {
-        text-decoration: none;
+    .govuk-accordion__section-toggle,
+    .govuk-accordion__section-heading-text,
+    .govuk-accordion__section-summary {
+      display: block;
+      margin-bottom: 13px;
+
+      .govuk-accordion__section-heading-text-focus,
+      .govuk-accordion__section-summary-focus,
+      .govuk-accordion__section-toggle-focus {
+        display: inline;
       }
     }
 
-    .govuk-accordion__controls {
-      text-align: right;
+    // Add toggle link with Chevron icon on left.
+    .govuk-accordion__section-toggle {
+      @include govuk-font($size: 19);
+      color: $govuk-link-colour;
     }
 
-    // Display an icon to the right of each header to indicate open/closed status,
-    // and as an additional affordance.
-    .govuk-accordion__icon {
-      position: absolute;
-      top: 50%;
-      right: 15px;
-      width: 16px;
-      height: 16px;
-      margin-top: -8px;
+    // Add space between the icon and text.
+    // Avoid applying spacing directly to the icon as the use of `transform` will change the
+    // placement of any margins.
+    .govuk-accordion__show-all-text,
+    .govuk-accordion__section-toggle-text {
+      margin-left: govuk-spacing(1);
+      vertical-align: middle;
     }
 
-    .govuk-accordion__icon:after,
-    .govuk-accordion__icon:before {
-      content: "";
-      box-sizing: border-box;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 25%;
-      height: 25%;
-      margin: auto;
-      border: 2px solid transparent;
-      background-color: govuk-colour("black");
-    }
-
-    .govuk-accordion__icon:before {
-      width: 100%;
-    }
+    // Background colour adjustment when user changes colours in Firefox
+    //
+    // When user changes colours in Firefox, text colour inside <button> is always black
+    // (regardless of the custom colours the user has set). This is fine when the text in the
+    // button is not nested inside another element because when user changes colours in Firefox,
+    // the immediate background colour of buttons is always white (again, regardless of user's
+    // custom colours).
+    //
+    // However, when the text inside <button> is wrapped inside another element AND that element
+    // sets a background colour, the text colour is still black but the background of that nested
+    // element gets the user's custom background colour. When the custom background is a lighter
+    // hue, the contrast might be sufficient. But if the user's custom background colour is a
+    // darker colour, the contrast with the text might not be sufficient.
+    //
+    // To ensure sufficient contrast, override the background colour set by the focus state on the
+    // nested elements to be transparent.
+    //
+    // Also override the background colour of the Show/Hide chevrons which set a background colour
+    // on hover.
+    @media screen and (forced-colors: active) {
+      .govuk-accordion__show-all:hover,
+      .govuk-accordion__section-button:hover {
+        .govuk-accordion-nav__chevron {
+          background-color: transparent;
+        }
+      }
 
-    .govuk-accordion__icon:after {
-      height: 100%;
+      .govuk-accordion__show-all:focus,
+      .govuk-accordion__section-button:focus {
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus,
+        .govuk-accordion-nav__chevron {
+          background: transparent;
+          background-color: transparent;
+        }
+      }
     }
 
-    // Vertical bar should be hidden when section is open, to display a '-' icon
-    .govuk-accordion__section--expanded .govuk-accordion__icon:after {
-      content: " ";
-      display: none;
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).
+    @media (hover: none) {
+      .govuk-accordion__section-header:hover {
+        border-top-color: $govuk-border-colour;
+
+        box-shadow: inset 0 3px 0 0 $govuk-link-colour;
+
+        .govuk-accordion__section-button {
+          border-top-color: $govuk-border-colour;
+        }
+      }
     }
   }
 }

data/vendor/assets/stylesheets/components/cookie-banner/_index.scss

@@ -4,8 +4,6 @@
   $border-bottom-width: govuk-spacing(2);
 
   .govuk-cookie-banner {
-    @include govuk-font($size: 19);
-
     padding-top: govuk-spacing(4);
     // The component does not set bottom spacing.
     // The bottom spacing should be created by the items inside the component.

data/vendor/assets/stylesheets/components/error-message/_index.scss

@@ -3,6 +3,7 @@
     @include govuk-font($size: 19, $weight: bold);
 
     display: block;
+    margin-top: 0; // Reset any default browser margins for paragraphs
     margin-bottom: govuk-spacing(3);
     clear: both;
 

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

@@ -152,8 +152,9 @@
   }
 
   .govuk-footer__heading {
-    @include govuk-responsive-margin(7, "bottom");
+    margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(4);
+
     @include govuk-media-query ($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
@@ -161,50 +162,15 @@
   }
 
   .govuk-footer__navigation {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex; // Support: Flexbox
+    @include govuk-clearfix;
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
     display: inline-block;
-    margin-right: $govuk-gutter-half;
     margin-bottom: $govuk-gutter;
-    margin-left: $govuk-gutter-half;
     vertical-align: top;
-    // Ensure columns take up equal width (typically one-half:one-half)
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; // Support: Flexbox
-    -webkit-flex-shrink: 1;
-        -ms-flex-negative: 1;
-            flex-shrink: 1; // Support: Flexbox
-    @include govuk-media-query ($until: desktop) {
-      // Make sure columns do not drop below 200px in width
-      // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -webkit-flex-basis: 200px;
-          -ms-flex-preferred-size: 200px;
-              flex-basis: 200px; // Support: Flexbox
-    }
-  }
-
-  // If there are only two sections, set the layout to be two-third:one-third on desktop
-  @include govuk-media-query ($from: desktop) {
-    // We match the first section with `:first-child`.
-    // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
-    .govuk-footer__section:first-child:nth-last-child(2) {
-      -webkit-box-flex: 2;
-      -webkit-flex-grow: 2;
-          -ms-flex-positive: 2;
-              flex-grow: 2; // Support: Flexbox
-    }
   }
 
   .govuk-footer__list {

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

@@ -207,8 +207,13 @@
   }
 
   .govuk-header__navigation {
-    @include govuk-responsive-margin(2, "bottom");
-    display: block;
+    @include govuk-media-query ($from: desktop) {
+      margin-bottom: govuk-spacing(2);
+    }
+  }
+
+  .govuk-header__navigation-list {
+    // Reset user-agent default list styles
     margin: 0;
     padding: 0;
     list-style: none;
@@ -222,14 +227,14 @@
       }
     }
 
-    .govuk-header__navigation {
+    .govuk-header__navigation-list {
       display: none;
       @include govuk-media-query ($from: desktop) {
         display: block;
       }
     }
 
-    .govuk-header__navigation--open {
+    .govuk-header__navigation-list--open {
       display: block;
     }
   }
@@ -281,6 +286,7 @@
 
   .govuk-header__navigation-item:last-child {
     margin-right: 0;
+    border-bottom: 0;
   }
 
   @include govuk-media-query($media-type: print) {

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

@@ -2,8 +2,6 @@
   .govuk-hint {
     @include govuk-font($size: 19);
 
-    display: block;
-
     margin-bottom: govuk-spacing(3);
 
     color: $govuk-secondary-text-colour;
@@ -39,6 +37,6 @@
 
   // Reduces visual spacing of legend when there is a hint
   .govuk-fieldset__legend + .govuk-hint {
-    margin-top: -(govuk-spacing(1));
+    margin-top: govuk-spacing(-1);
   }
 }

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

@@ -54,7 +54,7 @@
   }
 
   .govuk-input--error {
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+    border-color: $govuk-error-colour;
 
     &:focus {
       border-color: $govuk-input-border-colour;

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

@@ -12,7 +12,19 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(6) - $govuk-border-width;
+      padding: govuk-spacing(3) - $govuk-border-width;
+
+      // This is an if-all-else-fails attempt to stop long words from overflowing the container
+      // on very narrow viewports by forcing them to break and wrap instead. This
+      // overflowing is more likely to happen when user increases text size on a mobile eg. using
+      // iOS Safari text resize controls.
+      //
+      // The overflowing is a particular problem with the panel component since it uses white
+      // text: when the text overflows the container, it is invisible on the white (page)
+      // background. When the text in our other components overflow, the user might have to scroll
+      // horizontally to view it but the the text remains legible.
+      overflow-wrap: break-word;
+      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
     }
   }
 

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

@@ -40,7 +40,7 @@
   }
 
   .govuk-select--error {
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+    border-color: $govuk-error-colour;
 
     &:focus {
       border-color: $govuk-input-border-colour;

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

@@ -33,4 +33,17 @@
       }
     }
   }
+
+  .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;
+    }
+  }
 }