@axa-fr/design-system-slash-react 0.2.0-beta.283 → 0.2.0-beta.285

package/dist/Layout/Header/Client/Header.client.js

@@ -7,5 +7,5 @@ import { PreviousLink } from "./PreviousLink/PreviousLink";
 export const HeaderClient = ({ children, defaultActiveLink, previousLink, rightItem, }) => {
     const [activeLink, setActiveLink] = useState(defaultActiveLink);
     const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
-    return (_jsxs("header", { className: "af-header", children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "Logo AXA" }), children && (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children }))] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem })] }), previousLink && (_jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }))] }));
+    return (_jsxs("header", { className: "af-header", children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "" }), children && (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children }))] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem })] }), previousLink && (_jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }))] }));
 };

package/dist/List/ContentItemMono/ContentItemMono.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { ContentItemMonoSize } from "./constants";
+type ContentItemMonoProps = {
+    children: ReactNode;
+    className?: string;
+    classModifier?: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+    leftElement?: ReactNode;
+    size?: ContentItemMonoSize;
+    isDisabled?: boolean;
+    isLeftElementCentered?: boolean;
+    hasStick?: boolean;
+};
+export declare const ContentItemMono: ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size, isDisabled, isLeftElementCentered, hasStick, }: ContentItemMonoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../../Form/core";
+import { ContentItemMonoSize } from "./constants";
+export const ContentItemMono = ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size = ContentItemMonoSize.M, isDisabled = false, isLeftElementCentered = false, hasStick = false, }) => {
+    const componentClassName = useMemo(() => {
+        const classModifiers = [size, classModifier];
+        if (isDisabled) {
+            classModifiers.push("disabled");
+        }
+        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+    }, [classModifier, isDisabled, size, className]);
+    return (_jsxs("div", { className: componentClassName, children: [hasStick && (_jsx("div", { className: "af-content-item-mono__stick", role: "presentation" })), leftElement && (_jsx("div", { className: `af-content-item-mono__left-container${isLeftElementCentered
+                    ? " af-content-item-mono__left-container--center"
+                    : ""}`, children: leftElement })), _jsxs("div", { className: "af-content-item-mono__text-container", children: [_jsx("p", { className: "af-content-item-mono__main-text", children: children }), secondaryText && (_jsx("p", { className: "af-content-item-mono__secondary-text", children: secondaryText })), tertiaryText && size !== ContentItemMonoSize.XL && (_jsx("p", { className: "af-content-item-mono__tertiary-text", children: tertiaryText }))] })] }));
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { List } from "../List";
+import { ContentItemMono } from "./ContentItemMono";
+declare const meta: Meta<typeof ContentItemMono>;
+export default meta;
+export declare const Default: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoWithIcon: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoWithStick: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoList: StoryObj<{
+    items: (ComponentProps<typeof ContentItemMono> & {
+        id: string;
+    })[];
+} & Omit<ComponentProps<typeof List>, "classModifier"> & {
+    classModifier: string[];
+}>;

package/dist/List/ContentItemMono/ContentItemMono.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import arrowForward from "@material-symbols/svg-400/rounded/arrow_forward.svg";
+import { Svg } from "../../Svg";
+import { List } from "../List";
+import { ContentItemMono } from "./ContentItemMono";
+import { ContentItemMonoSize } from "./constants";
+const meta = {
+    title: "Client/Components/List/ContentItemMono",
+    component: ContentItemMono,
+};
+export default meta;
+const defaultArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "Texte tertiaire",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: "",
+    isLeftElementCentered: false,
+    hasStick: false,
+    classModifier: "",
+};
+const contentItemMonoWithIconArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "Texte tertiaire",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: _jsx(Svg, { src: arrowForward }),
+    isLeftElementCentered: true,
+    hasStick: false,
+    classModifier: "",
+};
+const contentItemMonoWithStickArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: "",
+    isLeftElementCentered: false,
+    hasStick: true,
+    classModifier: "",
+};
+export const Default = {
+    name: "Default",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: defaultArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoWithIcon = {
+    name: "ContentItemMono With Icon",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: contentItemMonoWithIconArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoWithStick = {
+    name: "ContentItemMono With Stick",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: contentItemMonoWithStickArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoList = {
+    name: "ContentItemMono List",
+    render: ({ items, classModifier, ...args }) => (_jsx(List, { classModifier: classModifier.join(" "), ...args, children: items.map((itemsArgs) => (_jsx(ContentItemMono, { ...itemsArgs }, itemsArgs.id))) })),
+    args: {
+        items: [
+            { id: "1", ...defaultArgs },
+            { id: "2", ...contentItemMonoWithIconArgs },
+            { id: "3", ...contentItemMonoWithStickArgs },
+        ],
+        classModifier: [],
+    },
+    argTypes: {
+        classModifier: {
+            options: ["large", "first-separator-full-width"],
+            control: { type: "multi-select" },
+            defaultValue: [],
+        },
+    },
+};

package/dist/List/ContentItemMono/__tests__/ContentItemMono.test.d.ts

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

package/dist/List/ContentItemMono/__tests__/ContentItemMono.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { ContentItemMono } from "../ContentItemMono";
+import { ContentItemMonoSize } from "../constants";
+describe("ContentItemMono", () => {
+    it("should render correctly", () => {
+        const children = "Content";
+        const secondaryText = "Secondary Text";
+        const tertiaryText = "Tertiary Text";
+        const leftElement = "Left Element";
+        render(_jsx(ContentItemMono, { secondaryText: secondaryText, tertiaryText: tertiaryText, leftElement: leftElement, hasStick: true, children: children }));
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.getByText(secondaryText)).toBeInTheDocument();
+        expect(screen.getByText(tertiaryText)).toBeInTheDocument();
+        expect(screen.getByText(leftElement)).toBeInTheDocument();
+        expect(screen.getByRole("presentation")).toBeInTheDocument();
+    });
+    it("should have custom class and M size", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--m`);
+    });
+    it("should have XL size and no tertiary text", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, size: ContentItemMonoSize.XL, tertiaryText: "tertiaryText", children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--xl`);
+        expect(screen.queryByText("tertiaryText")).not.toBeInTheDocument();
+    });
+    it("should have custom class with modifier", () => {
+        const className = "custom-class";
+        const classModifier = "modifier";
+        render(_jsx(ContentItemMono, { className: className, classModifier: classModifier, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--${classModifier}`);
+    });
+    it("should be disabled", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, isDisabled: true, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--disabled`);
+    });
+    it("should have centered left element", () => {
+        const leftElement = "Left Element";
+        render(_jsx(ContentItemMono, { leftElement: leftElement, isLeftElementCentered: true, children: "Content" }));
+        expect(screen.getByText(leftElement)).toHaveClass("af-content-item-mono__left-container af-content-item-mono__left-container--center");
+    });
+});

package/dist/List/ContentItemMono/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ContentItemMonoSize {
+    XL = "xl",
+    M = "m"
+}

package/dist/List/ContentItemMono/constants.js

@@ -0,0 +1,5 @@
+export var ContentItemMonoSize;
+(function (ContentItemMonoSize) {
+    ContentItemMonoSize["XL"] = "xl";
+    ContentItemMonoSize["M"] = "m";
+})(ContentItemMonoSize || (ContentItemMonoSize = {}));

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

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-slash-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

package/dist/List/ContentItemMono/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-slash-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

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

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
 import { List } from "./List";
 declare const meta: Meta<typeof List>;
 export default meta;
-export declare const Default: StoryObj<typeof List>;
+export declare const Default: StoryObj<Omit<ComponentProps<typeof List>, "classModifier"> & {
+    classModifier: string[];
+}>;

package/dist/List/List.stories.js

@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const Default = {
     name: "List",
-    render: (args) => _jsx(List, { ...args }),
+    render: ({ classModifier, ...args }) => (_jsx(List, { classModifier: classModifier.join(" "), ...args })),
     args: {
         children: [
             _jsx("div", { children: _jsx("span", { children: "Pr\u00E9nom NOM" }) }, "list-item-1"),
@@ -40,13 +40,17 @@ export const Default = {
                         gap: "0.5rem",
                     }, children: [_jsx(Svg, { src: trash }), _jsx("span", { children: "Supprimer le profil" })] }) }, "list-element-3"),
         ],
-        classModifier: "",
+        classModifier: [],
     },
     argTypes: {
         classModifier: {
-            options: ["", "large"],
-            control: { type: "select" },
-            defaultValue: "",
+            options: [
+                "large",
+                "first-separator-full-width",
+                "first-separator-full-width",
+            ],
+            control: { type: "multi-select" },
+            defaultValue: [],
         },
     },
 };

package/dist/client.d.ts

@@ -16,6 +16,7 @@ export { Link } from "./Link/Link.client";
 export { List } from "./List";
 export { ClickList } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader/Client";
 export { Modal } from "./ModalClient/Modal.client";

package/dist/client.js

@@ -15,6 +15,7 @@ export { Link } from "./Link/Link.client";
 export { List } from "./List";
 export { ClickList } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader/Client";
 export { Modal } from "./ModalClient/Modal.client";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.283",
+  "version": "0.2.0-beta.285",
   "description": "",
   "exports": {
     "./agent": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.283",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.285",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },