@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-e92f7ac

package/src/main.css

@@ -518,18 +518,10 @@ div.critical-comms .critical-comms-body {
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
-[dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
-[dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-left: 0;
-  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-}
 .np-avatar-layout-horizontal {
   width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
   height: var(--np-avatar-layout-size);
@@ -543,79 +535,81 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
-[dir="rtl"] .np-avatar-layout-horizontal-child {
-  margin-right: calc(var(--np-avatar-offset) * -1);
-}
 .np-icon-button {
   border: none;
 }
 .np-icon-button-tertiary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-neutral-hover);
+  background-color: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-neutral-active);
+  background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  --Button-color: var(--color-interactive-control);
-  --Button-background: var(--color-interactive-accent);
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-accent-hover);
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-accent-active);
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
-  --Button-color: var(--color-contrast-overlay);
-  --Button-background: var(--color-sentiment-negative-primary);
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-primary-hover);
+  background-color: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-primary-active);
+  background-color: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-screen);
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-screen-hover);
+  background-color: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-screen-active);
+  background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-interactive-neutral);
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-neutral-hover);
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-neutral-active);
+  background-color: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
-  --Button-color: var(--color-sentiment-negative-primary);
-  --Button-background: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
+  background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  background-color: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
   color: var(--color-white);
@@ -711,259 +705,6 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-padding: var(--size-8) var(--size-12);
-  --Button-border-radius: var(--radius-full);
-  --Button-font-size: var(--font-size-16);
-  --Button-line-height: var(--size-24);
-  --Button-font-weight: var(--font-weight-semi-bold);
-  --Button-letter-spacing: -0.011em;
-  --Button-size-small-padding: 5px var(--size-12);
-  --Button-size-medium-padding: var(--size-8) var(--size-12);
-  --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--bright-green {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  font-weight: 600;
-  font-weight: var(--Button-font-weight);
-  font-size: 1rem;
-  font-size: var(--Button-font-size);
-  letter-spacing: -0.011em;
-  letter-spacing: var(--Button-letter-spacing);
-  line-height: 24px;
-  line-height: var(--Button-line-height);
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: #00a2dd;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: 9999px;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  padding: 8px 12px;
-  padding: var(--Button-padding);
-}
-.wds-Button:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:hover {
-  background-color: #008fc9;
-  background-color: var(--Button-background-hover);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:active {
-  background-color: #0081ba;
-  background-color: var(--Button-background-active);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:disabled {
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button:disabled:hover,
-.wds-Button:disabled:active {
-  background-color: #00a2dd;
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-hover-background);
-  --Button-background-active: var(--Button-secondary-active-background);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-hover-background);
-  --Button-background-active: var(--Button-tertiary-active-background);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--right {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-hover-background);
-  --Button-background-active: var(--Button-minimal-active-background);
-  --Button-color: var(--Button-minimal-color);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-Button--minimal:hover,
-.wds-Button--minimal:hover:active {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-hover-background);
-  --Button-background-active: var(--Button-primary-negative-active-background);
-  --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-hover-background);
-  --Button-background-active: var(--Button-secondary-negative-active-background);
-  --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
-}
-.wds-Button--small {
-  --Button-padding: var(--Button-size-small-padding);
-  --Button-line-height: 22px;
-  --Button-font-size: var(--font-size-14);
-  --Button-letter-spacing: -0.006em;
-}
-.wds-Button--small .wds-Button-icon--left {
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-[dir="rtl"] .wds-Button--small .wds-Button-icon--left {
-  margin-right: 0;
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-.wds-Button--medium {
-  --Button-padding: var(--Button-size-medium-padding);
-}
-.wds-Button--large {
-  --Button-padding: var(--Button-size-large-padding);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-  margin-right: 5px;
-  margin-left: calc(4px * -1);
-  margin-left: calc(var(--size-4) * -1);
-}
-[dir="rtl"] .wds-Button-avatars {
-  margin-right: 0;
-  margin-left: 5px;
-}
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-icon--left {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-}
-[dir="rtl"] .wds-Button-icon--left {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.wds-Button-icon--right {
-  margin-left: 4px;
-  margin-left: var(--size-4);
-}
-[dir="rtl"] .wds-Button-icon--right {
-  margin-left: 0;
-  margin-right: 4px;
-  margin-right: var(--size-4);
-}
-.wds-Button-content {
-  position: relative;
-}
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.wds-Button-loader {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
-}
-/* RTL Styles */
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
-  transform: rotate(180deg);
-}
-[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
-  transform: rotate(180deg);
-}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/src/main.less

@@ -7,8 +7,7 @@
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
-@import "./button/LegacyButton/Button.less";
-@import "./button/Button/less/Button.less";
+@import "./button/Button.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";

package/src/nudge/Nudge.tsx

@@ -154,7 +154,7 @@ const Nudge = ({
           </Body>
           {link && (
             <Link
-              href={href ?? '#'}
+              href={href}
               type={Typography.LINK_LARGE}
               className="wds-nudge-link"
               onClick={onClick}

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -0,0 +1,283 @@
+import { Field } from '../field/Field';
+import {
+  mockMatchMedia,
+  mockResizeObserver,
+  render,
+  screen,
+  within,
+  userEvent,
+} from '../test-utils';
+
+import PhoneNumberInput, { PhoneNumberInputProps } from './PhoneNumberInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('PhoneNumberInput', () => {
+  afterEach(jest.clearAllMocks);
+
+  const props = { onChange: jest.fn() };
+
+  const customRender = (overrides: Partial<PhoneNumberInputProps> = {}, locale?: string) =>
+    render(<PhoneNumberInput {...props} {...overrides} />, { locale });
+
+  const getPrefixEl = () => screen.getByRole('combobox');
+  const getInputEl = () => screen.getByRole('textbox');
+
+  describe('defaults', () => {
+    it('should set prefix control to default UK value', () => {
+      customRender();
+      expect(getPrefixEl()).toHaveTextContent('+44');
+    });
+
+    it('should set number control to empty', () => {
+      customRender();
+      expect(getInputEl()).toHaveValue('');
+    });
+
+    it('should not disable the select', () => {
+      customRender();
+      expect(getPrefixEl()).toBeEnabled();
+    });
+
+    it('should not disable the input', () => {
+      customRender();
+      expect(getInputEl()).toBeEnabled();
+    });
+  });
+
+  it('should propagate `initialValue`', () => {
+    const prefix = '+39';
+    const number = '123456789';
+    customRender({ initialValue: `${prefix}${number}` });
+    expect(getPrefixEl()).toHaveTextContent(prefix);
+    expect(getInputEl()).toHaveValue(number);
+  });
+
+  describe('id prop', () => {
+    it('should not render id by default', () => {
+      customRender();
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).not.toHaveAttribute('id');
+    });
+
+    it('should respect `id` for the input and ignore the select', () => {
+      const id = 'component-id';
+      customRender({ id });
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).toHaveAttribute('id', id);
+    });
+  });
+
+  describe('pasting', () => {
+    const initialPrefix = '+48';
+    const initialNumber = '987654321';
+
+    const renderAndPaste = async (value: string) => {
+      customRender({ initialValue: `${initialPrefix}${initialNumber}` });
+      await userEvent.tab();
+      await userEvent.tab();
+      await userEvent.paste(value);
+    };
+
+    [
+      { number: '+36303932551', countryCode: '+36', localNumber: '303932551' },
+      { number: '+39123456781', countryCode: '+39', localNumber: '123456781' },
+      { number: '+44 7700 900415', countryCode: '+44', localNumber: '7700900415' },
+      { number: '+2975557308515', countryCode: '+297', localNumber: '5557308515' },
+      { number: '+297-555-7217-360', countryCode: '+297', localNumber: '5557217360' },
+      { number: '+213-555-5160-67', countryCode: '+213', localNumber: '555516067' },
+      { number: '+246-387-5553', countryCode: '+246', localNumber: '3875553' },
+      { number: '+852-940-5558--6', countryCode: '+852', localNumber: '94055586' },
+      { number: '+228 253 5558     4', countryCode: '+228', localNumber: '25355584' },
+    ].forEach(({ number, countryCode, localNumber }) => {
+      it(`'${number}' number should update the value properly`, async () => {
+        await renderAndPaste(number);
+
+        expect(getPrefixEl()).toHaveTextContent(countryCode);
+        expect(getInputEl()).toHaveValue(localNumber);
+        expect(props.onChange).toHaveBeenCalledWith(number.replace(/[\s-]+/g, ''), countryCode);
+      });
+    });
+
+    it('should not paste invalid characters', async () => {
+      await renderAndPaste('+36asdasdasd');
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+
+    it('should not paste countries which are not in the select', async () => {
+      await renderAndPaste('+9992342343423');
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+
+    it("should not paste numbers which doesn't start with the country code", async () => {
+      await renderAndPaste('0+36303932551');
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+
+    it("should allow pasting numbers which don't contain a country code", async () => {
+      const newNumber = '06303932551';
+      await renderAndPaste(newNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(newNumber);
+      expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
+    });
+  });
+
+  describe('initialValue', () => {
+    describe('when a model is supplied that could match more than one prefix', () => {
+      const initialProps = { initialValue: '+1868123456789' };
+
+      it('should set the select to the longest matching prefix', () => {
+        customRender(initialProps);
+        expect(getPrefixEl()).toHaveTextContent('+1868');
+      });
+
+      it('should set the number input to the rest of the number', () => {
+        customRender(initialProps);
+        expect(getInputEl()).toHaveValue('123456789');
+      });
+    });
+
+    describe('when a model is supplied with no matching prefix', () => {
+      const initialProps = { initialValue: '+999123456789' };
+
+      it('should empty the select', () => {
+        customRender(initialProps);
+        expect(getPrefixEl()).toHaveTextContent('Select an option...');
+      });
+
+      it('should put the whole value in the input without the plus', () => {
+        customRender(initialProps);
+        expect(getInputEl()).toHaveValue('999123456789');
+      });
+    });
+
+    describe('when an invalid model is supplied', () => {
+      it('should not re-explode model', () => {
+        customRender({ initialValue: '+123' });
+        expect(getPrefixEl()).toHaveTextContent('+44');
+        expect(getInputEl()).toHaveValue('');
+      });
+    });
+  });
+
+  describe('when disabled is true', () => {
+    it('should disable both controls', () => {
+      customRender({ disabled: true });
+      expect(getPrefixEl()).toBeDisabled();
+      expect(getInputEl()).toBeDisabled();
+    });
+  });
+
+  describe('placeholders', () => {
+    it('should use the provided placeholder', () => {
+      const placeholder = 'custom placeholder';
+      customRender({ placeholder });
+      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
+    });
+
+    it('should use the provided searchPlaceholder', async () => {
+      const searchPlaceholder = 'search placeholder';
+      customRender({ searchPlaceholder });
+      await userEvent.click(getPrefixEl());
+      expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
+    });
+  });
+
+  describe('when supplied with a locale', () => {
+    describe('and a value', () => {
+      it('should use the prefix of the supplied value', () => {
+        customRender({ initialValue: '+12345678' }, 'es');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+      });
+    });
+
+    describe('and no value', () => {
+      describe('and no country code', () => {
+        it('should default the prefix to the local country', () => {
+          customRender(undefined, 'es');
+          expect(getPrefixEl()).toHaveTextContent('+34');
+        });
+      });
+
+      describe('and country code', () => {
+        it('should override locale prefix with country specific prefix', () => {
+          customRender({ countryCode: 'US' }, 'es');
+          expect(getPrefixEl()).toHaveTextContent('+1');
+        });
+      });
+    });
+  });
+
+  describe('user input', () => {
+    describe('valid number', () => {
+      it('should trigger onChange handler', async () => {
+        customRender();
+        await userEvent.type(getInputEl(), '123');
+        expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
+      });
+    });
+
+    describe('invalid number', () => {
+      it('should trigger onChange with null value', async () => {
+        customRender({ initialValue: '+1234' });
+        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
+        expect(props.onChange).toHaveBeenCalledWith(null, '+1');
+      });
+    });
+
+    describe('when user insert invalid character', () => {
+      it('should strip them', async () => {
+        customRender({ initialValue: '+12345678' });
+        await userEvent.type(getInputEl(), '123--');
+        expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
+      });
+    });
+
+    describe('overlapping prefix and suffix numbers', () => {
+      it("shouldn't change the prefix number on matching suffix input", async () => {
+        customRender({ countryCode: 'eg' });
+        await userEvent.type(getInputEl(), '1111111');
+        expect(getInputEl()).toHaveValue('1111111');
+        expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
+      });
+    });
+  });
+
+  describe('when selectProps is supplied', () => {
+    it('renders Select component with expected props', () => {
+      customRender({ selectProps: { className: 'custom-class' } });
+      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
+    });
+  });
+
+  it('supports custom `aria-labelledby` attribute', () => {
+    render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
+      </>,
+    );
+
+    expect(
+      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
+    ).toBeInTheDocument();
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Phone number">
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
+  });
+});