@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
26 lines (25 loc) • 1.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./ToggleButton.css");
const Icon_1 = require("../Icon");
const ToggleButton = ({ label, selected = false, size = 'large', leadingIcon, trailingIcon, onChange, disabled, className = '', onClick, ...rest }) => {
const handleClick = (e) => {
if (!disabled) {
onChange === null || onChange === void 0 ? void 0 : onChange(!selected);
onClick === null || onClick === void 0 ? void 0 : onClick(e);
}
};
const rootClassName = [
'ds-toggle-button',
`ds-toggle-button--${size}`,
selected && 'ds-toggle-button--selected',
className,
]
.filter(Boolean)
.join(' ');
const iconSize = size === 'small' ? 16 : 24;
return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "switch", "aria-checked": selected, className: rootClassName, onClick: handleClick, disabled: disabled, ...rest, children: [leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "ds-toggle-button__icon ds-toggle-button__icon--leading", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: iconSize }) })), (0, jsx_runtime_1.jsx)("span", { className: "ds-toggle-button__label", children: label }), trailingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "ds-toggle-button__icon ds-toggle-button__icon--trailing", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: iconSize }) }))] }));
};
exports.ToggleButton = ToggleButton;