govuk_publishing_components 28.5.0 → 28.6.0

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -4,10 +4,8 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function MagnaCharta () { }
-
-  MagnaCharta.prototype.start = function ($module, options) {
-    this.$module = $module[0]
+  function MagnaCharta ($module, options) {
+    this.$table = $module
     this.options = {
       outOf: 65,
       applyOnInit: true,
@@ -22,14 +20,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     for (var k in options) this.options[k] = options[k]
+  }
+
+  MagnaCharta.prototype.init = function () {
     this.detectIEVersion()
 
     // Magna Charta doesn't work in IE7 or less - so plain tables are shown to those browsers
     this.ENABLED = !(this.ie && this.ie < 8)
 
-    // store a reference to the table in the object
-    this.$table = $module
-
     // a container around the graph element so that it can be targeted by screen readers, allowing us to inform screen reader users that the graph isn't accessible
     this.$graphContainer = document.createElement('div')
     this.$graphContainer.className = 'mc-chart-container'
@@ -47,7 +45,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$graph.classList.add('mc-chart')
 
     // get the id of the current chart within the page so that it can be used during the generation of the toggleLink
-    this.chartId = this.getChartId($module)
+    this.chartId = this.getChartId()
 
     // set the stacked option based on
     // giving the table a class of mc-stacked
@@ -458,12 +456,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  MagnaCharta.prototype.getChartId = function (module) {
+  MagnaCharta.prototype.getChartId = function () {
     var allCharts = document.querySelectorAll('table.js-barchart-table')
     var id = null
 
     for (var i = 0; i < allCharts.length; i++) {
-      if (allCharts[i] === module) {
+      if (allCharts[i] === this.$table) {
         id = i
       }
     }

data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js

@@ -2,10 +2,11 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function InitialFocus () { }
+  function InitialFocus ($module) {
+    this.$module = $module
+  }
 
-  InitialFocus.prototype.start = function ($module) {
-    this.$module = $module[0]
+  InitialFocus.prototype.init = function () {
     this.$module.focus()
   }
 

data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js

@@ -7,10 +7,11 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function GemToggleInputClassOnFocus () { }
+  function GemToggleInputClassOnFocus ($module) {
+    this.$module = $module
+  }
 
-  GemToggleInputClassOnFocus.prototype.start = function ($module) {
-    this.$module = $module[0]
+  GemToggleInputClassOnFocus.prototype.init = function () {
     this.toggleTarget = this.$module.querySelector('.js-class-toggle')
     this.$module.addFocusClass = this.addFocusClass.bind(this)
     this.$module.removeFocusClassFromEmptyInput = this.removeFocusClassFromEmptyInput.bind(this)

data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js

@@ -87,10 +87,11 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function GemToggle () { }
+  function GemToggle ($module) {
+    this.$module = $module
+  }
 
-  GemToggle.prototype.start = function ($module) {
-    this.$module = $module[0]
+  GemToggle.prototype.init = function () {
     this.$module.toggleTrigger = this.$module.querySelector('[data-controls][data-expanded]')
 
     if (this.$module.toggleTrigger) {

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);
   }
 }