govuk_publishing_components 35.15.5 → 35.16.0

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

@@ -0,0 +1,71 @@
+<%
+  add_gem_component_stylesheet("option-select")
+  add_gem_component_stylesheet("input")
+
+  title_id = "option-select-title-#{title.parameterize}"
+  checkboxes_id = "checkboxes-#{SecureRandom.hex(4)}"
+  checkboxes_count_id = checkboxes_id + "-count"
+  show_filter ||= false
+  large ||= false
+
+  classes = %w[gem-c-option-select__container js-options-container]
+  classes << "gem-c-option-select__container--large" if large
+%>
+
+<% if show_filter %>
+  <%
+    filter_id ||= "input-#{SecureRandom.hex(4)}"
+  %>
+  <% filter = capture do %>
+    <%= tag.label for: filter_id, class: "govuk-label govuk-visually-hidden" do %>
+      Filter <%= title %>
+    <% end %>
+
+    <%= tag.input name: "option-select-filter",
+      id: filter_id,
+      class: "gem-c-option-select__filter-input govuk-input",
+      type: "text",
+      aria: {
+        describedby: checkboxes_count_id,
+        controls: checkboxes_id
+      }
+    %>
+  <% end %>
+  <% filter_element = CGI::escapeHTML(filter) %>
+<% end %>
+
+<div
+  class="gem-c-option-select" data-module="option-select" data-ga4-change-category="update-filter checkbox" data-ga4-section="<%= title %>"
+  <% if local_assigns.include?(:closed_on_load) && closed_on_load %>data-closed-on-load="true"<% end %>
+  <% if local_assigns.include?(:closed_on_load_mobile) && closed_on_load_mobile %>data-closed-on-load-mobile="true"<% end %>
+  <% if local_assigns.include?(:aria_controls_id) %>data-input-aria-controls="<%= aria_controls_id %>"<% end %>
+  <% if show_filter %>data-filter-element="<%= filter_element %>"<% end %>
+>
+  <h3 class="gem-c-option-select__heading js-container-heading">
+    <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
+  </h3>
+
+  <%= content_tag(:div, role: "group", aria: { labelledby: title_id }, class: classes, id: options_container_id, tabindex: "-1") do %>
+    <div class="gem-c-option-select__container-inner js-auto-height-inner">
+      <% if show_filter %>
+        <span id="<%= checkboxes_count_id %>"
+          class="gem-c-option-select__count govuk-visually-hidden"
+          aria-live="polite"
+          data-single="<%= t('components.option_select.found_single') %>"
+          data-multiple="<%= t('components.option_select.found_multiple') %>"
+          data-selected="<%= t('components.option_select.selected') %>"></span>
+      <% end %>
+      <%= render "govuk_publishing_components/components/checkboxes", {
+        name: "#{key}[]",
+        id: checkboxes_id,
+        heading: title,
+        small: true,
+        visually_hide_heading: true,
+        no_hint_text: true,
+        items: options
+      } %>
+    </div>
+  <% end %>
+</div>

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

@@ -205,6 +205,19 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
+  two_thirds_column:
+    description: This variant is used for the featured section on the homepage.
+    data:
+      two_thirds: true
+      href: "/still-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg"
+      image_alt: "some meaningful alt text please"
+      heading_text: "Something has happened nearby possibly"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+    embed: |
+      <div class="govuk-!-width-full">
+        <%= component %>
+      </div>
   youtube_video:
     description: |
       Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.

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

