@sitecore/sc-contenthub-blok 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/BlokAlert/BlokAlert.d.ts +2 -0
- package/dist/Components/BlokAlert/BlokAlert.js +8 -2
- package/dist/Components/BlokAlert/BlokAlert.js.map +1 -1
- package/dist/Components/BlokAlert/BlokAlert.stories.js +1 -1
- package/dist/Components/BlokAlert/BlokAlert.stories.js.map +1 -1
- package/esm/Components/BlokAlert/BlokAlert.js +8 -2
- package/esm/Components/BlokAlert/BlokAlert.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.BlokAlert = exports.alertIconMap = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const css_1 = require("@emotion/css");
|
|
6
|
+
const material_1 = require("@mui/material");
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
|
|
8
9
|
const BlokIconButton_1 = require("../BlokIconButton/BlokIconButton");
|
|
9
10
|
const CoreComponents_1 = require("../CoreComponents");
|
|
10
11
|
const classes = {
|
|
11
12
|
actionsWrapper: (0, css_1.css)({ display: "flex", alignItems: "center" }),
|
|
13
|
+
spinner: (0, css_1.css)({ width: "22px !important", height: "22px !important" }),
|
|
12
14
|
};
|
|
13
15
|
exports.alertIconMap = {
|
|
14
16
|
error: "m-icon-alert-circle",
|
|
@@ -18,13 +20,17 @@ exports.alertIconMap = {
|
|
|
18
20
|
neutral: "m-icon-information",
|
|
19
21
|
ai: "m-icon-creation",
|
|
20
22
|
};
|
|
21
|
-
const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", iconName, }) => {
|
|
23
|
+
const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", noIcon = false, loading = false, iconName, }) => {
|
|
22
24
|
const [isCollapsedState, setIsCollapsedState] = (0, react_1.useState)(isCollapsed);
|
|
23
25
|
const infoIcon = (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName ?? exports.alertIconMap[severity] });
|
|
26
|
+
let iconToShow = noIcon ? false : infoIcon;
|
|
27
|
+
if (loading) {
|
|
28
|
+
iconToShow = (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.spinner });
|
|
29
|
+
}
|
|
24
30
|
(0, react_1.useEffect)(() => {
|
|
25
31
|
setIsCollapsedState(isCollapsed);
|
|
26
32
|
}, [isCollapsed]);
|
|
27
|
-
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:
|
|
33
|
+
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: iconToShow, 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 }))] }));
|
|
28
34
|
};
|
|
29
35
|
exports.BlokAlert = BlokAlert;
|
|
30
36
|
//# sourceMappingURL=BlokAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokAlert.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,iCAMe;AAEf,mDAAgD;AAChD,qEAAkE;AAClE,sDAAuE;AAUvE,MAAM,OAAO,GAAG;IACd,cAAc,EAAE,IAAA,SAAG,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokAlert.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,4CAAiD;AACjD,iCAMe;AAEf,mDAAgD;AAChD,qEAAkE;AAClE,sDAAuE;AAUvE,MAAM,OAAO,GAAG;IACd,cAAc,EAAE,IAAA,SAAG,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;IAC9D,OAAO,EAAE,IAAA,SAAG,EAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;CACtE,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,qBAAqB;IAC9B,OAAO,EAAE,oBAAoB;IAC7B,EAAE,EAAE,iBAAiB;CACtB,CAAC;AAiBK,MAAM,SAAS,GAA0C,CAAC,EAC/D,WAAW,EACX,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,GAAG,MAAM,EACjB,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,OAAO,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAC;IACtE,MAAM,QAAQ,GAAG,uBAAC,mBAAQ,IAAC,IAAI,EAAE,QAAQ,IAAI,oBAAY,CAAC,QAAQ,CAAC,GAAI,CAAC;IAExE,IAAI,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE3C,IAAI,OAAO,EAAE,CAAC;QACZ,UAAU,GAAG,uBAAC,2BAAgB,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO,GAAI,CAAC;IAChE,CAAC;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,wBAAC,sBAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EACJ,iCAAK,SAAS,EAAE,OAAO,CAAC,cAAc,aACnC,CAAC,CAAC,OAAO,IAAI,WAAW,IAAI,CAC3B,uBAAC,+BAAc,IACb,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAE,OAAO,gBACJ,YAAY,YAExB,uBAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,GAAG,GACV,CAClB,EACA,aAAa,IAAI,CAChB,uBAAC,+BAAc,IACb,EAAE,EAAC,iBAAiB,EACpB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,gBACjD,aAAa,YAEzB,uBAAC,mBAAQ,IACP,IAAI,EACF,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,GAEhE,GACa,CAClB,IACG,EAER,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,aAEtD,UAAU,IAAI,uBAAC,2BAAU,cAAE,UAAU,GAAc,EACnD,CAAC,gBAAgB,IAAI,CACpB,gCAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,CACzD,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAnEW,QAAA,SAAS,aAmEpB"}
|
|
@@ -34,7 +34,7 @@ exports.AllAlerts = {
|
|
|
34
34
|
options: { showPanel: false },
|
|
35
35
|
layout: "padded",
|
|
36
36
|
},
|
|
37
|
-
render: () => ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: [(0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", children: "Some info information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "warning", children: "Some warning information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "error", children: "Some error information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", children: "Some success information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "neutral", children: "Some neutral information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "ai", children: "Some AI information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", iconName: "tag-auto-outline", children: "Using a custom icon" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: "Alert with Close Button" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "row", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Alert with link button and Close Button" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "link", colorScheme: "info", children: "Some Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, long message, and Button", children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "outline", colorScheme: "info", children: "Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsible", isCollapsible: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsed", isCollapsible: true, isCollapsed: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) })] }) })),
|
|
37
|
+
render: () => ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: [(0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", children: "Some info information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "warning", children: "Some warning information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "error", children: "Some error information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", children: "Some success information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "neutral", children: "Some neutral information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "ai", children: "Some AI information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", iconName: "tag-auto-outline", children: "Using a custom icon" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: "Alert with Close Button" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "row", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Alert with link button and Close Button" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "link", colorScheme: "info", children: "Some Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, long message, and Button", children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "outline", colorScheme: "info", children: "Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsible", isCollapsible: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsed", isCollapsible: true, isCollapsed: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", noIcon: true, children: "No icon" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", loading: true, children: "With loading state" }) })] }) })),
|
|
38
38
|
};
|
|
39
39
|
exports.AlertPlayground = {
|
|
40
40
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokAlert.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlokAlert.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { css } from "@emotion/css";
|
|
3
|
+
import { CircularProgress } from "@mui/material";
|
|
3
4
|
import { useEffect, useState, } from "react";
|
|
4
5
|
import { BlokIcon } from "../BlokIcon/BlokIcon";
|
|
5
6
|
import { BlokIconButton } from "../BlokIconButton/BlokIconButton";
|
|
6
7
|
import { Alert, AlertTitle } from "../CoreComponents";
|
|
7
8
|
const classes = {
|
|
8
9
|
actionsWrapper: css({ display: "flex", alignItems: "center" }),
|
|
10
|
+
spinner: css({ width: "22px !important", height: "22px !important" }),
|
|
9
11
|
};
|
|
10
12
|
export const alertIconMap = {
|
|
11
13
|
error: "m-icon-alert-circle",
|
|
@@ -15,12 +17,16 @@ export const alertIconMap = {
|
|
|
15
17
|
neutral: "m-icon-information",
|
|
16
18
|
ai: "m-icon-creation",
|
|
17
19
|
};
|
|
18
|
-
export const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", iconName, }) => {
|
|
20
|
+
export const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", noIcon = false, loading = false, iconName, }) => {
|
|
19
21
|
const [isCollapsedState, setIsCollapsedState] = useState(isCollapsed);
|
|
20
22
|
const infoIcon = _jsx(BlokIcon, { icon: iconName ?? alertIconMap[severity] });
|
|
23
|
+
let iconToShow = noIcon ? false : infoIcon;
|
|
24
|
+
if (loading) {
|
|
25
|
+
iconToShow = _jsx(CircularProgress, { className: classes.spinner });
|
|
26
|
+
}
|
|
21
27
|
useEffect(() => {
|
|
22
28
|
setIsCollapsedState(isCollapsed);
|
|
23
29
|
}, [isCollapsed]);
|
|
24
|
-
return (_jsxs(Alert, { severity: severity, action: _jsxs("div", { className: classes.actionsWrapper, children: [!!onClose && dismissible && (_jsx(BlokIconButton, { size: "small", id: "dismiss-info-box", onClick: onClose, "aria-label": closeMessage, children: _jsx(BlokIcon, { icon: "close" }) })), isCollapsible && (_jsx(BlokIconButton, { id: "toggle-info-box", size: "small", onClick: () => setIsCollapsedState((prevState) => !prevState), "aria-label": toggleMessage, children: _jsx(BlokIcon, { icon: isCollapsedState ? "m-icon-chevron-down" : "m-icon-chevron-up" }) }))] }), icon:
|
|
30
|
+
return (_jsxs(Alert, { severity: severity, action: _jsxs("div", { className: classes.actionsWrapper, children: [!!onClose && dismissible && (_jsx(BlokIconButton, { size: "small", id: "dismiss-info-box", onClick: onClose, "aria-label": closeMessage, children: _jsx(BlokIcon, { icon: "close" }) })), isCollapsible && (_jsx(BlokIconButton, { id: "toggle-info-box", size: "small", onClick: () => setIsCollapsedState((prevState) => !prevState), "aria-label": toggleMessage, children: _jsx(BlokIcon, { icon: isCollapsedState ? "m-icon-chevron-down" : "m-icon-chevron-up" }) }))] }), icon: iconToShow, className: isCollapsedState ? "MuiAlert-collapsed" : "", children: [alertTitle && _jsx(AlertTitle, { children: alertTitle }), !isCollapsedState && (_jsx("div", { className: "MuiAlert-inner-content", children: children }))] }));
|
|
25
31
|
};
|
|
26
32
|
//# sourceMappingURL=BlokAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokAlert.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAmB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAUvE,MAAM,OAAO,GAAG;IACd,cAAc,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokAlert.js","sourceRoot":"","sources":["../../../src/Components/BlokAlert/BlokAlert.tsx"],"names":[],"mappings":"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"}
|