58 lines
1.3 KiB
JavaScript
58 lines
1.3 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import OptionLayout from './option-layout';
|
|
|
|
const Option = ( { checked, name, onChange, option } ) => {
|
|
const {
|
|
value,
|
|
label,
|
|
description,
|
|
secondaryLabel,
|
|
secondaryDescription,
|
|
} = option;
|
|
const onChangeValue = ( event ) => onChange( event.target.value );
|
|
|
|
return (
|
|
<label
|
|
className={ classnames(
|
|
'wc-block-components-radio-control__option',
|
|
{
|
|
'wc-block-components-radio-control__option-checked': checked,
|
|
}
|
|
) }
|
|
htmlFor={ `${ name }-${ value }` }
|
|
>
|
|
<input
|
|
id={ `${ name }-${ value }` }
|
|
className="wc-block-components-radio-control__input"
|
|
type="radio"
|
|
name={ name }
|
|
value={ value }
|
|
onChange={ onChangeValue }
|
|
checked={ checked }
|
|
aria-describedby={ classnames( {
|
|
[ `${ name }-${ value }__label` ]: label,
|
|
[ `${ name }-${ value }__secondary-label` ]: secondaryLabel,
|
|
[ `${ name }-${ value }__description` ]: description,
|
|
[ `${ name }-${ value }__secondary-description` ]: secondaryDescription,
|
|
} ) }
|
|
/>
|
|
<OptionLayout
|
|
id={ `${ name }-${ value }` }
|
|
label={ label }
|
|
secondaryLabel={ secondaryLabel }
|
|
description={ description }
|
|
secondaryDescription={ secondaryDescription }
|
|
/>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default Option;
|