govuk_publishing_components 15.1.0 → 15.2.0

data/node_modules/accessible-autocomplete/package.json

@@ -2,49 +2,56 @@
   "_args": [
     [
       {
-        "raw": "accessible-autocomplete@^1.6.2",
+        "raw": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
         "scope": null,
         "escapedName": "accessible-autocomplete",
         "name": "accessible-autocomplete",
-        "rawSpec": "^1.6.2",
-        "spec": ">=1.6.2 <2.0.0",
-        "type": "range"
+        "rawSpec": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+        "spec": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+        "type": "hosted",
+        "hosted": {
+          "type": "github",
+          "ssh": "git@github.com:alphagov/accessible-autocomplete.git#add-multiselect-support",
+          "sshUrl": "git+ssh://git@github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+          "httpsUrl": "git+https://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+          "gitUrl": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+          "shortcut": "github:alphagov/accessible-autocomplete#add-multiselect-support",
+          "directUrl": "https://raw.githubusercontent.com/alphagov/accessible-autocomplete/add-multiselect-support/package.json"
+        }
       },
       "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
     ]
   ],
-  "_from": "accessible-autocomplete@>=1.6.2 <2.0.0",
-  "_hasShrinkwrap": false,
+  "_from": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
   "_id": "accessible-autocomplete@1.6.2",
   "_inCache": true,
   "_location": "/accessible-autocomplete",
