From 01fd0d2023bf66409d23e0c2f18f6bde9d3a6732 Mon Sep 17 00:00:00 2001 From: gvangeest Date: Mon, 23 May 2022 14:49:48 +0200 Subject: [PATCH] feat(input-tel-dropdown): add optgroups when preferredCountries are shown --- .changeset/fast-chairs-cross.md | 5 +++ .changeset/plenty-moles-repeat.md | 5 +++ .../input-tel-dropdown/use-cases.md | 7 ++- .../src/LionInputTelDropdown.js | 26 +++++++++-- .../test-suites/LionInputTelDropdown.suite.js | 44 ++++++++++++++++++- packages/input-tel/index.js | 1 + 6 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 .changeset/fast-chairs-cross.md create mode 100644 .changeset/plenty-moles-repeat.md diff --git a/.changeset/fast-chairs-cross.md b/.changeset/fast-chairs-cross.md new file mode 100644 index 000000000..2e2ba162e --- /dev/null +++ b/.changeset/fast-chairs-cross.md @@ -0,0 +1,5 @@ +--- +'@lion/input-tel-dropdown': patch +--- + +Add optgroups when preferredCountries are shown diff --git a/.changeset/plenty-moles-repeat.md b/.changeset/plenty-moles-repeat.md new file mode 100644 index 000000000..69cf15932 --- /dev/null +++ b/.changeset/plenty-moles-repeat.md @@ -0,0 +1,5 @@ +--- +'@lion/input-tel': patch +--- + +Export formatPhoneNumber diff --git a/docs/components/input-tel-dropdown/use-cases.md b/docs/components/input-tel-dropdown/use-cases.md index 8590a1b8a..37784f6b4 100644 --- a/docs/components/input-tel-dropdown/use-cases.md +++ b/docs/components/input-tel-dropdown/use-cases.md @@ -51,8 +51,7 @@ export const allowedRegions = () => html` ## Preferred regions -When `.preferredRegions` is configured, they will show up on top of the dropdown list to -enhance user experience. +When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience. ```js preview-story export const preferredRegionCodes = () => html` @@ -61,8 +60,8 @@ export const preferredRegionCodes = () => html` help-text="Preferred regions show on top" .modelValue=${'+31612345678'} name="phoneNumber" - .allowedRegions=${['NL', 'DE', 'GB', 'BE', 'US', 'CA']} - .preferredRegions=${['NL', 'DE']} + .allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']} + .preferredRegions=${['DE', 'NL']} > ${data?.regionMetaListPreferred?.length ? html` - ${data.regionMetaListPreferred.map(renderOption)} - - ${data?.regionMetaList?.map(renderOption)} + + ${data.regionMetaListPreferred.map(renderOption)} + + + ${data?.regionMetaList?.map(renderOption)} + ` : html` ${data?.regionMetaList?.map(renderOption)}`} @@ -206,6 +214,16 @@ export class LionInputTelDropdown extends LionInputTel { * @type {string[]} */ this.preferredRegions = []; + /** + * Group label for all countries, when preferredCountries are shown + * @protected + */ + this._allCountriesLabel = ''; + /** + * Group label for preferred countries, when preferredCountries are shown + * @protected + */ + this._preferredCountriesLabel = ''; /** @type {HTMLDivElement} */ this.__dropdownRenderParent = document.createElement('div'); diff --git a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js index ce955643f..846bfe9b0 100644 --- a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +++ b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js @@ -112,7 +112,11 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo }, refs: { dropdown: { - labels: { selectCountry: 'Select country' }, + labels: { + selectCountry: 'Select country', + allCountries: 'All countries', + preferredCountries: 'Suggested countries', + }, listeners: { // @ts-expect-error [allow-protected] change: el._onDropdownValueChange, @@ -125,6 +129,44 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo }, }), ); + spy.restore(); + }); + + it('can override "all-countries-label"', async () => { + const el = fixtureSync(html` <${tag} + .preferredRegions="${['PH']}" + > `); + const spy = sinon.spy( + /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates, + 'dropdown', + ); + // @ts-expect-error [allow-protected] + el._allCountriesLabel = 'foo'; + await el.updateComplete; + const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ ( + spy.args[0][0] + ); + + expect(templateDataForDropdown.refs.dropdown.labels.allCountries).to.eql('foo'); + spy.restore(); + }); + + it('can override "preferred-countries-label"', async () => { + const el = fixtureSync(html` <${tag} + .preferredRegions="${['PH']}" + > `); + const spy = sinon.spy( + /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates, + 'dropdown', + ); + // @ts-expect-error [allow-protected] + el._preferredCountriesLabel = 'foo'; + await el.updateComplete; + const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ ( + spy.args[0][0] + ); + expect(templateDataForDropdown.refs.dropdown.labels.preferredCountries).to.eql('foo'); + spy.restore(); }); it('syncs dropdown value initially from activeRegion', async () => { diff --git a/packages/input-tel/index.js b/packages/input-tel/index.js index 698cff0a0..7510ad944 100644 --- a/packages/input-tel/index.js +++ b/packages/input-tel/index.js @@ -1,3 +1,4 @@ +export { formatPhoneNumber } from './src/formatters.js'; export { LionInputTel } from './src/LionInputTel.js'; export { PhoneNumber } from './src/validators.js'; export { PhoneUtilManager } from './src/PhoneUtilManager.js';