@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
30 lines • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokAlert = exports.alertIconMap = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_1 = require("react");
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
const BlokIconButton_1 = require("../BlokIconButton/BlokIconButton");
const CoreComponents_1 = require("../CoreComponents");
const classes = {
actionsWrapper: (0, css_1.css)({ display: "flex", alignItems: "center" }),
};
exports.alertIconMap = {
error: "m-icon-alert-circle",
info: "m-icon-information",
warning: "m-icon-alert",
success: "m-icon-check-circle",
neutral: "m-icon-information",
ai: "m-icon-creation",
};
const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", iconName, }) => {
const [isCollapsedState, setIsCollapsedState] = (0, react_1.useState)(isCollapsed);
const infoIcon = (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName ?? exports.alertIconMap[severity] });
(0, react_1.useEffect)(() => {
setIsCollapsedState(isCollapsed);
}, [isCollapsed]);
return ((0, jsx_runtime_1.jsxs)(CoreComponents_1.Alert, { severity: severity, action: (0, jsx_runtime_1.jsxs)("div", { className: classes.actionsWrapper, children: [!!onClose && dismissible && ((0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { size: "small", id: "dismiss-info-box", onClick: onClose, "aria-label": closeMessage, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) })), isCollapsible && ((0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "toggle-info-box", size: "small", onClick: () => setIsCollapsedState((prevState) => !prevState), "aria-label": toggleMessage, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isCollapsedState ? "m-icon-chevron-down" : "m-icon-chevron-up" }) }))] }), icon: infoIcon, className: isCollapsedState ? "MuiAlert-collapsed" : "", children: [alertTitle && (0, jsx_runtime_1.jsx)(CoreComponents_1.AlertTitle, { children: alertTitle }), !isCollapsedState && ((0, jsx_runtime_1.jsx)("div", { className: "MuiAlert-inner-content", children: children }))] }));
};
exports.BlokAlert = BlokAlert;
//# sourceMappingURL=BlokAlert.js.map