@bonprix-ds/react-alert 1.0.2 → 1.0.4
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 -2
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
2
|
|
|
3
|
-
declare const Alert:
|
|
3
|
+
declare const Alert: ({ isOpen, variant, status, title, children, showCloseIcon, onClose, nonCritical, titleTag, }: AlertProps) => default_2.JSX.Element | null;
|
|
4
4
|
export default Alert;
|
|
5
5
|
|
|
6
6
|
export declare interface AlertProps {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/Alert.tsx","../src/constants.ts"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/Alert.tsx","../src/constants.ts"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { levels, values } from \"./constants\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight m-0 flex justify-between items-start p-5 rounded gap-4\",\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":";;;;;;;AAQA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,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,GC7Ia,IAAS;CAAC;CAAW;CAAQ;CAAW;AAAO,GAC/C,IAAS,CAAC,WAAW,WAAW"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-alert",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Alert component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"directory": "packages/react/alert"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/react-icon": "1.1.
|
|
33
|
-
"@bonprix-ds/react-icon
|
|
34
|
-
"@bonprix-ds/react-typography": "1.0.
|
|
35
|
-
"@bonprix-ds/utils": "0.
|
|
32
|
+
"@bonprix-ds/react-icon-button": "1.1.3",
|
|
33
|
+
"@bonprix-ds/react-icon": "1.1.2",
|
|
34
|
+
"@bonprix-ds/react-typography": "1.0.3",
|
|
35
|
+
"@bonprix-ds/utils": "0.2.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "^19.0.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"tailwind-variants": "0.3.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"vite": "8.2.
|
|
43
|
+
"vite": "8.2.1",
|
|
44
44
|
"@types/react": "19.2.18",
|
|
45
45
|
"@vitejs/plugin-react": "6.0.5",
|
|
46
46
|
"rollup-preserve-directives": "1.1.3",
|