@bonprix-ds/react-notification 1.0.0 → 1.0.2
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.d.ts +2 -24
- package/dist/src/Notification.d.ts +19 -0
- package/dist/src/Notification.js +14 -14
- package/dist/src/Notification.js.map +1 -1
- package/package.json +30 -29
package/dist/index.d.ts
CHANGED
|
@@ -1,24 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
declare const Notification_2: ({ open, onClose, children, disableVerticalPadding, permanent, showCloser, zIndex, }: NotificationProps) => default_2.ReactPortal | null;
|
|
5
|
-
export default Notification_2;
|
|
6
|
-
|
|
7
|
-
export declare interface NotificationProps {
|
|
8
|
-
/** Controls the visibility of the notification. Should be used in conjunction with the `onClose` property. */
|
|
9
|
-
open: boolean;
|
|
10
|
-
/** Callback that will be triggered when the notification component is attempted to be closed. Should be used in conjunction with the `open` property. */
|
|
11
|
-
onClose: () => void;
|
|
12
|
-
/** The content to be displayed within the notification. */
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
/** If `true`, disables vertical padding in the notification content. */
|
|
15
|
-
disableVerticalPadding?: boolean;
|
|
16
|
-
/** If `true`, the notification will not be closed automatically. */
|
|
17
|
-
permanent?: boolean;
|
|
18
|
-
/** If `true`, a close button will be displayed in the notification. */
|
|
19
|
-
showCloser?: boolean;
|
|
20
|
-
/** The z-index of the Notification. */
|
|
21
|
-
zIndex?: number;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export { }
|
|
1
|
+
export { default } from "./src/Notification";
|
|
2
|
+
export type { NotificationProps } from "./src/Notification";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface NotificationProps {
|
|
3
|
+
/** Controls the visibility of the notification. Should be used in conjunction with the `onClose` property. */
|
|
4
|
+
open: boolean;
|
|
5
|
+
/** Callback that will be triggered when the notification component is attempted to be closed. Should be used in conjunction with the `open` property. */
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
/** The content to be displayed within the notification. */
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
/** If `true`, disables vertical padding in the notification content. */
|
|
10
|
+
disableVerticalPadding?: boolean;
|
|
11
|
+
/** If `true`, the notification will not be closed automatically. */
|
|
12
|
+
permanent?: boolean;
|
|
13
|
+
/** If `true`, a close button will be displayed in the notification. */
|
|
14
|
+
showCloser?: boolean;
|
|
15
|
+
/** The z-index of the Notification. */
|
|
16
|
+
zIndex?: number;
|
|
17
|
+
}
|
|
18
|
+
declare const Notification: ({ open, onClose, children, disableVerticalPadding, permanent, showCloser, zIndex, }: NotificationProps) => React.ReactPortal | null;
|
|
19
|
+
export default Notification;
|
package/dist/src/Notification.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import e from "
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
2
|
+
import { useEffect as e } from "react";
|
|
3
|
+
import { createPortal as t } from "react-dom";
|
|
4
|
+
import { tv as n } from "tailwind-variants";
|
|
5
|
+
import r from "@bonprix-ds/react-icon-button";
|
|
6
|
+
import { useIsClient as i } from "@bonprix-ds/utils";
|
|
7
7
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
8
8
|
//#region src/Notification.tsx
|
|
9
|
-
var s =
|
|
9
|
+
var s = n({
|
|
10
10
|
base: "",
|
|
11
11
|
slots: {
|
|
12
12
|
root: [
|
|
13
13
|
"w-full max-w-[30rem]",
|
|
14
14
|
"flex flex-col fixed start-1/2 -translate-x-1/2",
|
|
15
|
-
"bottom-[var(--app-safe-area-inset-bottom,0rem)] m:bottom-[calc(var(--app-safe-area-inset-bottom,0rem)+var(--spacing-3))]"
|
|
15
|
+
"bottom-[var(--app-safe-area-inset-bottom,0rem)] m:bottom-[calc(var(--app-safe-area-inset-bottom,0rem)+var(--bpds-spacing-3))]"
|
|
16
16
|
],
|
|
17
17
|
progressBarContainer: "h-1 bg-clr-white",
|
|
18
18
|
progressBar: "h-full bg-clr-black animate-shrinkHorizontally",
|
|
@@ -22,18 +22,18 @@ var s = i({
|
|
|
22
22
|
true: { content: "py-0" },
|
|
23
23
|
false: { content: "py-4" }
|
|
24
24
|
} }
|
|
25
|
-
}), c = ({ open:
|
|
26
|
-
let { root: m, progressBarContainer: h, progressBar: g, content: _ } = s({ disableVerticalPadding: u }), v =
|
|
27
|
-
return
|
|
25
|
+
}), c = ({ open: n, onClose: c, children: l, disableVerticalPadding: u = !1, permanent: d = !1, showCloser: f = !1, zIndex: p = 2 }) => {
|
|
26
|
+
let { root: m, progressBarContainer: h, progressBar: g, content: _ } = s({ disableVerticalPadding: u }), v = i();
|
|
27
|
+
return e(() => {
|
|
28
28
|
let e;
|
|
29
|
-
return
|
|
29
|
+
return n && !d && (e = setTimeout(() => {
|
|
30
30
|
c();
|
|
31
31
|
}, 5e3)), () => clearTimeout(e);
|
|
32
32
|
}, [
|
|
33
|
-
|
|
33
|
+
n,
|
|
34
34
|
c,
|
|
35
35
|
d
|
|
36
|
-
]), !
|
|
36
|
+
]), !n || !v ? null : t(/* @__PURE__ */ o("div", {
|
|
37
37
|
className: m(),
|
|
38
38
|
"data-bpds": "notification",
|
|
39
39
|
style: { zIndex: p },
|
|
@@ -45,7 +45,7 @@ var s = i({
|
|
|
45
45
|
children: /* @__PURE__ */ a("div", { className: g() })
|
|
46
46
|
}), /* @__PURE__ */ o("div", {
|
|
47
47
|
className: _(),
|
|
48
|
-
children: [l, (d || f) && /* @__PURE__ */ a(
|
|
48
|
+
children: [l, (d || f) && /* @__PURE__ */ a(r, {
|
|
49
49
|
variant: "tertiary",
|
|
50
50
|
icon: "closer",
|
|
51
51
|
label: "Schließen",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":[],"sources":["../../src/Notification.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
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 \"flex flex-col fixed start-1/2 -translate-x-1/2\",\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 bg-clr-black animate-shrinkHorizontally\",\n content: \"relative min-h-6 flex gap-2.5 justify-between typography-body1 text-clr-on-bg-high-inverse bg-clr-bg-main-inverse px-4\",\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=\"closer\" label={buttonLabel} size=\"small\" onClick={onClose} inverted />\n )}\n </div>\n </div>,\n document.body,\n );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;AASA,IAAM,IAAkB,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,GAmBK,KAAgB,EACpB,SACA,YACA,aACA,4BAAyB,IACzB,eAAY,IACZ,gBAAa,IACb,YAAS,QACc;CACvB,IAAM,EAAE,SAAM,yBAAsB,gBAAa,eAAY,EAAgB,EAAE,0BAAuB,CAAC,GAIjG,IAAW,EAAY;CAe7B,OAbA,QAAgB;EACd,IACI;EAMJ,OALI,KAAQ,CAAC,MACX,IAAY,iBAAiB;GAC3B,EAAQ;EACV,GAAG,GAAgB,UAER,aAAa,CAAS;CACrC,GAAG;EAAC;EAAM;EAAS;CAAS,CAAC,GAEzB,CAAC,KAAQ,CAAC,IAAiB,OAExB,EACL,kBAAC,OAAD;EACE,WAAW,EAAK;EAChB,aAAU;EACV,OAAO,EAAE,UAAO;EAChB,sCAAoC;EACpC,uBAAqB;EACrB,yBAAuB;EANzB,UAAA,CAQG,CAAC,KACA,kBAAC,OAAD;GAAK,WAAW,EAAqB;GACnC,UAAA,kBAAC,OAAD,EAAK,WAAW,EAAY,EAAQ,CAAA;EACjC,CAAA,GAEP,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAxB,UAAA,CACG,IACC,KAAa,MACb,kBAAC,GAAD;IAAY,SAAQ;IAAW,MAAK;IAAS,OAAO;IAAa,MAAK;IAAQ,SAAS;IAAS,UAAA;GAAU,CAAA,CAEzG;EACF,CAAA,CAAA;CACL,CAAA,GAAA,SAAS,IACX;AACF"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-notification",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Notification component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react/notification"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": false,
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
12
23
|
"exports": {
|
|
13
24
|
".": {
|
|
14
25
|
"import": "./dist/index.js",
|
|
@@ -16,35 +27,25 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [],
|
|
24
|
-
"author": "",
|
|
25
|
-
"license": "UNLICENSED",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
29
|
-
"directory": "packages/react/notification"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/
|
|
33
|
-
"@bonprix-ds/
|
|
34
|
-
},
|
|
35
|
-
"peerDependencies": {
|
|
36
|
-
"react": "^19.0.0",
|
|
37
|
-
"react-dom": "^19.0.0",
|
|
38
|
-
"tailwind-variants": "0.3.1"
|
|
35
|
+
"@bonprix-ds/utils": "0.2.2",
|
|
36
|
+
"@bonprix-ds/react-icon-button": "1.2.1"
|
|
39
37
|
},
|
|
40
38
|
"devDependencies": {
|
|
41
|
-
"
|
|
42
|
-
"@types/react": "19.
|
|
43
|
-
"@types/react-dom": "19.2.5",
|
|
39
|
+
"@types/react": "19.3.0",
|
|
40
|
+
"@types/react-dom": "19.3.0",
|
|
44
41
|
"@vitejs/plugin-react": "6.1.1",
|
|
45
42
|
"rollup-preserve-directives": "1.1.3",
|
|
46
|
-
"
|
|
47
|
-
|
|
43
|
+
"vite": "8.3.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"react": "^19.3.0",
|
|
47
|
+
"react-dom": "^19.3.0",
|
|
48
|
+
"tailwind-variants": "0.3.1"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "vite build"
|