@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
41 lines (40 loc) • 2.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Accordion = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./Accordion.css");
const Icon_1 = require("../Icon");
const Accordion = ({ items, multiple = false, defaultExpanded = [], className = '', }) => {
const [expandedIds, setExpandedIds] = (0, react_1.useState)(defaultExpanded);
const isExpanded = (id) => expandedIds.includes(id);
const toggleItem = (id) => {
if (multiple) {
setExpandedIds((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]);
}
else {
setExpandedIds((prev) => (prev.includes(id) ? [] : [id]));
}
};
const handleKeyDown = (e, id, disabled) => {
if (disabled)
return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleItem(id);
}
};
const rootClassName = ['ds-accordion', className].filter(Boolean).join(' ');
return ((0, jsx_runtime_1.jsx)("div", { className: rootClassName, children: items.map((item) => {
const expanded = isExpanded(item.id);
const itemClassName = [
'ds-accordion__item',
expanded && 'ds-accordion__item--expanded',
item.disabled && 'ds-accordion__item--disabled',
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { className: itemClassName, children: [(0, jsx_runtime_1.jsxs)("button", { className: "ds-accordion__header", onClick: () => !item.disabled && toggleItem(item.id), onKeyDown: (e) => handleKeyDown(e, item.id, item.disabled), disabled: item.disabled, "aria-expanded": expanded, "aria-controls": `accordion-content-${item.id}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "ds-accordion__title", children: item.title }), (0, jsx_runtime_1.jsx)("span", { className: "ds-accordion__icon", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 20 }) })] }), (0, jsx_runtime_1.jsx)("div", { id: `accordion-content-${item.id}`, className: "ds-accordion__content", role: "region", "aria-hidden": !expanded, children: (0, jsx_runtime_1.jsx)("div", { className: "ds-accordion__body", children: item.content }) })] }, item.id));
}) }));
};
exports.Accordion = Accordion;