111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useFormContext } from "react-hook-form"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
function onKeyDown(event: React.KeyboardEvent) {
|
|
if (disabled) return
|
|
|
|
if (event.key === "Enter") {
|
|
setValue(name, value)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<label
|
|
className={cx(styles.label, { [styles.disabled]: disabled })}
|
|
onClick={onLabelClick}
|
|
onKeyDown={onKeyDown}
|
|
tabIndex={0}
|
|
>
|
|
<div className={styles.selectedIcon}>
|
|
<MaterialIcon icon="check" size={22} color="Icon/Inverted" />
|
|
</div>
|
|
{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} />
|
|
) : 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>
|
|
)
|
|
}
|