@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
36 lines (35 loc) • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.List = exports.ListItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./List.css");
const ListItem = ({ children, before, after, description, onClick, disabled = false, active = false, className = '', }) => {
const itemClassName = [
'ds-list-item',
onClick && 'ds-list-item--clickable',
disabled && 'ds-list-item--disabled',
active && 'ds-list-item--active',
className,
]
.filter(Boolean)
.join(' ');
const handleClick = () => {
if (!disabled && onClick) {
onClick();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: itemClassName, onClick: handleClick, children: [before && (0, jsx_runtime_1.jsx)("div", { className: "ds-list-item__before", children: before }), (0, jsx_runtime_1.jsxs)("div", { className: "ds-list-item__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-list-item__primary", children: children }), description && ((0, jsx_runtime_1.jsx)("div", { className: "ds-list-item__description", children: description }))] }), after && (0, jsx_runtime_1.jsx)("div", { className: "ds-list-item__after", children: after })] }));
};
exports.ListItem = ListItem;
const List = ({ children, bordered = false, divided = false, className = '', }) => {
const listClassName = [
'ds-list',
bordered && 'ds-list--bordered',
divided && 'ds-list--divided',
className,
]
.filter(Boolean)
.join(' ');
return (0, jsx_runtime_1.jsx)("div", { className: listClassName, children: children });
};
exports.List = List;