govuk_publishing_components 43.2.0 → 43.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e4cae4dbe308c9a7d6c09b6af0e5a2bd8e336704c65b65b36db523740774350
-  data.tar.gz: 6783d9392096dc776ab89670f28348a037de4c4312648a3459e6c7d59ca93e82
+  metadata.gz: 907217210fe22535516273b8a2bddec801e1ccf6d0105013c90d96ebcc8912c7
+  data.tar.gz: 1db72b2071a73d7706b2beef1edc5ed1fc628c42433731234bcff19c68db6160
 SHA512:
-  metadata.gz: 06ca0b986701886935c7fa20f38e10c65719a7112b99a454a075924a013963d431f1915272140cbc97581ab08d7123de66fd2f1c9179cefe75155326e7d5a784
-  data.tar.gz: dba9a2166cbab782ce0dd4800716f142241ed81aa2afa0a1e5dff4f4f164273973fe62a642cce7c8ddd74ddb1b2c0e0de2e7bfd40a9e925a94b62ed0629c8354
+  metadata.gz: 52021a5d93c13d4478369b20a69f7813d28ecfdb5669e4489aa5d6322a88e1b621858f31a49ff02ae32c46e5bd27cd3b89cd07b4d85d80d4de6997061e081db5
+  data.tar.gz: ff20583781681f2c7dac855929fd7302b156e0dbc7e1f1f6bbdf6770cd75d48b4f486bf3ab83d448089b160b2dfa14f4404c8efd13730ebcd65f94ecdfcde347

data/app/assets/images/govuk_publishing_components/icon-autocomplete-search-suggestion.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="40" viewBox="0 -10 20 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.902 14.4681C12.3859 14.4681 15.2102 11.6438 15.2102 8.15981C15.2102 4.67586 12.3859 1.85156 8.902 1.85156C5.41805 1.85156 2.59375 4.67586 2.59375 8.15981C2.59375 11.6438 5.41805 14.4681 8.902 14.4681Z" stroke="#505a5f" stroke-width="2"/>
+<path d="M13.2344 12.8584L19.5904 19.2144" stroke="#505a5f" stroke-width="2"/>
+</svg>

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

