Merge pull request #153 from ministryofjustice/autocomplete

[P4-362] Autocomplete

app/move/fields.js

@@ -41,6 +41,9 @@ function toLocationType (type) {
     id: `to_location_${type}`,
     name: `to_location_${type}`,
     classes: 'govuk-input--width-20',
+    attributes: {
+      'data-module': 'app-autocomplete',
+    },
     label: {
       text: `fields:to_location_${type}.label`,
       classes: 'govuk-label--s',
@@ -125,6 +128,9 @@ module.exports = {
     id: 'ethnicity',
     name: 'ethnicity',
     classes: 'govuk-input--width-20',
+    attributes: {
+      'data-module': 'app-autocomplete',
+    },
     items: [],
   },
   // move details

app/move/steps.js

@@ -22,8 +22,8 @@ module.exports = {
       'last_name',
       'first_names',
       'date_of_birth',
-      'gender',
       'ethnicity',
+      'gender',
     ],
   },
   '/move-details': {

common/assets/javascripts/application.js

@@ -8,6 +8,7 @@ import '../images/hmpps-apple-touch-icon-180x180.png'
 
 import { nodeListForEach } from './utils'
 import { initAll } from 'govuk-frontend'
+import accessibleAutocomplete from 'accessible-autocomplete'
 import Message from '../../components/message/message'
 
 initAll()
@@ -16,3 +17,14 @@ var $messages = document.querySelectorAll('[data-module="app-message"]')
 nodeListForEach($messages, function ($message) {
   new Message($message).init()
 })
+
+var $autocompletes = document.querySelectorAll(
+  '[data-module="app-autocomplete"]'
+)
+nodeListForEach($autocompletes, function ($autocomplete) {
+  accessibleAutocomplete.enhanceSelectElement({
+    selectElement: $autocomplete,
+    showAllValues: true,
+    defaultValue: '',
+  })
+})

common/assets/scss/components/_all.scss

@@ -1,3 +1,4 @@
+@import "autocomplete";
 @import "stack-trace";
 
 // Load components from the shared components folder

common/assets/scss/components/_autocomplete.scss

@@ -0,0 +1,133 @@
+.autocomplete__wrapper {
+  @include govuk-font($size: 19);
+  position: relative;
+  max-width: 41ex;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  height: 40px;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #BFC1C3;
+  position: absolute;
+}
+
+
+.autocomplete__hint,
+.autocomplete__option,
+.autocomplete__input--default {
+  padding: 5px;
+}
+
+.autocomplete__input--focused {
+  outline-offset: 0;
+  outline: 3px solid $govuk-focus-colour;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px;
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: govuk-colour("white");
+  border: 2px solid $govuk-input-border-colour;
+  border-top: 0;
+  color: #34384B;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid $govuk-border-colour;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+
+  > * {
+    pointer-events: none;
+  }
+
+  &:first-of-type {
+    border-top-width: 0;
+  }
+
+  &:last-of-type {
+    border-bottom-width: 0;
+  }
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: $govuk-link-colour;
+  border-color: $govuk-link-colour;
+  color: govuk-colour("white");
+  outline: none;
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: govuk-colour("grey-1");
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  @include govuk-font($size: 19);
+}
+

package.json

@@ -41,6 +41,7 @@
   ],
   "dependencies": {
     "@sentry/node": "^5.5.0",
+    "accessible-autocomplete": "^1.6.2",
     "axios": "^0.19.0",
     "body-parser": "^1.18.3",
     "chrono-node": "^1.3.11",