@bonprix-ds/react-notification 1.0.5 → 1.1.0
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/index.js +1 -2
- package/dist/src/Notification.d.ts +3 -1
- package/dist/src/Notification.js +10 -11
- package/dist/src/Notification.js.map +1 -1
- package/package.json +9 -6
package/dist/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { e as default };
|
|
1
|
+
export { default } from "./src/Notification.js";
|
|
@@ -12,8 +12,10 @@ export interface NotificationProps {
|
|
|
12
12
|
permanent?: boolean;
|
|
13
13
|
/** If `true`, a close button will be displayed in the notification. */
|
|
14
14
|
showCloser?: boolean;
|
|
15
|
+
/** The accessible name of the close button. */
|
|
16
|
+
closeButtonLabel?: string;
|
|
15
17
|
/** The z-index of the Notification. */
|
|
16
18
|
zIndex?: number;
|
|
17
19
|
}
|
|
18
|
-
declare const Notification: ({ open, onClose, children, disableVerticalPadding, permanent, showCloser, zIndex, }: NotificationProps) => React.ReactPortal | null;
|
|
20
|
+
declare const Notification: ({ open, onClose, children, disableVerticalPadding, permanent, showCloser, closeButtonLabel, zIndex, }: NotificationProps) => React.ReactPortal | null;
|
|
19
21
|
export default Notification;
|
package/dist/src/Notification.js
CHANGED
|
@@ -6,7 +6,7 @@ import r from "@bonprix-ds/react-icon-button";
|
|
|
6
6
|
import { CloserIcon as i } from "@bonprix-ds/react-icon/icons";
|
|
7
7
|
import { useIsClient as a } from "@bonprix-ds/utils";
|
|
8
8
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
9
|
-
|
|
9
|
+
// src/Notification.tsx
|
|
10
10
|
var c = n({
|
|
11
11
|
base: "",
|
|
12
12
|
slots: {
|
|
@@ -23,8 +23,8 @@ var c = n({
|
|
|
23
23
|
true: { content: "py-0" },
|
|
24
24
|
false: { content: "py-4" }
|
|
25
25
|
} }
|
|
26
|
-
}), l = ({ open: n, onClose: l, children: u, disableVerticalPadding: d = !1, permanent: f = !1, showCloser: p = !1,
|
|
27
|
-
let { root:
|
|
26
|
+
}), l = ({ open: n, onClose: l, children: u, disableVerticalPadding: d = !1, permanent: f = !1, showCloser: p = !1, closeButtonLabel: m = "Schließen", zIndex: h = 2 }) => {
|
|
27
|
+
let { root: g, progressBarContainer: _, progressBar: v, content: y } = c({ disableVerticalPadding: d }), b = a();
|
|
28
28
|
return e(() => {
|
|
29
29
|
let e;
|
|
30
30
|
return n && !f && (e = setTimeout(() => {
|
|
@@ -34,22 +34,22 @@ var c = n({
|
|
|
34
34
|
n,
|
|
35
35
|
l,
|
|
36
36
|
f
|
|
37
|
-
]), !n || !
|
|
38
|
-
className:
|
|
37
|
+
]), !n || !b ? null : t(/* @__PURE__ */ s("div", {
|
|
38
|
+
className: g(),
|
|
39
39
|
"data-bpds": "notification",
|
|
40
|
-
style: { zIndex:
|
|
40
|
+
style: { zIndex: h },
|
|
41
41
|
"data-bpds-disable-vertical-padding": d,
|
|
42
42
|
"data-bpds-permanent": f,
|
|
43
43
|
"data-bpds-show-closer": p,
|
|
44
44
|
children: [!f && /* @__PURE__ */ o("div", {
|
|
45
|
-
className:
|
|
46
|
-
children: /* @__PURE__ */ o("div", { className:
|
|
45
|
+
className: _(),
|
|
46
|
+
children: /* @__PURE__ */ o("div", { className: v() })
|
|
47
47
|
}), /* @__PURE__ */ s("div", {
|
|
48
|
-
className:
|
|
48
|
+
className: y(),
|
|
49
49
|
children: [u, (f || p) && /* @__PURE__ */ o(r, {
|
|
50
50
|
variant: "tertiary",
|
|
51
51
|
icon: /* @__PURE__ */ o(i, {}),
|
|
52
|
-
label:
|
|
52
|
+
label: m,
|
|
53
53
|
size: "small",
|
|
54
54
|
onClick: l,
|
|
55
55
|
inverted: !0
|
|
@@ -57,7 +57,6 @@ var c = n({
|
|
|
57
57
|
})]
|
|
58
58
|
}), document.body);
|
|
59
59
|
};
|
|
60
|
-
//#endregion
|
|
61
60
|
export { l as default };
|
|
62
61
|
|
|
63
62
|
//# sourceMappingURL=Notification.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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","closeButtonLabel"],"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 accessible name of the close button. */\n closeButtonLabel?: string;\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 closeButtonLabel = \"Schließen\",\n zIndex = 2,\n}: NotificationProps) => {\n const { root, progressBarContainer, progressBar, content } = generateClasses({ disableVerticalPadding });\n const DISPLAY_DURATION = 5000;\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={closeButtonLabel} 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,GAqBKC,KAAgB,EACpB,SACA,YACA,aACA,4BAAyB,IACzB,eAAY,IACZ,gBAAa,IACb,sBAAmB,aACnB,YAAS,QACc;CACvB,IAAM,EAAE,SAAM,yBAAsB,gBAAa,eAAYF,EAAgB,EAAE,0BAAuB,CAAC,GAGjGG,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,OAAOC;IAAkB,MAAK;IAAQ,SAASV;IAAS,UAAA;GAAU,CAAA,CAEtH;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.1.0",
|
|
4
4
|
"description": "Notification component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,15 +32,18 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/react-icon": "1.3.
|
|
36
|
-
"@bonprix-ds/react-icon-button": "1.2.
|
|
37
|
-
"@bonprix-ds/utils": "0.
|
|
35
|
+
"@bonprix-ds/react-icon": "1.3.3",
|
|
36
|
+
"@bonprix-ds/react-icon-button": "1.2.6",
|
|
37
|
+
"@bonprix-ds/utils": "0.6.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
+
"@bonprix-ds/vite-config": "0.0.0",
|
|
41
|
+
"@testing-library/dom": "10.4.2",
|
|
42
|
+
"@testing-library/react": "16.3.3",
|
|
40
43
|
"@types/react": "19.3.0",
|
|
41
44
|
"@types/react-dom": "19.3.0",
|
|
42
|
-
"vite": "8.3.
|
|
43
|
-
"
|
|
45
|
+
"vite": "8.3.5",
|
|
46
|
+
"vitest": "5.0.5"
|
|
44
47
|
},
|
|
45
48
|
"peerDependencies": {
|
|
46
49
|
"react": "^19",
|