-  "_nodeVersion": "8.9.4",
-  "_npmOperationalInternal": {
-    "host": "s3://npm-registry-packages",
-    "tmp": "tmp/accessible-autocomplete_1.6.2_1542120962811_0.125232612907197"
-  },
-  "_npmUser": {
-    "name": "alphagov",
-    "email": "govuk-dev@digital.cabinet-office.gov.uk"
-  },
-  "_npmVersion": "5.6.0",
   "_phantomChildren": {},
   "_requested": {
-    "raw": "accessible-autocomplete@^1.6.2",
+    "raw": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
     "scope": null,
     "escapedName": "accessible-autocomplete",
     "name": "accessible-autocomplete",
-    "rawSpec": "^1.6.2",
-    "spec": ">=1.6.2 <2.0.0",
-    "type": "range"
+    "rawSpec": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+    "spec": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+    "type": "hosted",
+    "hosted": {
+      "type": "github",
+      "ssh": "git@github.com:alphagov/accessible-autocomplete.git#add-multiselect-support",
+      "sshUrl": "git+ssh://git@github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+      "httpsUrl": "git+https://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+      "gitUrl": "git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
+      "shortcut": "github:alphagov/accessible-autocomplete#add-multiselect-support",
+      "directUrl": "https://raw.githubusercontent.com/alphagov/accessible-autocomplete/add-multiselect-support/package.json"
+    }
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/accessible-autocomplete/-/accessible-autocomplete-1.6.2.tgz",
-  "_shasum": "cb69d37748ba5b0351c84422468538890e25759c",
+  "_resolved": "git://github.com/alphagov/accessible-autocomplete.git#0c518b4fa79b9a95b544410858486ed9e6403c84",
+  "_shasum": "13aa3d1cdc2e88f8d67b6974cc5f76c06e6aed45",
   "_shrinkwrap": null,
-  "_spec": "accessible-autocomplete@^1.6.2",
+  "_spec": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
   "author": {
     "name": "Government Digital Service",
@@ -98,7 +105,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-rc.2",
     "mocha": "^5.2.0",
-    "npm-run-all": "^4.1.3",
+    "npm-run-all": "^4.1.5",
     "puppeteer": "^1.10.0",
     "replace-bundle-webpack-plugin": "^1.0.0",
     "sinon": "^6.3.5",
@@ -119,16 +126,7 @@
     "webpack-dev-server": "^3.1.10",
     "webpack-sources": "^1.3.0"
   },
-  "directories": {},
-  "dist": {
-    "integrity": "sha512-7S+6Vi82LQFSSd5feKedu46tiY2/DShpdXiRp0NY3cLwc+DKe1ayWd66mb3JVi8LTQubRM7jco+u92e6w0bbvg==",
-    "shasum": "cb69d37748ba5b0351c84422468538890e25759c",
-    "tarball": "https://registry.npmjs.org/accessible-autocomplete/-/accessible-autocomplete-1.6.2.tgz",
-    "fileCount": 37,
-    "unpackedSize": 540441,
-    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6uYDCRA9TVsSAnZWagAAo6sP/igz39UbvmkraVAOGsF2\nqyHQ8DzJv6pIU9qXyZ7mEVk9gTpBtZQVKLtK2X9Pi9ZitKOO4P9+R04CuYur\n6EYrD1YAwrIcuK4Rr7nsnmfsRQxijdmuXTSRQI/nXCeRsqPMuaCphpVdnBkV\nsuOV40I+zuWDQn+2tK9JS/SyW0UF9kAf54uk/VntpricZK9BPESt/40uUYKn\nqSxG3grkfwvE7DoJlI2HuZ0Q1/CR9xHBYtmUu7oYbyO1KWSEzjdZvNf7+zb9\nuEHWTzueLO1O572XxEp8rjLJB1U5W/cu7GLQBDD1/5ShGK3ghJnea2zpCEGn\nEZAK/llomb6X4jdUqsh8glyhhq4qwm/7JGPRrraTODzSIAXgpCZ/a88FSJ+x\n58ZEzB+bCA/h+YRpG5yehWiObLCz0lHMcSW38vZwX0xgrtVBgxzFS88r+QR8\ntKLfoTTJWa7cjlbWfFCIip6H3oSYKKg3uW8wKCqFt91sMp2//9ctFUfmavJm\nkQzvSpDcCz5C7Na11XDlsdz3x5RoYUGnhBXlNEtpZ/SN5cA7XZFyEa6hSu9J\nZzCpaxK7HdXx01i7yCx83oZxPkwXcOzwEVB1B/3kssKZgtuO6pAW+17s8HTA\nwpVJX6g2Wrrfgr/6uBqznlS4E8LhMwceJLSy2gbTD/8Akn9Lv8ntwyNyGomA\nQ6iu\r\n=i6eo\r\n-----END PGP SIGNATURE-----\r\n"
-  },
-  "gitHead": "70af963ba97f840025a6ee0569b2e9a687e904f9",
+  "gitHead": "0c518b4fa79b9a95b544410858486ed9e6403c84",
   "homepage": "https://github.com/alphagov/accessible-autocomplete#readme",
   "husky": {
     "hooks": {
@@ -146,27 +144,10 @@
   ],
   "license": "MIT",
   "main": "dist/accessible-autocomplete.min.js",
-  "maintainers": [
-    {
-      "name": "alphagov",
-      "email": "govuk-dev@digital.cabinet-office.gov.uk"
-    },
-    {
-      "name": "carolinegreen",
-      "email": "caroline.green@digital.cabinet-office.gov.uk"
-    },
-    {
-      "name": "danmitchell-",
-      "email": "dan@digitalreflow.co.uk"
-    },
-    {
-      "name": "tvararu",
-      "email": "theo@vararu.org"
-    }
-  ],
   "name": "accessible-autocomplete",
   "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
+  "readme": "# Accessible autocomplete\n\n[![npm version](https://img.shields.io/npm/v/accessible-autocomplete.svg)](http://npm.im/accessible-autocomplete)\n[![Build Status](https://travis-ci.org/alphagov/accessible-autocomplete.svg?branch=master)](https://travis-ci.org/alphagov/accessible-autocomplete)\n[![Coverage Status](https://coveralls.io/repos/github/alphagov/accessible-autocomplete/badge.svg?branch=master)](https://coveralls.io/github/alphagov/accessible-autocomplete?branch=master)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Greenkeeper badge](https://badges.greenkeeper.io/alphagov/accessible-autocomplete.svg)](https://greenkeeper.io/)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/accessible-autocomplete/dist/accessible-autocomplete.min.js?compression=gzip)](https://unpkg.com/accessible-autocomplete/dist/accessible-autocomplete.min.js)\n\n[![Sauce Labs Build Status](https://saucelabs.com/browser-matrix/tvararu-alphagov.svg)](https://saucelabs.com/u/tvararu-alphagov)\n\n`accessible-autocomplete` is a JavaScript autocomplete built from the ground up to be accessible. The design goals are:\n\n- **Accessibility**: Following WAI-ARIA best practices and testing with assistive technologies.\n- **User experience**: Supporting a wide variety of user needs.\n- **Compatibility**: Working with as many browsers, devices, and assistive technologies as possible.\n\n[Try out the examples!](https://alphagov.github.io/accessible-autocomplete/examples/)\n\n## Installation / usage\n\n### Using npm and a module system\n\nInstall it by running:\n\n```bash\nnpm install --save accessible-autocomplete\n```\n\nThe `accessibleAutocomplete` function will render an autocomplete `<input>` and its accompanying suggestions and `aria-live` region. Your page should provide a `<label>` and a container element:\n\n```html\n<label for=\"my-autocomplete\">Select your country</label>\n<div id=\"my-autocomplete-container\"></div>\n```\n\nThen import it using a module system like Browserify / Webpack / Rollup, and call the `accessibleAutocomplete` function, providing an array of values:\n\n```js\nimport accessibleAutocomplete from 'accessible-autocomplete'\n\nconst countries = [\n  'France',\n  'Germany',\n  'United Kingdom'\n]\n\naccessibleAutocomplete({\n  element: document.querySelector('#my-autocomplete-container'),\n  id: 'my-autocomplete', // To match it to the existing <label>.\n  source: countries\n})\n```\n\nIf you want to use it as a replacement for a `<select>` element, read the [Progressive enhancement](#progressive-enhancement) section.\n\n### As a plain JavaScript module\n\nYou can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocomplete.min.js) file to your JavaScript folder and import it into the browser:\n\n```html\n<script type=\"text/javascript\" src=\"assets/js/accessible-autocomplete.min.js\"></script>\n```\n\n### Styling the autocomplete\n\nA stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css).\n\nYou can copy it to your stylesheets folder and import it into the browser:\n\n```html\n<link rel=\"stylesheet\" href=\"assets/css/accessible-autocomplete.min.css\" />\n```\n\nYou can also import it using Sass:\n\n```css\n@import \"accessible-autocomplete\";\n```\n\n### Using with Preact\n\nIf you already use Preact in your application, you can import a bundle that will use that:\n\n```js\nimport preact from 'preact'\nimport Autocomplete from 'accessible-autocomplete/preact'\n\npreact.render(\n  <Autocomplete id='autocomplete' source={suggest} />,\n  document.querySelector('#container')\n)\n```\n\n[Try out the Preact example!](https://alphagov.github.io/accessible-autocomplete/examples/preact/)\n\n### Using with React\n\nIf you already use React in your application, you can import a bundle that will use that:\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Autocomplete from 'accessible-autocomplete/react'\n\nReactDOM.render(\n  <Autocomplete id='autocomplete' source={suggest} />,\n  document.querySelector('#container')\n)\n```\n\n[Try out the React example!](https://alphagov.github.io/accessible-autocomplete/examples/react/)\n\n#### React versions\n\nReact v15.5.4 has been tested to work with the Accessible Autocomplete - although make sure to check\nout [documented issues](https://github.com/alphagov/accessible-autocomplete/issues).\n\nReact v15.6.2 and 16.0 have been incompletely tested with the Accessible Autocomplete: while no undocumented issues were found, we recommend you carry out thorough testing if you wish to use these or later versions of React.\n\n## API documentation\n\n### Required options\n\n#### `element`\n\nType: `HTMLElement`\n\nThe container element in which the autocomplete will be rendered in.\n\n#### `id`\n\nType: `string`\n\nThe `id` to assign to the autocomplete input field, to use with a `<label for=id>`. Not required if using `enhanceSelectElement`.\n\n#### `source`\n\nType: `Array | Function`\n\nAn array of values to search when the user types in the input field, or a function to take what the user types and call a callback function with the results to be displayed.\n\nAn example of an array of values:\n\n```js\nconst countries = [\n  'France',\n  'Germany',\n  'United Kingdom'\n]\n```\n\nIf `source` is a function, the arguments are: `query: string, populateResults: Function`\n\nSimilar to the [`source` argument for typeahead.js](https://github.com/corejavascript/typeahead.js/blob/47d46b40cb834d8285ac9328c4b436e5eccf7197/doc/jquery_typeahead.md#datasets), a backing data source for suggestions. `query` is what gets typed into the input field, which will callback to `populateResults` synchronously with the array of string results to display in the menu.\n\nAn example of a simple suggestion engine:\n\n```js\nfunction suggest (query, populateResults) {\n  const results = [\n    'France',\n    'Germany',\n    'United Kingdom'\n  ]\n  const filteredResults = results.filter(result => result.indexOf(query) !== -1)\n  populateResults(filteredResults)\n}\n```\n\n### Other options\n\n#### `autoselect` (default: `false`)\n\nType: `Boolean`\n\nSet to true to highlight the first option when the user types in something and receives results. Pressing enter will select it.\n\n#### `confirmOnBlur` (default: `true`)\n\nType: `Boolean`\n\nThe autocomplete will confirm the currently selected option when the user clicks outside of the component. Set to `false` to disable.\n\n#### `cssNamespace` (default: `'autocomplete'`)\n\nType: `string`\n\nUse this property to override the [BEM](http://getbem.com/) block name that the JavaScript component will use. You will need to rewrite the CSS class names to use your specified block name.\n\n#### `defaultValue` (default: `''`)\n\nType: `string`\n\nSpecify a string to prefill the autocomplete with.\n\n#### `displayMenu` (default: `'inline'`)\n\nType: `'inline' | 'overlay'`\n\nYou can set this property to specify the way the menu should appear, whether inline or as an overlay.\n\n#### `minLength` (default: `0`)\n\nType: `number`\n\nThe minimum number of characters that should be entered before the autocomplete will attempt to suggest options. When the query length is under this, the aria status region will also provide helpful text to the user informing them they should type in more.\n\n#### `name` (default: `'input-autocomplete'`)\n\nType: `string`\n\nThe `name` for the autocomplete input field, to use with a parent `<form>`.\n\n#### `onConfirm` (default: `() => {}`)\n\nType: `Function`\n\nArguments: `confirmed: Object`\n\nThis function will be called when the user confirms an option, with the option they've confirmed.\n\n#### `placeholder` (default: `''`) :warning: not recommended :warning:\n\nType: `string`\n\nThis option will populate the `placeholder` attribute on the input element.\n\nWe think [placeholders have usability issues](http://adamsilver.io/articles/placeholders-are-problematic/) and that there are [better alternatives to input placeholder text](https://govuk-elements.herokuapp.com/form-elements/#form-hint-text), so we do not recommend using this option.\n\n#### `required` (default: `false`)\n\nType: `Boolean`\n\nThe input field will be rendered with a `required` attribute, see [W3C `required` attribute definition](https://www.w3.org/TR/html5/forms.html#the-required-attribute).\n\n#### `showAllValues` (default: `false`)\n\nType: `Boolean`\n\nIf this is set to `true`, all values are shown when the user clicks the input. This is similar\nto a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey\nthis behaviour.\n\n#### `showNoOptionsFound` (default: `true`)\n\nType: `Boolean`\n\nThe autocomplete will display a \"No results found\" template when there are no results. Set to `false` to disable.\n\n#### `templates` (default: `undefined`)\n\nType:\n\n```js\n{\n  inputValue: Function,\n  suggestion: Function\n}\n```\n\nThis object defines templates (functions) that are used for displaying parts of the autocomplete.\n\n`inputValue` is a function that receives one argument, the currently selected suggestion. It returns the string value to be inserted into the input.\n\n`suggestion` is a function that receives one argument, a suggestion to be displayed. It is used when rendering suggestions, and should return a string, which can contain HTML. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.\n\n#### `dropdownArrow` (default: A rectangle pointing down)\n\nType: `Function`\n\nA function that gets passed an object with the property `className` (`{ className: '' }`) and should return a string of HTML or a (P)React element. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.\n\n### Internationalization\n\n#### `tNoResults` (default: `() => 'No results found'`)\n\nType: `Function`\n\nA function that receives no arguments and should return the text used in the dropdown to indicate that there are no results.\n\n#### `tStatusQueryTooShort` (default: `` (minQueryLength) => `Type in ${minQueryLength} or more characters for results.` ``)\n\nType: `Function`\n\nA function that receives one argument that indicates the minimal amount of characters needed for the dropdown to trigger and should return the text used in the accessibility hint to indicate that the query is too short.\n\n#### `tStatusNoResults` (default: `() => 'No search results.'`)\n\nType: `Function`\n\nA function that receives no arguments and should return the text that is used in the accessibility hint to indicate that there are no results.\n\n#### `tStatusSelectedOption` (default: `` (selectedOption, length, index) => `${selectedOption} (${index + 1} of ${length}) is selected.` ``)\n\nType: `Function`\n\nA function that receives two arguments, the selectedOption and the amount of available options, and it should return the text used in the accessibility hint to indicate which option is selected.\n\n#### `tStatusResults`\n\nDefault:\n\n```js\n(length, contentSelectedOption) => {\n  const words = {\n    result: (length === 1) ? 'result' : 'results',\n    is: (length === 1) ? 'is' : 'are'\n  }\n\n  return <span>{length} {words.result} {words.is} available. {contentSelectedOption}</span>\n}\n```\n\nType: `Function`\n\nA function that receives two arguments, the count of available options and the return value of `tStatusSelectedOption`, and should return the text used in the accessibility hint to indicate which options are available and which is selected.\n\n## Progressive enhancement\n\nIf your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a `<select>` menu on the server, and use progressive enhancement.\n\nIf you have the following HTML:\n\n```html\n<select id=\"location-picker\">\n  <option value=\"fr\">France</option>\n  <option value=\"de\">Germany</option>\n  <option value=\"gb\">United Kingdom</option>\n</select>\n```\n\nYou can use the `accessibleAutocomplete.enhanceSelectElement` function to enhance it into an autocomplete:\n\n```js\naccessibleAutocomplete.enhanceSelectElement({\n  selectElement: document.querySelector('#location-picker')\n})\n```\n\nThis will:\n\n- Place an autocomplete input field after the specified `<select>`\n- Default the autocomplete `autoselect` to `true`\n- Default the autocomplete `defaultValue` to the select's `option[selected]`\n- Default the autocomplete `id` to the `<select>`'s `id`\n- Default the autocomplete `name` attribute to `''` to prevent it being included in form submissions\n- Default the autocomplete `source` to use existing `<option>`s from the `<select>`\n- Hide the `<select>` using inline `display: none`\n- Set the `<select>`'s `id` to `${id}-select` to decouple from any `<label>`\n- Upon confirming a value in the autocomplete, update the original `<select>`\n\nThis function takes the same options as `accessibleAutocomplete`, with the only difference being that it uses `selectElement` instead of `element`, which needs to be an instance of `HTMLSelectElement`.\n\n> **Note**: The `accessibleAutocomplete.enhanceSelectElement` function is fairly light and wraps the public API for `accessibleAutocomplete`. If your use case doesn't fit the above defaults, try [reading the source](src/wrapper.js) and seeing if you can write your own.\n\n### Null options\n\nIf your `<select>` element has a \"null\" option - a default option with no value - then you can pass a `defaultValue` option to `enhanceSelectElement` which will replace the label of this option when it is selected.\n\nWith the following HTML:\n\n```html\n<select id=\"location-picker\">\n  <option value=\"\">Select a country</option>\n  <option value=\"fr\">France</option>\n  <option value=\"de\">Germany</option>\n  <option value=\"gb\">United Kingdom</option>\n</select>\n```\n\nThen passing a `defaultValue` option of `''` will then leave the autocomplete blank if the null option is selected.\n\n```js\naccessibleAutocomplete.enhanceSelectElement({\n  defaultValue: '',\n  selectElement: document.querySelector('#location-picker')\n})\n```\n\nAny null options will also be filtered out of the options used to populate the `source` of the autocomplete element. To preserve options with no value in the autcomplete then pass a `preserveNullOptions` flag of `true` to `enhanceSelectElement`.\n\n## Analytics and tracking\n\nThe following events get triggered on the input element during the life cycle of the autocomplete:\n\n- `onConfirm` - This function will be called when the user confirms an option, with the option they've chosen.\n\nExample usage:\n\n```js\naccessibleAutocomplete({\n  // additional options\n  onConfirm: (val) => {\n    track(val)\n  }\n})\n```\n\n## Why another autocomplete?\n\n`accessible-autocomplete` was built after studying many existing solutions and prototyping patches to fix user experience or accessibility issues. It draws heavy inspiration from the following (and a lot of others):\n\n- [ljwatson/design-patterns](http://ljwatson.github.io/design-patterns/autocomplete/index.html): great accessible experience\n- [corejavascript/corejs-typeahead](https://github.com/corejavascript/typeahead.js): flexible autocomplete/suggestion engine architecture\n- [JamieAppleseed/selectToAutocomplete](https://github.com/JamieAppleseed/selectToAutocomplete): ease of use\n\n## Developing locally\n\nCheck out the [CONTRIBUTING](CONTRIBUTING.md) guide for instructions.\n\nIf you want to help and want to get more familiar with the codebase, try starting with the [\"good for beginners\"](https://github.com/alphagov/accessible-autocomplete/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+beginners%22) issues.\n\n## License\n\n[MIT](LICENSE.txt).\n",
+  "readmeFilename": "README.md",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alphagov/accessible-autocomplete.git"

data/node_modules/accessible-autocomplete/src/autocomplete.css

@@ -4,14 +4,21 @@
 
 .autocomplete__hint,
 .autocomplete__input {
-  -webkit-appearance: none;
-  border: 2px solid;
-  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.25;
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
   width: 100%;
+  height: 40px;
+  padding: 5px;
+  border: 2px solid #0b0c0c;
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin-bottom: 0;
 }
 
 .autocomplete__input {
@@ -28,7 +35,8 @@
   padding: 4px;
 }
 
-.autocomplete__input--focused {
+.autocomplete__input--focused,
+.autocomplete__input:focus {
   outline-offset: 0;
   outline: 3px solid #ffbf47;
 }
@@ -139,3 +147,37 @@
     line-height: 1.31579;
   }
 }
+
+.autocomplete__list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.autocomplete__list .autocomplete__option,
+.autocomplete__list .autocomplete__option:hover {
+  color: #0b0c0c;
+  padding: 3px 6px 6px;
+  margin-top: 10px !important;
+  border: 1px solid #bfc1c3;
+  background: #f8f8f8;
+}
+
+.autocomplete__list .autocomplete__option:focus {
+  outline-offset: 0;
+  outline: 3px solid #ffbf47;
+}
+
+.autocomplete__list .autocomplete__option:before {
+  display: inline-block;
+  content: '×';
+  padding: 2px 3px 0;
+  margin-right: 3px;
+  font-size: 24px;
+  color: inherit;
+  line-height: 1;
+}
+
+.autocomplete__list-item-description {
+  display: none;
+}

data/node_modules/accessible-autocomplete/src/autocomplete.js

@@ -45,6 +45,7 @@ export default class Autocomplete extends Component {
   static defaultProps = {
     autoselect: false,
     cssNamespace: 'autocomplete',
+    customAttributes: {},
     defaultValue: '',
     displayMenu: 'inline',
     minLength: 0,
@@ -55,7 +56,10 @@ export default class Autocomplete extends Component {
     showNoOptionsFound: true,
     showAllValues: false,
     required: false,
+    multiple: false,
+    selectedOptions: {},
     tNoResults: () => 'No results found',
+    tSelectedOptionDescription: () => 'press Enter or Space to remove selection',
     dropdownArrow: DropdownArrowDown
   }
 
@@ -70,6 +74,7 @@ export default class Autocomplete extends Component {
       clicked: null,
       menuOpen: false,
       options: props.defaultValue ? [props.defaultValue] : [],
+      selectedOptions: props.selectedOptions ? [props.selectedOptions] : [],
       query: props.defaultValue,
       selected: null
     }
@@ -88,6 +93,9 @@ export default class Autocomplete extends Component {
     this.handleOptionFocus = this.handleOptionFocus.bind(this)
     this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this)
 
+    this.handleSelectedOptionClick = this.handleSelectedOptionClick.bind(this)
+    this.handleSelectedOptionKeyDown = this.handleSelectedOptionKeyDown.bind(this)
+
     this.handleInputBlur = this.handleInputBlur.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
     this.handleInputFocus = this.handleInputFocus.bind(this)
@@ -174,6 +182,15 @@ export default class Autocomplete extends Component {
       query: newQuery,
       selected: null
     })
+
+    if (this.props.selectElement && this.props.selectElement.multiple) {
+      // Reset input state
+      this.setState({
+        menuOpen: false,
+        selected: null,
+        query: ''
+      })
+    }
   }
 
   handleListMouseLeave (event) {
@@ -280,9 +297,54 @@ export default class Autocomplete extends Component {
       query: newQuery,
       selected: -1
     })
+    if (this.props.selectElement && this.props.selectElement.multiple) {
+      this.updateMultiselect(selectedOption)
+    }
+    this.forceUpdate()
+  }
+
+  updateMultiselect (selectedOption) {
+    if (selectedOption) {
+      // Update select state for option
+      const addedSelectOption = [].filter.call(this.props.selectElement.options, option => option.textContent === selectedOption)[0]
+      if (addedSelectOption) { addedSelectOption.selected = true }
+
+      // Update multiselect list
+      let availableOptions = [].filter.call(this.props.selectElement.options, option => option.textContent)
+      this.props.selectedOptions = availableOptions.filter(option => option.selected === true)
+
+      // Reset input state
+      this.setState({
+        menuOpen: false,
+        selected: null,
+        query: ''
+      })
+    }
+  }
+
+  handleSelectedOptionClick (event, index) {
+    // Remove from the list
+    const removedOption = this.props.selectedOptions[index]
+    this.props.selectedOptions = this.props.selectedOptions.filter(e => e !== removedOption)
+
+    // Update select state for option
+    const removedSelectOption = [].filter.call(this.props.selectElement.options, option => option.textContent === removedOption.textContent)[0]
+    if (removedSelectOption) { removedSelectOption.selected = false }
+
     this.forceUpdate()
   }
 
