govuk_publishing_components 28.2.0 → 28.6.0

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -40,15 +40,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
     }
 
-    this.$module.upChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499998 10C0.499999 4.7533 4.7533 0.500001 10 0.500002C15.2467 0.500003 19.5 4.7533 19.5 10Z" stroke="#1D70B8"/>' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M6.32617 12.3262L10 8.65234L13.6738 12.3262" stroke="#1D70B8" stroke-width="2"/>' +
-      '</svg>'
-    this.$module.downChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M0.499997 10C0.499998 4.75329 4.75329 0.499999 10 0.499999C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499997 10Z" stroke="#1D70B8"/>' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M13.6738 8.67383L10 12.3477L6.32617 8.67383" stroke="#1D70B8" stroke-width="2"/>' +
-      '</svg>'
-
     var stepNavTracker = new this.StepNavTracker(this.$module.uniqueId, this.$module.totalSteps, this.$module.totalLinks)
 
     this.getTextForInsertedElements()
@@ -73,16 +64,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
-    var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
-    showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
-      '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
-      '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
-      '</button>'
-
+    var showAll = document.createElement('div')
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
-    this.$module.insertBefore(showall, steps)
 
+    showAll.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
+    showAll.innerHTML =
+      '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
+        '<span class="gem-c-step-nav__chevron gem-c-step-nav__chevron--down js-step-controls-button-icon"></span>' +
+          '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' +
+            this.$module.actions.showAllText +
+          '</span>' +
+      '</button>'
+
+    this.$module.insertBefore(showAll, steps)
     this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
   }
 
@@ -91,30 +85,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var thisel = this.$module.stepHeaders[i]
 
       if (!thisel.querySelectorAll('.js-toggle-link').length) {
-        var span = document.createElement('span')
         var showHideSpan = document.createElement('span')
         var showHideSpanText = document.createElement('span')
         var showHideSpanIcon = document.createElement('span')
-        var commaSpan = document.createElement('span')
+        var showHideSpanFocus = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
         showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
-        commaSpan.className = 'govuk-visually-hidden'
+        showHideSpanFocus.className = 'gem-c-step-nav__toggle-link-focus'
         thisSectionSpan.className = 'govuk-visually-hidden'
 
-        showHideSpan.appendChild(showHideSpanText)
-        showHideSpan.appendChild(showHideSpanIcon)
+        showHideSpan.appendChild(showHideSpanFocus)
+        showHideSpanFocus.appendChild(showHideSpanIcon)
+        showHideSpanFocus.appendChild(showHideSpanText)
 
-        commaSpan.innerHTML = ', '
         thisSectionSpan.innerHTML = ' this section'
+        showHideSpan.appendChild(thisSectionSpan)
 
-        span.appendChild(commaSpan)
-        span.appendChild(showHideSpan)
-        span.appendChild(thisSectionSpan)
-
-        thisel.querySelectorAll('.js-step-title-button')[0].appendChild(span)
+        thisel.querySelectorAll('.js-step-title-button')[0].appendChild(showHideSpan)
       }
     }
   }
@@ -125,6 +115,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addAriaControlsAttrForShowHideAllButton = function () {
     var ariaControlsValue = this.$module.querySelectorAll('.js-panel')[0].getAttribute('id')
+
     this.$module.showOrHideAllButton.setAttribute('aria-controls', ariaControlsValue)
   }
 
@@ -184,7 +175,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
-              '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
+              '<span class="gem-c-step-nav____title-text-focus">' +
+                  '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
+                  '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
+              '</span>' +
           '</button>' +
         '</span>'
     }
