@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
28 lines (27 loc) • 2 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, Fragment as _Fragment } 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 VuiAccordion = (_a) => {
var { header, children, isOpen, setIsOpen } = _a, rest = __rest(_a, ["header", "children", "isOpen", "setIsOpen"]);
const buttonId = createId();
const contentId = createId();
const classes = classNames("vuiAccordionHeader", {
"vuiAccordionHeader--isOpen": isOpen
});
return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ className: classes, onClick: () => setIsOpen(!isOpen), id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: isOpen ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiAccordionHeader__title", grow: 1 }, { children: header }))] })) })), isOpen && (_jsx("div", Object.assign({ id: contentId, "aria-labelledby": buttonId }, { children: children })))] }));
};