govuk_publishing_components 58.1.1 → 58.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2fbc187d41fb43b4005ecda265842cd3c9dde603272971d6429d674a4fe99d3
-  data.tar.gz: 17a7f6abba141f6fbb5e12520c8195fedebae2ae55efbe721857431aadefa76c
+  metadata.gz: 8766d04b5c4c4d7fab4d972b014cc0ac72f541321146789b75c64414b60aeb08
+  data.tar.gz: d6915e235caf1ea065a3f6f001ef34d797f76187cd58f199ba8ff20e242fb062
 SHA512:
-  metadata.gz: d296de9af1c9e495442d31f08bdf5107e657abb510d09e1362d526d741e4f47521cceb2707195d5bca801cfc56ba17d5f8c612da99cb1b0519dd4da457ee5f6e
-  data.tar.gz: 53ed8e3164202b9d51541016ec88d460559856d78814a01ddea790b5f93858ec485ef02561ad6f08349527121e21e942a60790fd6e72bff42ac73755a8150e50
+  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/_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/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

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

@@ -0,0 +1,196 @@
+name: Select with search (experimental)
+description: A dropdown select with search
+body: |
+  A Javascript enhanced dropdown select. This component is progressively enhanced, if
+  Javascript is unavailable then it will use the select component.
+
+  This is an experimental component as it currently fails WCAG compliance for keyboard navigation. The total number of options are not
+  announced when using Voice Over.
+accessibility_criteria: |
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      id: dropdown-default
+      label: My Dropdown
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_blank_option:
+    description: Include a blank option
+    data:
+      id: dropdown-with-blank
+      label: With blank option
+      include_blank: true
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_grouped_options:
+    description: Options can be grouped
+    data:
+      id: dropdown-with-grouped-options
+      label: Select a city
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_grouped_options_and_blank_option:
+    description: Options can be grouped and include a blank option
+    data:
+      id: dropdown-with-grouped-options-and-blank
+      label: Select a city
+      include_blank: true
+      grouped_options:
+      - - England
+        - - text: Bath
+            value: bath
+          - text: Bristol
+            value: bristol
+          - text: London
+            value: london
+          - text: Manchester
+            value: manchester
+      - - Northern Ireland
+        - - text: Bangor
+            value: bangor
+          - text: Belfast
+            value: belfast
+      - - Scotland
+        - - text: Dundee
+            value: dundee
+          - text: Edinburgh
+            value: edinburgh
+          - text: Glasgow
+            value: glasgow
+      - - Wales
+        - - text: Cardiff
+            value: cardiff
+          - text: Swansea
+            value: swansea
+  with_different_id_and_name:
+    description: If no name is provided, name defaults to the (required) value of id.
+    data:
+      id: dropdown-with-different-id-and-name
+      label: My Dropdown
+      name: dropdown[1]
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+  with_data_attributes:
+    data:
+      id: dropdown-with-data-attributes
+      data_attributes:
+        module: not-a-module
+        loose: moose
+      label: Select your country
+      options:
+        - text: France
+          value: fr
+        - text: Germany
+          value: de
+        - text: United Kingdom
+          value: uk
+  with_preselect:
+    data:
+      id: dropdown-with-preselect
+      label: Option 2 preselected
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+        selected: true
+      - text: Option three
+        value: option3
+  with_hint:
+    description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
+    data:
+      id: dropdown-with-hint
+      label: Choose your preferred thing
+      hint: You might need some more information here
+      hint_id: optional-hint-id
+      options:
+      - text: Something
+        value: option1
+      - text: Something else
+        value: option2
+  with_error:
+    description: An arbitrary number of separate error items can be passed to the component.
+    data:
+      id: dropdown-with-error
+      label: How will you be travelling to the conference?
+      error_items:
+        - text: Please choose an option
+      include_blank: true
+      options:
+      - text: Public transport
+        value: option1
+      - text: Will make own arrangements
+        value: option2
+  with_custom_label_size:
+    description: Make the label different sizes. Valid options are `s`, `m`, `l` and `xl`.
+    data:
+      id: dropdown-with-custom-label-size
+      label: Bigger!
+      heading_size: xl
+      options:
+      - text: Option one
+        value: option1
+      - text: Option two
+        value: option2
+      - text: Option three
+        value: option3
+  with_multiple_select_enabled:
+    description: Allow multiple items to be selected and de-selected.
+    data:
+      id: dropdown-with-multiple
+      label: Select your country
+      include_blank: true
+      multiple: true
+      options:
+        - text: France
+          value: fr
+          selected: false
+        - text: Germany
+          value: de
+          selected: false
+        - text: The United Kingdom of Great Britain and Northern Ireland
+          value: uk
+        - text: Democratic Republic of the Congo
+          value: cg

data/lib/govuk_publishing_components/presenters/select_helper.rb

@@ -1,23 +1,26 @@
 module GovukPublishingComponents
   module Presenters
     class SelectHelper
-      attr_reader :options, :option_markup, :selected_option, :error_message, :error_id, :hint, :hint_id, :describedby
+      include ActionView::Helpers::FormOptionsHelper
+
+      attr_reader :options, :options_markup, :error_items, :error_id, :hint, :hint_id, :describedby
 
       def initialize(local_assigns)
         @options = local_assigns[:options] || []
-        @error_message = local_assigns[:error_message]
+        @error_items = local_assigns[:error_items] || []
+        @error_items << { text: local_assigns[:error_message] } if local_assigns[:error_message]
         @error_id = local_assigns[:error_id] || nil
         @hint = local_assigns[:hint] || nil
         @hint_id = local_assigns[:hint_id] || nil
         @heading_size = local_assigns[:heading_size]
         @full_width = local_assigns[:full_width] || false
-        @option_markup = get_options
+        @options_markup = options_for_select(get_options, @selected_option)
         @describedby = get_describedby
       end
 
       def css_classes
         classes = %w[govuk-form-group gem-c-select]
-        classes << "govuk-form-group--error" if @error_message
+        classes << "govuk-form-group--error" if @error_items.present?
         classes
       end
 
@@ -66,7 +69,7 @@ module GovukPublishingComponents
       def get_describedby
         describedby = %w[]
 
-        if @error_message || @error_id
+        if @error_items.present? || @error_id
           @error_id ||= "error-#{SecureRandom.hex(4)}"
           describedby << @error_id
         end