@@ -358,12 +352,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.setShowHideAllText = function () {
     var shownSteps = this.$module.querySelectorAll('.step-is-shown').length
-
+    var showAllChevon = this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-icon')
+    var showAllButtonText = this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-text')
     // Find out if the number of is-opens == total number of steps
     var shownStepsIsTotalSteps = shownSteps === this.$module.totalSteps
 
-    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-text').innerHTML = shownStepsIsTotalSteps ? this.$module.actions.hideAllText : this.$module.actions.showAllText
-    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-icon').innerHTML = shownStepsIsTotalSteps ? this.$module.upChevronSvg : this.$module.downChevronSvg
+    if (shownStepsIsTotalSteps) {
+      showAllButtonText.innerHTML = this.$module.actions.hideAllText
+      showAllChevon.classList.remove('gem-c-step-nav__chevron--down')
+    } else {
+      showAllButtonText.innerHTML = this.$module.actions.showAllText
+      showAllChevon.classList.add('gem-c-step-nav__chevron--down')
+    }
   }
 
   Gemstepnav.prototype.StepView = function (stepElement, $module) {
@@ -391,19 +391,22 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     this.setIsShown = function (isShown) {
+      var toggleLink = this.stepElement.querySelectorAll('.js-toggle-link')[0]
+      var toggleLinkText = toggleLink.querySelector('.js-toggle-link-text')
+      var stepChevron = toggleLink.querySelector('.js-toggle-link-icon')
+
       if (isShown) {
         this.stepElement.classList.add('step-is-shown')
         this.stepContent.classList.remove('js-hidden')
+        toggleLinkText.innerHTML = this.hideText
+        stepChevron.classList.remove('gem-c-step-nav__chevron--down')
       } else {
         this.stepElement.classList.remove('step-is-shown')
         this.stepContent.classList.add('js-hidden')
+        toggleLinkText.innerHTML = this.showText
+        stepChevron.classList.add('gem-c-step-nav__chevron--down')
       }
-
       this.titleButton.setAttribute('aria-expanded', isShown)
-      var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
-
-      showHideText.querySelector('.js-toggle-link-text').innerHTML = isShown ? this.hideText : this.showText
-      showHideText.querySelector('.js-toggle-link-icon').innerHTML = isShown ? this.upChevronSvg : this.downChevronSvg
     }
 
     this.isShown = function () {

data/app/assets/javascripts/govuk_publishing_components/components/tabs.js

@@ -2,4 +2,4 @@
 // = require govuk/components/tabs/tabs.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukTabs = window.GOVUKFrontend
+window.GOVUK.Modules.GovukTabs = window.GOVUKFrontend.Tabs

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js

@@ -2,7 +2,7 @@
 
 window.GOVUK = window.GOVUK || {};
 
-(function (GOVUK, $) {
+(function (GOVUK) {
   'use strict'
 
   var BarchartEnhancement = function ($element) {
@@ -24,10 +24,11 @@ window.GOVUK = window.GOVUK || {};
 
     for (var i = 0; i < $barcharts.length; i++) {
       var $table = $barcharts[i]
-      new GOVUK.Modules.MagnaCharta().start($table, { toggleText: 'Change between chart and table' })
+      var magna = new GOVUK.Modules.MagnaCharta($table, { toggleText: 'Change between chart and table' })
+      magna.init()
       $table.className = $table.className + ' js-barchart-table-init'
     }
   }
 
   GOVUK.GovspeakBarchartEnhancement = BarchartEnhancement
-}(window.GOVUK, window.jQuery))
+}(window.GOVUK))

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/_big-number.scss

@@ -1,12 +1,11 @@
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
-  @include govuk-typography-common;
   @include govuk-text-colour;
 }
 
 .gem-c-big-number__value {
+  @include govuk-font($size: false, $weight: bold);
   font-size: 80px;
-  @include govuk-typography-weight-bold;
   line-height: 1;
 
   @if $govuk-typography-use-rem {
@@ -55,3 +54,7 @@
     }
   }
 }
+
+.gem-c-big-number__suffix {
+  vertical-align: middle;
+}

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

@@ -1,5 +1,4 @@
 $transition-campaign-red: #ff003b;
-$covid-colour: $govuk-link-colour;
 
 .gem-c-contextual-sidebar__related-links {
   border-top: 2px solid $govuk-brand-colour;
@@ -30,7 +29,3 @@ $covid-colour: $govuk-link-colour;
 .gem-c-contextual-sidebar__cta--brexit {
   border-top: 2px solid $transition-campaign-red;
 }
-
-.gem-c-contextual-sidebar__cta--covid {
-  border-top: 2px solid $covid-colour;
-}