govuk_publishing_components 28.4.0 → 28.7.1

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

@@ -1,330 +1,2 @@
 @import "mixins/prefixed-transform";
-
-$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 {
-  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;
-    }
-  }
-
-  // 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: govuk-em(20, 14);
-    height: govuk-em(20, 14);
-    margin-left: govuk-em(5, 14);
-    border: govuk-em(1, 14) solid;
-    border-radius: govuk-em(100, 14);
-
-    // Main icon size across views, yet keep responsive for zoom
-    @include govuk-media-query($from: tablet) {
-      width: govuk-em(20, 16);
-      height: govuk-em(20, 16);
-      margin-left: govuk-em(5, 16);
-      border: govuk-em(1, 16) solid;
-    }
-
-    &:after {
-      @include prefixed-transform($rotate: -45deg);
-      content: "";
-      display: block;
-      box-sizing: border-box;
-      position: absolute;
-      overflow: visible;
-      width: govuk-em(6, 14);
-      height: govuk-em(6, 14);
-      border-top: govuk-em(2, 14) solid;
-      border-right: govuk-em(2, 14) solid;
-      left: govuk-em(6, 14);
-      bottom: govuk-em(5, 14);
-
-      @include govuk-media-query($from: tablet) {
-        width: govuk-em(6, 16);
-        height: govuk-em(6, 16);
-        border-top: govuk-em(2, 16) solid;
-        border-right: govuk-em(2, 16) solid;
-        left: govuk-em(6, 16);
-        bottom: govuk-em(5, 16);
-      }
-    }
-  }
-
-  .gem-c-accordion__open-all:hover,
-  .gem-c-accordion__section-button:hover {
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-link-hover-colour;
-      text-decoration: none;
-    }
-  }
-
-  // Focus state, also to change chervon icon to black
-  .gem-c-accordion__open-all:focus {
-    .gem-c-accordion-nav__chevron {
-      color: $govuk-focus-text-colour;
-      text-decoration: none;
-    }
-  }
-
-  // Rotate icon to create "Down" version
-  .gem-c-accordion-nav__chevron--down {
-    @include prefixed-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%;
-
-    &:hover {
-      color: $govuk-link-hover-colour;
-    }
-
-    &: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: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 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;
-    }
-  }
-
-  .gem-c-accordion__toggle-text {
-    display: inline-block;
-    // Setting width of the text so the icon doesn't shift left or right when
-    // toggled:
-    min-width: govuk-em(40, 16);
-  }
-
-  // On hover add underline to toggle link only:
-  .gem-c-accordion__section-button:hover .gem-c-accordion__toggle-text {
-    color: $govuk-link-hover-colour;
-    @include govuk-link-decoration;
-    @include govuk-link-hover-decoration;
-  }
-
-  // Ensure the correct focus sstate text colour and no underline:
-  .gem-c-accordion__section-button:focus .gem-c-accordion__toggle-text {
-    color: $govuk-focus-text-colour;
-    text-decoration: none;
-  }
-
-  .gem-c-accordion__open-all-text {
-    min-width: govuk-em(120, 16);
-    display: inline-block;
-    text-align: left;
-  }
-
-  .gem-c-accordion__open-all:hover {
-    .gem-c-accordion__open-all-text {
-      @include govuk-link-decoration;
-      @include govuk-link-hover-decoration;
-    }
-  }
-
-  .gem-c-accordion__open-all:focus .gem-c-accordion__open-all-text {
-    text-decoration: none;
-  }
-
-  // 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 {
-      @include prefixed-transform($scale: .875);
-      width: govuk-em(20, 14);
-      height: govuk-em(20, 14);
-      margin-left: govuk-em(5, 14);
-      border: govuk-em(1, 14) solid;
-      border-radius: govuk-em(100, 14);
-
-      &:after {
-        width: govuk-em(6, 14);
-        height: govuk-em(6, 14);
-        border-top: govuk-em(2, 14) solid;
-        border-right: govuk-em(2, 14) solid;
-        left: govuk-em(6, 14);
-        bottom: govuk-em(5, 14);
-      }
-    }
-
-    .gem-c-accordion-nav__chevron--down {
-      @include prefixed-transform($rotate: 180deg, $scale: .875);
-    }
-
-    .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);
-    }
-  }
-}
+@import "govuk/components/accordion/accordion";

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -12,11 +12,11 @@ $share-button-height: 30px;
   position: relative;
   display: inline-block;
   min-height: $share-button-height;
