diff options
Diffstat (limited to 'src/components/molecules/forms/radio-group.tsx')
| -rw-r--r-- | src/components/molecules/forms/radio-group.tsx | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx index 7f47673..a747395 100644 --- a/src/components/molecules/forms/radio-group.tsx +++ b/src/components/molecules/forms/radio-group.tsx @@ -1,7 +1,8 @@ import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react'; -import useStateChange from '../../../utils/hooks/use-state-change'; -import Fieldset, { type FieldsetProps } from '../forms/fieldset'; -import LabelledBooleanField, { +import { useStateChange } from '../../../utils/hooks'; +import { Fieldset, type FieldsetProps } from './fieldset'; +import { + LabelledBooleanField, type LabelledBooleanFieldProps, } from './labelled-boolean-field'; import styles from './radio-group.module.scss'; @@ -74,7 +75,7 @@ export type RadioGroupProps = Pick< * * Render a group of labelled radio buttons. */ -const RadioGroup: FC<RadioGroupProps> = ({ +export const RadioGroup: FC<RadioGroupProps> = ({ className, groupClassName = '', initialChoice, @@ -93,6 +94,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ const isToggle = kind === 'toggle'; const alignmentModifier = `wrapper--${legendPosition}`; const toggleModifier = isToggle ? 'wrapper--toggle' : 'wrapper--regular'; + const fieldsetClass = `${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`; /** * Update the selected choice on click or change event. @@ -119,6 +121,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ const getOptions = (): JSX.Element[] => { return options.map((option) => ( <LabelledBooleanField + {...option} key={option.id} checked={selectedChoice === option.value} className={`${styles.option} ${optionClassName}`} @@ -130,18 +133,17 @@ const RadioGroup: FC<RadioGroupProps> = ({ onChange={updateChoice} onClick={updateChoice} type="radio" - {...option} /> )); }; return ( <Fieldset - className={`${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`} + {...props} + className={fieldsetClass} legendClassName={`${styles.legend} ${legendClassName}`} legendPosition={legendPosition} role="radiogroup" - {...props} > {isToggle ? ( <span className={`${styles.toggle} ${groupClassName}`}> @@ -153,5 +155,3 @@ const RadioGroup: FC<RadioGroupProps> = ({ </Fieldset> ); }; - -export default RadioGroup; |
