govuk_publishing_components 58.1.0 → 58.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d82f0a7a1e3c345f7d84859133afe0bb1df1e6561663f4c5937b411cbede75cb
-  data.tar.gz: 80fe207fb320c15fcb156ebebc3fa66d8c3b452b52fb5d436acec39065840d84
+  metadata.gz: 8766d04b5c4c4d7fab4d972b014cc0ac72f541321146789b75c64414b60aeb08
+  data.tar.gz: d6915e235caf1ea065a3f6f001ef34d797f76187cd58f199ba8ff20e242fb062
 SHA512:
-  metadata.gz: 70f839bf58c4d8d06037a121875656558f9badc69a322b2886946a94f541040d7db7252904733bc852797691442c9d18fdac1d102737d5369688cbbdf248ef65
-  data.tar.gz: c0e347b5a6d110077c68a41af3a05aef428a4329a5a6ea422ce94c7ea4d6b94fc8e0b2d59f23239608e5662db11b7d5faba456422e0c6ee4b14f9cf9d2d4e8e4
+  metadata.gz: 1aaa22f84475dd4bd8b5bd26d6af93a3e456c999ff9eeffd4631dac8d87b50e7dfed42db8b845cff27408812d7314d9acfb8440109887e137b9208b13ccce8c2
+  data.tar.gz: bb8b3b01adf12c73c771b6366abf277fb263d33149a853188785e308389b9d6c8202c6fcf3301c037a3ac602b65861a4bcdcb210646736dd9dfeb9e3109424a0

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";

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

@@ -8,7 +8,7 @@ $chevron-indent-spacing: 7px;
 
 $pseudo-underline-height: 3px;
 
-$navbar-height: 60px;
+$navbar-height: 61px;
 
 $button-pipe-colour: $govuk-blue-tint-95;
 
@@ -98,7 +98,6 @@ $search-icon-height: 20px;
   background: $govuk-brand-colour;
   border-top: 1px solid $govuk-brand-colour;
   margin-top: -1px;
-  border-bottom: 1px solid transparent;
   position: relative;
 
   [hidden] {
@@ -694,4 +693,10 @@ $search-icon-height: 20px;
     padding: 10px 0 !important; // stylelint-disable-line declaration-no-important
   }
 }
+
+// Used to add a transparent bottom border for forced-colour modes
+.transparent-bottom-border {
+  border-bottom: 1px solid transparent;
+}
+
 // stylelint-enable max-nesting-depth

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/govspeak/_contact.scss

@@ -31,20 +31,20 @@
       }
     }
 
+    .email-url-number {
+      .email {
+        word-wrap: break-word;
+      }
+
+      span {
+        display: block;
+      }
+    }
+
     .content {
       float: none;
       width: 100%;
 
-      .email-url-number {
-        .email {
-          word-wrap: break-word;
-        }
-
-        span {
-          display: block;
-        }
-      }
-
       .comments {
         @include govuk-font($size: 16);
         @include govuk-media-query($from: tablet) {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -53,26 +53,13 @@
   }
 
   &.gem-c-govspeak--direction-rtl blockquote {
-    padding: 0 govuk-spacing(4) 0 0;
-
-    @include govuk-media-query($from: desktop) {
-      margin: 0 (- govuk-spacing(6)) 0 0;
-    }
+    padding: 0 govuk-spacing(6) 0 0;
 
     p {
-      padding-right: govuk-spacing(3);
-      padding-left: 0;
-
-      @include govuk-media-query($from: tablet) {
-        padding-right: govuk-spacing(6);
-        padding-left: 0;
-      }
-
       &::before {
         content: "\201D";
-        float: right;
-        margin-right: (- govuk-spacing(3));
-        margin-left: 0;
+        right: auto;
+        left: 100%;
       }
 
       &:last-child::after {

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

@@ -11,7 +11,6 @@
   component_helper.add_class("gem-c-add-another")
   component_helper.add_data_attribute({
     module: "add-another",
-    ga4_start_index: 3,
     add_button_text:,
     fieldset_legend:,
     empty_fields:,

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

@@ -43,7 +43,7 @@
 %>
 <%= tag.header(**component_helper.all_attributes) do %>
   <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
-    <div class="govuk-width-container">
+    <div class="govuk-width-container transparent-bottom-border">
       <%= content_tag(:div, {
         class: header_logo_classes
       }) do %>

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

@@ -8,42 +8,41 @@
   is_page_heading ||= false
   data_attributes ||= {}
   aria_controls ||= nil
+  heading_size ||= false
+  multiple ||= false
+  include_blank ||= false
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
-  select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(local_assigns)
+  select_helper ||= GovukPublishingComponents::Presenters::SelectHelper.new(local_assigns)
 
   aria_attributes = {
     controls: aria_controls,
     describedby: select_helper.describedby
   }
 %>
-<% if select_helper.options.any? && id && label %>
+<% if select_helper.options_markup.present? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
-    <% if is_page_heading %>
-      <% add_gem_component_stylesheet("heading") %>
-      <%= render "govuk_publishing_components/components/heading", {
-        text: label_tag(id, label, class: select_helper.label_classes),
-        heading_level: 1
-      } %>
-    <% else %>
-      <%= label_tag(id, label, class: select_helper.label_classes) %>
-    <% end %>
-
-    <% if select_helper.hint %>
-      <%= render "govuk_publishing_components/components/hint", {
-        id: select_helper.hint_id,
-        text: hint
-      } %>
-    <% end %>
+    <%= render "govuk_publishing_components/components/label", {
+      id: "#{id}-label",
+      html_for: id,
+      text: label,
+      heading_size:,
+      is_page_heading:,
+      hint_text: select_helper.hint,
+      hint_id: select_helper.hint_id,
+    } %>
 
-    <% if select_helper.error_message %>
+    <% if select_helper.error_items.any? %>
       <%= render "govuk_publishing_components/components/error_message", {
         id: select_helper.error_id,
-        text: select_helper.error_message
+        items: select_helper.error_items,
       } %>
     <% end %>
 
-    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_helper.select_classes, aria: aria_attributes, data: data_attributes %>
+    <%# Create null input so that the value is cleared if no options are selected %>
+    <%# https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select-label-Gotcha %>
+    <% if multiple %>
+      <%= hidden_field_tag name, nil %>
+    <% end %>
+    <%= select_tag name, select_helper.options_markup, id: id, class: select_helper.select_classes, aria: aria_attributes, data: data_attributes, multiple: %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,14 @@
+<%
+  add_gem_component_stylesheet("select-with-search")
+
+  # select_helper.select_classes generates "gem-c-select-with-search"
+  select_helper = GovukPublishingComponents::Presenters::SelectWithSearchHelper.new(local_assigns)
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "select-with-search" })
+%>
+<%= render "govuk_publishing_components/components/select", {
+  **local_assigns,
+  **component_helper.all_attributes,
+  select_helper:
+}.with_indifferent_access %>

data/app/views/govuk_publishing_components/components/docs/select.yml

@@ -174,3 +174,14 @@ examples:
         value: option1
       - text: Option two
         value: option2
+  with_multiple:
+    data:
+      id: dropdown-multiple-id
+      id: dropdown-multiple
+      label: My Dropdown
+      multiple: true
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2