Merged in chore/SW-3145-move-phone (pull request #2549)

chore/SW-3145 Moved Phone to design system * chore/SW-3145 Moved Phone to design system * chore: SW-3145 Moved phone and removed intl direct dependency Approved-by: Anton Gunnarsson
2025-07-28 08:28:07 +00:00
parent 58af469e22
commit 42ab6e58b3
12 changed files with 130 additions and 81 deletions
--- a/packages/design-system/lib/components/Form/Phone/index.tsx
+++ b/packages/design-system/lib/components/Form/Phone/index.tsx
@@ -0,0 +1,152 @@
+'use client'
+import 'react-international-phone/style.css'
+
+import { useEffect, useMemo } from 'react'
+import { TextField } from 'react-aria-components'
+import { useFormContext, useWatch } from 'react-hook-form'
+import {
+  buildCountryData,
+  CountrySelector,
+  defaultCountries,
+  DialCodePreview,
+  parseCountry,
+  type ParsedCountry,
+  usePhoneInput,
+} from 'react-international-phone'
+
+import Body from '../../Body'
+import { ErrorMessage } from '../ErrorMessage'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Input } from '../../Input'
+import { Label } from '../../Label'
+
+import styles from './phone.module.css'
+
+import type { PhoneProps } from './phone'
+
+export default function Phone({
+  ariaLabel = 'Phone number input',
+  className = '',
+  countryLabel = 'Country code',
+  countrySelectorName = 'phoneNumberCC',
+  countriesWithTranslatedName,
+  defaultCountryCode,
+  disabled = false,
+  errorMessage,
+  label,
+  name = 'phoneNumber',
+  placeholder,
+  readOnly = false,
+  registerOptions = {
+    required: true,
+  },
+}: PhoneProps) {
+  const countries = useMemo(() => {
+    return defaultCountries.map((dc) => {
+      const parsedCountry = parseCountry(dc)
+      const country = countriesWithTranslatedName?.find(
+        (country) => country.code === parsedCountry.iso2.toUpperCase()
+      )
+      const translatedCountryName = country?.displayName ?? country?.name
+      if (translatedCountryName) {
+        parsedCountry.name = translatedCountryName
+      }
+      return buildCountryData(parsedCountry)
+    })
+  }, [countriesWithTranslatedName])
+
+  const { formState, getFieldState, register, setValue } = useFormContext()
+  const fieldState = getFieldState(name)
+  const ccFieldState = getFieldState(countrySelectorName)
+  const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
+    name: [name, countrySelectorName],
+  })
+
+  const { country, setCountry } = usePhoneInput({
+    countries,
+    defaultCountry: phoneNumberCC ? phoneNumberCC : defaultCountryCode,
+  })
+
+  function handleSelectCountry(value: ParsedCountry) {
+    setCountry(value.iso2)
+    setValue(countrySelectorName, value.iso2, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    })
+    if (registerOptions.onBlur) {
+      registerOptions.onBlur(value)
+    }
+  }
+  useEffect(() => {
+    if (!ccFieldState.isTouched) {
+      setCountry(phoneNumberCC)
+    }
+  }, [phoneNumberCC, setCountry, ccFieldState])
+  return (
+    <div className={`${styles.phone} ${className}`}>
+      <CountrySelector
+        countries={countries}
+        disabled={readOnly}
+        dropdownArrowClassName={styles.arrow}
+        flagClassName={styles.flag}
+        onSelect={handleSelectCountry}
+        preferredCountries={['de', 'dk', 'fi', 'no', 'se', 'gb']}
+        selectedCountry={country.iso2}
+        renderButtonWrapper={(props) => (
+          <button
+            {...props.rootProps}
+            className={styles.select}
+            tabIndex={0}
+            type="button"
+            data-testid="country-selector"
+          >
+            <Label required={!!registerOptions.required} size="small">
+              {countryLabel}
+            </Label>
+            <span className={styles.selectContainer}>
+              {props.children}
+              <Body asChild fontOnly>
+                <DialCodePreview
+                  className={styles.dialCode}
+                  dialCode={country.dialCode}
+                  prefix="+"
+                />
+              </Body>
+              <MaterialIcon
+                icon="keyboard_arrow_down"
+                className={styles.chevron}
+                color="Icon/Default"
+                size={18}
+              />
+            </span>
+          </button>
+        )}
+      />
+      <TextField
+        aria-label={ariaLabel}
+        isDisabled={disabled || registerOptions.disabled}
+        isInvalid={fieldState.invalid}
+        isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
+        name={name}
+        type="tel"
+        value={phoneNumber}
+      >
+        <Input
+          {...register(name, registerOptions)}
+          autoComplete="tel-national"
+          label={label}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          type="tel"
+        />
+        <ErrorMessage
+          errors={formState.errors}
+          name={name}
+          messageLabel={errorMessage}
+        />
+      </TextField>
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/Form/Phone/phone.module.css
+++ b/packages/design-system/lib/components/Form/Phone/phone.module.css
@@ -0,0 +1,113 @@
+.phone {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--Space-x2);
+
+  --react-international-phone-background-color: var(--Main-Grey-White);
+  --react-international-phone-border-color: var(--Scandic-Beige-40);
+  --react-international-phone-dropdown-preferred-list-divider-color: var(
+    --Scandic-Brand-Pale-Peach
+  );
+  --react-international-phone-selected-dropdown-item-background-color: var(
+    --Scandic-Blue-00
+  );
+  --react-international-phone-text-color: var(--Main-Grey-100);
+
+  --react-international-phone-dropdown-preferred-list-divider-margin: 8px;
+
+  --react-international-phone-height: 60px;
+  --react-international-phone-dropdown-top: calc(
+    var(--react-international-phone-height) + var(--Space-x1)
+  );
+  --react-international-phone-dial-code-preview-font-size: var(
+    --Body-Paragraph-Size
+  );
+  --react-international-phone-dropdown-item-font-size: var(
+    --Body-Paragraph-Size
+  );
+}
+
+@media (min-width: 400px) {
+  .phone {
+    grid-template-columns: minmax(124px, 164px) 1fr;
+  }
+}
+
+.phone:has(.input:active, .input:focus) {
+  --react-international-phone-border-color: var(--Scandic-Blue-90);
+}
+
+.phone :global(.react-international-phone-country-selector-dropdown) {
+  background: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+  gap: var(--Space-x1);
+  outline: none;
+  padding: var(--Space-x2);
+}
+
+.phone
+  :global(.react-international-phone-country-selector-dropdown__list-item) {
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
+  font-family: var(--Body-Paragraph-Font-family);
+}
+
+.phone
+  :global(.react-international-phone-country-selector-button__button-content) {
+  align-self: center;
+}
+
+.select {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Border-Interactive-Default);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  gap: var(--Space-x05);
+  grid-template-rows: auto auto;
+  height: 56px;
+  padding: var(--Space-x15);
+  transition: border-color 200ms ease;
+  width: 100%;
+
+  &:focus {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+}
+
+.select[aria-expanded='true'] .chevron {
+  transform: rotate(180deg);
+}
+
+.selectContainer {
+  background-color: var(--Main-Grey-White);
+  border: none;
+  display: grid;
+  gap: var(--Space-x1);
+  grid-template-columns: auto 1fr auto;
+  height: 18px;
+  justify-content: flex-start;
+  order: 2;
+}
+
+.arrow {
+  display: none;
+}
+
+.flag {
+  height: 18px;
+  margin: 0;
+  width: 18px;
+}
+
+.select .dialCode {
+  border: none;
+  color: var(--UI-Text-High-contrast);
+  line-height: 1;
+  justify-self: flex-start;
+  padding: 0;
+}
--- a/packages/design-system/lib/components/Form/Phone/phone.ts
+++ b/packages/design-system/lib/components/Form/Phone/phone.ts
@@ -0,0 +1,21 @@
+import type { RegisterOptions } from 'react-hook-form'
+
+export interface PhoneProps {
+  ariaLabel?: string
+  className?: string
+  countryLabel?: string
+  countrySelectorName?: string
+  countriesWithTranslatedName: {
+    code: string
+    displayName?: string
+    name: string
+  }[]
+  disabled?: boolean
+  errorMessage?: string
+  label: string
+  defaultCountryCode: string
+  name?: string
+  placeholder?: string
+  readOnly?: boolean
+  registerOptions?: RegisterOptions
+}