+  handleSelectedOptionKeyDown (event, index) {
+    switch (keyCodes[event.keyCode]) {
+      case 'space':
+        this.handleSelectedOptionClick(event, index)
+        break
+      case 'enter':
+        this.handleSelectedOptionClick(event, index)
+        break
+    }
+  }
+
   handleUpArrow (event) {
     event.preventDefault()
     const { menuOpen, selected } = this.state
@@ -392,13 +454,16 @@ export default class Autocomplete extends Component {
       name,
       placeholder,
       required,
+      multiple,
       showAllValues,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
       tStatusSelectedOption,
       tStatusResults,
-      dropdownArrow: dropdownArrowFactory
+      tSelectedOptionDescription,
+      dropdownArrow: dropdownArrowFactory,
+      customAttributes
     } = this.props
     const { focused, hovered, menuOpen, options, query, selected } = this.state
     const autoselect = this.hasAutoselect()
@@ -426,6 +491,8 @@ export default class Autocomplete extends Component {
 
     const optionClassName = `${cssNamespace}__option`
 
+    const selectedOptionsClassName = `${cssNamespace}__list`
+
     const hintClassName = `${cssNamespace}__hint`
     const selectedOptionText = this.templateInputValue(options[selected])
     const optionBeginsWithQuery = selectedOptionText &&
@@ -482,6 +549,7 @@ export default class Autocomplete extends Component {
           role='textbox'
           required={required}
           value={query}
+          {...customAttributes}
         />
 
         {dropdownArrow}
@@ -518,6 +586,38 @@ export default class Autocomplete extends Component {
             <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
           )}
         </ul>
+
+        {multiple && (
+          <ul
+            className={`${selectedOptionsClassName}`}
+            id={`${id}__list`}
+            role='listbox'
+          >
+            {this.props.selectedOptions.map((option, index) => {
+              return (
+                <li
+                  aria-selected='true'
+                  aria-label={`${this.templateSuggestion(option.textContent)}, selected`}
+                  aria-describedBy={`${id}__list-item-description`}
+                  className={`${optionClassName}`}
+                  dangerouslySetInnerHTML={{ __html: this.templateSuggestion(option.textContent) }}
+                  id={`${id}__option--${index}`}
+                  key={index}
+                  onClick={(event) => this.handleSelectedOptionClick(event, index)}
+                  onKeyDown={(event) => this.handleSelectedOptionKeyDown(event, index)}
+                  role='option'
+                  tabIndex='0'
+                />
+              )
+            })}
+            {showNoOptionsFound && (
+              <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
+            )}
+          </ul>
+        )}
+        {multiple && (
+          <span class='autocomplete__list-item-description' id={`${id}__list-item-description`}>{tSelectedOptionDescription()}</span>
+        )}
       </div>
     )
   }

