From 41e9b71208101da9b92e770a2f67b672523f7cbf Mon Sep 17 00:00:00 2001 From: Joe Lanman Date: Thu, 18 Jan 2024 16:47:29 +0000 Subject: [PATCH 1/8] add config --- govuk-prototype-kit.config.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 govuk-prototype-kit.config.json diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json new file mode 100644 index 00000000..25fe6dde --- /dev/null +++ b/govuk-prototype-kit.config.json @@ -0,0 +1,8 @@ +{ + "scripts": [ + "/dist/accessible-autocomplete.min.js" + ], + "stylesheets":[ + "/dist/accessible-autocomplete.min.css" + ] +} From 525ceb6d6ab1cc8aefd8ab7e69b8a805efb8165e Mon Sep 17 00:00:00 2001 From: Joe Lanman Date: Sun, 27 Aug 2023 16:29:30 +0100 Subject: [PATCH 2/8] add prototype kit instructions --- README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/README.md b/README.md index 39c6cb1d..4c190586 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,50 @@ You can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocompl ``` +### As a GOV.UK Prototype Kit plugin + +In your prototype folder, run: + +```bash +npm install accessible-autocomplete +``` + +This will load the accessible autocomplete CSS and JavaScript for you. + +Then on the page you want to add the accessible autocomplete: + +```html + +
+``` + +At the end of the file add a `pageScripts` block for the JavaScript: + +```js +<% block pageScripts %> + + + +<% endblock %> + +``` + +If you want to use it as a replacement for a ` + + + + + + ``` -At the end of the file add a `pageScripts` block for the JavaScript: +At the end of the same page add a `pageScripts` block for the JavaScript. This turns the `select` into an autocomplete. ```js <% block pageScripts %> @@ -117,8 +116,6 @@ At the end of the file add a `pageScripts` block for the JavaScript: ``` -If you want to use it as a replacement for a `