govuk_publishing_components 24.0.0 → 24.3.1

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/component_guide/application.scss

@@ -262,14 +262,6 @@ html {
   }
 }
 
-// Hide survey banner
-// stylelint-disable selector-max-id
-#user-satisfaction-survey-container,
-#global-cookie-message {
-  display: none;
-}
-// stylelint-enable selector-max-id
-
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 

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

@@ -1,25 +1,309 @@
-@import "govuk/components/accordion/accordion";
+$gem-c-accordion-border-width: 3px;
+$gem-c-accordion-bottom-border-width: 1px;
 
-.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);
+// 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 {
+  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(1, "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);
+    }
+
+    .gem-c-accordion__toggle-link {
+      @include govuk-font($size: 14, $line-height: 1);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,3 +1,4 @@
+@import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
 .js-enabled {
@@ -7,50 +8,14 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 .gem-c-cookie-banner {
-  @include govuk-font($size: 16);
-  padding: govuk-spacing(2) 0;
   background-color: $govuk-cookie-banner-background;
 }
 
-.gem-c-cookie-banner--services {
+// can't be used without js so implement there
+.gem-c-cookie-banner .gem-c-button {
   display: none;
 }
 
-.gem-c-cookie-banner__message {
-  display: inline-block;
-  padding-bottom: govuk-spacing(2);
-
-  @include govuk-font($size: 16);
-  @include govuk-media-query($from: desktop) {
-    padding-right: govuk-spacing(4);
-  }
-}
-
-.gem-c-cookie-banner__button {
-  &.govuk-grid-column-one-half-from-desktop {
-    padding: 0;
-  }
-
-  .govuk-button {
-    @include govuk-media-query($from: desktop) {
-      width: 90%;
-    }
-
-    @include govuk-media-query($until: desktop) {
-      margin-bottom: govuk-spacing(4);
-    }
-  }
-}
-
-// Only show accept button if users have js and can accept
-.gem-c-cookie-banner__button-accept {
-  display: none;
-}
-
-.js-enabled .gem-c-cookie-banner__button-accept {
-  display: inline-block;
-}
-
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
@@ -81,51 +46,18 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   }
 }
 
-.gem-c-cookie-banner__hide-button {
-  @include govuk-font($size: 19);
-  outline: 0;
-  border: 0;
-  background: none;
-  text-decoration: underline;
-  color: $govuk-link-colour;
-  padding: govuk-spacing(0);
-  margin-top: govuk-spacing(2);
+// Override style from design system so we can have consistent
+// padding on the the banner and the confirmation
 
-  &:hover {
-    color: $govuk-link-hover-colour;
-    cursor: pointer;
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-
-  @include govuk-media-query($from: desktop) {
-    margin-top: govuk-spacing(0);
-    position: absolute;
-    right: govuk-spacing(1);
-  }
-}
-
-.gem-c-cookie-banner__buttons--flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-
-  .govuk-button,
-  .gem-c-cookie-banner__link {
-    flex-grow: 1;
-    flex-basis: 10rem;
-    margin-right: govuk-spacing(3);
-    margin-bottom: govuk-spacing(3);
-  }
+.govuk-cookie-banner {
+  padding-top: 0;
 }
 
 // Override the styles from govuk_template
 // stylelint-disable selector-max-id
 .gem-c-cookie-banner#global-cookie-message {
   background-color: $govuk-cookie-banner-background;
-  padding: govuk-spacing(4) 0;
+  padding: govuk-spacing(3) 0 0 0;
   box-sizing: border-box;
 
   .gem-c-cookie-banner__message,
@@ -135,18 +67,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     @include govuk-font($size: 19);
   }
 
-  .gem-c-cookie-banner__message {
-    margin-bottom: 0;
-  }
-
   p {
     @include govuk-font($size: 19);
     margin: 0 0 govuk-spacing(2) 0;
   }
 
-  .gem-c-cookie-banner__confirmation-message {
-    @include govuk-media-query($from: desktop) {
-      margin-bottom: 0;
-    }
+  .gem-c-cookie-banner__message,
+  .gem-c-cookie-banner__confirmation {
+    margin-bottom: - govuk-spacing(2);
   }
 }