Skip to content

Commit

Permalink
🐛 Enables landline phones in HdPhoneInput (#1247)
Browse files Browse the repository at this point in the history
  • Loading branch information
leandroinacio authored Feb 13, 2024
1 parent 63c2fd1 commit a88239d
Show file tree
Hide file tree
Showing 13 changed files with 9,037 additions and 9,683 deletions.
18,619 changes: 8,985 additions & 9,634 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/components/form/HdInputFormatter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default {
name: 'HdInputFormatter',
mixins: [formField],
components: { HdInput },
inheritAttrs: false,
props: {
value: {
type: [Number, String],
Expand Down
9 changes: 7 additions & 2 deletions src/components/form/HdInputPhone.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<template>
<li
v-for="(country, index) in sortedCountriesList"
:key="country.code"
:key="country.code + index"
:id="country.code"
class="phone-input__dropdown__option"
role="option"
Expand Down Expand Up @@ -110,6 +110,11 @@ export default {
type: String,
required: true,
},
mobileOnly: {
type: Boolean,
required: false,
default: false,
},
lang: {
type: String,
default: 'de',
Expand Down Expand Up @@ -185,7 +190,7 @@ export default {
return {
validate: (value) => {
const phoneNumber = new PhoneNumber(value);
return phoneNumber.isMobile();
return this.mobileOnly ? phoneNumber.isMobile() : true;
},
errorMessage: this.t.FORM.VALIDATION.NOT_MOBILE_NUMBER,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@

exports[`HdArrowButton renders component 1`] = `
<button autocomplete="off" type="button" class="arrowButton arrowButton--right">
<!---->
</button>
<!----></button>
`;
21 changes: 7 additions & 14 deletions tests/unit/components/buttons/__snapshots__/HdButton.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,37 @@ exports[`HdButton can be used as an icon button 1`] = `

exports[`HdButton should render component with \`btn\` class 1`] = `
<button class="btn btn--primary">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--dark-background class if prop isInDarkBackground is true 1`] = `
<button class="btn btn--primary btn--dark-background">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--flat class 1`] = `
<button class="btn btn--flat">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--ghost class 1`] = `
<button class="btn btn--ghost">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--primary class 1`] = `
<button class="btn btn--primary">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--secondary class 1`] = `
<button class="btn btn--secondary">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render component with btn--tertiary class 1`] = `
<button class="btn btn--tertiary">
<!----> <span class="btn__content"><span>Button text</span></span>
</button>
<!----> <span class="btn__content"><span>Button text</span></span></button>
`;