@@ -0,0 +1,343 @@
+name: Option select
+description: A scrollable list of checkboxes to be displayed on a form where one might
+  otherwise use a multi-select
+body:
+accessibility_criteria: |
+  The option select must:
+
+  - indicate that the option select is expandable/collapsible
+  - indicate the initial state of expandable content
+  - indicate where the state of expandable content has changed
+
+  The option select inputs must:
+
+  - have a margin to the right when the box is scrollable so that users can interact with a scrollbar without accidentally clicking an option
+  - only include an `aria-controls` attribute if an element with the ID specified exists on the page
+  - be [grouped with a label](https://www.w3.org/WAI/GL/wiki/Using_grouping_roles_to_identify_related_form_controls)
+
+  The option select filter must:
+
+  - be focusable with a keyboard
+  - indicate when it has keyboard focus
+  - inform the user that is it an editable field
+  - inform the user when there are matches, or if there are no matches
+  - inform the user as the number of matches changes
+examples:
+  default:
+    data:
+      key: market_sector
+      title: Market sector
+      options_container_id: list_of_sectors
+      options:
+      - value: aerospace
+        label: Aerospace
+        id: aerospace
+      - value: agriculture-environment-and-natural-resources
+        label: Agriculture, environment and natural resources
+        id: agriculture-environment-and-natural-resources
+      - value: building-and-construction
+        label: Building and construction
+        id: building-and-construction
+      - value: chemicals
+        label: Chemicals
+        id: chemicals
+      - value: clothing-footwear-and-fashion
+        label: Clothing, footwear and fashion
+        id: clothing-footwear-and-fashion
+      - value: defence
+        label: Defence
+        id: defence
+      - value: distribution-and-service-industries
+        label: Distribution and Service Industries
+        id: distribution-and-service-industries
+      - value: electronics-industry
+        label: Electronics Industry
+        id: electronics-industry
+      - value: energy
+        label: Energy
+        id: energy
+      - value: engineering
+        label: Engineering
+        id: engineering
+      - value: financial-services
+        label: Financial services
+        id: financial-services
+      - value: fire-police-and-security
+        label: Fire, police, and security
+        id: fire-police-and-security
+      - value: food-manufacturing
+        label: Food manufacturing
+        id: food-manufacturing
+      - value: giftware-jewellery-and-tableware
+        label: Giftware, jewellery and tableware
+        id: giftware-jewellery-and-tableware
+  with_option_pre_checked:
+    data:
+      key: with_checked_value_set
+      title: List of options
+      options_container_id: list_of_vegetables
+      options:
+      - value: potatoes
+        label: Potatoes
+        checked: true
+      - value: carrots
+        label: Carrots
+        id: carrots
+      - value: mash
+        label: Mash
+        id: mash
+  with_aria_controls:
+    description: |
+      aria_controls_id adds an [`aria-controls` attribute](https://tink.uk/using-the-aria-controls-attribute/) to each checkbox input. This makes it easier for users of assitive tech to jump from them to the part of the page they’re updating.
+
+      The aria_controls_id must be set to the ID of an element that’s on the page or it won’t be included.
+    data:
+      key: with_aria-control_set
+      title: List of options (with aria controls)
+      aria_controls_id: wrapper
+      options_container_id: list_of_countries
+      options:
+      - value: britain
+        label: Britain
+        id: britain
+      - value: france
+        label: France
+        id: france
+      - value: spain
+        label: Spain
+        id: spain
+  closed_on_load:
+    data:
+      key: closed_on_load
+      title: List of hats
+      closed_on_load: true
+      options_container_id: list_of_hats
+      options:
+      - value: bobble_hat
+        label: Bobble hat
+        id: bobble_hat
+      - value: fez
+        label: Fez
+        id: fez
+      - value: sombrero
+        label: Sombrero
+        id: sombrero
+  with_tracking:
+    data:
+      key: list_of_shoes
+      title: List of shoes
+      options_container_id: list_of_shoes
+      options:
+      - value: trainers
+        label: Trainers
+        id: trainers
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "trainers"
+          track_options:
+            dimension28: 1
+      - value: plimsolls
+        label: Plimsolls
+        id: plimsolls
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "plimsolls"
+          track_options:
+            dimension28: 1
+      - value: high_heels
+        label: High heels
+        id: high_heels
+        data_attributes:
+          track_category: "filterClicked"
+          track_action: "List of shoes"
+          track_label: "high_heels"
+          track_options:
+            dimension28: 1
+  with_filter:
+    description: Adds a filter to allow users to narrow the checkboxes down. Checkboxes will only show if they match what the user has typed, or if they are already checked. The filter is case insensitive and strips out punctuation characters and duplicate whitespace, and sees '&' and 'and' as the same, to make filtering easier.
+    data:
+      key: filter_demo
+      title: Countries
+      options_container_id: list_of_countries_to_filter
+      show_filter: true
+      options:
+      - value: afghanistan
+        label: Afghanistan
+        id: afghanistan
+      - value: albania
+        label: Albania
+        id: albania
+      - value: algeria
+        label: Algeria
+        id: algeria
+        checked: true
+      - value: american_samoa
+        label: American Samoa
+        id: american_samoa
+      - value: andorra
+        label: Andorra
+        id: andorra
+        checked: true
+      - value: angola
+        label: Angola
+        id: angola
+      - value: anguilla
+        label: Anguilla
+        id: anguilla
+      - value: antigua_and_barbuda
+        label: Antigua and Barbuda
+        id: antigua_and_barbuda
+      - value: argentina
+        label: Argentina
+        id: argentina
+      - value: armenia
+        label: Armenia
+        id: armenia
+      - value: aruba
+        label: Aruba
+        id: aruba
+      - value: australia
+        label: Australia
+        id: australia
+      - value: austria
+        label: Austria
+        id: austria
+      - value: azerbaijan
+        label: Azerbaijan
+        id: azerbaijan
+      - value: bahamas
+        label: Bahamas
+        id: bahamas
+      - value: bahrain
+        label: Bahrain
+        id: bahrain
+      - value: bangladesh
+        label: Bangladesh
+        id: bangladesh
+      - value: barbados
+        label: Barbados
+        id: barbados
+      - value: belarus
+        label: Belarus
+        id: belarus
+      - value: belgium
+        label: Belgium
+        id: belgium
+      - value: belize
+        label: Belize
+        id: belize
+      - value: benin
+        label: Benin
+        id: benin
+      - value: bermuda
+        label: Bermuda
+        id: bermuda
+      - value: bhutan
+        label: Bhutan
+        id: bhutan
+      - value: bolivia
+        label: Bolivia
+        id: bolivia
+      - value: cote
+        label: Cote d’Ivoire
+        id: cote
+      - value: sthelena
+        label: St Helena, Ascension and Tristan da Cunha
+        id: sthelena
+      - value: trinidad
+        label: Trinidad & Tobago
+        id: trinidad
+  large:
+    description: When `large` is set to `true`, the option-select container has an increased max-height of 600px, allowing more checkbox items to be visible.
+    data:
+      key: large_demo
+      title: Countries
+      options_container_id: list_of_countries_to_filter_large
+      large: true
+      options:
+      - value: afghanistan
+        label: Afghanistan
+        id: afghanistanLargeExample
+      - value: albania
+        label: Albania
+        id: albaniaLargeExample
+      - value: algeria
+        label: Algeria
+        id: algeriaLargeExample
+      - value: american_samoa
+        label: American Samoa
+        id: american_samoaLargeExample
+      - value: andorra
+        label: Andorra
+        id: andorraLargeExample
+      - value: angola
+        label: Angola
+        id: angolaLargeExample
+      - value: anguilla
+        label: Anguilla
+        id: anguillaLargeExample
+      - value: antigua_and_barbuda
+        label: Antigua and Barbuda
+        id: antigua_and_barbudaLargeExample
+      - value: argentina
+        label: Argentina
+        id: argentinaLargeExample
+      - value: armenia
+        label: Armenia
+        id: armeniaLargeExample
+      - value: aruba
+        label: Aruba
+        id: arubaLargeExample
+      - value: australia
+        label: Australia
+        id: australiaLargeExample
+      - value: austria
+        label: Austria
+        id: austriaLargeExample
+      - value: azerbaijan
+        label: Azerbaijan
+        id: azerbaijanLargeExample
+      - value: bahamas
+        label: Bahamas
+        id: bahamasLargeExample
+      - value: bahrain
+        label: Bahrain
+        id: bahrainLargeExample
+      - value: bangladesh
+        label: Bangladesh
+        id: bangladeshLargeExample
+      - value: barbados
+        label: Barbados
+        id: barbadosLargeExample
+      - value: belarus
+        label: Belarus
+        id: belarusLargeExample
+      - value: belgium
+        label: Belgium
+        id: belgiumLargeExample
+      - value: belize
+        label: Belize
+        id: belizeLargeExample
+      - value: benin
+        label: Benin
+        id: beninLargeExample
+      - value: bermuda
+        label: Bermuda
+        id: bermudaLargeExample
+      - value: bhutan
+        label: Bhutan
+        id: bhutanLargeExample
+      - value: bolivia
+        label: Bolivia
+        id: boliviaLargeExample
+      - value: cote
+        label: Cote d'Ivoire
+        id: coteLargeExample
+      - value: sthelena
+        label: St Helena, Ascension and Tristan da Cunha
+        id: sthelenaLargeExample
+      - value: trinidad
+        label: Trinidad & Tobago
+        id: trinidadLargeExample

data/config/locales/ar.yml

@@ -140,6 +140,10 @@ ar:
       close_modal: إغلاق مربع الحوار المشروط
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: العثور عن كل المحتوى من %{organisation}
     previous_and_next_navigation:

data/config/locales/az.yml

@@ -137,6 +137,10 @@ az:
       close_modal: Modal dialoqu bağla
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
     previous_and_next_navigation:

data/config/locales/be.yml

@@ -143,6 +143,10 @@ be:
       close_modal: Зачыніць мадальны дыялог
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Шукаць увесь змест з %{organisation}
     previous_and_next_navigation:

data/config/locales/bg.yml

@@ -141,6 +141,10 @@ bg:
       close_modal: Затваряне на модалния диалог
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Намиране на цялото съдържание от %{organisation}
     previous_and_next_navigation:

data/config/locales/bn.yml

@@ -138,6 +138,10 @@ bn:
       close_modal: ক্লোজ মোডাল ডায়ালগ
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
     previous_and_next_navigation:

data/config/locales/cs.yml

@@ -142,6 +142,10 @@ cs:
       close_modal: Zavření modálního dialogu
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Najít veškerý obsah z %{organisation}
     previous_and_next_navigation:

data/config/locales/cy.yml

@@ -141,6 +141,10 @@ cy:
       close_modal: Cau'r ddeialog foddol
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Dod o hyd i'r holl gynnwys gan %{organisation}
     previous_and_next_navigation:

data/config/locales/da.yml

@@ -138,6 +138,10 @@ da:
       close_modal: Luk den modale dialog
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Find alt indhold fra %{organisation}
     previous_and_next_navigation:

data/config/locales/de.yml

@@ -141,6 +141,10 @@ de:
       close_modal: Dialog schließen
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Alle Inhalte von %{organisation} finden
     previous_and_next_navigation:

data/config/locales/dr.yml

@@ -139,6 +139,10 @@ dr:
       close_modal: دیالوگ کیفی را بسته نمایید
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: تمام محتویات را از اینجا بدست بیاورید %{organisation}
     previous_and_next_navigation:

data/config/locales/el.yml

@@ -137,6 +137,10 @@ el:
       close_modal: Κλείσιμο παράθυρου διαλόγου
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Εύρεση όλου του περιεχομένου από τον οργανισμό %{Organization}
     previous_and_next_navigation:

data/config/locales/en.yml

@@ -256,6 +256,10 @@ en:
       close_modal: Close modal dialogue
     notice:
       banner_title: Important
+    option_select:
+      found_single: option found
+      found_multiple: options found
+      selected: selected
     organisation_schema:
       all_content_search_description: Find all content from %{organisation}
     previous_and_next_navigation:

data/config/locales/es-419.yml

@@ -137,6 +137,10 @@ es-419:
       close_modal: Cerrar diálogo modal
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organisation}
     previous_and_next_navigation:

data/config/locales/es.yml

@@ -137,6 +137,10 @@ es:
       close_modal: Cierre el cuadro de diálogo modal
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organization}
     previous_and_next_navigation:

