scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Hrishikesh Vaipurkar
2025-07-28 08:28:07 +00:00
parent 58af469e22
commit 42ab6e58b3
12 changed files with 130 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -1,164 +0,0 @@
"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 { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Label } from "@scandic-hotels/design-system/Label"
import { getDefaultCountryFromLang } from "@/constants/languages"
import useLang from "@/hooks/useLang"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./phone.module.css"
import type { PhoneProps } from "@/types/components/form/phone"
export default function Phone({
ariaLabel = "Phone number input",
className = "",
countrySelectorName = "phoneNumberCC",
disabled = false,
label,
name = "phoneNumber",
placeholder,
readOnly = false,
registerOptions = {
required: true,
},
}: PhoneProps) {
const intl = useIntl()
const lang = useLang()
const countries = useMemo(() => {
return defaultCountries.map((dc) => {
const country = parseCountry(dc)
const translatedCountryName = intl.formatDisplayName(
country.iso2.toUpperCase(),
{ type: "region" }
)
if (translatedCountryName) {
country.name = translatedCountryName
}
return buildCountryData(country)
})
}, [intl])
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
: getDefaultCountryFromLang(lang),
})
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">
{intl.formatMessage({
defaultMessage: "Country code",
})}
</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={getErrorMessage(
intl,
formState.errors[name]?.message?.toString()
)}
/>
</TextField>
</div>
)
}

113
apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
View File

@@ -1,113 +0,0 @@
.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;
}