@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
46 lines (45 loc) • 3.38 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { BiChevronDown, BiChevronRight } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIcon } from "../icon/Icon";
import { createId } from "../../utils/createId";
export const VuiCard = (_a) => {
var { type = "outlined", header, body, align = "left", interactive, href, className, padding = "s", ungrouped, fullHeight, isScrollable, isExpanded, onToggleExpansion } = _a, rest = __rest(_a, ["type", "header", "body", "align", "interactive", "href", "className", "padding", "ungrouped", "fullHeight", "isScrollable", "isExpanded", "onToggleExpansion"]);
const isExpandable = Boolean(onToggleExpansion);
const buttonId = createId();
const bodyId = createId();
const classes = classNames("vuiCard",
// for now, we only support outlined cards for expandable cards
`vuiCard--${isExpandable ? "outlined" : type}`, `vuiCard--${align}`, `vuiCard--${padding}`, {
"vuiCard--interactive": interactive && !href && !isExpandable,
"vuiCard--ungrouped": ungrouped,
"vuiCard--fullHeight": fullHeight,
"vuiCard--expandable": isExpandable
}, className);
const bodyClasses = classNames("vuiCard__body", {
"vuiCard__body--withHeader": header,
"vuiCard__body--scrollable": isScrollable
});
if (isExpandable) {
return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [header && (_jsx("button", Object.assign({ className: "vuiCard__expandableButton", onClick: onToggleExpansion, "data-testid": "cardToggleExpansionButton", id: buttonId, "aria-controls": bodyId, "aria-expanded": isExpanded, type: "button" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xs" }, { children: [_jsx(VuiIcon, Object.assign({ size: "m", color: "neutral", className: "vuiCard__expandableIcon" }, { children: isExpanded ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiCard__expandableHeader", grow: 1 }, { children: header }))] })) }))), isExpanded && body && (_jsx("div", Object.assign({ className: bodyClasses, id: bodyId, "aria-labelledby": buttonId }, { children: body })))] })));
}
const headerContent = header && _jsx("div", Object.assign({ className: "vuiCard__header" }, { children: header }));
const bodyContent = body && _jsx("div", Object.assign({ className: bodyClasses }, { children: body }));
if (href) {
return (_jsxs("a", Object.assign({ className: classes, href: href }, rest, { children: [headerContent, bodyContent] })));
}
return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [headerContent, bodyContent] })));
};