@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
42 lines (41 loc) • 2.6 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 { VuiSpacer } from "../spacer/Spacer";
import { VuiTitle } from "../typography/Title";
import { VuiTextColor } from "../typography/TextColor";
import { VuiText } from "../typography/Text";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIconButton } from "../button/IconButton";
import { BiX } from "react-icons/bi";
import { VuiIcon } from "../icon/Icon";
const HEADING_ELEMENT = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
const sizeToTitleSizeMap = {
s: "xs",
m: "s"
};
const sizeToSpacerSizeMap = {
s: "xxs",
m: "xs"
};
const sizeToContentSizeMap = {
s: "xs",
m: "s"
};
export const VuiCallout = (_a) => {
var { children, title, headingElement, color, size = "m", onDismiss } = _a, rest = __rest(_a, ["children", "title", "headingElement", "color", "size", "onDismiss"]);
const classes = classNames("vuiCallout", `vuiCallout--${color}`, `vuiCallout--${size}`);
const HeadingElement = headingElement;
return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: sizeToTitleSizeMap[size] }, { children: _jsx(HeadingElement, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })) })), onDismiss && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Hide information", className: "vuiCallout__closeButton", "data-testid": "calloutCloseButton", color: color, onClick: onDismiss, icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), size: "s" }) })))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: sizeToSpacerSizeMap[size] }), _jsx(VuiText, Object.assign({ size: sizeToContentSizeMap[size] }, { children: children }))] }))] })));
};