+  padding-top: govuk-spacing(1);
   padding-left: ($share-button-width + govuk-spacing(2));
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
   font-size: $share-button-height / 2;
-  line-height: $share-button-height;
 }
 
 .gem-c-share-links__link {

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -63,6 +63,54 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   padding: 3px 3px 0 0;
 }
 
+.gem-c-step-nav____title-text-focus {
+  margin-bottom: 13px;
+  display: inline-block;
+}
+
+// Create Chevron icon aligned with text
+.gem-c-step-nav__chevron {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  // 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: text-top;
+
+  // Reduce size, alter alignment
+  .gem-c-step-nav--large & {
+    vertical-align: top;
+  }
+
+  // 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); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+    -ms-transform: rotate(-45deg); /* IE 9 */
+    transform: rotate(-45deg);
+    border-top: govuk-px-to-rem(2px) solid;
+    border-right: govuk-px-to-rem(2px) solid;
+  }
+}
+
+// Rotate icon to create "Down" version
+.gem-c-step-nav__chevron--down {
+  -webkit-transform: rotate(180deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+  -ms-transform: rotate(180deg); /* IE 9 */
+  transform: rotate(180deg);
+}
+
 .gem-c-step-nav__button {
   color: $govuk-link-colour;
   cursor: pointer;
@@ -70,8 +118,43 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   border: 0;
   margin: 0;
 
+  &:hover {
+    background: govuk-colour("light-grey");
+    // Chevron icon interaction states
+    .gem-c-step-nav__chevron {
+      color: govuk-colour("black");
+      background: govuk-colour("black");
+    }
+
+    .gem-c-step-nav__chevron:after {
+      color: govuk-colour("light-grey");
+    }
+
+    .gem-c-step-nav__button-text {
+      color: $govuk-text-colour;
+    }
+  }
+
   &:focus {
-    @include govuk-focused-text;
+    outline: 0;
+    // Chevron icon interaction states
+    .gem-c-step-nav__chevron {
+      color: govuk-colour("black");
+      background: govuk-colour("black");
+    }
+
+    .gem-c-step-nav__chevron:after {
+      color: $govuk-focus-colour;
+    }
+
+    .gem-c-step-nav____title-text-focus,
+    .gem-c-step-nav__toggle-link-focus {
+      @include govuk-focused-text;
+    }
+
+    .gem-c-step-nav__toggle-link-focus {
+      padding-bottom: 2px;
+    }
   }
 }
 
@@ -90,42 +173,27 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   width: 100%;
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
+    @include step-nav-font(19, $tablet-size: 24, $weight: bold);
 
     @include govuk-media_query($from: tablet) {
       padding-top: govuk-spacing(2);
     }
   }
