diff --git a/CHANGELOG.md b/CHANGELOG.md index 5831b367..c63b0ee2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 39c6cb1d..e4af0fab 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,47 @@ 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 +``` + +To add the accessible autocomplete to a page in your prototype, first add a `select` component with your options. For example: + +```html +
+ + +
+``` + +At the end of the same page add a `pageScripts` block for the JavaScript. This turns the `select` into an autocomplete. + +```js +<% block pageScripts %> + + + +<% endblock %> + +``` + ### Styling the autocomplete A stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css). diff --git a/dist/accessible-autocomplete.min.css b/dist/accessible-autocomplete.min.css index 65463a14..7747670a 100644 --- a/dist/accessible-autocomplete.min.css +++ b/dist/accessible-autocomplete.min.css @@ -1,3 +1,3 @@ -.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;height:2.5rem;line-height:1.25;margin-bottom:0;width:100%}.autocomplete__input{background-color:transparent;position:relative}.autocomplete__hint{color:#505a5f;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{box-shadow:inset 0 0 0 2px;outline:3px solid #fd0;outline-offset:0}.autocomplete__input--show-all-values{cursor:pointer;padding:5px 35px 5px 5px}.autocomplete__dropdown-arrow-down{display:inline-block;height:24px;position:absolute;right:8px;top:10px;width:24px;z-index:-1}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;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:0 2px 6px rgba(0,0,0,.257);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:1px solid #b1b4b6;border-left-width:0;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#f3f2f1}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:none}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{background-color:Highlight;background-color:SelectedItem;border-color:SelectedItem;color:HighlightText;color:SelectedItemText;forced-color-adjust:none;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#f3f2f1;color:#505a5f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1rem;font-weight:400}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1.1875rem;line-height:1.3157894737}} +.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;height:2.5rem;line-height:1.25;margin-bottom:0;width:100%}.autocomplete__input{background-color:transparent;position:relative}.autocomplete__hint{color:#505a5f;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{box-shadow:inset 0 0 0 2px;outline:3px solid #fd0;outline-offset:0}.autocomplete__input--show-all-values{cursor:pointer;padding:5px 35px 5px 5px}.autocomplete__dropdown-arrow-down{display:inline-block;height:24px;position:absolute;right:8px;top:10px;width:24px;z-index:-1}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;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:0 2px 6px rgba(0,0,0,.257);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:1px solid #b1b4b6;border-left-width:0;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#f3f2f1}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:none}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{background-color:Highlight;background-color:SelectedItem;border-color:SelectedItem;color:HighlightText;color:SelectedItemText;forced-color-adjust:none;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#f3f2f1;color:#505a5f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1rem;font-weight:400}.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}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:1.1875rem;line-height:1.3157894737}} /*# sourceMappingURL=accessible-autocomplete.min.css.map*/ \ No newline at end of file diff --git a/dist/accessible-autocomplete.min.css.map b/dist/accessible-autocomplete.min.css.map index e1100a1b..c6803da8 100644 --- a/dist/accessible-autocomplete.min.css.map +++ b/dist/accessible-autocomplete.min.css.map @@ -1 +1 @@ -{"version":3,"file":"accessible-autocomplete.min.css","mappings":"AAAA,uBACE,iBACF,CAEA,yCAEE,uBAAgB,CAAhB,eAAgB,CAChB,wBAAyB,CACzB,eAAgB,CAChB,qBAAsB,CAGtB,aAAc,CADd,gBAAiB,CADjB,eAAgB,CAGhB,UACF,CAEA,qBACE,4BAA6B,CAC7B,iBACF,CAEA,oBACE,aAAc,CACd,iBACF,CAEA,8BACE,WACF,CAEA,8BAGE,0BAA2B,CAF3B,sBAAuB,CACvB,gBAEF,CAEA,sCAEE,cAAe,CADf,wBAEF,CAEA,mCAEE,oBAAqB,CAIrB,WAAY,CAHZ,iBAAkB,CAClB,SAAU,CAGV,QAAS,CAFT,UAAW,CAJX,UAOF,CAEA,oBACE,qBAAyB,CACzB,wBAAyB,CACzB,YAAa,CACb,aAAc,CACd,QAAS,CACT,gBAAiB,CACjB,iBAAkB,CAClB,SAAU,CACV,UAAW,CACX,sBACF,CAEA,6BACE,aACF,CAEA,4BACE,YACF,CAEA,6BACE,qCAA+C,CAC/C,MAAO,CACP,iBAAkB,CAClB,QAAS,CACT,WACF,CAEA,4BACE,iBACF,CAEA,sBAEE,+BAAmB,CAAnB,mBAAmB,CAAnB,oBAAmB,CAAnB,oBAAmB,CACnB,cAAe,CACf,aAAc,CACd,iBACF,CAEA,wBACE,mBACF,CAEA,oCACE,kBACF,CAEA,mCACE,qBACF,CAEA,2BACE,wBACF,CAEA,2DAEE,wBAAyB,CACzB,oBAAqB,CACrB,UAAY,CACZ,YACF,CAEA,yDACE,oBACE,sBACF,CAEA,sBACE,sBAAuB,CACvB,eACF,CAEA,2DAGE,0BAA2B,CAK3B,6BAA8B,CAC9B,yBAA0B,CAJ1B,mBAAoB,CAKpB,sBAAuB,CARvB,wBAAyB,CASzB,8BACF,CACF,CAEA,kCACE,wBAAyB,CACzB,aAAc,CACd,kBACF,CAEA,+DAGE,cAAe,CACf,eACF,CAEA,0CAEE,WACF,CAEA,yBACE,+DAGE,mBAAoB,CACpB,wBACF,CACF,C","sources":["webpack:///./autocomplete.css"],"sourcesContent":[".autocomplete__wrapper {\n position: relative;\n}\n\n.autocomplete__hint,\n.autocomplete__input {\n appearance: none;\n border: 2px solid #0b0c0c;\n border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */\n box-sizing: border-box;\n margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */\n line-height: 1.25;\n height: 2.5rem;\n width: 100%;\n}\n\n.autocomplete__input {\n background-color: transparent;\n position: relative;\n}\n\n.autocomplete__hint {\n color: #505a5f;\n position: absolute;\n}\n\n.autocomplete__input--default {\n padding: 5px;\n}\n\n.autocomplete__input--focused {\n outline: 3px solid #fd0;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px;\n}\n\n.autocomplete__input--show-all-values {\n padding: 5px 35px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */\n cursor: pointer;\n}\n\n.autocomplete__dropdown-arrow-down {\n z-index: -1;\n display: inline-block;\n position: absolute;\n right: 8px;\n width: 24px;\n height: 24px;\n top: 10px;\n}\n\n.autocomplete__menu {\n background-color: #ffffff;\n border: 2px solid #0b0c0c;\n border-top: 0;\n color: #0b0c0c;\n margin: 0;\n max-height: 342px;\n overflow-x: hidden;\n padding: 0;\n width: 100%;\n width: calc(100% - 4px);\n}\n\n.autocomplete__menu--visible {\n display: block;\n}\n\n.autocomplete__menu--hidden {\n display: none;\n}\n\n.autocomplete__menu--overlay {\n box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;\n left: 0;\n position: absolute;\n top: 100%;\n z-index: 100;\n}\n\n.autocomplete__menu--inline {\n position: relative;\n}\n\n.autocomplete__option {\n border-bottom: solid #b1b4b6;\n border-width: 1px 0;\n cursor: pointer;\n display: block;\n position: relative;\n}\n\n.autocomplete__option > * {\n pointer-events: none;\n}\n\n.autocomplete__option:first-of-type {\n border-top-width: 0;\n}\n\n.autocomplete__option:last-of-type {\n border-bottom-width: 0;\n}\n\n.autocomplete__option--odd {\n background-color: #f3f2f1;\n}\n\n.autocomplete__option--focused,\n.autocomplete__option:hover {\n background-color: #1d70b8;\n border-color: #1d70b8;\n color: white;\n outline: none;\n}\n\n@media (-ms-high-contrast: active), (forced-colors: active) {\n .autocomplete__menu {\n border-color: FieldText;\n }\n\n .autocomplete__option {\n background-color: Field;\n color: FieldText;\n }\n\n .autocomplete__option--focused,\n .autocomplete__option:hover {\n forced-color-adjust: none; /* prevent backplate from obscuring text */\n background-color: Highlight;\n border-color: Highlight;\n color: HighlightText;\n\n /* Prefer SelectedItem / SelectedItemText in browsers that support it */\n background-color: SelectedItem;\n border-color: SelectedItem;\n color: SelectedItemText;\n outline-color: SelectedItemText;\n }\n}\n\n.autocomplete__option--no-results {\n background-color: #f3f2f1;\n color: #505a5f;\n cursor: not-allowed;\n}\n\n.autocomplete__hint,\n.autocomplete__input,\n.autocomplete__option {\n font-size: 1rem;\n font-weight: 400;\n}\n\n.autocomplete__hint,\n.autocomplete__option {\n padding: 5px;\n}\n\n@media (min-width: 641px) {\n .autocomplete__hint,\n .autocomplete__input,\n .autocomplete__option {\n font-size: 1.1875rem;\n line-height: 1.3157894737;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"accessible-autocomplete.min.css","mappings":"AAAA,uBACE,iBACF,CAEA,yCAEE,uBAAgB,CAAhB,eAAgB,CAChB,wBAAyB,CACzB,eAAgB,CAChB,qBAAsB,CAGtB,aAAc,CADd,gBAAiB,CADjB,eAAgB,CAGhB,UACF,CAEA,qBACE,4BAA6B,CAC7B,iBACF,CAEA,oBACE,aAAc,CACd,iBACF,CAEA,8BACE,WACF,CAEA,8BAGE,0BAA2B,CAF3B,sBAAuB,CACvB,gBAEF,CAEA,sCAEE,cAAe,CADf,wBAEF,CAEA,mCAEE,oBAAqB,CAIrB,WAAY,CAHZ,iBAAkB,CAClB,SAAU,CAGV,QAAS,CAFT,UAAW,CAJX,UAOF,CAEA,oBACE,qBAAyB,CACzB,wBAAyB,CACzB,YAAa,CACb,aAAc,CACd,QAAS,CACT,gBAAiB,CACjB,iBAAkB,CAClB,SAAU,CACV,UAAW,CACX,sBACF,CAEA,6BACE,aACF,CAEA,4BACE,YACF,CAEA,6BACE,qCAA+C,CAC/C,MAAO,CACP,iBAAkB,CAClB,QAAS,CACT,WACF,CAEA,4BACE,iBACF,CAEA,sBAEE,+BAAmB,CAAnB,mBAAmB,CAAnB,oBAAmB,CAAnB,oBAAmB,CACnB,cAAe,CACf,aAAc,CACd,iBACF,CAEA,wBACE,mBACF,CAEA,oCACE,kBACF,CAEA,mCACE,qBACF,CAEA,2BACE,wBACF,CAEA,2DAEE,wBAAyB,CACzB,oBAAqB,CACrB,UAAY,CACZ,YACF,CAEA,yDACE,oBACE,sBACF,CAEA,sBACE,sBAAuB,CACvB,eACF,CAEA,2DAGE,0BAA2B,CAK3B,6BAA8B,CAC9B,yBAA0B,CAJ1B,mBAAoB,CAKpB,sBAAuB,CARvB,wBAAyB,CASzB,8BACF,CACF,CAEA,kCACE,wBAAyB,CACzB,aAAc,CACd,kBACF,CAEA,+DAGE,cAAe,CACf,eACF,CAGA,qHAGE,0CAA+C,CAC/C,kCAAmC,CACnC,iCACF,CAEA,0CAEE,WACF,CAEA,yBACE,+DAGE,mBAAoB,CACpB,wBACF,CACF,C","sources":["webpack:///./autocomplete.css"],"sourcesContent":[".autocomplete__wrapper {\n position: relative;\n}\n\n.autocomplete__hint,\n.autocomplete__input {\n appearance: none;\n border: 2px solid #0b0c0c;\n border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */\n box-sizing: border-box;\n margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */\n line-height: 1.25;\n height: 2.5rem;\n width: 100%;\n}\n\n.autocomplete__input {\n background-color: transparent;\n position: relative;\n}\n\n.autocomplete__hint {\n color: #505a5f;\n position: absolute;\n}\n\n.autocomplete__input--default {\n padding: 5px;\n}\n\n.autocomplete__input--focused {\n outline: 3px solid #fd0;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px;\n}\n\n.autocomplete__input--show-all-values {\n padding: 5px 35px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */\n cursor: pointer;\n}\n\n.autocomplete__dropdown-arrow-down {\n z-index: -1;\n display: inline-block;\n position: absolute;\n right: 8px;\n width: 24px;\n height: 24px;\n top: 10px;\n}\n\n.autocomplete__menu {\n background-color: #ffffff;\n border: 2px solid #0b0c0c;\n border-top: 0;\n color: #0b0c0c;\n margin: 0;\n max-height: 342px;\n overflow-x: hidden;\n padding: 0;\n width: 100%;\n width: calc(100% - 4px);\n}\n\n.autocomplete__menu--visible {\n display: block;\n}\n\n.autocomplete__menu--hidden {\n display: none;\n}\n\n.autocomplete__menu--overlay {\n box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;\n left: 0;\n position: absolute;\n top: 100%;\n z-index: 100;\n}\n\n.autocomplete__menu--inline {\n position: relative;\n}\n\n.autocomplete__option {\n border-bottom: solid #b1b4b6;\n border-width: 1px 0;\n cursor: pointer;\n display: block;\n position: relative;\n}\n\n.autocomplete__option > * {\n pointer-events: none;\n}\n\n.autocomplete__option:first-of-type {\n border-top-width: 0;\n}\n\n.autocomplete__option:last-of-type {\n border-bottom-width: 0;\n}\n\n.autocomplete__option--odd {\n background-color: #f3f2f1;\n}\n\n.autocomplete__option--focused,\n.autocomplete__option:hover {\n background-color: #1d70b8;\n border-color: #1d70b8;\n color: white;\n outline: none;\n}\n\n@media (-ms-high-contrast: active), (forced-colors: active) {\n .autocomplete__menu {\n border-color: FieldText;\n }\n\n .autocomplete__option {\n background-color: Field;\n color: FieldText;\n }\n\n .autocomplete__option--focused,\n .autocomplete__option:hover {\n forced-color-adjust: none; /* prevent backplate from obscuring text */\n background-color: Highlight;\n border-color: Highlight;\n color: HighlightText;\n\n /* Prefer SelectedItem / SelectedItemText in browsers that support it */\n background-color: SelectedItem;\n border-color: SelectedItem;\n color: SelectedItemText;\n outline-color: SelectedItemText;\n }\n}\n\n.autocomplete__option--no-results {\n background-color: #f3f2f1;\n color: #505a5f;\n cursor: not-allowed;\n}\n\n.autocomplete__hint,\n.autocomplete__input,\n.autocomplete__option {\n font-size: 1rem;\n font-weight: 400;\n}\n\n/* Try font \"GDS Transport\" for GOV.UK form groups */\n.govuk-form-group .autocomplete__hint,\n.govuk-form-group .autocomplete__input,\n.govuk-form-group .autocomplete__option {\n font-family: \"GDS Transport\", arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.autocomplete__hint,\n.autocomplete__option {\n padding: 5px;\n}\n\n@media (min-width: 641px) {\n .autocomplete__hint,\n .autocomplete__input,\n .autocomplete__option {\n font-size: 1.1875rem;\n line-height: 1.3157894737;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json new file mode 100644 index 00000000..f4f5d0ce --- /dev/null +++ b/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" + ] +} diff --git a/src/autocomplete.css b/src/autocomplete.css index 229217a4..67798b6e 100644 --- a/src/autocomplete.css +++ b/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;