Make Accessible Autocomplete a GOV.UK Prototype Kit plugin

CHANGELOG.md

@@ -6,6 +6,7 @@
 - [Pull request #621: Handle query change when the text length does not change](https://github.com/alphagov/accessible-autocomplete/pull/621)
 - [Pull request #620: Add `className` attribute to status component](https://github.com/alphagov/accessible-autocomplete/pull/620)
 - [Pull request #591: Add menuAttributes to fix #361](https://github.com/alphagov/accessible-autocomplete/pull/591)
+- [Pull request #598: Make Accessible Autocomplete a GOV.UK Prototype Kit plugin](https://github.com/alphagov/accessible-autocomplete/pull/598)
 
 ## 2.0.4 - 2022-02-07
 

README.md

@@ -75,6 +75,47 @@ You can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocompl
 <script type="text/javascript" src="assets/js/accessible-autocomplete.min.js"></script>
 ```
 
+### As a GOV.UK Prototype Kit plugin
+
+In your prototype folder, run:
+
+```bash
+npm install accessible-autocomplete
+```
+
+To add the accessible autocomplete to a page in your prototype, first add a `select` component with your options. For example:
+
+```html
+<div class="govuk-form-group">
+  <label class="govuk-label" for="country">
+    Country
+  </label>
+  <select class="govuk-select" id="country" name="country">
+    <option value="England">England</option>
+    <option value="Northern Ireland">Northern Ireland</option>
+    <option value="Scotland">Scotland</option>
+    <option value="Wales">Wales</option>
+  </select>
+</div>
+```
+
+At the end of the same page add a `pageScripts` block for the JavaScript. This turns the `select` into an autocomplete.
+
+```js
+<% block pageScripts %>
+
+  <script>
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: document.querySelector('#country')
+    })
+
+  </script>
+
+<% endblock %>
+
+```
+
 ### Styling the autocomplete
 
 A stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css).

govuk-prototype-kit.config.json

@@ -0,0 +1,20 @@
+{
+  "meta": {
+    "description": "A component that helps users choose the right answer from a list as they type. It also helps you get more accurate and consistent answers from users.",
+    "urls": {
+      "releaseNotes": "https://github.com/alphagov/accessible-autocomplete/releases/tag/v{{version}}",
+      "documentation": "https://github.com/alphagov/accessible-autocomplete#readme",
+      "versionHistory": "https://github.com/alphagov/accessible-autocomplete/releases"
+    }
+  },
+  "assets": [
+    "/dist",
+    "/dist/accessible-autocomplete.min.js.map"
+  ],
+  "scripts": [
+    "/dist/accessible-autocomplete.min.js"
+  ],
+  "stylesheets": [
+    "/dist/accessible-autocomplete.min.css"
+  ]
+}

src/autocomplete.css

@@ -152,6 +152,15 @@
   font-weight: 400;
 }
 
+/* Try font "GDS Transport" for GOV.UK form groups */
+.govuk-form-group .autocomplete__hint,
+.govuk-form-group .autocomplete__input,
+.govuk-form-group .autocomplete__option {
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .autocomplete__hint,
 .autocomplete__option {
   padding: 5px;