diff --git a/index.html b/index.html index 2ac94e59..c109702a 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,23 @@ href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet" /> + +
diff --git a/src/components/address-autocomplete/index.ts b/src/components/address-autocomplete/index.ts index ba9561ab..2b92a4bf 100644 --- a/src/components/address-autocomplete/index.ts +++ b/src/components/address-autocomplete/index.ts @@ -67,6 +67,7 @@ export class AddressAutocomplete extends LitElement { source: this._options, defaultValue: this.initialAddress, showAllValues: true, + displayMenu: "overlay", tNoResults: () => "No addresses found", onConfirm: (option: string) => { this._selectedAddress = this._addressesInPostcode.filter( @@ -175,7 +176,12 @@ export class AddressAutocomplete extends LitElement { href="https://cdn.jsdelivr.net/npm/accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.css" /> -
`; +
`; } /** diff --git a/src/components/address-autocomplete/styles.scss b/src/components/address-autocomplete/styles.scss index 38d52f0b..1cf0d70d 100644 --- a/src/components/address-autocomplete/styles.scss +++ b/src/components/address-autocomplete/styles.scss @@ -1,8 +1,53 @@ @import "node_modules/govuk-frontend/govuk/all"; // @import "accessible-autocomplete"; -// makes listbox items consistent with label font, etc -ul, -li { - font-family: Inter, Helvetica, sans-serif; +:host { + $font-family: var( + --autocomplete__font-family, + "GDS Transport", + arial, + sans-serif + ); + $font-size: var(--autocomplete__input__font-size, 19px); + $input-height: var(--autocomplete__input__height, 35px); + + .govuk-label { + font-family: $font-family; + } + + .autocomplete__input { + font-family: $font-family; + font-size: $font-size; + height: $input-height; + padding: var(--autocomplete__input__padding, 5px 34px 5px 5px); + } + + .autocomplete__dropdown-arrow-down { + z-index: var(--autocomplete__dropdown-arrow-down__z-index, -1); + // Ensure the down arrow is vertically centred + $arrow-down-height: 17px; + top: calc(($input-height - $arrow-down-height) / 2); + } + + .autocomplete__option { + font-family: $font-family; + font-size: $font-size; + padding: var(--autocomplete__option__padding, 5px); + border-bottom: var( + --autocomplete__option__border-bottom, + solid 1px #b1b4b6 + ); + &:hover, + &:focus { + border-color: var(--autocomplete__option__hover-border-color, #1d70b8); + background-color: var( + --autocomplete__option__hover-background-color, + #1d70b8 + ); + } + } + + .autocomplete__menu { + max-height: var(--autocomplete__menu__max-height, 342px); + } }