ebd6e1dc2c
fix(BOOK-119): reward nights accessible radiogroup * fix(BOOK-119): reward nights accessible radiogroup * fix(BOOK-119): pr comment focus * fix(BOOK-119): added roomtype name to the radiogroup for accessibility improvment Approved-by: Matilda Haneling Approved-by: Erik Tiekstra
33 lines
807 B
TypeScript
33 lines
807 B
TypeScript
import { PropsWithChildren } from 'react'
|
|
import { Radio as AriaRadio } from 'react-aria-components'
|
|
import styles from './radio.module.css'
|
|
import { variants } from './variants'
|
|
import { cx } from 'class-variance-authority'
|
|
|
|
interface RadioProps extends PropsWithChildren {
|
|
value: string
|
|
id?: string
|
|
isDisabled?: boolean
|
|
color?: 'Burgundy'
|
|
}
|
|
|
|
export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
|
|
const inputId = id || `radio-${value}`
|
|
|
|
const classNames = variants({
|
|
color,
|
|
})
|
|
|
|
return (
|
|
<AriaRadio
|
|
id={inputId}
|
|
value={value}
|
|
isDisabled={isDisabled}
|
|
className={cx(styles.container, { [styles.disabled]: isDisabled })}
|
|
>
|
|
<div className={`${styles.radio} ${classNames}`} />
|
|
<div>{children}</div>
|
|
</AriaRadio>
|
|
)
|
|
}
|