@@ -0,0 +1,123 @@
+/* global accessibleAutocomplete, fetch */
+//= require accessible-autocomplete/dist/accessible-autocomplete.min.js
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  class GemSearchWithAutocomplete {
+    constructor ($module) {
+      this.$module = $module
+
+      this.$originalInput = this.$module.querySelector('input')
+      this.$inputWrapper = this.$module.querySelector('.js-search-input-wrapper')
+      this.$form = this.$module.closest('form')
+
+      this.sourceUrl = this.$module.getAttribute('data-source-url')
+      this.sourceKey = this.$module.getAttribute('data-source-key')
+    }
+
+    init () {
+      const configOptions = {
+        element: this.$inputWrapper,
+        id: this.$originalInput.id,
+        name: this.$originalInput.name,
+        inputClasses: this.$originalInput.classList,
+        defaultValue: this.$originalInput.value,
+        cssNamespace: 'gem-c-search-with-autocomplete',
+        confirmOnBlur: false,
+        showNoOptionsFound: false,
+        source: this.getResults.bind(this),
+        onConfirm: this.submitContainingForm.bind(this),
+        templates: {
+          suggestion: this.constructSuggestionHTMLString.bind(this)
+        },
+        tStatusNoResults: () => 'No search suggestions found',
+        tStatusQueryTooShort: (minQueryLength) => `Type in ${minQueryLength} or more characters for search suggestions`,
+        tStatusResults: (length, contentSelectedOption) => {
+          const words = {
+            result: (length === 1) ? 'search suggestion' : 'search suggestions',
+            is: (length === 1) ? 'is' : 'are'
+          }
+
+          return `${length} ${words.result} ${words.is} available. ${contentSelectedOption}`
+        },
+        tAssistiveHint: () => 'When search suggestions are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.'
+      }
+      accessibleAutocomplete(configOptions)
+
+      // The accessible-autocomplete component is meant to generate a new input element rather than enhancing an existing one, so we need to do some cleanup here.
+      this.$autocompleteInput = this.$inputWrapper.querySelector(
+        '.gem-c-search-with-autocomplete__input'
+      )
+      // Ensure the new input element generated by accessible-autocomplete has the correct type
+      this.$autocompleteInput.setAttribute('type', 'search')
+      // Remove the original input from the DOM
+      this.$originalInput.parentNode.removeChild(this.$originalInput)
+    }
+
+    // Callback used by accessible-autocomplete to generate the HTML for each suggestion based on
+    // the values returned from the source
+    constructSuggestionHTMLString (result) {
+      const sanitizedResult = this.sanitizeResult(result)
+      const inputValue = this.$inputWrapper.querySelector('input').value.toLowerCase()
+
+      const index = sanitizedResult.toLowerCase().indexOf(inputValue)
+
+      let html = sanitizedResult
+      if (index !== -1) {
+        const before = sanitizedResult.slice(0, index)
+        const match = sanitizedResult.slice(index, index + inputValue.length)
+        const after = sanitizedResult.slice(index + inputValue.length)
+
+        html = `${before}<mark class="gem-c-search-with-autocomplete__suggestion-highlight">${match}</mark>${after}`
+      }
+
+      return `
+        <div class="gem-c-search-with-autocomplete__option-wrapper">
+          <span class="gem-c-search-with-autocomplete__suggestion-icon"></span>
+          <span class="gem-c-search-with-autocomplete__suggestion-text">${html}</span>
+        </div>
+      `
+    }
+
+    // Callback used by accessible-autocomplete to fetch results from the source
+    getResults (query, populateResults) {
+      const url = new URL(this.sourceUrl)
+      url.searchParams.set('q', query)
+      fetch(url, { headers: { Accept: 'application/json' } })
+        .then(response => response.json())
+        .then((data) => { populateResults(data[this.sourceKey]) })
+        .catch(() => { populateResults([]) })
+    }
+
+    // Callback used by accessible-autocomplete to submit the containing form when a suggestion is
+    // confirmed by the user (e.g. by pressing Enter or clicking on it)
+    submitContainingForm (value) {
+      if (this.$form) {
+        // The accessible-autocomplete component calls this callback _before_ it updates its
+        // internal state, so the value of the input field is not yet updated when this callback is
+        // called. We need to force the value to be updated before submitting the form, but the rest
+        // of the state can catch up later.
+        this.$autocompleteInput.value = value
+
+        if (this.$form.requestSubmit) {
+          this.$form.requestSubmit()
+        } else {
+          // Fallback for certain Grade C browsers that don't support `requestSubmit`
+          this.$form.submit()
+        }
+      }
+    }
+
+    // Sanitises a result coming back from the source to prevent XSS issues if the result happens to
+    // contain HTML.
+    sanitizeResult (value) {
+      const scratch = document.createElement('div')
+      scratch.textContent = value
+      return scratch.innerHTML
+    }
+  }
+
+  Modules.GemSearchWithAutocomplete = GemSearchWithAutocomplete
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -23,8 +23,6 @@
     multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',
     dgu_beta_banner_dismissed: 'settings',
     global_bar_seen: 'settings',
-    govuk_browser_upgrade_dismisssed: 'settings',
-    govuk_not_first_visit: 'settings',
     user_nation: 'settings',
     'JS-Detection': 'usage',
     TLSversion: 'usage',

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

@@ -608,10 +608,6 @@ $after-button-padding-left: govuk-spacing(4);
 // Styles for search toggle button.
 .gem-c-layout-super-navigation-header__search-toggle-button {
   background: none;
-
-  &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
-    background: $govuk-brand-colour;
-  }
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
@@ -619,6 +615,11 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(3);
   position: relative;
   width: $search-width-or-height;