data/node_modules/accessible-autocomplete/src/wrapper.js

@@ -23,6 +23,14 @@ accessibleAutocomplete.enhanceSelectElement = (configurationOptions) => {
   if (!configurationOptions.source) {
     let availableOptions = [].filter.call(configurationOptions.selectElement.options, option => (option.value || configurationOptions.preserveNullOptions))
     configurationOptions.source = availableOptions.map(option => option.textContent || option.innerText)
+
+    // Store selected options
+    if (configurationOptions.selectElement.multiple) {
+      configurationOptions.multiple = true
+      configurationOptions.confirmOnBlur = false
+      configurationOptions.showNoOptionsFound = false
+      configurationOptions.selectedOptions = availableOptions.filter(option => option.selected)
+    }
   }
   configurationOptions.onConfirm = configurationOptions.onConfirm || (query => {
     const requestedOption = [].filter.call(configurationOptions.selectElement.options, option => (option.textContent || option.innerText) === query)[0]
@@ -31,7 +39,11 @@ accessibleAutocomplete.enhanceSelectElement = (configurationOptions) => {
 
   if (configurationOptions.selectElement.value || configurationOptions.defaultValue === undefined) {
     const option = configurationOptions.selectElement.options[configurationOptions.selectElement.options.selectedIndex]
-    configurationOptions.defaultValue = option.textContent || option.innerText
+    if (configurationOptions.selectElement.multiple) {
+      configurationOptions.defaultValue = ''
+    } else if (option.textContent || option.innerText) {
+      configurationOptions.defaultValue = option.textContent || option.innerText
+    }
   }
 
   if (configurationOptions.name === undefined) configurationOptions.name = ''

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 15.1.0
+  version: 15.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-13 00:00:00.000000000 Z
+date: 2019-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govspeak
@@ -638,8 +638,10 @@ files:
 - node_modules/accessible-autocomplete/dist/lib/accessible-autocomplete.react.min.js.map
 - node_modules/accessible-autocomplete/examples/form.html
 - node_modules/accessible-autocomplete/examples/index.html
+- node_modules/accessible-autocomplete/examples/multiselect.html
 - node_modules/accessible-autocomplete/examples/preact/index.html
 - node_modules/accessible-autocomplete/examples/react/index.html
+- node_modules/accessible-autocomplete/package-lock.json
 - node_modules/accessible-autocomplete/package.json
 - node_modules/accessible-autocomplete/preact.js
 - node_modules/accessible-autocomplete/react.js