exports[`HdButton should render the icon passed as prop 1`] = `
Expand Down
20 changes: 20 additions & 0 deletions tests/unit/components/form/HdInputPhone.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,26 @@ describe('HdInputPhone', () => {
expect(wrapper.emitted('input')[0][0]).toBe(formattedValue);
});

it('should validate for phone numbers', async () => {
const formattedValue = '+49 30 220440000';
const { wrapper } = build({
defaultCountry: 'DE',
mobileOnly: true,
});

const $input = wrapper.find('input');

$input.trigger('focus');
$input.setValue('+49030220440000');
$input.trigger('blur');

await wrapper.vm.$nextTick();

const input = wrapper.find('div.field');
expect(wrapper.emitted('input')[0][0]).toBe(formattedValue);
expect(input.classes()).toContain('field--errored');
});

it('should update the input when selecting an option', async () => {
const { wrapper } = build({
defaultCountry: 'DE',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ exports[`HdDynamicForm renders slots 1`] = `
<div>The before button slot</div> <button class="dynamicForm__submit btn btn--primary">
<!----> <span class="btn__content">
submit
</span>
</button>
</span></button>
<div>The after slot</div>
</form>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ exports[`HdInputPassword is rendered as expected 1`] = `
test label
</label>
<div class="field__input-right"><button type="button" class="password-input__visibility-toggle">
<!---->
</button></div>
<!----></button></div>
<div class="field__border"></div>
</div>
<p class="field__helper">‍</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

exports[`HdInputPhone is rendered as expected 1`] = `
<div class="phone-input"><button aria-haspopup="listbox" aria-label="Wählen Sie einen Ländercode:" aria-activedescendant="+49, Deutschland" class="phone-input__selector"><span class="phone-input__selector__flag flag-icon flag-icon-de"></span>
<!---->
</button>
<!----></button>
<ul tabindex="-1" role="listbox" aria-label="Telefonnummer" class="phone-input__dropdown" style="display: none;">
<li id="AD" role="option" class="phone-input__dropdown__option"><button class="option"><span class="option__flag flag-icon flag-icon-ad"></span>
<p><span class="option__name">Andorra</span> <span class="option__dial-code">+376</span></p>
Expand Down Expand Up @@ -1266,7 +1265,7 @@ exports[`HdInputPhone is rendered as expected 1`] = `
<!---->
</li>
</ul>
<div class="field text-field phone-input__field field--filled" placeholder="+49 555 555 5555" label="Telefonnummer" custom-rules="[object Object],[object Object],[object Object]">
<div class="field text-field phone-input__field field--filled">
<!---->
<div class="field__body">
<div class="field__main"><input autocomplete="on" type="text" id="phoneNumber" name="phoneNumber" placeholder="" data-lpignore="true" label="Telefonnummer" class="input"> <label for="phoneNumber" id="phone-number-label" class="field__label">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ exports[`HdPasswordConfirm is rendered as expected 1`] = `
Ihr Passwort
</label>
<div class="field__input-right"><button type="button" class="password-input__visibility-toggle">
<!---->
</button></div>
<!----></button></div>
<div class="field__border"></div>
</div>
<p class="field__helper">‍</p>
Expand Down
18 changes: 6 additions & 12 deletions tests/unit/components/form/__snapshots__/HdRange.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ exports[`HdRange Labels renders 1`] = `
</button><button type="button" class="range__step">
<p class="range__step-label">label4</p>
</button><button type="button" class="range__step">
<!---->
</button></div>
<!----></button></div>
<div class="range__thumb" style="transform: translateX(0px);">
<!---->
<div class="range__thumb__inner">
Expand All @@ -31,16 +30,11 @@ exports[`HdRange renders as expected 1`] = `
<div class="range__progress" style="transform: scaleX(0.5);"></div>
</div>
<div class="range__steps"><button type="button" class="range__step">
<!---->
</button><button type="button" class="range__step">
<!---->
</button><button type="button" class="range__step">
<!---->
</button><button type="button" class="range__step">
<!---->
</button><button type="button" class="range__step">
<!---->
</button></div>
<!----></button><button type="button" class="range__step">
<!----></button><button type="button" class="range__step">
<!----></button><button type="button" class="range__step">
<!----></button><button type="button" class="range__step">
<!----></button></div>
<div class="range__thumb" style="transform: translateX(0px);">
<!---->
<div class="range__thumb__inner">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,13 @@ exports[`HdTagsSelector The component is rendered 1`] = `
<section class="tags-selector__selected-tags">
<div class="tags-selector__selected-tags__tag">
<div class="tags-selector__selected-tags__tag__label">Jon "Snow"</div> <button class="tags-selector__selected-tags__tag__remove">
<!---->
</button>
<!----></button>
</div>
<div class="tags-selector__selected-tags__tag">
<div class="tags-selector__selected-tags__tag__label">Daenerys</div> <button class="tags-selector__selected-tags__tag__remove">
<!---->
</button>
<!----></button>
</div> <button class="tags-selector__selected-tags__panel-toggle">
<!---->
</button>
<!----></button>
</section>
<section class="tags-selector__panel">
<div class="tags-selector__panel__tag tags-selector__panel__tag--isSelected">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@ exports[`HdGallery renders the component 1`] = `
</div>
</div>
<div class="gallery__controls"><button type="button" class="gallery__controls-prev isDisabled">
<!---->
</button> <button type="button" class="gallery__controls-next">
<!---->
</button></div>
<!----></button> <button type="button" class="gallery__controls-next">
<!----></button></div>
<p class="gallery__info">1/10</p>
</div>
</figure>
Expand Down

0 comments on commit a88239d

Please sign in to comment.