@axa-fr/design-system-look-and-feel-react 0.2.0-beta.315 → 0.2.0-beta.317

package/dist/List/ClickList/ClickItem/ClickItem.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ReactNode } from "react";
+type TClickItem = {
+    classModifier?: string;
+    isDisabled?: boolean;
+} & Omit<ComponentProps<"button">, "disabled"> & ComponentProps<"a"> & {
+    label?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+};
+export declare const ClickItem: ({ label, children, icon, href, isDisabled, className, classModifier, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ClickList/ClickItem/ClickItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import { useMemo } from "react";
+import { Svg } from "../../../Svg";
+import { getComponentClassName } from "../../../utilities";
+export const ClickItem = ({ label, children, icon, href, isDisabled = false, className, classModifier = "", ...otherProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
+    const ClickComponent = useMemo(() => (href ? "a" : "button"), [href]);
+    const clickComponentProps = useMemo(() => href
+        ? { href, "aria-disabled": isDisabled, ...otherProps }
+        : {
+            type: "button",
+            disabled: isDisabled,
+            ...otherProps,
+        }, [isDisabled, href, otherProps]);
+    return (_jsxs(ClickComponent, { className: componentClassName, ...clickComponentProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children || label })] }), _jsx("div", { className: "af-click-item__action", children: _jsx(Svg, { src: chevron }) })] }));
+};

package/dist/List/ClickList/ClickItem/__tests__/ClickItem.test.d.ts

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

package/dist/List/ClickList/ClickItem/__tests__/ClickItem.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { ClickItem } from "../ClickItem";
+describe("ClickItem", () => {
+    it("should render label correctly with children prop", () => {
+        const label = "Sample Label";
+        render(_jsx(ClickItem, { children: label }));
+        const labelElement = screen.getByText(label);
+        expect(labelElement).toBeInTheDocument();
+    });
+    it("should render label correctly with label prop", () => {
+        const label = "Sample Label";
+        render(_jsx(ClickItem, { label: label }));
+        const labelElement = screen.getByText(label);
+        expect(labelElement).toBeInTheDocument();
+    });
+    it("should have custom class with modifier", () => {
+        const label = "Sample Label";
+        const className = "custom-class";
+        const classModifier = "modifier";
+        render(_jsx(ClickItem, { className: className, classModifier: classModifier, children: label }));
+        expect(screen.getByRole("button", { name: label })).toHaveClass(`${className} ${className}--${classModifier}`);
+    });
+    it("should render icon correctly", () => {
+        const label = "Sample Label";
+        const icon = _jsx("span", { children: "Icon" });
+        render(_jsx(ClickItem, { icon: icon, children: label }));
+        const iconElement = screen.getByText("Icon");
+        expect(iconElement).toBeInTheDocument();
+    });
+    it("should render as a button by default", () => {
+        const label = "Sample Label";
+        render(_jsx(ClickItem, { children: label }));
+        const buttonElement = screen.getByRole("button", { name: label });
+        expect(buttonElement).toBeInTheDocument();
+    });
+    it("should render as a link when href is provided", () => {
+        const label = "Sample Label";
+        const href = "https://example.com";
+        render(_jsx(ClickItem, { href: href, children: label }));
+        const linkElement = screen.getByRole("link", { name: label });
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute("href", href);
+    });
+    it("should be a disabled anchor", () => {
+        const label = "Sample Label";
+        const href = "https://example.com";
+        const disabled = true;
+        render(_jsx(ClickItem, { href: href, isDisabled: disabled, children: label }));
+        const anchorElement = screen.getByRole("link", { name: label });
+        expect(anchorElement).toHaveClass("af-click-item--disabled");
+        expect(anchorElement).toHaveAttribute("aria-disabled", "true");
+    });
+    it("should be a disabled button", () => {
+        const label = "Sample Label";
+        const disabled = true;
+        render(_jsx(ClickItem, { isDisabled: disabled, children: label }));
+        const buttonElement = screen.getByRole("button", { name: label });
+        expect(buttonElement).toBeDisabled();
+        expect(buttonElement).toHaveClass("af-click-item--disabled");
+    });
+});

package/dist/List/ClickList/ClickItem/index.d.ts

@@ -0,0 +1 @@
+export { ClickItem } from "./ClickItem";

package/dist/List/ClickList/ClickItem/index.js

@@ -0,0 +1 @@
+export { ClickItem } from "./ClickItem";

package/dist/List/ClickList/ClickList.d.ts

@@ -1,10 +1,7 @@
-import type { ComponentProps, ReactNode } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import type { ComponentProps } from "react";
+import { ClickItem } from "./ClickItem";
 type TClickList = {
-    items: Array<ComponentProps<"button"> & {
-        label: ReactNode;
-        icon?: ReactNode;
-    }>;
+    items: Array<ComponentProps<typeof ClickItem>>;
     classModifier?: string;
 };
 export declare const ClickList: ({ items, classModifier }: TClickList) => import("react/jsx-runtime").JSX.Element;

package/dist/List/ClickList/ClickList.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from "..";
-import { Svg } from "../../Svg";
-import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
-export const ClickList = ({ items, classModifier }) => (_jsx(List, { classModifier: `list click-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, label, icon, ...buttonProps }) => (_jsxs("button", { id: id, className: "af-list-item__button", type: "button", ...buttonProps, children: [_jsxs("div", { className: "af-list-item__content", children: [icon && _jsx("div", { className: "af-list-item-content__icon", children: icon }), _jsx("div", { className: "af-list-item-content__label", children: label })] }), _jsx("div", { className: "af-list-item__action", children: _jsx(Svg, { src: chevron }) })] }, id ?? label?.toString()))) }));
+import { ClickItem } from "./ClickItem";
+export const ClickList = ({ items, classModifier }) => (_jsx(List, { classModifier: `click-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...props }) => (_jsx(ClickItem, { id: id, ...props }, id))) }));

package/dist/List/ClickList/ClickList.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ClickList>;
 export default meta;
 export declare const ClickListWithIcon: StoryObj<typeof ClickList>;
 export declare const ClickListWithoutIcon: StoryObj<typeof ClickList>;
+export declare const ClickListLinkWithoutIcon: StoryObj<typeof ClickList>;

package/dist/List/ClickList/ClickList.stories.js

@@ -14,15 +14,27 @@ export const ClickListWithIcon = {
     args: {
         items: [
             {
-                id: "report-claim",
+                id: "1",
                 icon: _jsx(Svg, { src: error }),
-                label: "Déclarer un sinistre",
+                children: "Texte principal",
+                classModifier: "small",
             },
             {
-                id: "follow-claim",
+                id: "2",
+                icon: _jsx(Svg, { src: error }),
+                children: "Texte principal",
+            },
+            {
+                id: "3",
+                icon: _jsx(Svg, { src: error }),
+                children: "Texte principal",
+                classModifier: "large",
+            },
+            {
+                id: "4",
                 icon: _jsx(Svg, { src: contentPasteGo }),
-                label: "Suivre mes sinistres",
-                disabled: true,
+                children: "Texte principal",
+                isDisabled: true,
             },
         ],
         classModifier: "",
@@ -41,11 +53,42 @@ export const ClickListWithoutIcon = {
     args: {
         items: [
             {
-                label: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-list-item-content-label__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-list-item-content-label__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-list-item-content-label__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+                id: "1",
+                children: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-click-item__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-click-item__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-click-item__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+            },
+            {
+                id: "2",
+                children: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-click-item__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-click-item__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-click-item__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+                isDisabled: true,
+            },
+        ],
+        classModifier: "",
+    },
+    argTypes: {
+        classModifier: {
+            options: ["", "large"],
+            control: { type: "select" },
+            defaultValue: "",
+        },
+    },
+};
+export const ClickListLinkWithoutIcon = {
+    name: "ClickList link without icon",
+    render: (args) => _jsx(ClickList, { ...args }),
+    args: {
+        items: [
+            {
+                id: "1",
+                children: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-click-item__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-click-item__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-click-item__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+                href: "https://github.com/AxaFrance/design-system",
+                target: "_blank",
             },
             {
-                label: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-list-item-content-label__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-list-item-content-label__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-list-item-content-label__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
-                disabled: true,
+                id: "2",
+                children: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-click-item__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-click-item__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-click-item__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+                href: "https://github.com/AxaFrance/design-system",
+                target: "_blank",
+                isDisabled: true,
             },
         ],
         classModifier: "",

package/dist/List/ClickList/index.d.ts

@@ -1 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+export { ClickItem } from "./ClickItem";
 export { ClickList } from "./ClickList";

package/dist/List/ClickList/index.js

@@ -1 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+export { ClickItem } from "./ClickItem";
 export { ClickList } from "./ClickList";

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
 export { Link } from "./Link/Link";
 export { List } from "./List";
-export { ClickList } from "./List/ClickList";
+export { ClickItem, ClickList } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";

package/dist/index.js

@@ -13,7 +13,7 @@ export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
 export { Link } from "./Link/Link";
 export { List } from "./List";
-export { ClickList } from "./List/ClickList";
+export { ClickItem, ClickList } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.315",
+  "version": "0.2.0-beta.317",
   "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.315",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.317",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },