Skip to content

Commit

Permalink
Remove unused single country variant from phone input component (#11260)
Browse files Browse the repository at this point in the history 
changelog: Internal, Code Quality, Remove unused variant for phone input component
  • Loading branch information
@aduth
aduth authored Sep 18, 2024
1 parent 2942727 commit 9cb0e01
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 93 deletions.
10 changes: 0 additions & 10 deletions app/components/phone_input_component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,6 @@ lg-phone-input {
.iti__dial-code {
color: color('ink');
}

.iti:not(.iti--allow-dropdown) input {
padding-left: 36px;
padding-right: 6px;
}

.iti:not(.iti--allow-dropdown) .iti__flag-container {
left: 0;
right: auto;
}
}

.phone-input__international-code-wrapper {
Expand Down
53 changes: 5 additions & 48 deletions app/javascript/packages/phone-input/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,6 @@ import { computeAccessibleName } from 'dom-accessibility-api';
import * as analytics from '@18f/identity-analytics';
import { useSandbox } from '@18f/identity-test-helpers';

const MULTIPLE_OPTIONS_HTML = `
<select class="phone-input__international-code" data-countries="[&quot;CA&quot;,&quot;US&quot;]" id="phone_form_international_code">
<option data-supports-sms="true" data-supports-voice="true" data-country-code="1" data-country-name="United States" value="US">United States +1</option>
<option data-supports-sms="true" data-supports-voice="false" data-country-code="1" data-country-name="Canada" value="CA">Canada +1</option>
<option data-supports-sms="false" data-supports-voice="false" data-country-code="94" data-country-name="Sri Lanka" value="LK">Sri Lanka +94</option>
</select>`;

const SINGLE_OPTION_HTML = `
<select class="phone-input__international-code" data-countries="[&quot;US&quot;]" id="phone_form_international_code">
<option data-supports-sms="true" data-supports-voice="true" data-country-code="1" data-country-name="United States" value="US">United States +1</option>
</select>`;

const SINGLE_OPTION_SELECT_NON_US_HTML = `
<select class="phone-input__international-code" data-countries="[&quot;CA&quot;]" id="phone_form_international_code">
<option data-supports-sms="true" data-supports-voice="false" data-country-code="1" data-country-name="Canada" value="CA">Canada +1</option>
</select>`;

describe('PhoneInput', () => {
const sandbox = useSandbox();

Expand All @@ -35,13 +18,10 @@ describe('PhoneInput', () => {
});

function createAndConnectElement({
isUSSingleOption = false,
isInternationalSingleOption = false,
deliveryMethods = ['sms', 'voice'],
translatedCountryCodeNames = {},
phoneInputValue = undefined,
}: {
isUSSingleOption?: boolean;
isInternationalSingleOption?: Boolean;
deliveryMethods?: string[];
translatedCountryCodeNames?: Record<string, string>;
Expand Down Expand Up @@ -74,9 +54,11 @@ describe('PhoneInput', () => {
</script>
<div class="phone-input__international-code-wrapper">
<label class="usa-label" for="phone_form_international_code">Country code</label>
${isUSSingleOption ? SINGLE_OPTION_HTML : ''}
${isInternationalSingleOption ? SINGLE_OPTION_SELECT_NON_US_HTML : ''}
${!isUSSingleOption && !isInternationalSingleOption ? MULTIPLE_OPTIONS_HTML : ''}
<select class="phone-input__international-code" data-countries="[&quot;CA&quot;,&quot;US&quot;]" id="phone_form_international_code">
<option data-supports-sms="true" data-supports-voice="true" data-country-code="1" data-country-name="United States" value="US">United States +1</option>
<option data-supports-sms="true" data-supports-voice="false" data-country-code="1" data-country-name="Canada" value="CA">Canada +1</option>
<option data-supports-sms="false" data-supports-voice="false" data-country-code="94" data-country-name="Sri Lanka" value="LK">Sri Lanka +94</option>
</select>
</div>
<label class="usa-label" for="phone_form_phone">Phone number</label>
<lg-validated-field>
Expand All @@ -94,12 +76,6 @@ describe('PhoneInput', () => {
return element;
}

it('initializes with dropdown', () => {
const input = createAndConnectElement();

expect(input.querySelector('.iti.iti--allow-dropdown')).to.be.ok();
});

context('with US phone number', () => {
it('validates input', async () => {
const input = createAndConnectElement();
Expand Down Expand Up @@ -240,25 +216,6 @@ describe('PhoneInput', () => {
expect(controlled).to.equal(listbox);
});

context('with single option', () => {
it('initializes without dropdown', () => {
const input = createAndConnectElement({ isUSSingleOption: true });

expect(input.querySelector('.iti:not(.iti--allow-dropdown)')).to.be.ok();
});

it('validates phone from region', async () => {
const input = createAndConnectElement({ isInternationalSingleOption: true });

const phoneNumber = getByLabelText(input, 'Phone number') as HTMLInputElement;

await userEvent.type(phoneNumber, '5135551234');
expect(phoneNumber.validationMessage).to.equal(
'Enter a phone number with the correct number of digits.',
);
});
});

context('with constrained delivery options', () => {
it('validates supported delivery method', async () => {
const input = createAndConnectElement({ deliveryMethods: ['voice'] });
Expand Down
53 changes: 22 additions & 31 deletions app/javascript/packages/phone-input/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,6 @@ export class PhoneInputElement extends HTMLElement {
return this.iti.selectedFlag.querySelector('.usa-sr-only')!;
}

get hasDropdown(): boolean {
return Boolean(this.supportedCountryCodes && this.supportedCountryCodes.length > 1);
}

/**
* Logs an event when the country code has been changed.
*/
Expand All @@ -127,12 +123,10 @@ export class PhoneInputElement extends HTMLElement {
const countryCode = this.getSelectedCountryCode();
if (countryCode) {
this.codeInput.value = countryCode;
if (this.hasDropdown) {
// Move value text from title attribute to the flag's hidden text element.
// See: https://github.com/jackocnr/intl-tel-input/blob/d54b127/src/js/intlTelInput.js#L1191-L1197
this.valueText.textContent = this.iti.selectedFlag.title;
this.iti.selectedFlag.removeAttribute('title');
}
// Move value text from title attribute to the flag's hidden text element.
// See: https://github.com/jackocnr/intl-tel-input/blob/d54b127/src/js/intlTelInput.js#L1191-L1197
this.valueText.textContent = this.iti.selectedFlag.title;
this.iti.selectedFlag.removeAttribute('title');
if (fireChangeEvent) {
this.codeInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
}
Expand All @@ -148,32 +142,29 @@ export class PhoneInputElement extends HTMLElement {
localizedCountries: countryCodePairs,
onlyCountries: supportedCountryCodes,
autoPlaceholder: 'off',
allowDropdown: this.hasDropdown,
}) as IntlTelInput;

this.iti = iti;

if (this.hasDropdown) {
// Remove duplicate items in the country list
const preferred: NodeListOf<HTMLLIElement> =
iti.countryList.querySelectorAll('.iti__preferred');
preferred.forEach((listItem) => {
const { countryCode } = listItem.dataset;
const duplicates: NodeListOf<HTMLLIElement> = iti.countryList.querySelectorAll(
`.iti__standard[data-country-code="${countryCode}"]`,
);
duplicates.forEach((duplicateListItem) => {
duplicateListItem.parentNode?.removeChild(duplicateListItem);
});
// Remove duplicate items in the country list
const preferred: NodeListOf<HTMLLIElement> =
iti.countryList.querySelectorAll('.iti__preferred');
preferred.forEach((listItem) => {
const { countryCode } = listItem.dataset;
const duplicates: NodeListOf<HTMLLIElement> = iti.countryList.querySelectorAll(
`.iti__standard[data-country-code="${countryCode}"]`,
);
duplicates.forEach((duplicateListItem) => {
duplicateListItem.parentNode?.removeChild(duplicateListItem);
});

// Improve base accessibility of intl-tel-input
const valueText = document.createElement('div');
valueText.classList.add('usa-sr-only');
iti.selectedFlag.appendChild(valueText);
iti.selectedFlag.setAttribute('aria-label', this.strings.country_code_label);
iti.selectedFlag.removeAttribute('aria-owns');
}
});

// Improve base accessibility of intl-tel-input
const valueText = document.createElement('div');
valueText.classList.add('usa-sr-only');
iti.selectedFlag.appendChild(valueText);
iti.selectedFlag.setAttribute('aria-label', this.strings.country_code_label);
iti.selectedFlag.removeAttribute('aria-owns');

this.syncCountryToCodeInput({ fireChangeEvent: false });

Expand Down
4 changes: 0 additions & 4 deletions spec/components/previews/phone_input_component_preview.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ def default
def limited_country_selection
render(PhoneInputComponent.new(form: form_builder, allowed_countries: ['US', 'CA', 'FR']))
end

def single_country_selection
render(PhoneInputComponent.new(form: form_builder, allowed_countries: ['US']))
end
# @!endgroup

# @display form true
Expand Down

0 comments on commit 9cb0e01

Please sign in to comment.