@bonprix-ds/react-notification 1.0.2 → 1.0.4
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/src/Notification.js +28 -27
- package/dist/src/Notification.js.map +1 -1
- package/package.json +8 -8
package/dist/src/Notification.js
CHANGED
|
@@ -3,60 +3,61 @@ import { useEffect as e } from "react";
|
|
|
3
3
|
import { createPortal as t } from "react-dom";
|
|
4
4
|
import { tv as n } from "tailwind-variants";
|
|
5
5
|
import r from "@bonprix-ds/react-icon-button";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { CloserIcon as i } from "@bonprix-ds/react-icon/icons";
|
|
7
|
+
import { useIsClient as a } from "@bonprix-ds/utils";
|
|
8
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
9
|
//#region src/Notification.tsx
|
|
9
|
-
var
|
|
10
|
+
var c = n({
|
|
10
11
|
base: "",
|
|
11
12
|
slots: {
|
|
12
13
|
root: [
|
|
13
14
|
"w-full max-w-[30rem]",
|
|
14
|
-
"
|
|
15
|
+
"fixed start-1/2 flex -translate-x-1/2 flex-col",
|
|
15
16
|
"bottom-[var(--app-safe-area-inset-bottom,0rem)] m:bottom-[calc(var(--app-safe-area-inset-bottom,0rem)+var(--bpds-spacing-3))]"
|
|
16
17
|
],
|
|
17
18
|
progressBarContainer: "h-1 bg-clr-white",
|
|
18
|
-
progressBar: "h-full bg-clr-black
|
|
19
|
-
content: "relative min-h-6
|
|
19
|
+
progressBar: "h-full animate-shrinkHorizontally bg-clr-black",
|
|
20
|
+
content: "typography-body1 relative flex min-h-6 justify-between gap-2.5 bg-clr-bg-main-inverse px-4 text-clr-on-bg-high-inverse"
|
|
20
21
|
},
|
|
21
22
|
variants: { disableVerticalPadding: {
|
|
22
23
|
true: { content: "py-0" },
|
|
23
24
|
false: { content: "py-4" }
|
|
24
25
|
} }
|
|
25
|
-
}),
|
|
26
|
-
let { root:
|
|
26
|
+
}), l = ({ open: n, onClose: l, children: u, disableVerticalPadding: d = !1, permanent: f = !1, showCloser: p = !1, zIndex: m = 2 }) => {
|
|
27
|
+
let { root: h, progressBarContainer: g, progressBar: _, content: v } = c({ disableVerticalPadding: d }), y = a();
|
|
27
28
|
return e(() => {
|
|
28
29
|
let e;
|
|
29
|
-
return n && !
|
|
30
|
-
|
|
30
|
+
return n && !f && (e = setTimeout(() => {
|
|
31
|
+
l();
|
|
31
32
|
}, 5e3)), () => clearTimeout(e);
|
|
32
33
|
}, [
|
|
33
34
|
n,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
]), !n || !
|
|
37
|
-
className:
|
|
35
|
+
l,
|
|
36
|
+
f
|
|
37
|
+
]), !n || !y ? null : t(/* @__PURE__ */ s("div", {
|
|
38
|
+
className: h(),
|
|
38
39
|
"data-bpds": "notification",
|
|
39
|
-
style: { zIndex:
|
|
40
|
-
"data-bpds-disable-vertical-padding":
|
|
41
|
-
"data-bpds-permanent":
|
|
42
|
-
"data-bpds-show-closer":
|
|
43
|
-
children: [!
|
|
44
|
-
className:
|
|
45
|
-
children: /* @__PURE__ */
|
|
46
|
-
}), /* @__PURE__ */
|
|
47
|
-
className:
|
|
48
|
-
children: [
|
|
40
|
+
style: { zIndex: m },
|
|
41
|
+
"data-bpds-disable-vertical-padding": d,
|
|
42
|
+
"data-bpds-permanent": f,
|
|
43
|
+
"data-bpds-show-closer": p,
|
|
44
|
+
children: [!f && /* @__PURE__ */ o("div", {
|
|
45
|
+
className: g(),
|
|
46
|
+
children: /* @__PURE__ */ o("div", { className: _() })
|
|
47
|
+
}), /* @__PURE__ */ s("div", {
|
|
48
|
+
className: v(),
|
|
49
|
+
children: [u, (f || p) && /* @__PURE__ */ o(r, {
|
|
49
50
|
variant: "tertiary",
|
|
50
|
-
icon:
|
|
51
|
+
icon: /* @__PURE__ */ o(i, {}),
|
|
51
52
|
label: "Schließen",
|
|
52
53
|
size: "small",
|
|
53
|
-
onClick:
|
|
54
|
+
onClick: l,
|
|
54
55
|
inverted: !0
|
|
55
56
|
})]
|
|
56
57
|
})]
|
|
57
58
|
}), document.body);
|
|
58
59
|
};
|
|
59
60
|
//#endregion
|
|
60
|
-
export {
|
|
61
|
+
export { l as default };
|
|
61
62
|
|
|
62
63
|
//# sourceMappingURL=Notification.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":[],"sources":["../../src/Notification.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport { useIsClient } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n base: \"\",\n slots: {\n root: [\n \"w-full max-w-[30rem]\",\n \"
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["IconButton","generateClasses","tv","Notification","isClient","useIsClient","useEffect","timeoutId","open","permanent","onClose","createPortal","root","disableVerticalPadding","showCloser","progressBarContainer","progressBar","content","children","CloserIcon"],"sources":["../../src/Notification.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport { CloserIcon } from \"@bonprix-ds/react-icon/icons\";\nimport { useIsClient } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n base: \"\",\n slots: {\n root: [\n \"w-full max-w-[30rem]\",\n \"fixed start-1/2 flex -translate-x-1/2 flex-col\",\n \"bottom-[var(--app-safe-area-inset-bottom,0rem)] m:bottom-[calc(var(--app-safe-area-inset-bottom,0rem)+var(--bpds-spacing-3))]\",\n ],\n progressBarContainer: \"h-1 bg-clr-white\",\n progressBar: \"h-full animate-shrinkHorizontally bg-clr-black\",\n content: \"typography-body1 relative flex min-h-6 justify-between gap-2.5 bg-clr-bg-main-inverse px-4 text-clr-on-bg-high-inverse\",\n },\n variants: {\n disableVerticalPadding: {\n true: {\n content: \"py-0\",\n },\n false: {\n content: \"py-4\",\n },\n },\n },\n});\n\nexport interface NotificationProps {\n /** Controls the visibility of the notification. Should be used in conjunction with the `onClose` property. */\n open: boolean;\n /** Callback that will be triggered when the notification component is attempted to be closed. Should be used in conjunction with the `open` property. */\n onClose: () => void;\n /** The content to be displayed within the notification. */\n children: ReactNode;\n /** If `true`, disables vertical padding in the notification content. */\n disableVerticalPadding?: boolean;\n /** If `true`, the notification will not be closed automatically. */\n permanent?: boolean;\n /** If `true`, a close button will be displayed in the notification. */\n showCloser?: boolean;\n /** The z-index of the Notification. */\n zIndex?: number;\n}\n\nconst Notification = ({\n open,\n onClose,\n children,\n disableVerticalPadding = false,\n permanent = false,\n showCloser = false,\n zIndex = 2,\n}: NotificationProps) => {\n const { root, progressBarContainer, progressBar, content } = generateClasses({ disableVerticalPadding });\n const DISPLAY_DURATION = 5000;\n const buttonLabel = \"Schließen\";\n\n const isClient = useIsClient();\n\n useEffect(() => {\n const isChromatic = Boolean(import.meta.env.STORYBOOK_INVOKED_BY);\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n if (open && !permanent && !isChromatic) {\n timeoutId = setTimeout(() => {\n onClose();\n }, DISPLAY_DURATION);\n }\n return () => clearTimeout(timeoutId);\n }, [open, onClose, permanent]);\n\n if (!open || !isClient) return null;\n\n return createPortal(\n <div\n className={root()}\n data-bpds=\"notification\"\n style={{ zIndex }}\n data-bpds-disable-vertical-padding={disableVerticalPadding}\n data-bpds-permanent={permanent}\n data-bpds-show-closer={showCloser}\n >\n {!permanent && (\n <div className={progressBarContainer()}>\n <div className={progressBar()}></div>\n </div>\n )}\n <div className={content()}>\n {children}\n {(permanent || showCloser) && (\n <IconButton variant=\"tertiary\" icon={<CloserIcon />} label={buttonLabel} size=\"small\" onClick={onClose} inverted />\n )}\n </div>\n </div>,\n document.body,\n );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;AAUA,IAAMC,IAAkBC,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM;GACJ;GACA;GACA;EACF;EACA,sBAAsB;EACtB,aAAa;EACb,SAAS;CACX;CACA,UAAU,EACR,wBAAwB;EACtB,MAAM,EACJ,SAAS,OACX;EACA,OAAO,EACL,SAAS,OACX;CACF,EACF;AACF,CAAC,GAmBKC,KAAgB,EACpB,SACA,YACA,aACA,4BAAyB,IACzB,eAAY,IACZ,gBAAa,IACb,YAAS,QACc;CACvB,IAAM,EAAE,SAAM,yBAAsB,gBAAa,eAAYF,EAAgB,EAAE,0BAAuB,CAAC,GAIjGG,IAAWC,EAAY;CAe7B,OAbAC,QAAgB;EACd,IACIC;EAMJ,OALIC,KAAQ,CAACC,MACX,IAAY,iBAAiB;GAC3B,EAAQ;EACV,GAAG,GAAgB,UAER,aAAaF,CAAS;CACrC,GAAG;EAACC;EAAME;EAASD;CAAS,CAAC,GAEzB,CAACD,KAAQ,CAACJ,IAAiB,OAExBO,EACL,kBAAC,OAAD;EACE,WAAWC,EAAK;EAChB,aAAU;EACV,OAAO,EAAE,UAAO;EAChB,sCAAoCC;EACpC,uBAAqBJ;EACrB,yBAAuBK;EANzB,UAAA,CAQG,CAACL,KACA,kBAAC,OAAD;GAAK,WAAWM,EAAqB;GACnC,UAAA,kBAAC,OAAD,EAAK,WAAWC,EAAY,EAAQ,CAAA;EACjC,CAAA,GAEP,kBAAC,OAAD;GAAK,WAAWC,EAAQ;GAAxB,UAAA,CACGC,IACCT,KAAaK,MACb,kBAACd,GAAD;IAAY,SAAQ;IAAW,MAAM,kBAACmB,GAAD,CAAa,CAAA;IAAG,OAAO;IAAa,MAAK;IAAQ,SAAST;IAAS,UAAA;GAAU,CAAA,CAEjH;EACF,CAAA,CAAA;CACL,CAAA,GAAA,SAAS,IACX;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-notification",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Notification component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/
|
|
36
|
-
"@bonprix-ds/react-icon-button": "1.2.
|
|
35
|
+
"@bonprix-ds/react-icon": "1.3.0",
|
|
36
|
+
"@bonprix-ds/react-icon-button": "1.2.3",
|
|
37
|
+
"@bonprix-ds/utils": "0.4.0"
|
|
37
38
|
},
|
|
38
39
|
"devDependencies": {
|
|
39
40
|
"@types/react": "19.3.0",
|
|
40
41
|
"@types/react-dom": "19.3.0",
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"vite": "8.3.0"
|
|
42
|
+
"vite": "8.3.2",
|
|
43
|
+
"@bonprix-ds/vite-config": "0.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"react": "^19
|
|
47
|
-
"react-dom": "^19
|
|
46
|
+
"react": "^19",
|
|
47
|
+
"react-dom": "^19",
|
|
48
48
|
"tailwind-variants": "0.3.1"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|