@bonprix-ds/react-alert 1.1.0 → 1.1.1
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/Alert.js +28 -31
- package/dist/src/Alert.js.map +1 -1
- package/package.json +7 -4
package/dist/src/Alert.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "react";
|
|
3
3
|
import { tv as e } from "tailwind-variants";
|
|
4
|
-
import t from "@bonprix-ds/react-icon";
|
|
5
|
-
import n from "@bonprix-ds/react-icon
|
|
6
|
-
import { warnDeprecated as
|
|
7
|
-
import { jsx as
|
|
4
|
+
import t from "@bonprix-ds/react-icon-button";
|
|
5
|
+
import { AlertIcon as n, CloserIcon as r, ErrorIcon as i, HintIcon as a, SuccessIcon as o } from "@bonprix-ds/react-icon/icons";
|
|
6
|
+
import { warnDeprecated as s } from "@bonprix-ds/utils/deprecation";
|
|
7
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
8
8
|
//#region src/Alert.tsx
|
|
9
|
-
var
|
|
9
|
+
var u = e({
|
|
10
10
|
slots: {
|
|
11
11
|
root: "preflight m-0 flex items-start justify-between gap-4 rounded p-5 [word-break:break-word]",
|
|
12
12
|
iconAndContent: "flex gap-2",
|
|
@@ -42,56 +42,53 @@ var o = e({
|
|
|
42
42
|
secondary: { root: "rounded-none bg-transparent p-0" }
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
}),
|
|
45
|
+
}), d = {
|
|
46
46
|
warning: {
|
|
47
|
-
icon:
|
|
47
|
+
icon: n,
|
|
48
48
|
label: "Warnung"
|
|
49
49
|
},
|
|
50
50
|
info: {
|
|
51
|
-
icon:
|
|
51
|
+
icon: a,
|
|
52
52
|
label: "Hinweis"
|
|
53
53
|
},
|
|
54
54
|
success: {
|
|
55
|
-
icon:
|
|
55
|
+
icon: o,
|
|
56
56
|
label: "Erfolg"
|
|
57
57
|
},
|
|
58
58
|
error: {
|
|
59
|
-
icon:
|
|
59
|
+
icon: i,
|
|
60
60
|
label: "Fehler"
|
|
61
61
|
}
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
let { root: _, content: v, title: y, iconAndContent: b, icon: x } =
|
|
65
|
-
status:
|
|
66
|
-
alertVariant:
|
|
62
|
+
}, f = ({ open: e, isOpen: n, variant: i = "primary", status: a, title: o, children: f, showCloseIcon: p = !0, onClose: m = () => null, nonCritical: h = !1, titleTag: g = "h2" }) => {
|
|
63
|
+
n !== void 0 && s("is-open-prop");
|
|
64
|
+
let { root: _, content: v, title: y, iconAndContent: b, icon: x } = u({
|
|
65
|
+
status: a,
|
|
66
|
+
alertVariant: i
|
|
67
67
|
});
|
|
68
|
-
if (!(e ??
|
|
69
|
-
let S =
|
|
70
|
-
return /* @__PURE__ */
|
|
68
|
+
if (!(e ?? n)) return null;
|
|
69
|
+
let S = d[a].icon, C = d[a].label;
|
|
70
|
+
return /* @__PURE__ */ l("div", {
|
|
71
71
|
className: _(),
|
|
72
72
|
role: h ? void 0 : "alert",
|
|
73
73
|
"aria-label": C,
|
|
74
74
|
"data-bpds": "alert",
|
|
75
|
-
"data-bpds-status":
|
|
76
|
-
"data-bpds-variant":
|
|
77
|
-
children: [/* @__PURE__ */
|
|
75
|
+
"data-bpds-status": a,
|
|
76
|
+
"data-bpds-variant": i,
|
|
77
|
+
children: [/* @__PURE__ */ l("div", {
|
|
78
78
|
className: b(),
|
|
79
|
-
children: [/* @__PURE__ */
|
|
80
|
-
variant: S,
|
|
81
|
-
className: x()
|
|
82
|
-
}), /* @__PURE__ */ a("div", {
|
|
79
|
+
children: [/* @__PURE__ */ c(S, { className: x() }), /* @__PURE__ */ l("div", {
|
|
83
80
|
className: v(),
|
|
84
|
-
children: [
|
|
81
|
+
children: [o && /* @__PURE__ */ c("div", {
|
|
85
82
|
className: y(),
|
|
86
|
-
children: /* @__PURE__ */
|
|
83
|
+
children: /* @__PURE__ */ c(g, {
|
|
87
84
|
className: "typography-h6 my-0 text-start text-inherit",
|
|
88
|
-
children:
|
|
85
|
+
children: o
|
|
89
86
|
})
|
|
90
87
|
}), f]
|
|
91
88
|
})]
|
|
92
|
-
}), p && /* @__PURE__ */
|
|
89
|
+
}), p && /* @__PURE__ */ c(t, {
|
|
93
90
|
variant: "tertiary",
|
|
94
|
-
icon:
|
|
91
|
+
icon: /* @__PURE__ */ c(r, {}),
|
|
95
92
|
size: "small",
|
|
96
93
|
label: "Schließen",
|
|
97
94
|
onClick: m
|
|
@@ -99,6 +96,6 @@ var o = e({
|
|
|
99
96
|
});
|
|
100
97
|
};
|
|
101
98
|
//#endregion
|
|
102
|
-
export {
|
|
99
|
+
export { f as default };
|
|
103
100
|
|
|
104
101
|
//# sourceMappingURL=Alert.js.map
|
package/dist/src/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","names":["
|
|
1
|
+
{"version":3,"file":"Alert.js","names":["IconButton","generateClasses","tv","alertVariants","AlertIcon","HintIcon","SuccessIcon","ErrorIcon","Alert","TitleTag","isOpen","warnDeprecated","titleStyle","variant","open","StatusIcon","status","statusAriaLabel","root","nonCritical","iconAndContent","icon","content","title","children","showCloseIcon","CloserIcon","onClose"],"sources":["../../src/Alert.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport { AlertIcon, CloserIcon, ErrorIcon, HintIcon, SuccessIcon } from \"@bonprix-ds/react-icon/icons\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport { levels, values } from \"./constants\";\n\nconst generateClasses = tv({\n slots: {\n // `word-break` not `overflow-wrap`: only the legacy `break-word` value also relaxes the\n // content-based minimum size of the flex items below, so the word wraps instead of widening them.\n root: \"preflight m-0 flex items-start justify-between gap-4 rounded p-5 [word-break:break-word]\",\n iconAndContent: \"flex gap-2\",\n content: \"typography-body1 gap-0.5 pt-0.5 text-clr-on-bg-high\",\n title: \"\",\n icon: \"\",\n },\n variants: {\n status: {\n success: {\n root: \"bg-clr-bg-success\",\n title: \"text-clr-fg-success\",\n icon: \"fill-clr-fg-success\",\n },\n info: {\n root: \"bg-clr-bg-info\",\n title: \"text-clr-fg-info\",\n icon: \"fill-clr-fg-info\",\n },\n warning: {\n root: \"bg-clr-bg-alert\",\n title: \"text-clr-fg-alert\",\n icon: \"fill-clr-fg-alert\",\n },\n error: {\n root: \"bg-clr-bg-error\",\n title: \"text-clr-fg-error\",\n icon: \"fill-clr-fg-error\",\n },\n },\n alertVariant: {\n primary: {\n title: \"text-clr-on-bg-high\",\n },\n secondary: {\n root: \"rounded-none bg-transparent p-0\",\n },\n },\n },\n});\n\ntype StatusLevel = (typeof levels)[number];\ntype VariantValue = (typeof values)[number];\n\ninterface BaseProps {\n /** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/\n status: StatusLevel;\n /** The message of the alert. */\n children: string;\n /** Callback, which is triggered when the visibility of the component (open/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */\n onClose?: () => void;\n /** Variant of the alert. Depends on the prominence level you require. */\n variant?: VariantValue;\n /** An optional title of the alert. The titel sums up the message briefly. */\n title?: string;\n /** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */\n showCloseIcon?: boolean;\n /** Removes role=\"alert\" from component if set to `true`. The alert content is not read by assistive technologies right away then. */\n nonCritical?: boolean;\n /** If `title` is used, you can define the used header element. */\n titleTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\ntype OpenProps = BaseProps & {\n /** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */\n open: boolean;\n /** @deprecated [is-open-prop] Use `open` instead. */\n isOpen?: never;\n};\n\ntype DeprecatedOpenProps = BaseProps & {\n open?: never;\n /**\n * Toggles the visibility of the component. Must be used in conjunction with `onClose`.\n * @deprecated [is-open-prop] Use `open` instead.\n */\n isOpen: boolean;\n};\n\nexport type Props = DeprecatedOpenProps | OpenProps;\n\ninterface AlertMap {\n icon: React.ComponentType<{ className?: string }>;\n label: string;\n}\n\nconst alertVariants: Record<StatusLevel, AlertMap> = {\n warning: {\n icon: AlertIcon,\n label: \"Warnung\",\n },\n info: {\n icon: HintIcon,\n label: \"Hinweis\",\n },\n success: {\n icon: SuccessIcon,\n label: \"Erfolg\",\n },\n error: {\n icon: ErrorIcon,\n label: \"Fehler\",\n },\n};\n\nconst Alert = ({\n open,\n isOpen,\n variant = \"primary\",\n status,\n title,\n children,\n showCloseIcon = true,\n onClose = () => null,\n nonCritical = false,\n titleTag: TitleTag = \"h2\",\n}: Props) => {\n if (isOpen !== undefined) warnDeprecated(\"is-open-prop\");\n const { root, content, title: titleStyle, iconAndContent, icon } = generateClasses({ status, alertVariant: variant });\n if (!(open ?? isOpen)) return null;\n\n const StatusIcon = alertVariants[status].icon;\n const statusAriaLabel = alertVariants[status].label;\n const closeLabel = \"Schließen\";\n\n return (\n <div\n className={root()}\n role={nonCritical ? undefined : \"alert\"}\n aria-label={statusAriaLabel}\n data-bpds=\"alert\"\n data-bpds-status={status}\n data-bpds-variant={variant}\n >\n <div className={iconAndContent()}>\n <StatusIcon className={icon()} />\n <div className={content()}>\n {title && (\n <div className={titleStyle()}>\n <TitleTag className=\"typography-h6 my-0 text-start text-inherit\">{title}</TitleTag>\n </div>\n )}\n {children}\n </div>\n </div>\n {showCloseIcon && <IconButton variant=\"tertiary\" icon={<CloserIcon />} size=\"small\" label={closeLabel} onClick={onClose} />}\n </div>\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAWA,IAAMC,IAAkBC,EAAG;CACzB,OAAO;EAGL,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,MAAM;IACJ,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,OAAO;IACL,MAAM;IACN,OAAO;IACP,MAAM;GACR;EACF;EACA,cAAc;GACZ,SAAS,EACP,OAAO,sBACT;GACA,WAAW,EACT,MAAM,kCACR;EACF;CACF;AACF,CAAC,GA+CKC,IAA+C;CACnD,SAAS;EACP,MAAMC;EACN,OAAO;CACT;CACA,MAAM;EACJ,MAAMC;EACN,OAAO;CACT;CACA,SAAS;EACP,MAAMC;EACN,OAAO;CACT;CACA,OAAO;EACL,MAAMC;EACN,OAAO;CACT;AACF,GAEMC,KAAS,EACb,SACA,WACA,aAAU,WACV,WACA,UACA,aACA,mBAAgB,IAChB,mBAAgB,MAChB,iBAAc,IACd,UAAUC,IAAW,WACV;CACX,AAAIC,MAAW,KAAA,KAAWC,EAAe,cAAc;CACvD,IAAM,EAAE,SAAM,YAAS,OAAOC,GAAY,mBAAgB,YAASX,EAAgB;EAAE;EAAQ,cAAcY;CAAQ,CAAC;CACpH,IAAI,EAAEC,KAAQJ,IAAS,OAAO;CAE9B,IAAMK,IAAaZ,EAAca,EAAO,CAAC,MACnCC,IAAkBd,EAAca,EAAO,CAAC;CAG9C,OACE,kBAAC,OAAD;EACE,WAAWE,EAAK;EAChB,MAAMC,IAAc,KAAA,IAAY;EAChC,cAAYF;EACZ,aAAU;EACV,oBAAkBD;EAClB,qBAAmBH;EANrB,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAWO,EAAe;GAA/B,UAAA,CACE,kBAACL,GAAD,EAAY,WAAWM,EAAK,EAAI,CAAA,GAChC,kBAAC,OAAD;IAAK,WAAWC,EAAQ;IAAxB,UAAA,CACGC,KACC,kBAAC,OAAD;KAAK,WAAWX,EAAW;KACzB,UAAA,kBAACH,GAAD;MAAU,WAAU;MAA8C,UAAAc;KAAgB,CAAA;IAC/E,CAAA,GAENC,CACE;GACF,CAAA,CAAA;EACJ,CAAA,GAAAC,KAAiB,kBAACzB,GAAD;GAAY,SAAQ;GAAW,MAAM,kBAAC0B,GAAD,CAAa,CAAA;GAAG,MAAK;GAAQ,OAAO;GAAY,SAASC;EAAU,CAAA,CACvH;;AAET"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-alert",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Alert component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,13 +32,16 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/react-icon": "1.2.
|
|
36
|
-
"@bonprix-ds/
|
|
37
|
-
"@bonprix-ds/
|
|
35
|
+
"@bonprix-ds/react-icon-button": "1.2.3",
|
|
36
|
+
"@bonprix-ds/utils": "0.4.0",
|
|
37
|
+
"@bonprix-ds/react-icon": "1.3.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
+
"@testing-library/dom": "10.4.2",
|
|
41
|
+
"@testing-library/react": "16.3.3",
|
|
40
42
|
"@types/react": "19.3.0",
|
|
41
43
|
"vite": "8.3.2",
|
|
44
|
+
"vitest": "4.1.11",
|
|
42
45
|
"@bonprix-ds/vite-config": "0.0.0"
|
|
43
46
|
},
|
|
44
47
|
"peerDependencies": {
|