govuk_publishing_components 24.4.0 → 24.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4d1ec41252338a07ea74058d30230718eeb00761dce65a04735b66f59c75edc
-  data.tar.gz: 2a9a849880b9ac590a9c1139d6aff23d4192ab85fd4263c766601ddda3d3ccb8
+  metadata.gz: 2a7574209e732b2fdc01f77d8655487f1e22717a095577726c8fb3ab73cb5147
+  data.tar.gz: af0f5bb6c5b9639b8879e700cf89b22cc479d3ed44346cc3884d4d5c8261baab
 SHA512:
-  metadata.gz: d4b9e972b59ff07f4ab7d5b58699ac24518c2420a66785f429a65d997ba546be5cdb8974522dbb7e13d96745e3f1eb54d13c8d6e8a5a04b1ef185f23fbd60e85
-  data.tar.gz: 3348baaafb42e9c5e78168a0628c4c1ada2b3087a4e6c990aa890e8ed71597614bf442db7d18fdc95deda650957bdbda339d8c1095947f3ae533d3319b3a874b
+  metadata.gz: '09bbd9e420b9fc045fd8e9d8088bd15a586fb2281d5b639f33ed2d1f5138abf08e899fc06bab4f5f726f308792859e39d156e2355e3e2c486a40548854b32797'
+  data.tar.gz: 6b9fe00e353b48620e520b8507636a79668d02ccd8c1f5f3ac43ee296fd87287c6bd7c1229e13f203d3a18c966a33141c61a40881a2f92ec3abe2a0b5459d10c

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

@@ -293,8 +293,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   // Navigate to and open accordions with anchored content on page load if a hash is present
   GemAccordion.prototype.openByAnchorOnLoad = function () {
-    if (window.location.hash && this.$module.querySelector(window.location.hash)) {
-      this.openForAnchor(window.location.hash)
+    var splitHash = window.location.hash.split('#')[1]
+
+    if (window.location.hash && document.getElementById(splitHash)) {
+      this.openForAnchor(splitHash)
     }
   }
 
@@ -305,20 +307,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     links.forEach(function (link) {
       if (link.pathname === window.location.pathname) {
-        link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
+        link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
       }
     }.bind(this))
   }
 
   // Find the parent accordion section for the given id and open it
   GemAccordion.prototype.openForAnchor = function (hash) {
-    var target = document.querySelector(hash)
+    var target = document.getElementById(hash)
     var section = this.getContainingSection(target)
 
     this.setExpanded(true, section)
   }
 
-  // Loop through the given ids ancestors until the parent section class is found
+  // Loop through the given id's ancestors until the parent section class is found
   GemAccordion.prototype.getContainingSection = function (target) {
     while (!target.classList.contains(this.sectionClass)) {
       target = target.parentElement

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

@@ -1,7 +1,8 @@
 /* eslint-env jquery */
 // = require govuk/components/details/details.js
 window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Details = window.GOVUKFrontend;
 
 (function (Modules) {
   function GovukDetails () { }
@@ -13,7 +14,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // If a custom label has been provided, we can simply call the tracking module
     if (customTrackLabel) {
-      var trackDetails = new window.GOVUK.Modules.TrackClick()
+      var trackDetails = new window.GOVUK.Modules.GemTrackClick()
       trackDetails.start($module)
     } else {
       // If no custom label is set, we use the open/close status as the label

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -0,0 +1,108 @@
+//= require sortablejs/Sortable.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ReorderableList () { }
+
+  ReorderableList.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
+    this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')
+
+    this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
+      chosenClass: 'gem-c-reorderable-list__item--chosen',
+      dragClass: 'gem-c-reorderable-list__item--drag',
+      onSort: function () {
+        this.updateOrderIndexes()
+        this.triggerEvent(this.$module, 'reorder-drag')
+      }.bind(this)
+    })
+
+    if (typeof window.matchMedia === 'function') {
+      this.setupResponsiveChecks()
+    } else {
+      this.sortable.option('disabled', true)
+    }
+
+    var boundOnClickUpButton = this.onClickUpButton.bind(this)
+    this.$upButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickUpButton)
+    })
+
+    var boundOnClickDownButton = this.onClickDownButton.bind(this)
+    this.$downButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickDownButton)
+    })
+  }
+
+  ReorderableList.prototype.setupResponsiveChecks = function () {
+    var tabletBreakpoint = '40.0625em' // ~640px
+    this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
+    this.mediaQueryList.addListener(this.checkMode.bind(this))
+    this.checkMode()
+  }
+
+  ReorderableList.prototype.checkMode = function () {
+    this.sortable.option('disabled', !this.mediaQueryList.matches)
+  }
+
+  ReorderableList.prototype.onClickUpButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var previousItem = item.previousElementSibling
+    if (item && previousItem) {
+      item.parentNode.insertBefore(item, previousItem)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.firstElementChild) {
+        e.target.focus()
+      } else {
+        e.target.nextElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-up')
+  }
+
+  ReorderableList.prototype.onClickDownButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var nextItem = item.nextElementSibling
+    if (item && nextItem) {
+      item.parentNode.insertBefore(item, nextItem.nextElementSibling)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.lastElementChild) {
+        e.target.focus()
+      } else {
+        e.target.previousElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-down')
+  }
+
+  ReorderableList.prototype.updateOrderIndexes = function () {
+    var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
+    $orderInputs.forEach(function (input, index) {
+      input.setAttribute('value', index + 1)
+    })
+  }
+
+  ReorderableList.prototype.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, cancelable: true }
+    var event
+
+    if (typeof window.CustomEvent === 'function') {
+      event = new window.CustomEvent(eventName, params)
+    } else {
+      event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+    }
+
+    element.dispatchEvent(event)
+  }
+
+  Modules.ReorderableList = ReorderableList
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 // used by the header navigation from govuk_template
 
 (function () {
@@ -14,6 +16,8 @@
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')
+        var showText = this.getAttribute('data-show-text') || 'Show search'
+        var hideText = this.getAttribute('data-hide-text') || 'Hide search'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (isSearchToggle) {
-            this.innerText = 'Show search'
+            this.innerText = showText
           }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
           if (isSearchToggle) {
-            this.innerText = 'Hide search'
+            this.innerText = hideText
           }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -40,7 +40,9 @@
           module = new GOVUK.Modules[moduleName]()
           module.start(element)
           element.data('module-started', true)
-        } else if ( // GOV.UK Frontend Modules
+        }
+
+        if ( // GOV.UK Frontend Modules
           typeof GOVUK.Modules[frontendModuleName] === 'function' &&
           GOVUK.Modules[frontendModuleName].prototype.init &&
           !started

data/app/assets/stylesheets/component_guide/application.scss

@@ -148,7 +148,7 @@ $gem-guide-border-width: 1px;
 
 .component-guide-preview--simple {
   border: 0;
-  padding: 0;
+  padding: govuk-spacing(2);
 
   &:before {
     display: none;

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

@@ -56,6 +56,7 @@
 @import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
+@import "components/reorderable-list";
 @import "components/search";
 @import "components/select";
 @import "components/share-links";

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

@@ -1,7 +1,7 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
-@import "components/helpers/govuk-frontend-settings";
+@import "govuk_frontend_support";
 
 @import "components/print/accordion";
 @import "components/print/attachment";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -1,4 +1,13 @@
 .gem-c-layout-for-public {
-  margin: 0;
   font-family: $govuk-font-family;
 }
+
+.gem-c-layout-for-public__blue-bar {
+  background: $govuk-brand-colour;
+  height: govuk-spacing(2);
+}
+
+.js-enabled .gem-c-layout-for-public__global-banner-wrapper {
+  margin-top: - govuk-spacing(2);
+  position: relative;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -78,12 +78,14 @@
   }
 }
 
-.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
-.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
-.gem-c-layout-header__search.govuk-grid-column-one-third,
-.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
-  padding-right: 0;
-  padding-left: 0;
+@include govuk-compatibility(govuk_template) {
+  .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
+  .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
+  .gem-c-layout-header__search.govuk-grid-column-one-third,
+  .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 .gem-c-layout-header__logo,
@@ -104,7 +106,6 @@
 
 .gem-c-header__content.govuk-header__content {
   width: auto;
-  padding-left: 0;
 
   @include govuk-media-query($from: desktop) {
     float: right;

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

@@ -0,0 +1,117 @@
+.gem-c-reorderable-list {
+  @include govuk-font(19, bold);
+
+  list-style-type: none;
+  margin-bottom: govuk-spacing(6);
+  margin-top: 0;
+  padding-left: 0;
+  position: relative;
+
+  .govuk-form-group {
+    margin-bottom: 0;
+  }
+}
+
+.gem-c-reorderable-list__item {
+  margin-bottom: govuk-spacing(3);
+  border: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(3);
+}
+
+.gem-c-reorderable-list__item--chosen {
+  background-color: govuk-colour('light-grey');
+  outline: 2px dotted $govuk-border-colour;
+}
+
+.gem-c-reorderable-list__item--drag {
+  background-color: govuk-colour('white');
+  list-style-type: none;
+
+  .gem-c-reorderable-list__actions {
+    visibility: hidden;
+  }
+}
+
+.gem-c-reorderable-list__wrapper {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    display: inline-flex;
+    width: 100%;
+  }
+}
+
+.gem-c-reorderable-list__content {
+  margin-bottom: govuk-spacing(2);
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: 0;
+    flex: 0 1 auto;
+    min-width: 65%;
+  }
+}
+
+.gem-c-reorderable-list__title {
+  margin: 0;
+}
+
+.gem-c-reorderable-list__description {
+  @include govuk-font(16, regular);
+  margin: 0;
+}
+
+.gem-c-reorderable-list__actions {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    flex: 1 0 auto;
+    text-align: right;
+  }
+
+  .gem-c-button {
+    display: none;
+  }
+}
+
+.js-enabled {
+  .gem-c-reorderable-list__item {
+    @include govuk-media-query($from: desktop) {
+      cursor: move;
+    }
+  }
+
+  .gem-c-reorderable-list__actions .govuk-form-group {
+    display: none;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button {
+    display: inline-block;
+    margin-left: govuk-spacing(3);
+    width: 80px;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
+  .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
+    display: none;
+
+    @include govuk-media-query($from: desktop) {
+      display: inline-block;
+      visibility: hidden;
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+}

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

@@ -9,7 +9,6 @@ $large-input-size: 50px;
 .gem-c-search__label {
   @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
-  background: govuk-colour("white");
   color: $govuk-text-colour;
 
   h1 {
@@ -25,6 +24,7 @@ $large-input-size: 50px;
     padding-left: govuk-spacing(3);
     z-index: 1;
     color: $govuk-secondary-text-colour;
+    background: govuk-colour("white");
   }
 
   // match label colour with the label component colour
@@ -144,6 +144,10 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--on-govuk-blue {
+  .gem-c-search__label {
+    color: govuk-colour("white");
+  }
+
   .gem-c-search__input {
     border-width: 0;
 
@@ -191,9 +195,19 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--no-border {
+  .gem-c-search__label {
+    color: govuk-colour("white");
+  }
+
   .gem-c-search__input[type="search"] {
     border: 0;
   }
+
+  .js-enabled & {
+    .gem-c-search__label {
+      color: $govuk-secondary-text-colour;
+    }
+  }
 }
 
 .gem-c-search--large {