data/config/locales/et.yml

@@ -140,6 +140,10 @@ et:
       close_modal: Sule modaalne dialoog
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Leidke kogu ettevõtte %{organization} sisu
     previous_and_next_navigation:

data/config/locales/fa.yml

@@ -136,6 +136,10 @@ fa:
       close_modal: بستن گفتگوی مودال
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: یافتن تمام محتوا از %{organisation}
     previous_and_next_navigation:

data/config/locales/fi.yml

@@ -139,6 +139,10 @@ fi:
       close_modal: Sulje modaalinen vuoropuhelu
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Etsi kaikki sisältö alkaen %{organisation}
     previous_and_next_navigation:

data/config/locales/fr.yml

@@ -137,6 +137,10 @@ fr:
       close_modal: Fermer le dialogue modal
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Rechercher tout le contenu de %{organisation}
     previous_and_next_navigation:

data/config/locales/gd.yml

@@ -139,6 +139,10 @@ gd:
       close_modal: Dún an dialóg módúil
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: Faigh gach rud ó %{organisation}
     previous_and_next_navigation:

data/config/locales/gu.yml

@@ -137,6 +137,10 @@ gu:
       close_modal: મોડલ ડાયલોગ બંધ કરો
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: "%{organisation} થી તમામ સામગ્રી શોધો"
     previous_and_next_navigation:

data/config/locales/he.yml

@@ -137,6 +137,10 @@ he:
       close_modal: סגור דיאלוג מודאלי
     notice:
       banner_title:
+    option_select:
+      found_single:
+      found_multiple:
+      selected:
     organisation_schema:
       all_content_search_description: מצא את כל התוכן של %{organization}
     previous_and_next_navigation: