govuk_publishing_components 58.1.1 → 59.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2fbc187d41fb43b4005ecda265842cd3c9dde603272971d6429d674a4fe99d3
-  data.tar.gz: 17a7f6abba141f6fbb5e12520c8195fedebae2ae55efbe721857431aadefa76c
+  metadata.gz: 0a7deb8c0427383f676b2db0de3d2ec37c210ce6715e88288a4560379c1b26b0
+  data.tar.gz: 3a5f6ab35ca230632d632f724644aaabdea9b32f2c5018c650574d4a7b92e0fb
 SHA512:
-  metadata.gz: d296de9af1c9e495442d31f08bdf5107e657abb510d09e1362d526d741e4f47521cceb2707195d5bca801cfc56ba17d5f8c612da99cb1b0519dd4da457ee5f6e
-  data.tar.gz: 53ed8e3164202b9d51541016ec88d460559856d78814a01ddea790b5f93858ec485ef02561ad6f08349527121e21e942a60790fd6e72bff42ac73755a8150e50
+  metadata.gz: 309714e09e0634fa9204c6f73a20fbe6182b636282d2abb83f74d031a602448f9702b99f17d5cf3a34fd5ccd716c3cc034c273e8e1650def579b0d0d89aae1d2
+  data.tar.gz: 036cf76ecc9826028954ac1baaf9b200766da065ea1905c2a87018e03b1d5a530b502f5b161c767ba9c6e4c3fddc22f4a91eeeb1a271986836b6f3e91e10168b

data/app/assets/images/select-with-search/cross-icon.svg

@@ -0,0 +1,6 @@
+<svg width='21' height='21' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'>
+  <g fill='#000' fill-rule='evenodd'>
+    <path d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z' />
+    <path d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z' />
+  </g>
+</svg>

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-search-tracker.js

@@ -9,6 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$module = $module
       this.$searchInput = this.$module.querySelector('input[type="search"]')
 
+      this.searchInputName = this.$module.dataset.ga4SearchInputName
       this.type = this.$module.dataset.ga4SearchType
       this.url = this.$module.dataset.ga4SearchUrl
       this.section = this.$module.dataset.ga4SearchSection
@@ -44,6 +45,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     setTriggeredAction (event) {
       if (event.target.type === 'search') {
+        // if `searchInputName` set then only set `triggeredAction` to `search`
+        // if changed `input[type=search]` matches `input[name=searchInputName]`
+        if (this.searchInputName && event.target.name !== this.searchInputName) return
         this.triggeredAction = 'search'
       } else if (this.triggeredAction !== 'search') {
         // The 'search' action always takes precedence over the 'filter' action, so only set the

data/app/assets/javascripts/govuk_publishing_components/components/select-with-search.js

@@ -0,0 +1,57 @@
+//= require choices.js/public/assets/scripts/choices.min.js
+'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+;(function (Modules) {
+  function SelectWithSearch (module) {
+    this.module = module
+  }
+
+  SelectWithSearch.prototype.init = function () {
+    if (!this.module.matches('select')) {
+      console.error('Module is not a select element')
+      return
+    }
+
+    const placeholderOption = this.module.querySelector(
+      'option[value=""]:first-child'
+    )
+
+    if (placeholderOption && placeholderOption.textContent === '') {
+      placeholderOption.textContent = this.module.multiple
+        ? 'Select all that apply'
+        : 'Select one'
+    }
+
+    const ariaDescribedBy = this.module.getAttribute('aria-describedby') || ''
+
+    this.choices = new window.Choices(this.module, {
+      allowHTML: true,
+      searchPlaceholderValue: 'Search in list',
+      shouldSort: false, // show options and groups in the order they were given
+      itemSelectText: '',
+      searchResultLimit: 100,
+      removeItemButton: this.module.multiple,
+      labelId: this.module.id + '-label ' + ariaDescribedBy,
+      callbackOnInit: function () {
+        // For the multiple select, move the input field to
+        // the top of the feedback area, so that the selected
+        // 'lozenges' appear afterwards in a more natural flow
+        if (this.dropdown.type === 'select-multiple') {
+          const inner = this.containerInner.element
+          const input = this.input.element
+          inner.prepend(input)
+        }
+      },
+      // https://fusejs.io/api/options.html
+      fuseOptions: {
+        ignoreLocation: true, // matches any part of the string
+        threshold: 0 // only matches when characters are sequential
+      }
+    })
+
+    this.module.choices = this.choices
+  }
+
+  Modules.SelectWithSearch = SelectWithSearch
+})(window.GOVUK.Modules)

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

