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

Merged in fix/LOY-260-use-same-phone-component (pull request #2336)

Browse Source 
fix(LOY-260): use same phone component in signup and edit profile as enter details

Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Christian Andolf
2025-06-12 12:40:36 +00:00
parent 8c6f659f8f 6a0ce38f79
commit 2dd07eb6b8
8 changed files with 188 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -2,16 +2,17 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Select } from "@scandic-hotels/design-system/Select"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getLocalizedLanguageOptions } from "@/constants/languages" import { getLocalizedLanguageOptions } from "@/constants/languages"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country" import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date" import DateSelect from "@/components/TempDesignSystem/Form/Date"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput" import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Select from "@/components/TempDesignSystem/Form/Select" import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import styles from "./formContent.module.css" import styles from "./formContent.module.css"
@@ -19,77 +20,66 @@ import styles from "./formContent.module.css"
export default function FormContent() { export default function FormContent() {
const intl = useIntl() const intl = useIntl()
const lang = useLang() const lang = useLang()
const languageOptions = getLocalizedLanguageOptions(lang) const languageOptions = getLocalizedLanguageOptions(lang)
const city = intl.formatMessage({
defaultMessage: "City",
})
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = `${intl.formatMessage({
defaultMessage: "Email",
})} ${intl
.formatMessage({
defaultMessage: "Address",
})
.toLowerCase()}`
const street = intl.formatMessage({
defaultMessage: "Address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const currentPassword = intl.formatMessage({
defaultMessage: "Current password",
})
const retypeNewPassword = intl.formatMessage({
defaultMessage: "Retype new password",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
return ( return (
<> <>
<section className={styles.user}> <section className={styles.user}>
<header> <header>
<Body textTransform="bold"> <Typography variant="Body/Paragraph/mdBold">
{intl.formatMessage({ <p>
defaultMessage: "User information", {intl.formatMessage({
})} defaultMessage: "User information",
</Body> })}
</p>
</Typography>
</header> </header>
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} /> <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
<Input <Input
data-hj-suppress data-hj-suppress
label={`${street} 1`} label={`${intl.formatMessage({
defaultMessage: "Address",
})} 1`}
name="address.streetAddress" name="address.streetAddress"
/> />
<Input data-hj-suppress label={city} name="address.city" /> <Input
data-hj-suppress
label={intl.formatMessage({
defaultMessage: "City",
})}
name="address.city"
/>
<div className={styles.container}> <div className={styles.container}>
<Input <Input
data-hj-suppress data-hj-suppress
label={zipCode} label={intl.formatMessage({
defaultMessage: "Zip code",
})}
name="address.zipCode" name="address.zipCode"
registerOptions={{ required: true }} registerOptions={{ required: true }}
inputMode="numeric" inputMode="numeric"
/> />
<CountrySelect <CountrySelect
label={country} label={intl.formatMessage({
defaultMessage: "Country",
})}
name="address.countryCode" name="address.countryCode"
registerOptions={{ required: true }} registerOptions={{ required: true }}
/> />
</div> </div>
<Input <Input
label={email} label={intl.formatMessage({
defaultMessage: "Email address",
})}
name="email" name="email"
registerOptions={{ required: true }} registerOptions={{ required: true }}
type="email" type="email"
data-hj-suppress data-hj-suppress
/> />
<DeprecatedPhone <Phone
label={phoneNumber} label={intl.formatMessage({
defaultMessage: "Phone number",
})}
name="phoneNumber" name="phoneNumber"
data-hj-suppress data-hj-suppress
/> />
@@ -104,21 +94,27 @@ export default function FormContent() {
<Divider className={styles.divider} color="subtle" /> <Divider className={styles.divider} color="subtle" />
<section className={styles.password}> <section className={styles.password}>
<header> <header>
<Body textTransform="bold"> <Typography variant="Body/Paragraph/mdBold">
{intl.formatMessage({ <p>
defaultMessage: "Password", {intl.formatMessage({
})} defaultMessage: "Password",
</Body> })}
</p>
</Typography>
</header> </header>
<PasswordInput <PasswordInput
data-hj-suppress data-hj-suppress
label={currentPassword} label={intl.formatMessage({
defaultMessage: "Current password",
})}
name="password" name="password"
/> />
<PasswordInput data-hj-suppress isNewPassword name="newPassword" /> <PasswordInput data-hj-suppress isNewPassword name="newPassword" />
<PasswordInput <PasswordInput
data-hj-suppress data-hj-suppress
label={retypeNewPassword} label={intl.formatMessage({
defaultMessage: "Retype new password",
})}
name="retypeNewPassword" name="retypeNewPassword"
/> />
</section> </section>

55
apps/scandic-web/components/Forms/Signup/form.module.css
View File

@@ -1,52 +1,61 @@
.form { .form {
display: grid; display: grid;
gap: var(--Spacing-x5); gap: var(--Space-x5);
grid-area: form;
}
.title {
grid-area: title;
}
.formWrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
} }
.formWrapper,
.userInfo, .userInfo,
.password, .password {
.terms {
align-self: flex-start;
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x3);
} }
.container { .container,
display: flex; .terms {
flex-direction: column; display: grid;
gap: var(--Spacing-x3); gap: var(--Space-x2);
} }
.nameInputs { .nameInputs {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x2);
} }
.dateField { .dateField {
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.formWrapper { .formWrapper {
gap: var(--Spacing-x5); gap: var(--Space-x5);
} }
.nameInputs { .nameInputs {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.additional {
grid-template-columns: 2fr 5fr;
grid-template-areas:
"zip country"
"email email"
"phone phone";
& > div:nth-child(1) {
grid-area: zip;
}
& > div:nth-child(2) {
grid-area: country;
}
& > div:nth-child(3) {
grid-area: email;
}
& > div:nth-child(4) {
grid-area: phone;
}
}
.signUpButton { .signUpButton {
width: fit-content; width: fit-content;
} }

184
apps/scandic-web/components/Forms/Signup/index.tsx
View File

@@ -1,28 +1,27 @@
"use client" "use client"
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod"
import { cx } from "class-variance-authority"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form" import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { import {
membershipTermsAndConditions, membershipTermsAndConditions,
privacyPolicy, privacyPolicy,
} from "@/constants/webHrefs" } from "@/constants/webHrefs"
import { trpc } from "@/lib/trpc/client" import { trpc } from "@/lib/trpc/client"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CountrySelect from "@/components/TempDesignSystem/Form/Country" import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date" import DateSelect from "@/components/TempDesignSystem/Form/Date"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput" import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts" import { toast } from "@/components/TempDesignSystem/Toasts"
import { useFormTracking } from "@/components/TrackingSDK/hooks" import { useFormTracking } from "@/components/TrackingSDK/hooks"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -37,18 +36,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
const intl = useIntl() const intl = useIntl()
const router = useRouter() const router = useRouter()
const lang = useLang() const lang = useLang()
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = intl.formatMessage({
defaultMessage: "Email address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
const signupButtonText = intl.formatMessage({ const signupButtonText = intl.formatMessage({
defaultMessage: "Join now", defaultMessage: "Join now",
}) })
@@ -109,8 +97,12 @@ export default function SignupForm({ title }: SignUpFormProps) {
} }
return ( return (
<section className={styles.formWrapper}> <div className={styles.formWrapper}>
<Title as="h3">{title}</Title> {title ? (
<Typography variant="Title/md">
<h2>{title}</h2>
</Typography>
) : null}
<FormProvider {...methods}> <FormProvider {...methods}>
<form <form
className={styles.form} className={styles.form}
@@ -120,11 +112,13 @@ export default function SignupForm({ title }: SignUpFormProps) {
<section className={styles.userInfo}> <section className={styles.userInfo}>
<div className={styles.container}> <div className={styles.container}>
<header> <header>
<Subtitle type="two"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ <h3>
defaultMessage: "Contact information", {intl.formatMessage({
})} defaultMessage: "Contact information",
</Subtitle> })}
</h3>
</Typography>
</header> </header>
<div className={styles.nameInputs}> <div className={styles.nameInputs}>
<Input <Input
@@ -144,46 +138,59 @@ export default function SignupForm({ title }: SignUpFormProps) {
</div> </div>
</div> </div>
<div className={styles.dateField}> <div className={styles.dateField}>
<header> <Typography variant="Body/Supporting text (caption)/smBold">
<Caption type="bold"> <p>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Birth date", defaultMessage: "Birth date",
})} })}
</Caption> </p>
</header> </Typography>
<DateSelect <DateSelect
name="dateOfBirth" name="dateOfBirth"
registerOptions={{ required: true }} registerOptions={{ required: true }}
/> />
</div> </div>
<div className={styles.container}> <div className={cx(styles.container, styles.additional)}>
<Input <Input
label={zipCode} label={intl.formatMessage({
defaultMessage: "Zip code",
})}
name="address.zipCode" name="address.zipCode"
registerOptions={{ required: true }} registerOptions={{ required: true }}
inputMode="numeric" inputMode="numeric"
/> />
<CountrySelect <CountrySelect
label={country} label={intl.formatMessage({
defaultMessage: "Country",
})}
name="address.countryCode" name="address.countryCode"
registerOptions={{ required: true }} registerOptions={{ required: true }}
/> />
<Input
label={intl.formatMessage({
defaultMessage: "Email address",
})}
name="email"
registerOptions={{ required: true }}
type="email"
/>
<Phone
label={intl.formatMessage({
defaultMessage: "Phone number",
})}
name="phoneNumber"
/>
</div> </div>
<Input
label={email}
name="email"
registerOptions={{ required: true }}
type="email"
/>
<DeprecatedPhone label={phoneNumber} name="phoneNumber" />
</section> </section>
<section className={styles.password}> <section className={styles.password}>
<header> <header>
<Subtitle type="two"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ <h3>
defaultMessage: "Password", {intl.formatMessage({
})} defaultMessage: "Password",
</Subtitle> })}
</h3>
</Typography>
</header> </header>
<PasswordInput <PasswordInput
name="password" name="password"
@@ -195,48 +202,51 @@ export default function SignupForm({ title }: SignUpFormProps) {
</section> </section>
<section className={styles.terms}> <section className={styles.terms}>
<header> <header>
<Subtitle type="two"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ <h3>
defaultMessage: "Terms and conditions", {intl.formatMessage({
})} defaultMessage: "Terms and conditions",
</Subtitle> })}
</h3>
</Typography>
</header> </header>
<Checkbox name="termsAccepted" registerOptions={{ required: true }}> <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "I accept", defaultMessage: "I accept",
})} })}
</Checkbox> </Checkbox>
{/* TODO: Update copy once ready */} <Typography variant="Body/Paragraph/mdRegular">
<Body> <p>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: defaultMessage:
"By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.", "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
}, },
{ {
termsAndConditionsLink: (str) => ( termsAndConditionsLink: (str) => (
<Link <Link
textDecoration="underline" textDecoration="underline"
color="Text/Interactive/Secondary" color="Text/Interactive/Secondary"
target="_blank" target="_blank"
href={membershipTermsAndConditions[lang]} href={membershipTermsAndConditions[lang]}
> >
{str} {str}
</Link> </Link>
), ),
privacyPolicy: (str) => ( privacyPolicy: (str) => (
<Link <Link
textDecoration="underline" textDecoration="underline"
color="Text/Interactive/Secondary" color="Text/Interactive/Secondary"
target="_blank" target="_blank"
href={privacyPolicy[lang]} href={privacyPolicy[lang]}
> >
{str} {str}
</Link> </Link>
), ),
} }
)} )}
</Body> </p>
</Typography>
</section> </section>
{/* {/*
@@ -249,9 +259,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
<Button <Button
className={styles.signUpButton} className={styles.signUpButton}
type="submit" type="submit"
theme="base" variant="Primary"
intent="primary" onPress={() => methods.trigger()}
onClick={() => methods.trigger()} typography="Body/Paragraph/mdBold"
data-testid="trigger-validation" data-testid="trigger-validation"
> >
{signupButtonText} {signupButtonText}
@@ -260,9 +270,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
<Button <Button
className={styles.signUpButton} className={styles.signUpButton}
type="submit" type="submit"
theme="base" variant="Primary"
intent="primary" isDisabled={methods.formState.isSubmitting || signup.isPending}
disabled={methods.formState.isSubmitting || signup.isPending} typography="Body/Paragraph/mdBold"
data-testid="submit" data-testid="submit"
> >
{signupButtonText} {signupButtonText}
@@ -270,6 +280,6 @@ export default function SignupForm({ title }: SignUpFormProps) {
)} )}
</form> </form>
</FormProvider> </FormProvider>
</section> </div>
) )
} }

4
apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
View File

@@ -4,8 +4,8 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import CountrySelect from "@/components/TempDesignSystem/Form/Country" import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./modifyContact.module.css" import styles from "./modifyContact.module.css"
@@ -73,7 +73,7 @@ export default function ModifyContact({
/> />
</div> </div>
<div className={styles.row}> <div className={styles.row}>
<DeprecatedPhone <Phone
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Phone number", defaultMessage: "Phone number",
})} })}

157
apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
View File

@@ -1,157 +0,0 @@
"use client"
import "react-international-phone/style.css"
import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
import { TextField } from "react-aria-components"
import { useController, useFormContext, useWatch } from "react-hook-form"
import {
CountrySelector,
DialCodePreview,
type ParsedCountry,
usePhoneInput,
} from "react-international-phone"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { getDefaultCountryFromLang } from "@/constants/languages"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"
import styles from "./phone.module.css"
import type { ChangeEvent } from "react"
import type { PhoneProps } from "@/types/components/form/phone"
export default function Phone({
ariaLabel = "Phone number input",
className = "",
disabled = false,
label,
name = "phoneNumber",
placeholder,
readOnly = false,
registerOptions = {
required: true,
},
}: PhoneProps) {
const intl = useIntl()
const lang = useLang()
const { control, setValue, trigger } = useFormContext()
const phone = useWatch({ name })
const { field, fieldState, formState } = useController({
control,
disabled,
name,
rules: registerOptions,
})
const defaultPhoneNumber = formState.defaultValues?.phoneNumber
// If defaultPhoneNumber exists and is valid, parse it to get the country code,
// otherwise set the default country from the lang.
const defaultCountry = isValidPhoneNumber(defaultPhoneNumber)
? parsePhoneNumber(defaultPhoneNumber).country?.toLowerCase()
: getDefaultCountryFromLang(lang)
const { country, handlePhoneValueChange, inputValue, setCountry } =
usePhoneInput({
defaultCountry,
disableDialCodeAndPrefix: true,
forceDialCode: true,
value: phone,
onChange: (value) => {
// If not checked trigger(name) forces validation on mount
// which shows error message before user even can see the form
if (value.inputValue) {
setValue(name, value.phone)
trigger(name)
} else {
setValue(name, "")
}
},
})
function handleSelectCountry(value: ParsedCountry) {
setCountry(value.iso2)
}
function handleChange(evt: ChangeEvent<HTMLInputElement>) {
handlePhoneValueChange(evt)
}
return (
<div className={`${styles.phone} ${className}`}>
<CountrySelector
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}
defaultValue={field.value}
isDisabled={disabled ?? field.disabled}
isInvalid={fieldState.invalid}
isRequired={!!registerOptions?.required}
isReadOnly={readOnly}
name={field.name}
type="tel"
>
<AriaInputWithLabel
{...field}
// hack used since chrome does not respect autocomplete="off"
autoComplete="nope"
id={field.name}
label={label}
onChange={handleChange}
placeholder={placeholder}
readOnly={readOnly}
required={!!registerOptions.required}
type="tel"
value={inputValue}
/>
<ErrorMessage errors={formState.errors} name={field.name} />
</TextField>
</div>
)
}

108
apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
View File

@@ -1,108 +0,0 @@
.phone {
display: grid;
grid-template-columns: 1fr;
gap: var(--Spacing-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(--Spacing-x1)
);
--react-international-phone-dial-code-preview-font-size: var(
--typography-Body-Regular-fontSize
);
}
@media (min-width: 385px) {
.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(--Spacing-x1);
outline: none;
padding: var(--Spacing-x2);
}
.phone
:global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x-one-and-half);
}
.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(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Spacing-x-half);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
transition: border-color 200ms ease;
}
.select {
width: 100%;
}
.select[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
.selectContainer {
background-color: var(--Main-Grey-White);
border: none;
display: grid;
gap: var(--Spacing-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;
}

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

@@ -32,7 +32,7 @@ export default function Phone({
disabled = false, disabled = false,
label, label,
name = "phoneNumber", name = "phoneNumber",
placeholder = "", placeholder,
readOnly = false, readOnly = false,
registerOptions = { registerOptions = {
required: true, required: true,

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

@@ -1,7 +1,7 @@
.phone { .phone {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--Spacing-x2); gap: var(--Space-x2);
--react-international-phone-background-color: var(--Main-Grey-White); --react-international-phone-background-color: var(--Main-Grey-White);
--react-international-phone-border-color: var(--Scandic-Beige-40); --react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -17,7 +17,7 @@
--react-international-phone-height: 60px; --react-international-phone-height: 60px;
--react-international-phone-dropdown-top: calc( --react-international-phone-dropdown-top: calc(
var(--react-international-phone-height) + var(--Spacing-x1) var(--react-international-phone-height) + var(--Space-x1)
); );
--react-international-phone-dial-code-preview-font-size: var( --react-international-phone-dial-code-preview-font-size: var(
--Body-Paragraph-Size --Body-Paragraph-Size
@@ -27,7 +27,7 @@
); );
} }
@media (min-width: 385px) { @media (min-width: 400px) {
.phone { .phone {
grid-template-columns: minmax(124px, 164px) 1fr; grid-template-columns: minmax(124px, 164px) 1fr;
} }
@@ -41,16 +41,15 @@
background: var(--Main-Grey-White); background: var(--Main-Grey-White);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
gap: var(--Spacing-x1); gap: var(--Space-x1);
outline: none; outline: none;
padding: var(--Spacing-x2); padding: var(--Space-x2);
} }
.phone .phone
:global(.react-international-phone-country-selector-dropdown__list-item) { :global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1) padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
var(--Spacing-x-one-and-half);
font-family: var(--Body-Paragraph-Font-family); font-family: var(--Body-Paragraph-Font-family);
} }
@@ -67,14 +66,11 @@
border-width: 1px; border-width: 1px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
display: grid; display: grid;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
grid-template-rows: auto auto; grid-template-rows: auto auto;
height: 60px; height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2); padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease; transition: border-color 200ms ease;
}
.select {
width: 100%; width: 100%;
} }
@@ -86,7 +82,7 @@
background-color: var(--Main-Grey-White); background-color: var(--Main-Grey-White);
border: none; border: none;
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x1);
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
height: 18px; height: 18px;
justify-content: flex-start; justify-content: flex-start;