From 0752b3e56ed0f8c1831ea4e838413e7ef75a139d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Wed, 23 Mar 2022 13:03:20 +0000 Subject: [PATCH 1/4] feat: Allow autocomplete to be styled from parent --- index.html | 16 ++++++++ src/components/address-autocomplete/index.ts | 7 +++- .../address-autocomplete/styles.scss | 40 +++++++++++++++++++ 3 files changed, 62 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2ac94e59..9271f0e1 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,22 @@ 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 408f244b..15103be2 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: any) => { this._selectedAddress = this._addressesInPostcode.filter( @@ -170,7 +171,11 @@ 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..81d436be 100644 --- a/src/components/address-autocomplete/styles.scss +++ b/src/components/address-autocomplete/styles.scss @@ -1,6 +1,46 @@ @import "node_modules/govuk-frontend/govuk/all"; // @import "accessible-autocomplete"; +:host { + $font-size: var(--autocomplete__input__font-size, 19px); + $input-height: var(--autocomplete__input__height, 35px); + + .autocomplete__input { + 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-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); + } +} + // makes listbox items consistent with label font, etc ul, li { From a8861d1266eaf50ef4bd26062db681b4ef58a6e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Wed, 23 Mar 2022 14:18:48 +0000 Subject: [PATCH 2/4] fix: Add font-family variable --- index.html | 5 +++-- .../address-autocomplete/styles.scss | 18 ++++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 9271f0e1..c109702a 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,9 @@ --autocomplete__option__padding: 6px 12px 7px 12px; --autocomplete__menu__max-height: 336px; --autocomplete__option__border-bottom: solid 1px grey; - --autocomplete__option__hover-border-color: pink; - --autocomplete__option__hover-background-color: pink; + --autocomplete__option__hover-border-color: rgb(0, 99, 96); + --autocomplete__option__hover-background-color: rgb(0, 99, 96); + --autocomplete__font-family: "Courier New"; } --> diff --git a/src/components/address-autocomplete/styles.scss b/src/components/address-autocomplete/styles.scss index 81d436be..ac4ef081 100644 --- a/src/components/address-autocomplete/styles.scss +++ b/src/components/address-autocomplete/styles.scss @@ -2,10 +2,21 @@ // @import "accessible-autocomplete"; :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); @@ -19,6 +30,7 @@ } .autocomplete__option { + font-family: $font-family; font-size: $font-size; padding: var(--autocomplete__option__padding, 5px); border-bottom: var( @@ -40,9 +52,3 @@ max-height: var(--autocomplete__menu__max-height, 342px); } } - -// makes listbox items consistent with label font, etc -ul, -li { - font-family: Inter, Helvetica, sans-serif; -} From 1beb70fc56c26c778158151a6df395671018fa73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Wed, 23 Mar 2022 14:49:06 +0000 Subject: [PATCH 3/4] whitespace change to redeploy --- src/components/address-autocomplete/styles.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/address-autocomplete/styles.scss b/src/components/address-autocomplete/styles.scss index ac4ef081..1cf0d70d 100644 --- a/src/components/address-autocomplete/styles.scss +++ b/src/components/address-autocomplete/styles.scss @@ -37,7 +37,6 @@ --autocomplete__option__border-bottom, solid 1px #b1b4b6 ); - &:hover, &:focus { border-color: var(--autocomplete__option__hover-border-color, #1d70b8); From 002185bafe43dbfb9f967d608da8e89df4ac1e00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Wed, 23 Mar 2022 15:08:51 +0000 Subject: [PATCH 4/4] fix: Comment out style example --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 11f192a7..c109702a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ rel="stylesheet" /> - + -->