@kadconsulting/dry/dist/src/components/RadioButton/RadioButton.js

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import classnames from 'classnames';
import './RadioButton.scss';
const RadioButton = forwardRef(({ id, name, value, text, subText, extraText, disabled, radioPosition = 'left', extraTextPosition = 'right', className, isCard = false, checked, onChange, isFullWidth, }, ref) => {
    const wrapperClass = classnames('dry-radio-button', className, {
        'dry-radio-button--disabled': disabled,
        'dry-radio-button--card': isCard,
        'dry-radio-button--card--active': isCard && !disabled && checked,
        'dry-radio-button__full-width': isFullWidth,
    });
    const handleChange = (event) => {
        if (onChange) {
            onChange(event);
        }
    };
    return (_jsxs("label", { className: wrapperClass, htmlFor: id, children: [_jsxs("div", { className: 'dry-radio-button__text-wrapper-wrapper', children: [radioPosition === 'left' && (_jsx("input", { type: 'radio', id: id, name: name, value: value, disabled: disabled, ref: ref, onChange: handleChange, checked: checked, className: 'dry-radio-button__input' })), _jsxs("div", { className: 'dry-radio-button__text-wrapper', children: [_jsx("span", { className: classnames('dry-radio-button__text', {
                                    'dry-radio-button__text--active': isCard && !disabled && checked,
                                }), children: text }), subText && (_jsx("span", { className: 'dry-radio-button__sub-text', children: subText }))] }), radioPosition === 'right' && (_jsx("input", { type: 'radio', id: id, name: name, value: value, disabled: disabled, ref: ref, onChange: handleChange, checked: checked, className: 'dry-radio-button__input' }))] }), extraText && extraTextPosition === 'right' && (_jsx("span", { className: 'dry-radio-button__extra-text', children: extraText })), extraText && extraTextPosition === 'left' && (_jsx("span", { className: 'dry-radio-button__extra-text dry-radio-button__extra-text--left', children: extraText }))] }));
});
export default RadioButton;
//# sourceMappingURL=RadioButton.js.map