e45fea6de4
Feat/SW-1890 New Breakfast Component Design * refactor(SW-1890): Replace BreakfastChoiceCard with RadioCard component and update styles - Removed BreakfastChoiceCard component and its associated styles. - extemded RadioCard component to additional UI. - Updated breakfast.module.css to adjust container width. - Added new properties for subtitleSecondary and description in RadioCard. - Updated translations for breakfast-related messages in en.json. * feat(SW-1890): Add hover state to RadioCard * chore(SW1890): Update translation for breakfast cost message to clarify age range * chore(SW-1890): Updated breakfast cost display to use formatPrice utility * fix(SW-1890): Set fixed size for CoffeeIcon component * fix(SW-1890): Add missing translations for breakfast-related messages * feat(SW-1890): Introduce new breakfast icons and update Breakfast component - Replaced CoffeeIcon with BreakfastBuffetIcon and NoBreakfastBuffetIcon in the Breakfast component. - Added new BreakfastBuffetIcon and NoBreakfastBuffetIcon components to the design system. - Updated imports in the Breakfast component to reflect the new icons. Approved-by: Christian Andolf
110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useFormContext } from "react-hook-form"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
|
|
import styles from "./radioCard.module.css"
|
|
|
|
import type { RadioCardProps } from "./types"
|
|
|
|
export default function RadioCard({
|
|
Icon,
|
|
iconHeight = 32,
|
|
id,
|
|
name,
|
|
title,
|
|
subtitleSecondary,
|
|
subtitle,
|
|
value,
|
|
disabled = false,
|
|
description,
|
|
descriptionSecondary,
|
|
}: RadioCardProps) {
|
|
const { register, setValue } = useFormContext()
|
|
|
|
function onLabelClick(event: React.MouseEvent) {
|
|
// Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
|
|
event.preventDefault()
|
|
if (!disabled) {
|
|
setValue(name, value)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<label
|
|
className={cx(styles.label, { [styles.disabled]: disabled })}
|
|
onClick={onLabelClick}
|
|
tabIndex={0}
|
|
>
|
|
<MaterialIcon
|
|
icon="check"
|
|
className={styles.selectedIcon}
|
|
size={22}
|
|
color="Icon/Inverted"
|
|
/>
|
|
{Icon ? (
|
|
<Icon
|
|
className={styles.icon}
|
|
color="CurrentColor"
|
|
height={iconHeight}
|
|
/>
|
|
) : null}
|
|
<Typography variant="Body/Paragraph/mdBold" className={styles.title}>
|
|
<p>{title}</p>
|
|
</Typography>
|
|
{subtitleSecondary ? (
|
|
<Typography
|
|
variant="Body/Supporting text (caption)/smRegular"
|
|
className={styles.subtitleSecondary}
|
|
>
|
|
<p>{subtitleSecondary}</p>
|
|
</Typography>
|
|
) : null}
|
|
<Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
|
|
<p>{subtitle}</p>
|
|
</Typography>
|
|
|
|
{description || descriptionSecondary ? (
|
|
<Divider
|
|
className={styles.divider}
|
|
variant="horizontal"
|
|
color="subtle"
|
|
/>
|
|
) : null}
|
|
|
|
{description ? (
|
|
<Typography
|
|
variant="Body/Supporting text (caption)/smRegular"
|
|
className={styles.description}
|
|
>
|
|
<p>{description}</p>
|
|
</Typography>
|
|
) : null}
|
|
|
|
{descriptionSecondary ? (
|
|
<Typography
|
|
variant="Body/Supporting text (caption)/smRegular"
|
|
className={styles.descriptionSecondary}
|
|
>
|
|
<p>{descriptionSecondary}</p>
|
|
</Typography>
|
|
) : null}
|
|
|
|
<input
|
|
{...register(name)}
|
|
aria-hidden
|
|
id={id || name}
|
|
hidden
|
|
type="radio"
|
|
disabled={disabled}
|
|
value={value}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|