-
-  &:focus {
-    box-shadow: 0 -4px govuk-colour("black");
-
-    .gem-c-step-nav__toggle-link {
-      color: govuk-colour("black");
-    }
-
-    @include step-nav-chevron-focus-state;
-  }
 }
 
 .gem-c-step-nav__button--controls {
-  @include step-nav-font(14, $line-height: 1);
+  @include step-nav-font(15);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
-  margin: .5em 0 1.5em;
-  padding: 0 0 govuk-spacing(1);
-
-  &:hover .gem-c-step-nav__button-text {
-    @include govuk-link-decoration;
-    @include govuk-link-hover-decoration;
-  }
+  margin: .5em 0 14px;
+  padding: govuk-spacing(1) 0 govuk-spacing(1);
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
+    @include step-nav-font(15, $tablet-size: 19);
   }
 
   &:focus {
-    @include step-nav-chevron-focus-state;
+    @include govuk-focused-text;
 
     .gem-c-step-nav__button-text {
       text-decoration: none;
@@ -133,32 +201,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 }
 
-.gem-c-step-nav__title-text {
-  display: block;
-  margin-bottom: govuk-spacing(1);
-}
-
-.gem-c-step-nav__chevron {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: govuk-em(5, 14);
-
-  .gem-c-step-nav--large & {
-    margin-left: govuk-em(5, 16);
-  }
-
-  svg {
-    pointer-events: none;
-  }
-}
-
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
   min-width: govuk-em(35, 14);
+  margin-left: govuk-spacing(1);
 
   .gem-c-step-nav--large & {
     min-width: govuk-em(40, 16);
+    margin-left: govuk-spacing(1);
   }
 }
 
@@ -272,7 +323,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 25px, $tablet-line-height: 34px);
+    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 29px, $tablet-line-height: 34px);
   }
 
   .gem-c-step-nav__step--active & {
@@ -335,18 +386,6 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--active & {
     cursor: pointer;
   }
-
-  &:hover {
-    .gem-c-step-nav__button:not(:focus),
-    .gem-c-step-nav__circle {
-      color: $govuk-link-colour;
-    }
-
-    .gem-c-step-nav__button-text {
-      @include govuk-link-decoration;
-      @include govuk-link-hover-decoration;
-    }
-  }
 }
 
 .gem-c-step-nav__title {
@@ -360,14 +399,14 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__toggle-link {
-  @include step-nav-font(14, $line-height: 1.2);
+  @include step-nav-font(15, $line-height: 1.2);
   display: block;
   color: $govuk-link-colour;
   text-transform: capitalize;
   padding-bottom: govuk-spacing(6);
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
+    @include step-nav-font(15, $tablet-size: 19, $line-height: 1.2);
   }
 }
 

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

@@ -6,34 +6,23 @@
 @import "../accordion";
 
 // Open all of the accordion sections.
-.gem-c-accordion__section-content {
+.govuk-accordion__section-content {
   display: block !important; // stylelint-disable-line declaration-no-important
 }
 
 // Change the colour from the blue link colour to black.
-.gem-c-accordion__section-button {
+.govuk-accordion__section-button {
   color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
 }
 
-// Removing spacing
-.gem-c-accordion__section-header {
-  padding-bottom: govuk-spacing(1);
-}
-
 // Change the summary subheading size.
-.gem-c-accordion__section-summary {
+.govuk-accordion__section-summary {
   @include govuk-typography-common;
   @include govuk-typography-responsive($size: 16, $important: true);
 }
 
-// Hide the unusable "Show all sections" button and the "Chevron" icons.
-.gem-c-accordion__open-all,
-.gem-c-accordion__icon,
-.gem-c-accordion__toggle-link {
-  display: none !important; // stylelint-disable-line declaration-no-important
-}
-
-// Hide all hidden content
-.gem-c-accordion .govuk-visually-hidden {
+// Hide the unusable "Open all" button and the "+" icons.
+.govuk-accordion__open-all,
+.govuk-accordion__icon {
   display: none !important; // stylelint-disable-line declaration-no-important
 }

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

@@ -17,12 +17,3 @@ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;
-
-$govuk-colours-organisations: map-merge(
-  $govuk-colours-organisations,
-  (
-    "department-for-levelling-up-housing-and-communities": (
-      colour: #012169,
-    ),
-  )
-);

data/app/models/govuk_publishing_components/component_docs.rb

@@ -45,7 +45,7 @@ module GovukPublishingComponents
     end
 
     def parse_documentation(file)
-      { id: File.basename(file, ".yml") }.merge(YAML.load_file(file)).with_indifferent_access
+      { id: File.basename(file, ".yml") }.merge(YAML.unsafe_load_file(file)).with_indifferent_access
     end
 
     def app_documentation_directory