Move code for accessible autocomplete component into app

This component was removed in version 18 of govuk_publishing_components alphagov/govuk_publishing_components#1038

We need to move the code into the app so that we can update govuk_publishing_components and other dependencies.

https://trello.com/c/egaF1kjo/3110-replace-accessible-autocomplete-for-content-data-admin

app/assets/javascripts/components/accessible-autocomplete.js

@@ -0,0 +1,78 @@
+/* eslint-env jquery */
+/* global accessibleAutocomplete */
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  Modules.AccessibleAutocomplete = function () {
+    var $selectElem
+
+    this.start = function ($element) {
+      $selectElem = $element.find('select')
+
+      var configOptions = {
+        selectElement: document.getElementById($selectElem.attr('id')),
+        showAllValues: true,
+        confirmOnBlur: true,
+        preserveNullOptions: true, // https://github.com/alphagov/accessible-autocomplete#null-options
+        defaultValue: ''
+      }
+
+      configOptions.onConfirm = this.onConfirm
+
+      new accessibleAutocomplete.enhanceSelectElement(configOptions) // eslint-disable-line no-new, new-cap
+      // attach the onConfirm function to data attr, to call it in finder-frontend when clearing facet tags
+      $selectElem.data('onconfirm', this.onConfirm)
+    }
+
+    this.onConfirm = function (label, value, removeDropDown) {
+      function escapeHTML (str) {
+        return new window.Option(str).innerHTML
+      }
+
+      if ($selectElem.data('track-category') !== undefined && $selectElem.data('track-action') !== undefined) {
+        track($selectElem.data('track-category'), $selectElem.data('track-action'), label, $selectElem.data('track-options'))
+      }
+      // This is to compensate for the fact that the accessible-autocomplete library will not
+      // update the hidden select if the onConfirm function is supplied
+      // https://github.com/alphagov/accessible-autocomplete/issues/322
+      if (typeof label !== 'undefined') {
+        if (typeof value === 'undefined') {
+          value = $selectElem.children('option').filter(function () { return $(this).html() === escapeHTML(label) }).val()
+        }
+
+        if (typeof value !== 'undefined') {
+          var $option = $selectElem.find('option[value=\'' + value + '\']')
+          // if removeDropDown we are clearing the selection from outside the component
+          var selectState = typeof removeDropDown === 'undefined'
+          $option.prop('selected', selectState)
+          $selectElem.change()
+        }
+
+        // used to clear the autocomplete when clicking on a facet tag in finder-frontend
+        // very brittle but menu visibility is determined by autocomplete after this function is called
+        // setting autocomplete val to '' causes menu to appear, we don't want that, this solves it
+        // ideally will rewrite autocomplete to have better hooks in future
+        if (removeDropDown) {
+          $selectElem.closest('.app-c-accessible-autocomplete').addClass('app-c-accessible-autocomplete--hide-menu')
+          setTimeout(function () {
+            $('.autocomplete__menu').remove() // this element is recreated every time the user starts typing
+            $selectElem.closest('.app-c-accessible-autocomplete').removeClass('app-c-accessible-autocomplete--hide-menu')
+          }, 100)
+        }
+      }
+    }
+
+    function track (category, action, label, options) {
+      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+        options = options || {}
+        options.label = label
+
+        window.GOVUK.analytics.trackEvent(category, action, options)
+      }
+    }
+  }
+})(window.GOVUK.Modules)

app/assets/stylesheets/application.scss

@@ -15,6 +15,7 @@ $govuk-global-styles: true;
 @include _govuk-font-face-nta;
 
 // local components
+@import "components/accessible-autocomplete";
 @import "components/chart";
 @import "components/ga_data_notice";
 @import "components/glance-metric";

app/assets/stylesheets/components/_accessible-autocomplete.scss

@@ -0,0 +1,33 @@
+.app-c-accessible-autocomplete {
+  .autocomplete__input {
+    z-index: 1;
+  }
+
+  .autocomplete__dropdown-arrow-down {
+    z-index: 0;
+  }
+
+  .autocomplete__option {
+    @include govuk-font(19);
+  }
+
+  .js-enabled {
+    display: none;
+  }
+
+  .autocomplete__list .autocomplete__option {
+    padding: 5px 6px;
+
+    &:before {
+      position: relative;
+      top: 3px;
+      padding-top: 2px;
+    }
+  }
+}
+
+.app-c-accessible-autocomplete--hide-menu {
+  .autocomplete__menu {
+    display: none;
+  }
+}

app/views/components/_accessible_autocomplete.html.erb

@@ -0,0 +1,26 @@
+<%	
+  id ||= "autocomplete-#{SecureRandom.hex(4)}"	
+  label ||= nil	
+  data_attributes ||= nil	
+  options ||= []	
+  selected_option ||= nil	
+
+  classes = %w(app-c-accessible-autocomplete govuk-form-group)	
+%>	
+<% if label && options.any? %>	
+  <%= tag.div class: classes, data: { module: "accessible-autocomplete" } do %>	
+    <%=	
+      render "govuk_publishing_components/components/label", {	
+        html_for: id	
+      }.merge(label.symbolize_keys)	
+    %>	
+    <%=	
+      select_tag(	
+        id,	
+        options_for_select(options, selected_option),	
+        class: "govuk-select",	
+        data: data_attributes	
+      )	
+    %>	
+  <% end %>	
+<% end %>

