govuk_publishing_components 23.13.0 → 24.1.0

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js

@@ -0,0 +1,8 @@
+function nodeListForEach (nodes, callback) {
+  if (window.NodeList.prototype.forEach) {
+    return nodes.forEach(callback)
+  }
+  for (var i = 0; i < nodes.length; i++) {
+    callback.call(window, nodes[i], i, nodes);
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -17,7 +17,6 @@
 @import "components/button";
 @import "components/character-count";
 @import "components/checkboxes";
-@import "components/chevron-banner";
 @import "components/contents-list";
 @import "components/contextual-guidance";
 @import "components/contextual-sidebar";

data/app/assets/stylesheets/govuk_publishing_components/component_support.scss

@@ -6,12 +6,10 @@
 @import "govuk/utilities/all";
 @import "govuk/overrides/all";
 
-@import "govuk_publishing_components/components/helpers/variables";
 @import "govuk_publishing_components/components/helpers/brand-colours";
 @import "govuk_publishing_components/components/helpers/link";
 @import "govuk_publishing_components/components/helpers/px-to-em";
 @import "govuk_publishing_components/components/mixins/govuk-template-link-focus-override";
 @import "govuk_publishing_components/components/mixins/media-down";
 @import "govuk_publishing_components/components/mixins/margins";
-@import "govuk_publishing_components/components/mixins/clearfix";
 @import "govuk_publishing_components/components/mixins/css3";

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -1,25 +1,313 @@
-@import "govuk/components/accordion/accordion";
+@import "govuk_publishing_components/component_support";
 
-.gem-c-accordion {
-  .govuk-accordion__section-heading {
-    // this is a temporary addition to fix the line height when it
-    // is being overridden by styles from govuk-template in collections
-    @include govuk-media-query($until: desktop) {
-      @include govuk-font(24, $weight: bold, $line-height: 1.6);
+$gem-c-accordion-border-width: 3px;
+$gem-c-accordion-bottom-border-width: 1px;
+
+// Buttons within the sections don’t need default styling
+.gem-c-accordion__section-button {
+  display: inline-block;
+  margin-bottom: 0;
+  padding-top: govuk-spacing(3);
+  font-weight: bold;
+  @include govuk-font($size: 24, $weight: bold);
+}
+
+.gem-c-accordion__section-header {
+  padding-top: govuk-spacing(2) 0;
+}
+
+.gem-c-accordion__section-heading,
+.gem-c-accordion__section-summary {
+  margin: govuk-spacing(1) 0;
+}
+
+.js-enabled {
+  .gem-c-accordion {
+    border-bottom: $gem-c-accordion-bottom-border-width solid $govuk-border-colour;
+  }
+
+  .gem-c-accordion__controls {
+    text-align: left;
+  }
+
+  .gem-c-accordion__open-all {
+    position: relative;
+    z-index: 1;
+    border-width: 0;
+    color: $govuk-link-colour;
+    background: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    margin-bottom: govuk-spacing(4);
+    padding: 0 govuk-spacing(1) govuk-spacing(1) 0;
+    @include govuk-font($size: 16);
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    // Remove default button focus outline in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
     }
   }
-}
 
-.govuk-accordion--condensed {
-  .govuk-accordion__section-button {
-    @include govuk-media-query($from: tablet) {
-      @include govuk-font($size: 19, $weight: bold);
+  .gem-c-accordion__open-all:hover,
+  .gem-c-accordion__open-all-text:hover {
+    text-decoration: underline;
+    color: $govuk-link-colour;
+  }
+
+  // Focus state, also to change chervon icon to black
+  .gem-c-accordion__open-all:focus {
+    .gem-c-accordion__open-all-text,
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
     }
   }
 
-  .govuk-accordion__section-summary {
+  // Create Chervon icon align with text
+  .gem-c-accordion-nav__chevron {
+    vertical-align: text-top;
+    display: inline-block;
+    box-sizing: border-box;
+    position: relative;
+    width: em(20, 14);
+    height: em(20, 14);
+    margin-left: em(5, 14);
+    border: em(1, 14) solid;
+    border-radius: em(100, 14);
+    // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
-      @include govuk-font($size: 16);
+      width: em(20, 16);
+      height: em(20, 16);
+      margin-left: em(5, 16);
+      border: em(1, 16) solid;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      box-sizing: border-box;
+      position: absolute;
+      overflow: visible;
+      width: em(6, 14);
+      height: em(6, 14);
+      border-top: em(2, 14) solid;
+      border-right: em(2, 14) solid;
+      transform: rotate(-45deg);
+      left: em(6, 14);
+      bottom: em(5, 14);
+      @include govuk-media-query($from: tablet) {
+        width: em(6, 16);
+        height: em(6, 16);
+        border-top: em(2, 16) solid;
+        border-right: em(2, 16) solid;
+        left: em(6, 16);
+        bottom: em(5, 16);
+      }
+    }
+  }
+
+  // Rotate icon to create "Down" version
+  .gem-c-accordion-nav__chevron--down {
+    transform: rotate(180deg);
+  }
+
+  .gem-c-accordion__section-heading {
+    // Override browser defaults to ensure consistent element height
+    margin-top: 0; // Override browser default
+    margin-bottom: 0; // Override browser default
+    @include govuk-font(24);
+  }
+
+  // Section headers have a pointer cursor as an additional affordance
+  .gem-c-accordion__section-header {
+    position: relative;
+  }
+
+  // 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) {
+    .gem-c-accordion__section-header:hover {
+      border-top-color: $govuk-link-colour;
+      box-shadow: inset 0 $gem-c-accordion-border-width 0 0 $govuk-link-colour;
+
+      .gem-c-accordion__section-button {
+        border-top-color: $govuk-link-colour;
+      }
+    }
+  }
+
+  // Buttons within the headers don’t need default styling
+  .gem-c-accordion__section-button {
+    padding: govuk-spacing(2) 0 govuk-spacing(5);
+    position: relative;
+    margin: 0;
+    border-width: $gem-c-accordion-bottom-border-width 0 0 0;
+    border-top: $gem-c-accordion-bottom-border-width solid $govuk-border-colour;
+    color: $govuk-text-colour;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    -webkit-appearance: none;
+    @include govuk-typography-common;
+    width: 100%;
+
+    &:active {
+      z-index: 1;
+      color: $govuk-link-active-colour;
+      background: none;
+    }
+
+    // Remove default button focus outline in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  .gem-c-accordion__section-button:hover {
+    color: $govuk-link-colour;
+    // On hover, add underline to toggle link
+    .gem-c-accordion__toggle-text {
+      text-decoration: underline;
+      color: $govuk-link-colour;
+    }
+  }
+
+  .gem-c-accordion__section-button:focus {
+    @include govuk-focused-text;
+    // Overwrite focus border to top
+    box-shadow: 0 0, 0 -4px;
+    border-top: 1px solid transparent;
+
+    // Focus state to change the toggle link within individual sections
+    .gem-c-accordion__toggle-text {
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+    }
+    // Focus state to change chervon icon colour within individual sections
+    .gem-c-accordion-nav__chevron {
+      color: $govuk-text-colour;
+    }
+  }
+
+  // Extend the touch area of the button to span the section header
+  .gem-c-accordion__section-button:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .gem-c-accordion__section-button:hover:not(:focus) {
+    text-decoration: 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) {
+    .gem-c-accordion__section-button:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Add toggle link with Chevron icon on right.
+  .gem-c-accordion__toggle-link {
+    display: block;
+    color: $govuk-link-colour;
+    text-transform: capitalize;
+    margin-top: govuk-spacing(1);
+    margin-bottom: govuk-spacing(1);
+    @include govuk-font($size: 16, $line-height: 1);
+
+    &:active {
+      background: $govuk-link-active-colour;
+    }
+  }
+
+  // Setting width of the text, so the icon doesn't shift (left / right) when toggled
+  .gem-c-accordion__toggle-text {
+    min-width: em(40, 16);
+    display: inline-block;
+  }
+
+  .gem-c-accordion__open-all-text {
+    min-width: em(120, 16);
+    display: inline-block;
+    text-align: left;
+  }
+
+  // Change the summary subheading size.
+  .gem-c-accordion__section-summary {
+    @include govuk-responsive-margin(2, "top");
+    @include govuk-responsive-margin(2, "bottom");
+    @include govuk-typography-common;
+    @include govuk-typography-responsive($size: 19);
+  }
+
+  // Hide body of expanded sections
+  .gem-c-accordion__section-content {
+    display: none;
+    @include govuk-responsive-padding(0, "top");
+    @include govuk-responsive-padding(8, "bottom");
+  }
+
+  // Show the body of expanded sections
+  .gem-c-accordion__section--expanded .gem-c-accordion__section-content {
+    display: block;
+  }
+
+  // Remove the bottom margin from the last item inside the content
+  .gem-c-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
+  // Condensed layout
+  .gem-c-accordion--condensed {
+    .gem-c-accordion__open-all {
+      margin-bottom: govuk-spacing(5);
+      @include govuk-font($size: 14, $line-height: 1);
+    }
+
+    .gem-c-accordion__section-button {
+      @include govuk-typography-responsive($size: 19, $important: true);
+      padding-top: govuk-spacing(1);
+      padding-bottom: govuk-spacing(5);
+    }
+
+    // Reduce Chevron size
+    .gem-c-accordion-nav__chevron {
+      width: em(20, 14);
+      height: em(20, 14);
+      margin-left: em(5, 14);
+      border: em(1, 14) solid;
+      border-radius: em(100, 14);
+      transform: scale(.875);
+
+      &:after {
+        width: em(6, 14);
+        height: em(6, 14);
+        border-top: em(2, 14) solid;
+        border-right: em(2, 14) solid;
+        left: em(6, 14);
+        bottom: em(5, 14);
+      }
+    }
+
+    .gem-c-accordion-nav__chevron--down {
+      transform: scale(.875) rotate(180deg);
+    }
+
+    .gem-c-accordion__section-summary {
+      @include govuk-typography-responsive($size: 16, $important: true);
+      margin: govuk-spacing(1) 0;
+    }
+
+    .gem-c-accordion__toggle-link {
+      @include govuk-font($size: 14, $line-height: 1);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -3,45 +3,38 @@ $transition-campaign-dark-blue: #1e1348;
 
 .gem-c-contextual-sidebar__brexit-related-links {
   border-top: 2px solid $govuk-brand-colour;
+}
 
-  .gem-c-contextual-sidebar__brexit-heading {
-    @include govuk-font(19, $weight: bold);
-    padding-top: govuk-spacing(3);
-    margin-bottom: govuk-spacing(2);
-  }
+.gem-c-contextual-sidebar__brexit-heading {
+  @extend %govuk-heading-s;
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
 }
 
 .gem-c-contextual-sidebar__brexit-cta {
-  @include govuk-font(19);
   margin-bottom: govuk-spacing(6);
   background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 4px solid $transition-campaign-red;
+  border-top: 2px solid $transition-campaign-red;
   display: block;
-  padding: govuk-spacing(3);
+  padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
 
   .gem-c-contextual-sidebar__brexit-heading {
-    @extend %govuk-heading-m;
-    color: $transition-campaign-dark-blue;
+    color: $govuk-text-colour;
   }
 
   .gem-c-contextual-sidebar__brexit-text {
     @extend %govuk-link;
+    @include govuk-font(16);
 
     margin-top: 0;
-    margin-bottom: 0;
+    margin-bottom: govuk-spacing(1);
     text-decoration: underline;
 
     @include govuk-media-query($from: tablet) {
       margin-bottom: govuk-spacing(2);
     }
   }
-
-  @include govuk-compatibility(govuk_template) {
-    .gem-c-contextual-sidebar__brexit-title {
-      margin-bottom: govuk-spacing(3);
-    }
-  }
 }
 
 .gem-c-contextual-sidebar__brexit-cta:focus {
@@ -49,3 +42,27 @@ $transition-campaign-dark-blue: #1e1348;
     text-decoration: none;
   }
 }
+
+.gem-c-contextual-sidebar__take-action-traffic-lights {
+  text-align: left;
+  margin-bottom: govuk-spacing(2);
+}
+
+.gem-c-contextual-sidebar__take-action-traffic-lights > li {
+  white-space: nowrap;
+  display: inline;
+  margin-right: 7px;
+  margin-bottom: govuk-spacing(1);
+}
+
+.gem-c-contextual-sidebar__take-action-traffic-lists-icon {
+  vertical-align: middle;
+  margin-top: -2px;
+  width: 22px;
+  margin-right: 2px;
+}
+
+.gem-c-contextual-sidebar__take-action-traffic-lists-text {
+  @include govuk-font($size: 19, $weight: bold, $line-height: 2);
+  vertical-align: middle;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -7,14 +7,10 @@
 
 .gem-c-document-list__item {
   overflow: hidden;
-  margin-bottom: govuk-spacing(4);
-  padding-bottom: govuk-spacing(4);
-  border-bottom: 1px solid $govuk-border-colour;
+  margin-bottom: govuk-spacing(5);
+  padding-top: govuk-spacing(2);
+  border-top: 1px solid $govuk-border-colour;
   list-style: none;
-
-  &:last-child {
-    border-bottom: 0;
-  }
 }
 
 .gem-c-document-list__item-title {
@@ -33,6 +29,12 @@
   }
 }
 
+.gem-c-document-list--no-top-border {
+  .gem-c-document-list__item {
+    border-top: none;
+  }
+}
+
 .gem-c-document-list__item-title--context {
   margin-right: govuk-spacing(2);
 
@@ -52,7 +54,7 @@
 }
 
 .gem-c-document-list__subtext {
-  margin: govuk-spacing(1) 0 0 0;
+  margin: 0;
 }
 
 .gem-c-document-list__item-description,
@@ -60,6 +62,10 @@
   @include govuk-font($size: 16, $line-height: 1.5);
 }
 
+.gem-c-document-list__item-description--full-size {
+  @include govuk-font($size: 19);
+}
+
 .gem-c-document-list__item-metadata {
   padding: 0;
 }