@bonprix-ds/react-alert 1.1.2 → 1.2.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/src/Alert.d.ts +3 -1
- package/dist/src/Alert.js +14 -15
- package/dist/src/Alert.js.map +1 -1
- package/dist/src/constants.js +1 -2
- package/package.json +7 -7
package/dist/src/Alert.d.ts
CHANGED
|
@@ -15,6 +15,8 @@ interface BaseProps {
|
|
|
15
15
|
title?: string;
|
|
16
16
|
/** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */
|
|
17
17
|
showCloseIcon?: boolean;
|
|
18
|
+
/** The accessible name of the close button. */
|
|
19
|
+
closeButtonLabel?: string;
|
|
18
20
|
/** Removes role="alert" from component if set to `true`. The alert content is not read by assistive technologies right away then. */
|
|
19
21
|
nonCritical?: boolean;
|
|
20
22
|
/** If `title` is used, you can define the used header element. */
|
|
@@ -35,5 +37,5 @@ type DeprecatedOpenProps = BaseProps & {
|
|
|
35
37
|
isOpen: boolean;
|
|
36
38
|
};
|
|
37
39
|
export type Props = DeprecatedOpenProps | OpenProps;
|
|
38
|
-
declare const Alert: ({ open, isOpen, variant, status, title, children, showCloseIcon, onClose, nonCritical, titleTag: TitleTag, }: Props) => React.JSX.Element | null;
|
|
40
|
+
declare const Alert: ({ open, isOpen, variant, status, title, children, showCloseIcon, closeButtonLabel, onClose, nonCritical, titleTag: TitleTag, }: Props) => React.JSX.Element | null;
|
|
39
41
|
export default Alert;
|
package/dist/src/Alert.js
CHANGED
|
@@ -5,7 +5,7 @@ import t from "@bonprix-ds/react-icon-button";
|
|
|
5
5
|
import { AlertIcon as n, CloserIcon as r, ErrorIcon as i, HintIcon as a, SuccessIcon as o } from "@bonprix-ds/react-icon/icons";
|
|
6
6
|
import { warnDeprecated as s } from "@bonprix-ds/utils/deprecation";
|
|
7
7
|
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
8
|
-
|
|
8
|
+
// src/Alert.tsx
|
|
9
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]",
|
|
@@ -59,28 +59,28 @@ var u = e({
|
|
|
59
59
|
icon: i,
|
|
60
60
|
label: "Fehler"
|
|
61
61
|
}
|
|
62
|
-
}, f = ({ open: e, isOpen: n, variant: i = "primary", status: a, title: o, children: f, showCloseIcon: p = !0,
|
|
62
|
+
}, f = ({ open: e, isOpen: n, variant: i = "primary", status: a, title: o, children: f, showCloseIcon: p = !0, closeButtonLabel: m = "Schließen", onClose: h = () => null, nonCritical: g = !1, titleTag: _ = "h2" }) => {
|
|
63
63
|
n !== void 0 && s("is-open-prop");
|
|
64
|
-
let { root:
|
|
64
|
+
let { root: v, content: y, title: b, iconAndContent: x, icon: S } = u({
|
|
65
65
|
status: a,
|
|
66
66
|
alertVariant: i
|
|
67
67
|
});
|
|
68
68
|
if (!(e ?? n)) return null;
|
|
69
|
-
let
|
|
69
|
+
let C = d[a].icon, w = d[a].label;
|
|
70
70
|
return /* @__PURE__ */ l("div", {
|
|
71
|
-
className:
|
|
72
|
-
role:
|
|
73
|
-
"aria-label":
|
|
71
|
+
className: v(),
|
|
72
|
+
role: g ? void 0 : "alert",
|
|
73
|
+
"aria-label": w,
|
|
74
74
|
"data-bpds": "alert",
|
|
75
75
|
"data-bpds-status": a,
|
|
76
76
|
"data-bpds-variant": i,
|
|
77
77
|
children: [/* @__PURE__ */ l("div", {
|
|
78
|
-
className:
|
|
79
|
-
children: [/* @__PURE__ */ c(
|
|
80
|
-
className:
|
|
78
|
+
className: x(),
|
|
79
|
+
children: [/* @__PURE__ */ c(C, { className: S() }), /* @__PURE__ */ l("div", {
|
|
80
|
+
className: y(),
|
|
81
81
|
children: [o && /* @__PURE__ */ c("div", {
|
|
82
|
-
className:
|
|
83
|
-
children: /* @__PURE__ */ c(
|
|
82
|
+
className: b(),
|
|
83
|
+
children: /* @__PURE__ */ c(_, {
|
|
84
84
|
className: "typography-h6 my-0 text-start text-inherit",
|
|
85
85
|
children: o
|
|
86
86
|
})
|
|
@@ -90,12 +90,11 @@ var u = e({
|
|
|
90
90
|
variant: "tertiary",
|
|
91
91
|
icon: /* @__PURE__ */ c(r, {}),
|
|
92
92
|
size: "small",
|
|
93
|
-
label:
|
|
94
|
-
onClick:
|
|
93
|
+
label: m,
|
|
94
|
+
onClick: h
|
|
95
95
|
})]
|
|
96
96
|
});
|
|
97
97
|
};
|
|
98
|
-
//#endregion
|
|
99
98
|
export { f as default };
|
|
100
99
|
|
|
101
100
|
//# sourceMappingURL=Alert.js.map
|
package/dist/src/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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","closeButtonLabel","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 /** The accessible name of the close button. */\n closeButtonLabel?: string;\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 closeButtonLabel = \"Schließen\",\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\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={closeButtonLabel} 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,GAiDKC,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,sBAAmB,aACnB,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;CAE9C,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,OAAOC;GAAkB,SAASC;EAAU,CAAA,CAC7H;;AAET"}
|
package/dist/src/constants.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-alert",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Alert component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
"provenance": true
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@bonprix-ds/react-icon": "1.3.
|
|
36
|
-
"@bonprix-ds/
|
|
37
|
-
"@bonprix-ds/
|
|
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",
|
|
40
41
|
"@testing-library/dom": "10.4.2",
|
|
41
42
|
"@testing-library/react": "16.3.3",
|
|
42
43
|
"@types/react": "19.3.0",
|
|
43
|
-
"vite": "8.3.
|
|
44
|
-
"vitest": "5.0.5"
|
|
45
|
-
"@bonprix-ds/vite-config": "0.0.0"
|
|
44
|
+
"vite": "8.3.5",
|
|
45
|
+
"vitest": "5.0.5"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "^19",
|