app/views/components/docs/accessible_autocomplete.yml

@@ -0,0 +1,41 @@
+name: Accessible autocomplete	
+description: An autocomplete component, built to be accessible.	
+body: |	
+  This component uses the [Accessible Autocomplete](https://github.com/alphagov/accessible-autocomplete) code to create an accessible autocomplete element. The autocomplete is created with the `showAllValues`	
+  option set to `true` and the `confirmOnBlur` option set to `false` (see [Autocomplete examples](https://alphagov.github.io/accessible-autocomplete/examples) here). It also depends upon the	
+  [label component](https://github.com/component-guide/label).	
+  If Javascript is disabled, the component appears as a select box, so the user can still select an option.	
+accessibility_criteria: |	
+  [Accessibility acceptance criteria](https://github.com/alphagov/accessible-autocomplete/blob/master/accessibility-criteria.md)	
+examples:	
+  default:	
+    data:	
+      label:	
+        text: 'Countries'	
+      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']]	
+  with_unique_identifier:	
+    data:	
+      id: 'unique-autocomplete'	
+      label:	
+        text: 'Countries'	
+      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]	
+  with_selected_option_chosen:	
+    data:	
+      id: 'selected-option-chosen-autocomplete'	
+      label:	
+        text: 'Countries'	
+      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]	
+      selected_option: ['United Kingdom', 'gb']	
+  with_tracking_enabled:	
+    description: |	
+     This example shows tracking enabled on an autocomplete. Tracking will be enabled automatically when `track_category` and `track_action` are specified in `data_attributes`.	
+    data:	
+      id: 'tracking-enabled-autocomplete'	
+      label:	
+        text: 'Countries'	
+      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]	
+      data_attributes:	
+        track_category: 'chosen_category'	
+        track_action: 'chosen_action'	
+        track_option:	
+          custom_dimension: 'your_custom_dimension'

app/views/content/index.html.erb

@@ -41,7 +41,7 @@
                 value: params[:search_term],
               } %>
 
-          <%= render "govuk_publishing_components/components/accessible_autocomplete",
+          <%= render "components/accessible_autocomplete",
               {
                 id: 'document_type',
                 label: {
@@ -51,7 +51,7 @@
                 selected_option: @filter.selected_document_type(params)
               }
           %>
-          <%= render "govuk_publishing_components/components/accessible_autocomplete",
+          <%= render "components/accessible_autocomplete",
               {
                 id: 'organisation_id',
                 label: {

app/views/development/index.html.erb

@@ -2,7 +2,7 @@
 <%= content_for :title, "Dev page" %>
 
 
-<%= render "govuk_publishing_components/components/accessible_autocomplete", {
+<%= render "components/accessible_autocomplete", {
   label: {
     text: "Countries"
   },

package.json

@@ -26,5 +26,8 @@
     "standardx": "^7.0.0",
     "stylelint": "^14.16.1",
     "stylelint-config-gds": "^0.2.0"
+  },
+  "dependencies": {
+    "accessible-autocomplete": "^2.0.4"
   }
 }

spec/components/accessible_autocomplete_spec.rb

@@ -0,0 +1,54 @@
+require "rails_helper"
+
+RSpec.describe "AccessibleAutocomplete", type: :view do
+  it "renders select element" do
+    render_component(
+      id: "basic-autocomplete",
+      label: { text: "Countries" },
+      options: [["United Kingdom", "gb"], ["United States", "us"]],
+    )
+
+    assert_select ".govuk-label", text: "Countries", for: "basic-autocomplete"
+    assert_select "select#basic-autocomplete"
+    assert_select "select#basic-autocomplete option[value=gb]"
+    assert_select "select#basic-autocomplete option[value=gb]", text: "United Kingdom"
+    assert_select "select#basic-autocomplete option[value=us]"
+    assert_select "select#basic-autocomplete option[value=us]", text: "United States"
+  end
+
+  it "renders select element with selected value" do
+    render_component(
+      id: "basic-autocomplete",
+      label: { text: "Countries" },
+      options: [["United Kingdom", "gb"], ["United States", "us"]],
+      selected_option: ["United States", "us"],
+    )
+
+    assert_select ".govuk-label", text: "Countries", for: "basic-autocomplete"
+    assert_select "select#basic-autocomplete"
+    assert_select "select#basic-autocomplete option[value=gb]"
+    assert_select "select#basic-autocomplete option[value=us][selected]"
+  end
+
+  it "does not render when no data is specified" do
+    assert_empty render_component({})
+  end
+
+  it "does not render when no label is specified" do
+    assert_empty render_component(
+      id: "basic-autocomplete",
+      options: [["United Kingdom", "gb"], ["United States", "us"]],
+    )
+  end
+
+  it "does not render when no options are specified" do
+    assert_empty render_component(
+      id: "basic-autocomplete",
+      label: { text: "Countries" },
+    )
+  end
+
+  def render_component(locals)
+    render partial: "components/accessible_autocomplete", locals:
+  end
+end