+
+  &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+    background: $govuk-brand-colour;
+  }
+
   @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
 
   @include focus-and-focus-visible {

data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss

@@ -9,8 +9,6 @@
 }
 
 .gem-c-phase-banner--inverse {
-  background: $govuk-brand-colour;
-
   .govuk-phase-banner__content__tag {
     background: govuk-colour("white");
     color: $govuk-brand-colour;

data/app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss

@@ -0,0 +1,200 @@
+@import "govuk_publishing_components/individual_component_support";
+
+// These styles are adapted from the original Accessible Autocomplete component stylesheet, mostly
+// to remove superfluous styles that are already provided by the GOV.UK Design System, and to adapt
+// the styling to match the new GOV.UK search box designs (e.g. to remove the zebra striping on
+// rows, adjust whitespace, and manage the tweaked markup we use in the suggestion template).
+//
+// Note that most selectors targetted within this file are those constructed by the Accessible
+// Autocomplete component, so they may not 100% match our own component conventions.
+//
+// see https://github.com/alphagov/accessible-autocomplete/blob/main/src/autocomplete.css
+
+// Helps to make the autocomplete menu as wide as the entire search box _including_ the submit
+// button, not just the width of the input field.
+@mixin enhance-autocomplete-menu-width($button-size) {
+  margin-right: -$button-size;
+}
+
+$input-size: 40px;
+$large-input-size: 50px;
+
+.gem-c-search-with-autocomplete__wrapper {
+  position: relative;
+}
+
+.gem-c-search-with-autocomplete__menu {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  background-color: govuk-colour("white");
+  border: 1px solid $govuk-border-colour;
+  border-top: 0;
+
+  @include enhance-autocomplete-menu-width($input-size);
+}
+
+.gem-c-search-with-autocomplete__menu--visible {
+  display: block;
+}
+
+.gem-c-search-with-autocomplete__menu--hidden {
+  display: none;
+}
+
+.gem-c-search-with-autocomplete__menu--inline {
+  position: relative;
+}
+
+.gem-c-search-with-autocomplete__option {
+  display: block;
+  cursor: pointer;
+
+  @include govuk-font(19);
+
+  // Ensure only the option itself receives pointer events
+  & > * {
+    pointer-events: none;
+  }
+
+  // Accessible Autocomplete's iOS screenreader inset has broken CSS which hasn't been fixed
+  // upstream, and means that its text is not just visible to screenreader users, but displayed
+  // for everyone. This span is added dynamically only on iOS and not given a class, so we need to
+  // target it in a roundabout way and make it invisible to non-screenreader users.
+  & > span {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+// Common styling for _all_ focus states, including keyboard focus, mouse hover, and keyboard focus
+// but mouse on another option.
+.gem-c-search-with-autocomplete__option--focused,
+.gem-c-search-with-autocomplete__option:hover,
+.gem-c-search-with-autocomplete__option:focus-visible {
+  background-color: govuk-colour("light-grey");
+  outline: none;
+
+  @include govuk-link-decoration;
+  @include govuk-link-hover-decoration;
+
+  .gem-c-search-with-autocomplete__suggestion-icon {
+    background-color: $govuk-text-colour;
+  }
+}
+
+// Styling specifically _only_ for keyboard focus
+.gem-c-search-with-autocomplete__option:focus-visible {
+  .gem-c-search-with-autocomplete__suggestion-text {
+    background-color: $govuk-focus-colour;
+  }
+}
+
+.gem-c-search-with-autocomplete__option-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 0 govuk-spacing(3);
+  padding: govuk-spacing(1) 0;
+  border-bottom: 1px solid govuk-colour("mid-grey");
+}
+
+.gem-c-search-with-autocomplete__option:last-child .gem-c-search-with-autocomplete__option-wrapper {
+  border-bottom: 0;
+}
+
+.gem-c-search-with-autocomplete__suggestion-icon {
+  width: calc($input-size / 2);
+  height: $input-size;
+  margin-right: govuk-spacing(2);
+  flex: none;
+  mask-image: url("govuk_publishing_components/icon-autocomplete-search-suggestion.svg");
+  -webkit-mask-image: url("govuk_publishing_components/icon-autocomplete-search-suggestion.svg");
+  background-color: $govuk-secondary-text-colour;
+}
+
+.gem-c-search-with-autocomplete__suggestion-text {
+  font-weight: bold;
+}
+
+.gem-c-search-with-autocomplete__suggestion-highlight {
+  font-weight: normal;
+  background: none;
+}
+
+// Tweak the look and feel for the autocomplete in large mode
+.gem-c-search-with-autocomplete.gem-c-search-with-autocomplete--large {
+  .gem-c-search-with-autocomplete__menu {
+    @include enhance-autocomplete-menu-width($large-input-size);
+  }
+
+  .gem-c-search-with-autocomplete__option {
+    min-height: $large-input-size;
+  }
+}
+
+// Fix top border styling on "borderless" search input when rendered on a GOV.UK blue background
+.gem-c-search-with-autocomplete.gem-c-search-with-autocomplete--on-govuk-blue {
+  .gem-c-search-with-autocomplete__menu {
+    border-top: 1px solid $govuk-border-colour;
+  }
+}
+
+// High contrast mode adjustments
+@media (forced-colors: active) {
+  .gem-c-search-with-autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .gem-c-search-with-autocomplete__option {
+    forced-color-adjust: none; // opt out of all default forced-colors adjustments
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .gem-c-search-with-autocomplete__option--focused,
+  .gem-c-search-with-autocomplete__option:hover,
+  .gem-c-search-with-autocomplete__option:focus-visible {
+    background-color: Highlight;
+    color: HighlightText;
+    border-color: FieldText;
+
+    .gem-c-search-with-autocomplete__suggestion-text {
+      background: none;
+    }
+
+    .gem-c-search-with-autocomplete__suggestion-highlight {
+      color: HighlightText;
+    }
+
+    .gem-c-search-with-autocomplete__suggestion-icon {
+      background-color: HighlightText;
+    }
+  }
+
+  // Allow mouse hover styling to take precedence over keyboard focus styling
+  .gem-c-search-with-autocomplete__option:focus-visible:not(:hover) {
+    background-color: SelectedItem;
+    color: SelectedItemText;
+
+    .gem-c-search-with-autocomplete__suggestion-highlight {
+      color: SelectedItemText;
+    }
+
+    .gem-c-search-with-autocomplete__suggestion-icon {
+      background-color: SelectedItemText;
+    }
+  }
+
+  .gem-c-search-with-autocomplete__suggestion-highlight {
+    color: FieldText;
+  }
+
+  .gem-c-search-with-autocomplete__suggestion-icon {
+    background-color: FieldText;
+  }
+}

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

@@ -33,6 +33,7 @@ $table-row-even-background-colour: govuk-colour("light-grey");
     }
 
     .app-table__sort-link {
+      display: inline-block;
       position: relative;
       padding-right: $sort-link-arrow-size;
       color: $govuk-link-colour;

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

@@ -8,58 +8,34 @@
   product_name ||= nil
   remove_bottom_border ||= false
   search ||= false
-  search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
   header_classes = %w[gem-c-layout-header govuk-header]
   header_classes << "gem-c-layout-header--#{environment}" if environment
   header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
-  header_classes << "gem-c-layout-header--search-left" if search_left
 %>
 
 <header class="<%= header_classes.join(' ') %>"  role="banner" data-module="govuk-header">
   <div class="govuk-header__container <%= width_class %>">
-    <% if search_left %>
-      <div class="govuk-grid-row">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-            environment: environment,
-            logo_link: logo_link,
-            product_name: product_name,
-          } %>
-        </div>
+    <div class="govuk-grid-row">
+      <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
+        <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+          environment: environment,
+          logo_link: logo_link,
+          product_name: product_name,
+        } %>
       </div>
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search govuk-!-display-none-print">
-          <%= render "govuk_publishing_components/components/layout_header/search" %>
+      <% if navigation_items.any? %>
+        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
         </div>
-        <% if navigation_items.any? %>
-          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
-          </div>
-        <% end %>
-      </div>
-    <% else %>
-      <div class="govuk-grid-row">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-            environment: environment,
-            logo_link: logo_link,
-            product_name: product_name,
-          } %>
+      <% end %>
+      <% if search %>
+        <div class="govuk-grid-column-one-half gem-c-layout-header__search govuk-!-display-none-print">
+          <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
-        <% if navigation_items.any? %>
-          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
-          </div>
-        <% end %>
-        <% if search %>
-          <div class="govuk-grid-column-one-half gem-c-layout-header__search govuk-!-display-none-print">
-            <%= render "govuk_publishing_components/components/layout_header/search" %>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
   </div>
 </header>

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

@@ -13,6 +13,8 @@
   password_shown_announcement ||= t("components.password_input.password_shown_announcement")
   password_hidden_announcement ||= t("components.password_input.password_hidden_announcement")
 
+  name ||= "password"
+
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_data_attribute({
@@ -34,7 +36,6 @@
 
   label_for = uid + '-password-input'
 
-  input_name = 'password'
   input_id = uid + '-password-input'
 
   aria_controls = uid + '-password-input'
@@ -42,9 +43,9 @@
   input_classes = %w(govuk-input govuk-password-input__input govuk-js-password-input-input)
 
   if error_text
+    name << '-input-with-error-message'
     label_for << '-with-error-message'
     input_id << '-with-error-message'
-    input_name << '-input-with-error-message'
     input_classes << 'govuk-input--error'
     aria_controls << '-with-error-message'
     paragraph_id = uid + '-password-input-with-error-message-error'
@@ -64,7 +65,7 @@
 
   <div class="govuk-input__wrapper govuk-password-input__wrapper">
     <%= tag.input(
-      name: input_name,
+      name:,
       type: "password",
       class: input_classes,
       id: input_id,

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

@@ -61,20 +61,22 @@
     <%= tag_label %>
   <% end %>
   <div class="gem-c-search__item-wrapper">
-    <%= tag.input(
-      aria: {
-        controls: aria_controls,
-      },
-      enterkeyhint: "search",
-      class: "gem-c-search__item gem-c-search__input js-class-toggle",
-      id: id,
-      name: name,
-      title: t("components.search_box.input_title"),
-      type: "search",
-      value: value,
-      autocorrect: correction_value,
-      autocapitalize: correction_value,
-    ) %>
+    <div class="js-search-input-wrapper">
+      <%= tag.input(
+        aria: {
+          controls: aria_controls,
+        },
+        enterkeyhint: "search",
+        class: "gem-c-search__item gem-c-search__input js-class-toggle",
+        id: id,
+        name: name,
+        title: t("components.search_box.input_title"),
+        type: "search",
+        value: value,
+        autocorrect: correction_value,
+        autocapitalize: correction_value,
+      ) %>
+    </div>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
       <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>
         <%= button_text %>

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

@@ -0,0 +1,27 @@
+<%
+  add_gem_component_stylesheet("search-with-autocomplete")
+
+  source_url = local_assigns[:source_url]
+  source_key = local_assigns[:source_key]
+
+  if source_url.nil? || source_key.nil?
+    raise ArgumentError, "The search_with_autocomplete component requires source_url and source_key"
+  end
+
+  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key).merge(
+    # The `search` component has an inline label by default, but this conflicts with the accessible-
+    # autocomplete component's markup and styling. Every potential use of this component is in
+    # situations where we want the label not to be inline anyway, so we override the default here.
+    inline_label: false
+  )
+
+  classes = %w[gem-c-search-with-autocomplete]
+  classes << "gem-c-search-with-autocomplete--large" if local_assigns[:size] == "large"
+  classes << "gem-c-search-with-autocomplete--on-govuk-blue" if local_assigns[:on_govuk_blue]
+%>
+<%= tag.div(
+  class: classes.join(" "),
+  data: { module: "gem-search-with-autocomplete", source_url:, source_key: }
+) do %>
+  <%= render "govuk_publishing_components/components/search", search_component_options %>
+<% end %>

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

@@ -41,47 +41,6 @@ examples:
       - text: Hidden on desktop
         href: "item-3"
         show_only_in_collapsed_menu: true
-  with_left_search_and_navigation:
-    description: This supports pages where the search appears on the left with multiple navigation links on the right, such as the [How government works](https://www.gov.uk/government/how-government-works) page
-    data:
-      search_left: true
-      navigation_items:
-      - text: Departments
-        href: "item-1"
-      - text: Worldwide
-        href: "item-2"
-      - text: How government works
-        href: "item-3"
-      - text: Get involved
-        href: "item-4"
-      - text: Consultations
-        href: "item-4"
-      - text: Statistics
-        href: "item-5"
-      - text: News and communications
-        href: "item-6"
-        active: true
-  with_custom_navigation_aria_label:
-    description: The navigation has `aria-label="Top level"` by default. This option is here for when the `aria-label` needs to be more descriptive than that.
-    data:
-      search_left: true
-      navigation_aria_label: "Departments and policy"
-      navigation_items:
-      - text: Departments
-        href: "item-1"
-      - text: Worldwide
-        href: "item-2"
-      - text: How government works
-        href: "item-3"
-      - text: Get involved
-        href: "item-4"
-      - text: Consultations
-        href: "item-4"
-      - text: Statistics
-        href: "item-5"
-      - text: News and communications
-        href: "item-6"
-        active: true
   with_navigation_link_data_attributes:
     description: Supports adding data attributes i.e for tracking
     data:

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

@@ -28,6 +28,10 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
+  with_name:
+    description: If no name is provided, it defaults to "password".
+    data:
+      name: user[password]
   with_error:
     description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
     data:

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

@@ -27,11 +27,15 @@ examples:
     data:
       phase: beta
       inverse: true
+    context:
+      dark_background: true
   inverse_for_blue_background_with_app_name:
     data:
       app_name: Skittles Maker
       phase: beta
       inverse: true
+    context:
+      dark_background: true
   without_ga4_tracking:
     description: |
       Disables GA4 tracking on the banner. Tracking is enabled by default. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.

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

@@ -0,0 +1,61 @@
+name: Search with autocomplete (experimental)
+description: |
+  A version of the search component enhanced with the ability to fetch and display search
+  suggestions from a remote source as a user types.
+body: |
+  This component uses [Accessible Autocomplete](https://github.com/alphagov/accessible-autocomplete)
+  to enhance the [`search` component's](/component-guide/search) input element.
+  If the user does not have JavaScript enabled, the search component will function as normal.
+
+  The Accessible Autocomplete component generates its own input field (rather than working on the
+  existing one). We then remove the old input field from the DOM, and enhance the component to:
+
+    * give it the correct attributes and classes from the original input field
+    * fetch suggestions from a remote URL as the user types
+    * highlight parts of suggestions where they match the user's input
+    * submit the form the component is contained in when a suggestion is selected
+
+  The component will fetch results from the provided `source_url`, which should always return a JSON
+  response with a single object at the root, which has a property `source_key` containing an array
+  of strings. The component will then display these strings as suggestions to the user.
+
+  Note that the inline label on the `search` component conflicts with the markup and styling
+  generated internally by Accessible Autocomplete. Our current designs do not foresee us using
+  autocomplete on a search box with an inline label, and this component will always force the
+  `inline_label` option on its nested `search` component to be `false`.
+
+  Note that this component has undergone a DAC audit in September 2024, but should be considered
+  experimental until it has been AB tested on GOV.UK.
+accessibility_criteria: |
+  This component should meet the accessibility acceptance criteria outlined in the [nested search
+  component](/component-guide/search#accessibility-acceptance-criteria), as well as those of the
+  external [Accessible Autocomplete
+  Component](https://github.com/alphagov/accessible-autocomplete/blob/master/accessibility-criteria.md)
+  project.
+examples:
+  default:
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+  set_input_value:
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      value: "driving licence"
+  homepage:
+    description: For use on the homepage.
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      label_text: "Search"
+      on_govuk_blue: true
+      label_size: "s"
+      homepage: true
+      size: "large"
+    context:
+      dark_background: true
+  complex_custom_label:
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      label_text: <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Search GOV.UK</h2>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "43.2.0".freeze
+  VERSION = "43.4.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 43.2.0
+  version: 43.4.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-09-18 00:00:00.000000000 Z
+date: 2024-09-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -388,6 +388,7 @@ files:
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-16x9.png
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-1x1.png
 - app/assets/images/govuk_publishing_components/govuk-schema-placeholder-4x3.png
+- app/assets/images/govuk_publishing_components/icon-autocomplete-search-suggestion.svg
 - app/assets/images/govuk_publishing_components/icon-close.svg
 - app/assets/images/govuk_publishing_components/icon-file-download.svg
 - app/assets/images/govuk_publishing_components/icon-important.svg
@@ -453,6 +454,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/print-link.js
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
 - app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
+- app/assets/javascripts/govuk_publishing_components/components/search-with-autocomplete.js
 - app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
 - app/assets/javascripts/govuk_publishing_components/components/skip-link.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
@@ -541,6 +543,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_secondary-navigation.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_select.scss
@@ -686,6 +689,7 @@ files:
 - app/views/govuk_publishing_components/components/_related_navigation.html.erb
 - app/views/govuk_publishing_components/components/_reorderable_list.html.erb
 - app/views/govuk_publishing_components/components/_search.html.erb
+- app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb
 - app/views/govuk_publishing_components/components/_secondary_navigation.html.erb
 - app/views/govuk_publishing_components/components/_select.html.erb
 - app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -779,6 +783,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/related_navigation.yml
 - app/views/govuk_publishing_components/components/docs/reorderable_list.yml
 - app/views/govuk_publishing_components/components/docs/search.yml
+- app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml
 - app/views/govuk_publishing_components/components/docs/secondary_navigation.yml
 - app/views/govuk_publishing_components/components/docs/select.yml
 - app/views/govuk_publishing_components/components/docs/share_links.yml