@bonprix-ds/react-alert 1.0.7 → 1.0.8
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 +3 -35
- package/dist/index.js +10 -10
- package/dist/index.js.map +1 -1
- package/dist/src/Alert.d.ts +26 -0
- package/dist/src/constants.d.ts +2 -0
- package/package.json +31 -30
package/dist/index.d.ts
CHANGED
|
@@ -1,35 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export default Alert;
|
|
5
|
-
|
|
6
|
-
export declare interface AlertProps {
|
|
7
|
-
/** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */
|
|
8
|
-
isOpen: boolean;
|
|
9
|
-
/** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/
|
|
10
|
-
status: StatusLevel;
|
|
11
|
-
/** The message of the alert. */
|
|
12
|
-
children: string;
|
|
13
|
-
/** Callback, which is triggered when the visibility of the component (opened/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */
|
|
14
|
-
onClose?: () => void;
|
|
15
|
-
/** Variant of the alert. Depends on the prominence level you require. */
|
|
16
|
-
variant?: VariantValue;
|
|
17
|
-
/** An optional title of the alert. The titel sums up the message briefly. */
|
|
18
|
-
title?: string;
|
|
19
|
-
/** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */
|
|
20
|
-
showCloseIcon?: boolean;
|
|
21
|
-
/** Removes role="alert" from component if set to `true`. The alert content is not read by assistive technologies right away then. */
|
|
22
|
-
nonCritical?: boolean;
|
|
23
|
-
/** If `title` is used, you can define the used header element. */
|
|
24
|
-
titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export declare const levels: readonly ["success", "info", "warning", "error"];
|
|
28
|
-
|
|
29
|
-
declare type StatusLevel = (typeof levels)[number];
|
|
30
|
-
|
|
31
|
-
export declare const values: readonly ["primary", "secondary"];
|
|
32
|
-
|
|
33
|
-
declare type VariantValue = (typeof values)[number];
|
|
34
|
-
|
|
35
|
-
export { }
|
|
1
|
+
export { default } from "./src/Alert";
|
|
2
|
+
export type { Props as AlertProps } from "./src/Alert";
|
|
3
|
+
export * from "./src/constants";
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import e from "@bonprix-ds/react-icon";
|
|
3
|
-
import t from "@bonprix-ds/react-icon-button";
|
|
4
|
-
import n from "@bonprix-ds/react-typography";
|
|
5
2
|
import "react";
|
|
6
|
-
import { tv as
|
|
3
|
+
import { tv as e } from "tailwind-variants";
|
|
4
|
+
import t from "@bonprix-ds/react-icon";
|
|
5
|
+
import n from "@bonprix-ds/react-icon-button";
|
|
6
|
+
import r from "@bonprix-ds/react-typography";
|
|
7
7
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
8
8
|
//#region src/Alert.tsx
|
|
9
|
-
var o =
|
|
9
|
+
var o = e({
|
|
10
10
|
slots: {
|
|
11
11
|
root: "preflight m-0 flex justify-between items-start p-5 rounded gap-4 [word-break:break-word]",
|
|
12
12
|
iconAndContent: "flex gap-2",
|
|
@@ -59,12 +59,12 @@ var o = r({
|
|
|
59
59
|
icon: "error",
|
|
60
60
|
label: "Fehler"
|
|
61
61
|
}
|
|
62
|
-
}, c = ({ isOpen:
|
|
62
|
+
}, c = ({ isOpen: e, variant: c = "primary", status: l, title: u, children: d, showCloseIcon: f = !0, onClose: p = () => null, nonCritical: m = !1, titleTag: h = "h2" }) => {
|
|
63
63
|
let { root: g, content: _, title: v, iconAndContent: y, icon: b } = o({
|
|
64
64
|
status: l,
|
|
65
65
|
alertVariant: c
|
|
66
66
|
});
|
|
67
|
-
if (!
|
|
67
|
+
if (!e) return null;
|
|
68
68
|
let x = s[l].icon, S = s[l].label;
|
|
69
69
|
return /* @__PURE__ */ a("div", {
|
|
70
70
|
className: g(),
|
|
@@ -75,14 +75,14 @@ var o = r({
|
|
|
75
75
|
"data-bpds-variant": c,
|
|
76
76
|
children: [/* @__PURE__ */ a("div", {
|
|
77
77
|
className: y(),
|
|
78
|
-
children: [/* @__PURE__ */ i(
|
|
78
|
+
children: [/* @__PURE__ */ i(t, {
|
|
79
79
|
variant: x,
|
|
80
80
|
className: b()
|
|
81
81
|
}), /* @__PURE__ */ a("div", {
|
|
82
82
|
className: _(),
|
|
83
83
|
children: [u && /* @__PURE__ */ i("div", {
|
|
84
84
|
className: v(),
|
|
85
|
-
children: /* @__PURE__ */ i(
|
|
85
|
+
children: /* @__PURE__ */ i(r, {
|
|
86
86
|
variant: "h6",
|
|
87
87
|
color: "inherit",
|
|
88
88
|
component: h,
|
|
@@ -90,7 +90,7 @@ var o = r({
|
|
|
90
90
|
})
|
|
91
91
|
}), d]
|
|
92
92
|
})]
|
|
93
|
-
}), f && /* @__PURE__ */ i(
|
|
93
|
+
}), f && /* @__PURE__ */ i(n, {
|
|
94
94
|
variant: "tertiary",
|
|
95
95
|
icon: "closer",
|
|
96
96
|
size: "small",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/Alert.tsx","../src/constants.ts"],"sourcesContent":["\"use client\";\n\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/Alert.tsx","../src/constants.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\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 justify-between items-start p-5 rounded gap-4 [word-break:break-word]\",\n iconAndContent: \"flex gap-2\",\n content: \"typography-body1 text-clr-on-bg-high gap-0.5 pt-0.5\",\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: \"p-0 rounded-none bg-transparent\",\n },\n },\n },\n});\n\ntype StatusLevel = (typeof levels)[number];\ntype VariantValue = (typeof values)[number];\n\nexport interface Props {\n /** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */\n isOpen: boolean;\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 (opened/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\ninterface AlertMap {\n icon: IconType;\n label: string;\n}\n\nconst alertVariants: Record<StatusLevel, AlertMap> = {\n warning: {\n icon: \"alert\",\n label: \"Warnung\",\n },\n info: {\n icon: \"hint\",\n label: \"Hinweis\",\n },\n success: {\n icon: \"success\",\n label: \"Erfolg\",\n },\n error: {\n icon: \"error\",\n label: \"Fehler\",\n },\n};\n\nconst Alert = ({\n isOpen,\n variant = \"primary\",\n status,\n title,\n children,\n showCloseIcon = true,\n onClose = () => null,\n nonCritical = false,\n titleTag = \"h2\",\n}: Props) => {\n const { root, content, title: titleStyle, iconAndContent, icon } = generateClasses({ status, alertVariant: variant });\n if (!isOpen) return null;\n\n const iconVariant = 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 <Icon variant={iconVariant} className={icon()} />\n <div className={content()}>\n {title && (\n <div className={titleStyle()}>\n <Typography variant=\"h6\" color=\"inherit\" component={titleTag}>\n {title}\n </Typography>\n </div>\n )}\n {children}\n </div>\n </div>\n {showCloseIcon && <IconButton variant=\"tertiary\" icon=\"closer\" size=\"small\" label={closeLabel} onClick={onClose} />}\n </div>\n );\n};\n\nexport default Alert;\n","export const levels = [\"success\", \"info\", \"warning\", \"error\"] as const;\nexport const values = [\"primary\", \"secondary\"] as const;\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAkB,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+BK,IAA+C;CACnD,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,MAAM;EACJ,MAAM;EACN,OAAO;CACT;CACA,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;AACF,GAEM,KAAS,EACb,WACA,aAAU,WACV,WACA,UACA,aACA,mBAAgB,IAChB,mBAAgB,MAChB,iBAAc,IACd,cAAW,WACA;CACX,IAAM,EAAE,SAAM,YAAS,OAAO,GAAY,mBAAgB,YAAS,EAAgB;EAAE;EAAQ,cAAc;CAAQ,CAAC;CACpH,IAAI,CAAC,GAAQ,OAAO;CAEpB,IAAM,IAAc,EAAc,EAAO,CAAC,MACpC,IAAkB,EAAc,EAAO,CAAC;CAG9C,OACE,kBAAC,OAAD;EACE,WAAW,EAAK;EAChB,MAAM,IAAc,KAAA,IAAY;EAChC,cAAY;EACZ,aAAU;EACV,oBAAkB;EAClB,qBAAmB;EANrB,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAW,EAAe;GAA/B,UAAA,CACE,kBAAC,GAAD;IAAM,SAAS;IAAa,WAAW,EAAK;GAAI,CAAA,GAChD,kBAAC,OAAD;IAAK,WAAW,EAAQ;IAAxB,UAAA,CACG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAW;KACzB,UAAA,kBAAC,GAAD;MAAY,SAAQ;MAAK,OAAM;MAAU,WAAW;MACjD,UAAA;KACS,CAAA;IACT,CAAA,GAEN,CACE;GACF,CAAA,CAAA;EACJ,CAAA,GAAA,KAAiB,kBAAC,GAAD;GAAY,SAAQ;GAAW,MAAK;GAAS,MAAK;GAAQ,OAAO;GAAY,SAAS;EAAU,CAAA,CAC/G;;AAET,GClJa,IAAS;CAAC;CAAW;CAAQ;CAAW;AAAO,GAC/C,IAAS,CAAC,WAAW,WAAW"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { levels, values } from "./constants";
|
|
3
|
+
type StatusLevel = (typeof levels)[number];
|
|
4
|
+
type VariantValue = (typeof values)[number];
|
|
5
|
+
export interface Props {
|
|
6
|
+
/** Toggles the visibility of the component. Must be used in conjunction with `onClose`. */
|
|
7
|
+
isOpen: boolean;
|
|
8
|
+
/** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/
|
|
9
|
+
status: StatusLevel;
|
|
10
|
+
/** The message of the alert. */
|
|
11
|
+
children: string;
|
|
12
|
+
/** Callback, which is triggered when the visibility of the component (opened/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */
|
|
13
|
+
onClose?: () => void;
|
|
14
|
+
/** Variant of the alert. Depends on the prominence level you require. */
|
|
15
|
+
variant?: VariantValue;
|
|
16
|
+
/** An optional title of the alert. The titel sums up the message briefly. */
|
|
17
|
+
title?: string;
|
|
18
|
+
/** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */
|
|
19
|
+
showCloseIcon?: boolean;
|
|
20
|
+
/** Removes role="alert" from component if set to `true`. The alert content is not read by assistive technologies right away then. */
|
|
21
|
+
nonCritical?: boolean;
|
|
22
|
+
/** If `title` is used, you can define the used header element. */
|
|
23
|
+
titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
24
|
+
}
|
|
25
|
+
declare const Alert: ({ isOpen, variant, status, title, children, showCloseIcon, onClose, nonCritical, titleTag, }: Props) => React.JSX.Element | null;
|
|
26
|
+
export default Alert;
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-alert",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "Alert 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/alert"
|
|
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,36 +27,26 @@
|
|
|
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/alert"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/react-icon": "1.2.
|
|
33
|
-
"@bonprix-ds/react-icon-button": "1.2.
|
|
34
|
-
"@bonprix-ds/
|
|
35
|
-
"@bonprix-ds/
|
|
36
|
-
},
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"react": "^19.0.0",
|
|
39
|
-
"react-dom": "^19.0.0",
|
|
40
|
-
"tailwind-variants": "0.3.1"
|
|
35
|
+
"@bonprix-ds/react-icon": "1.2.1",
|
|
36
|
+
"@bonprix-ds/react-icon-button": "1.2.1",
|
|
37
|
+
"@bonprix-ds/react-typography": "1.0.4",
|
|
38
|
+
"@bonprix-ds/utils": "0.2.2"
|
|
41
39
|
},
|
|
42
40
|
"devDependencies": {
|
|
43
|
-
"
|
|
44
|
-
"@types/react": "19.2.18",
|
|
41
|
+
"@types/react": "19.3.0",
|
|
45
42
|
"@vitejs/plugin-react": "6.1.1",
|
|
46
43
|
"rollup-preserve-directives": "1.1.3",
|
|
47
|
-
"
|
|
48
|
-
|
|
44
|
+
"vite": "8.3.0"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": "^19.3.0",
|
|
48
|
+
"react-dom": "^19.3.0",
|
|
49
|
+
"tailwind-variants": "0.3.1"
|
|
49
50
|
},
|
|
50
51
|
"scripts": {
|
|
51
52
|
"build": "vite build"
|