@@ -75,6 +75,7 @@
 @import "components/search";
 @import "components/secondary-navigation";
 @import "components/select";
+@import "components/select-with-search";
 @import "components/service-navigation";
 @import "components/share-links";
 @import "components/signup-link";
@@ -90,6 +91,7 @@
 @import "components/summary-list";
 @import "components/tabs";
 @import "components/table";
+@import "components/tag";
 @import "components/textarea";
 @import "components/translation-nav";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -3,27 +3,28 @@
 .gem-c-action-link {
   display: table;
 
+  @include govuk-media-query($until: tablet) {
+    max-width: 410px;
+  }
+
   &::before {
     content: "";
     display: table-cell;
-    width: 60px;
-    height: 45px;
-    background: url("govuk_publishing_components/action-link-arrow.svg");
+    width: 36px;
+    height: 28px;
+    background: url("govuk_publishing_components/action-link-arrow--light.svg");
     background-repeat: no-repeat;
-    background-position: 0 50%;
-    background-size: 45px auto;
-  }
+    background-size: 28px auto;
+    background-position: 0 0;
 
-  @include govuk-media-query($until: tablet) {
-    max-width: 410px;
+    @include govuk-media-query($from: tablet) {
+      width: 45px;
+      height: 35px;
+      background-size: 35px auto;
+    }
   }
 }
 
-.gem-c-action-link__contents-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .gem-c-action-link__link-wrapper {
   display: table-cell;
   vertical-align: middle;
@@ -39,59 +40,6 @@
   }
 }
 
-.gem-c-action-link__nowrap-text {
-  white-space: nowrap;
-}
-
-.gem-c-action-link--with-subtext {
-  max-width: none;
-
-  .gem-c-action-link__link-wrapper,
-  .gem-c-action-link__subtext-wrapper {
-    display: block;
-
-    @include govuk-media-query($from: tablet) {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-}
-
-.gem-c-action-link--mobile-subtext {
-  .gem-c-action-link__subtext-wrapper {
-    display: block;
-  }
-
-  .gem-c-action-link__subtext {
-    padding: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-
-.gem-c-action-link__subtext {
-  display: block;
-  color: inherit;
-  @include govuk-font(19);
-
-  @include govuk-media-query($from: tablet) {
-    position: relative;
-    padding-left: govuk-spacing(4);
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 10%;
-      left: govuk-spacing(2);
-      width: govuk-spacing(2);
-      height: 80%;
-      border-left: solid 1px $govuk-text-colour;
-    }
-  }
-}
-
 .gem-c-action-link--simple {
   &::before {
     width: 30px;
@@ -103,76 +51,6 @@
   }
 }
 
-.gem-c-action-link--simple-light {
-  &::before {
-    width: 30px;
-    height: 30px;
-    background: url("govuk_publishing_components/action-link-arrow--simple-light.svg");
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 2px;
-  }
-}
-
-.gem-c-action-link--dark-large-icon {
-  &::before {
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
-    height: 34px;
-    width: 40px;
-    background-repeat: no-repeat;
-    background-size: 32px auto;
-    background-position: 0 2px;
-  }
-
-  @include govuk-media-query($until: tablet) {
-    margin-bottom: govuk-spacing(2);
-  }
-}
-
-.gem-c-action-link--light-icon {
-  &::before {
-    width: 36px;
-    height: 28px;
-    background: url("govuk_publishing_components/action-link-arrow--light.svg");
-    background-repeat: no-repeat;
-    background-size: 28px auto;
-    background-position: 0 0;
-
-    @include govuk-media-query($from: tablet) {
-      width: 45px;
-      height: 35px;
-      background-size: 35px auto;
-    }
-  }
-}
-
-.gem-c-action-link--dark-icon {
-  max-width: none;
-
-  @include govuk-media-query($until: tablet) {
-    margin-bottom: govuk-spacing(2);
-  }
-
-  &::before {
-    height: 30px;
-    width: 35px;
-    background: url("govuk_publishing_components/action-link-arrow--dark.svg");
-    background-repeat: no-repeat;
-    background-size: 25px auto;
-    background-position: 0 2px;
-  }
-}
-
-.gem-c-action-link--inverse {
-  color: govuk-colour("white");
-
-  .gem-c-action-link__subtext {
-    &::before {
-      border-color: govuk-colour("white");
-    }
-  }
-}
-
 @include govuk-media-query($media-type: print) {
   .gem-c-action-link {
     * {

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

@@ -5,11 +5,6 @@
   margin: 0;
 }
 
-.gem-c-heading--font-size-27 {
-  @include govuk-text-colour;
-  @include govuk-font(27, $weight: bold);
-}
-
 .gem-c-heading--padding {
   padding: govuk-spacing(3) 0;
 }

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

@@ -2,24 +2,6 @@
 @import "govuk_publishing_components/components/search";
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
-@import "govuk/components/tag/tag";
-
-.gem-c-layout-header--production .govuk-header__container {
-  border-bottom-color: govuk-colour("red");
-}
-
-.gem-c-layout-header--integration .govuk-header__container,
-.gem-c-layout-header--staging .govuk-header__container {
-  border-bottom-color: govuk-colour("yellow");
-}
-
-.gem-c-layout-header--example .govuk-header__container {
-  border-bottom-color: govuk-colour("bright-purple");
-}
-
-.gem-c-layout-header--development .govuk-header__container {
-  border-bottom-color: govuk-colour("dark-grey");
-}
 
 .gem-c-layout-header--no-bottom-border,
 .gem-c-layout-header--no-bottom-border .govuk-header__container {
@@ -76,6 +58,11 @@
   }
 }
 
+.gem-c-header__environment {
+  padding-top: 2px;
+  padding-bottom: 3px;
+}
+
 .gem-c-header__logo {
   @include govuk-media-query($from: desktop) {
     white-space: nowrap;
@@ -98,34 +85,6 @@
   }
 }
 
-.gem-c-environment-tag {
-  padding: 2px 5px 0;
-  margin-left: 3px;
-  margin-top: govuk-spacing(-2);
-  vertical-align: middle;
-  @include govuk-font($size: 16, $weight: "bold");
-}
-
-.gem-c-environment-tag--production {
-  background-color: govuk-colour("red");
-  color: govuk-colour("white");
-}
-
-.gem-c-environment-tag--example {
-  background-color: govuk-colour("bright-purple");
-}
-
-.gem-c-environment-tag--development {
-  background-color: govuk-colour("dark-grey");
-  color: govuk-colour("white");
-}
-
-.gem-c-environment-tag--staging,
-.gem-c-environment-tag--integration {
-  background-color: govuk-colour("yellow");
-  color: govuk-colour("black");
-}
-
 .govuk-header__navigation-item--collapsed-menu-only {
   @include govuk-media-query($from: desktop) {
     display: none;
@@ -155,8 +114,7 @@
       padding: 0 2mm 2mm 0;
     }
 
-    .gem-c-header__product-name,
-    .gem-c-environment-tag {
+    .gem-c-header__product-name {
       color: $govuk-print-text-colour;
       background: none;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss

@@ -0,0 +1,168 @@
+// overload the choices.js variables
+
+$font-size: 19px;
+
+$choices-bg-color: govuk-colour("white") !default;
+$choices-font-size-lg: $font-size !default;
+$choices-font-size-md: $font-size !default;
+$choices-font-size-sm: $font-size !default;
+$choices-primary-color: #ffffff !default; // can't use mixin here because of Choices.js Sass functions
+$choices-text-color: govuk-colour("black");
+$choices-icon-cross: url("select-with-search/cross-icon.svg");
+$choices-border-radius: 0 !default;
+$choices-border-radius-item: 0 !default;
+$choices-z-index: 2 !default;
+$choices-button-dimension: 12px !default;
+
+@import "govuk_publishing_components/individual_component_support";
+@import "mixins/prefixed-transform";
+@import "govuk/components/label/label";
+@import "choices.js/src/styles/choices";
+
+.gem-c-select-with-search {
+  .choices * {
+    // Something inside .choices needs this – I'm not sure what yet
+    box-sizing: border-box;
+    font-family: $govuk-font-family;
+  }
+
+  .choices[data-type*="select-one"]::after {
+    @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+    @include prefixed-transform($translateY: -50%);
+    margin: 0;
+  }
+
+  .choices.is-open[data-type*="select-one"]::after {
+    margin: 0;
+    bottom: govuk-em(1px, $font-size);
+    @include prefixed-transform($translateY: -50%, $rotate: 180deg);
+  }
+
+  .choices[data-type*="select-multiple"] .choices__button,
+  .choices[data-type*="text"] .choices__button {
+    border-color: govuk-colour("mid-grey");
+    border-right: 1px solid govuk-colour("mid-grey");
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) govuk-spacing(2);
+    margin-right: 0;
+
+    &:hover {
+      background-color: govuk-colour("mid-grey");
+      border-color: govuk-colour("dark-grey");
+      box-shadow: 0 $govuk-border-width-form-element 0 govuk-colour("dark-grey");
+    }
+
+    &:focus {
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 $govuk-border-width-form-element 0 $govuk-focus-text-colour;
+    }
+  }
+
+  .choices.is-disabled {
+    .choices__item[data-deletable] {
+      background-color: govuk-colour("white");
+    }
+
+    .choices__button {
+      display: none;
+    }
+  }
+
+  .choices__input {
+    display: block;
+    margin-bottom: 0;
+  }
+
+  .choices__inner {
+    padding: govuk-spacing(1);
+    border: $govuk-border-width-form-element solid govuk-colour("black");
+  }
+
+  &.govuk-form-group--error .choices:not(.is-active):not(.is-focused):not(.is-open) .choices__inner {
+    border-color: $govuk-error-colour;
+  }
+
+  .choices.is-focused,
+  .choices.is-open {
+    overflow: visible;
+  }
+
+  .choices.is-flipped .choices__list {
+    border-radius: 0; // this isn't set by a variable unlike all other border radius :(
+    border-width: $govuk-border-width-form-element;
+  }
+
+  .choices.is-focused .choices__inner,
+  .choices.is-open .choices__inner {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+    // Ensure outline appears outside of the element
+    outline-offset: 0;
+    // Double the border by adding its width again. Use `box-shadow` to do
+    // this instead of changing `border-width` (which changes element size)
+    // and since `outline` is already used for the yellow focus state.
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+  }
+
+  .choices__list--multiple {
+    display: block;
+
+    &:not(:empty) {
+      margin-block-start: 6px;
+      border-block-start: 1px solid $govuk-border-colour;
+      padding-block-end: 5px;
+    }
+  }
+
+  .choices__list--multiple .choices__item {
+    display: inline-flex;
+    align-items: center;
+    border: 0;
+    padding: 0 0 0 govuk-spacing(2);
+    margin: govuk-spacing(2) govuk-spacing(2) 0 0;
+    background-color: govuk-colour("light-grey");
+    box-shadow: 0 $govuk-border-width-form-element 0 govuk-colour("mid-grey");
+    line-height: 1;
+    color: $govuk-text-colour;
+
+    .is-disabled & {
+      opacity: 0.5;
+    }
+  }
+
+  // Dropdown
+  .choices__list--dropdown,
+  .choices__list[aria-expanded] {
+    border: $govuk-border-width-form-element solid govuk-colour("black");
+    border-top-width: 0;
+
+    .is-flipped & {
+      border-top-width: $govuk-border-width-form-element;
+      border-bottom-width: 0;
+    }
+  }
+
+  .choices__list--dropdown .choices__item,
+  .choices__list[aria-expanded] .choices__item {
+    position: relative;
+    border-bottom: 1px solid govuk-colour("mid-grey");
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .choices__list--dropdown .choices__item--selectable.is-highlighted,
+  .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+    background-color: govuk-colour("blue");
+    border-color: govuk-colour("blue");
+    color: govuk-colour("white");
+    outline: none;
+  }
+
+  .choices__heading {
+    @include govuk-typography-weight-bold;
+    color: govuk-colour("black"); // Choices.js doesn't use a variable for this color for some reason :(
+    padding: govuk-spacing(6) govuk-spacing(2) govuk-spacing(2);
+    border-bottom: 1px solid govuk-colour("mid-grey");
+    cursor: default;
+  }
+}

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

@@ -1,6 +1,12 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/select/select";
 
+// Increase height of selects that have a `multiple`
+// attribute otherwise they are too small to be useful.
+.govuk-select[multiple] {
+  height: auto;
+}
+
 .gem-c-select__select--full-width {
   min-width: 100%;
   max-width: 100%;

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

@@ -0,0 +1,14 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/tag/tag";
+
+.gem-c-tag {
+  max-width: none;
+}
+
+@include govuk-media-query($media-type: print) {
+  .gem-c-tag.govuk-tag {
+    color: $govuk-print-text-colour;
+    background: none;
+    border: 2px solid govuk-colour("black");
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -30,7 +30,7 @@
 
   h2 {
     margin: 0 0 govuk-spacing(4) 0;
-    @include govuk-font($size: 27, $weight: bold);
+    @include govuk-font($size: 24, $weight: bold);
   }
 
   h3 {

data/app/views/govuk_publishing_components/components/_action_link.html.erb

@@ -3,33 +3,18 @@
 
   local_assigns[:margin_bottom] ||= 0
   text ||= false
-  nowrap_text ||= false
   href ||= false
-  subtext ||= false
-  subtext_href ||= false
-  mobile_subtext ||= false
   inverse ||= false
   simple ||= false
   simple_light ||= false
-  dark_icon ||= false
-  dark_large_icon ||= false
-  light_icon ||= false
-
-  css_classes = %w(gem-c-action-link)
-  css_classes << "gem-c-action-link--inverse" if inverse
-  css_classes << "gem-c-action-link--dark-icon" if dark_icon
-  css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
-  css_classes << "gem-c-action-link--light-icon" if light_icon
-  css_classes << "gem-c-action-link--simple" if simple
-  css_classes << "gem-c-action-link--simple-light" if simple_light
-  css_classes << "gem-c-action-link--with-subtext" if subtext
-  css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-c-force-print-link-styles)
   link_classes << "govuk-link--inverse" if inverse
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.add_class(css_classes.join(" "))
+  component_helper.add_class("gem-c-action-link")
+  component_helper.add_class("gem-c-action-link--inverse") if inverse
+  component_helper.add_class("gem-c-action-link--simple") if simple
 %>
 <% if text.present? %>
   <%= tag.div(**component_helper.all_attributes) do %>
@@ -37,7 +22,6 @@
       <span class="gem-c-action-link__link-wrapper">
         <% main_text = capture do %>
           <%= text %>
-          <%= content_tag(:span, nowrap_text, class: "gem-c-action-link__nowrap-text") if nowrap_text %>
         <% end %>
 
         <% if href.present? %>
@@ -48,24 +32,7 @@
           <%= main_text %>
         <% end %>
       </span>
-
-      <% if subtext %>
-        <span class="gem-c-action-link__subtext-wrapper">
-          <% if subtext_href %>
-            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") do %>
-              <%= link_to subtext, subtext_href, class: link_classes %>
-            <% end %>
-          <% else %>
-            <%= content_tag(:span, subtext, class: "gem-c-action-link__subtext") %>
-          <% end %>
-        </span>
-      <% end %>
-    <% end %>
-
-    <% if subtext %>
-      <%= content_tag(:span, contents, class: "gem-c-action-link__contents-wrapper") %>
-    <% else %>
-      <%= contents %>
     <% end %>
+    <%= contents %>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -12,10 +12,8 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
-  component_helper.add_class("gem-c-layout-header--#{environment}") if environment
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
   component_helper.add_data_attribute({ module: "govuk-header" })
-
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>