@axa-fr/design-system-look-and-feel-react 0.2.0-beta.308 → 0.2.0-beta.314

package/dist/Alert/Alert.d.ts

@@ -1,12 +1,22 @@
 import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
 import { Link } from "../Link/Link";
-export type AlertType = "validation" | "error" | "warning" | "information" | "neutral";
+import { ButtonClient } from "../Button/Button";
+type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
+export declare const alertTypes: {
+    readonly validation: "validation";
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly information: "information";
+    readonly neutral: "neutral";
+};
+export type AlertType = keyof typeof alertTypes;
 type AlertProps = {
     type: AlertType;
     title?: string;
-    link?: ReactElement<typeof Link>;
+    action?: ReactElement<typeof Link | typeof ButtonClient>;
     iconSize?: number;
+    heading?: Headings;
 } & ComponentPropsWithoutRef<"div">;
-export declare const Alert: ({ type, title, children, link, iconSize, }: PropsWithChildren<AlertProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ type, title, children, action, iconSize, heading: Heading, }: PropsWithChildren<AlertProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Alert/Alert.js

@@ -6,21 +6,21 @@ import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
 import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
 import { Svg } from "../Svg";
-function getIconFromType(type) {
-    switch (type) {
-        case "error":
-            return errorIcon;
-        case "validation":
-            return checkCircleOutline;
-        case "neutral":
-        case "warning":
-            return errorOutline;
-        case "information":
-        default:
-            return wbIncandescentOutlined;
-    }
-}
-export const Alert = ({ type = "information", title, children, link, iconSize = 24, }) => {
+export const alertTypes = {
+    validation: "validation",
+    error: "error",
+    warning: "warning",
+    information: "information",
+    neutral: "neutral",
+};
+const getIconFromType = (type) => ({
+    [alertTypes.validation]: checkCircleOutline,
+    [alertTypes.error]: errorIcon,
+    [alertTypes.neutral]: errorOutline,
+    [alertTypes.warning]: errorOutline,
+    [alertTypes.information]: wbIncandescentOutlined,
+})[type] || wbIncandescentOutlined;
+export const Alert = ({ type = alertTypes.information, title, children, action, iconSize = 24, heading: Heading = "h4", }) => {
     const icon = useMemo(() => getIconFromType(type), [type]);
-    return (_jsxs("div", { className: `af-alert af-alert--${type}`, children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon" }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx("p", { className: "af-alert__title", children: title }), children, link && _jsx("p", { className: "af-alert__link", children: link })] })] }));
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("p", { className: "af-alert__action", children: action })] })] }));
 };

package/dist/Alert/Alert.stories.d.ts

@@ -3,3 +3,4 @@ import { Alert } from "./Alert";
 declare const meta: Meta<typeof Alert>;
 export default meta;
 export declare const Default: StoryObj<typeof Alert>;
+export declare const WithButtonAction: StoryObj<typeof Alert>;

package/dist/Alert/Alert.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from "./Alert";
 import { Link } from "../Link/Link";
+import { ButtonClient, Variants } from "../Button/Button";
 const MODIFIERS = ["information", "neutral", "error", "validation", "warning"];
 const meta = {
     title: "Components/Alert",
@@ -13,7 +14,7 @@ export const Default = {
         title: "My Alert title",
         type: "information",
         children: "Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.",
-        link: (_jsx(Link, { openInNewTab: true, href: "https://fakelink.com", children: "Plus de d\u00E9tails" })),
+        action: (_jsx(Link, { openInNewTab: true, href: "https://fakelink.com", children: "Plus de d\u00E9tails" })),
         iconSize: 24,
     },
     argTypes: {
@@ -24,3 +25,13 @@ export const Default = {
         },
     },
 };
+export const WithButtonAction = {
+    name: "Alert with Button action",
+    args: {
+        title: "My Alert title",
+        type: "information",
+        children: "Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.",
+        action: _jsx(ButtonClient, { variant: Variants.ghost, children: "Actualiser" }),
+        iconSize: 24,
+    },
+};

package/dist/Alert/__tests__/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Alert/__tests__/Alert.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Alert, alertTypes } from "../Alert";
+import { Link } from "../../Link/Link";
+import { ButtonClient, Variants } from "../../Button/Button";
+const MoreDetails = () => (_jsx(Link, { openInNewTab: true, href: "https://fakelink.com", children: "Plus de d\u00E9tails" }));
+describe("Alert", () => {
+    it.each `
+    type                      | title         | children       | action                                                                | icon                     | iconSize     | expectLink | expectButton
+    ${undefined}              | ${undefined}  | ${undefined}   | ${undefined}                                                          | ${"wb_incandescent.svg"} | ${undefined} | ${false}   | ${false}
+    ${alertTypes.information} | ${"my title"} | ${"some text"} | ${(_jsx(MoreDetails, {}))}                                                  | ${"wb_incandescent.svg"} | ${undefined} | ${true}    | ${false}
+    ${alertTypes.error}       | ${"my title"} | ${"some text"} | ${(_jsx(MoreDetails, {}))}                                                  | ${"emergency_home.svg"}  | ${undefined} | ${true}    | ${false}
+    ${alertTypes.neutral}     | ${"my title"} | ${"some text"} | ${(_jsx(MoreDetails, {}))}                                                  | ${"error.svg"}           | ${undefined} | ${true}    | ${false}
+    ${alertTypes.validation}  | ${"my title"} | ${"some text"} | ${(_jsx(MoreDetails, {}))}                                                  | ${"check_circle.svg"}    | ${undefined} | ${true}    | ${false}
+    ${alertTypes.warning}     | ${"my title"} | ${"some text"} | ${(_jsx(ButtonClient, { variant: Variants.ghost, children: "Actualiser" }))} | ${"error.svg"}           | ${undefined} | ${false}   | ${true}
+  `("Should render correctly with type: $type, title: $title, children: $children, icon: $icon, action: $action, iconSize: $iconSize", ({ type, title, children, action, icon, iconSize, expectLink, expectButton, }) => {
+        const { container } = render(_jsx(Alert, { type, title, action, iconSize, children: children }));
+        if (title) {
+            expect(screen.getByText(RegExp(title))).toBeDefined();
+        }
+        if (children) {
+            expect(screen.getByText(RegExp(children))).toBeDefined();
+        }
+        expect(screen.getByRole("alert")).toHaveClass(`af-alert--${type || alertTypes.information}`);
+        if (expectLink && action) {
+            expect(screen.getByRole("link")).toHaveAttribute("href", "https://fakelink.com");
+        }
+        if (expectButton && action) {
+            expect(screen.getByRole("button", { name: /Actualiser/ })).toBeInTheDocument();
+        }
+        expect(container.querySelector(`[data-src$="${icon}"]`)).toBeDefined();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.308",
+  "version": "0.2.0-beta.314",
   "description": "",
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.308",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.314",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -93,7 +93,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest-axe": "^8.0.0",
     "jsdom": "^24.0.0",