@axa-fr/design-system-look-and-feel-react 0.2.0-beta.332 → 0.2.0-beta.334

package/dist/Accordion/Accordion.d.ts

@@ -1,8 +1,12 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
-export declare const Accordion: {
-    ({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-    Item: ({ title, children }: {
-        title: string;
-        children: React.ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
+import { type ComponentProps, type ReactNode } from "react";
+import { AccordionCore } from "../AccordionCore/AccordionCore";
+import { AccordionTagDateContainer } from "./AccordionTagDateContainer";
+type AccordionProps = {
+    title: string;
+    subtitle?: string;
+    icon?: ReactNode;
+    value?: string;
+    isTitleFirst?: boolean;
+} & ComponentProps<typeof AccordionTagDateContainer> & Partial<ComponentProps<typeof AccordionCore>>;
+export declare const Accordion: ({ title, children, icon, subtitle, tagLabel, tagProps, dateLabel, dateProps, value, isTitleFirst, ...accordionCoreProps }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Accordion/Accordion.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
-import { AccordionItem } from "./AccordionItem";
-export const Accordion = ({ children }) => {
-    return _jsx("div", { className: "af-accordion-client", children: children });
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AccordionCore } from "../AccordionCore/AccordionCore";
+import { BREAKPOINT, getComponentClassName, useIsSmallScreen, } from "../utilities";
+import { AccordionTagDateContainer } from "./AccordionTagDateContainer";
+export const Accordion = ({ title, children, icon, subtitle, tagLabel, tagProps, dateLabel, dateProps, value, isTitleFirst = true, ...accordionCoreProps }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    const isShowingIcon = Boolean(icon && isTitleFirst);
+    const summaryClassName = useMemo(() => getComponentClassName("af-accordion__summary", isTitleFirst ? "title-first" : ""), [isTitleFirst]);
+    return (_jsx(AccordionCore, { summary: _jsxs(_Fragment, { children: [isShowingIcon && isMobile && (_jsx("div", { className: "af-accordion__icon", children: icon })), !isTitleFirst && (_jsx(AccordionTagDateContainer, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps })), _jsxs("div", { className: "af-accordion__title-container", children: [isShowingIcon && !isMobile && (_jsx("div", { className: "af-accordion__icon", children: icon })), _jsx("p", { className: "af-accordion__title", children: title }), subtitle && _jsx("p", { className: "af-accordion__subtitle", children: subtitle })] }), isTitleFirst && (_jsx(AccordionTagDateContainer, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps })), value && _jsx("p", { className: "af-accordion__value", children: value })] }), summaryProps: { className: summaryClassName }, ...accordionCoreProps, children: children }));
 };
-Accordion.Item = AccordionItem;

package/dist/Accordion/Accordion.stories.d.ts

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "./Accordion";
+import type { ComponentProps } from "react";
+import { Accordion } from ".";
 declare const meta: Meta<typeof Accordion>;
 export default meta;
-type StoryProps = {
-    numberOfItems: number;
-};
-export declare const AccordionStory: StoryObj<StoryProps>;
+export declare const AccordionStory: StoryObj<ComponentProps<typeof Accordion>>;
+export declare const AccordionWithCardStory: StoryObj<ComponentProps<typeof Accordion>>;

package/dist/Accordion/Accordion.stories.js

@@ -1,24 +1,40 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Accordion } from "./Accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+import callIcon from "@material-symbols/svg-400/outlined/call-fill.svg";
+import { Accordion } from ".";
+import { Card, Svg } from "..";
 const meta = {
     component: Accordion,
     title: "Components/Accordion",
-    parameters: {
-        layout: "fullscreen",
-    },
 };
 export default meta;
+const defaultArgs = {
+    isTitleFirst: true,
+    icon: _jsx(Svg, { src: callIcon }),
+    title: "Titre onglet",
+    subtitle: "Titre onglet",
+    tagLabel: "En attente",
+    dateLabel: "01/01/2021",
+    dateProps: { dateTime: "2021-01-01" },
+    value: "+ 686,00 €",
+    children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper magna et tempor blandit. 
+              Nulla vitae eros a odio pretium gravida. Sed eget tortor nec massa lobortis bibendum. Morbi eget 
+              ligula porttitor, euismod odio vestibulum, porta massa. Aenean vel venenatis tellus, sed iaculis nisl.`,
+    isOpen: undefined,
+    onClick: undefined,
+};
 export const AccordionStory = {
     name: "Accordion",
-    render: ({ numberOfItems }) => {
-        return (_jsx(Accordion, { children: Array.from({ length: numberOfItems }, (_, i) => (_jsxs(Accordion.Item, { title: `Title ${i + 1}`, children: ["Content ", i + 1] }, i))) }));
-    },
-    args: {
-        numberOfItems: 3,
+    render: (args) => _jsx(Accordion, { ...args }),
+    args: defaultArgs,
+    argTypes: {
+        dateLabel: { control: "text" },
     },
+};
+export const AccordionWithCardStory = {
+    name: "Accordion With Card",
+    render: (args) => (_jsx(Card, { classModifier: "large accordion", tabIndex: undefined, children: _jsx(Accordion, { ...args }) })),
+    args: defaultArgs,
     argTypes: {
-        numberOfItems: {
-            control: { type: "range", min: 1, max: 10 },
-        },
+        dateLabel: { control: "text" },
     },
 };

package/dist/Accordion/AccordionTagDateContainer.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from "react";
+import { Tag } from "../Tag";
+type AccordionTagDateContainerProps = {
+    tagLabel?: string;
+    tagProps?: ComponentProps<typeof Tag>;
+    dateLabel?: string;
+    dateProps?: ComponentProps<"time">;
+};
+export declare const AccordionTagDateContainer: ({ tagLabel, tagProps, dateLabel, dateProps, }: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Accordion/AccordionTagDateContainer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Tag } from "../Tag";
+export const AccordionTagDateContainer = ({ tagLabel, tagProps, dateLabel, dateProps, }) => {
+    const isShowing = useMemo(() => Boolean(tagLabel) || Boolean(dateLabel), [tagLabel, dateLabel]);
+    if (!isShowing) {
+        return null;
+    }
+    return (_jsxs("div", { className: "af-accordion__tag-date-container", children: [tagLabel && (_jsx("div", { className: "af-accordion__tag-container", children: _jsx(Tag, { classModifier: "warning", ...tagProps, children: tagLabel }) })), dateLabel && (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel }))] }));
+};

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

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

package/dist/Accordion/__tests__/Accordion.test.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Accordion } from "../Accordion";
+describe("Accordion", () => {
+    const originalWindowWidth = global.innerWidth;
+    beforeAll(() => {
+        global.innerWidth = originalWindowWidth;
+    });
+    it("renders correctly with all visual props", () => {
+        const icon = "Accordion Icon";
+        const title = "Accordion Title";
+        const subtitle = "Accordion Subtitle";
+        const children = "Accordion Content";
+        const tag = "Accordion Tag";
+        const date = "Accordion Date";
+        const value = "Accordion Value";
+        render(_jsx(Accordion, { icon: icon, title: title, subtitle: subtitle, tagLabel: tag, dateLabel: date, value: value, children: children }));
+        expect(screen.getByText(icon)).toBeInTheDocument();
+        expect(screen.getByText(title)).toBeInTheDocument();
+        expect(screen.getByText(subtitle)).toBeInTheDocument();
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.getByText(tag)).toBeInTheDocument();
+        expect(screen.getByText(date)).toBeInTheDocument();
+        expect(screen.getByText(value)).toBeInTheDocument();
+        expect(screen.getByText("Accordion Content").closest("details")).toHaveClass("af-accordion");
+    });
+    it("renders with isTitleFirst false", () => {
+        render(_jsx(Accordion, { icon: "icon", title: "Accordion Title", dateLabel: "date", isTitleFirst: false, children: "Accordion Content" }));
+        const summary = screen.getByText("Accordion Title").closest("summary");
+        expect(summary).not.toHaveClass("af-accordion__summary--title-first");
+        expect(screen.queryByText("icon")).toBeNull();
+        expect(screen
+            .getByText("date")
+            .compareDocumentPosition(screen.getByText("Accordion Title"))).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    });
+    it("renders with isTitleFirst true", () => {
+        render(_jsx(Accordion, { icon: "icon", title: "Accordion Title", dateLabel: "date", isTitleFirst: true, children: "Accordion Content" }));
+        const summary = screen.getByText("Accordion Title").closest("summary");
+        expect(summary).toHaveClass("af-accordion__summary--title-first");
+        expect(screen.getByText("icon").parentElement).toHaveClass("af-accordion__title-container");
+        expect(screen
+            .getByText("date")
+            .compareDocumentPosition(screen.getByText("Accordion Title"))).toBe(Node.DOCUMENT_POSITION_PRECEDING);
+    });
+    it("renders on mobile", () => {
+        global.innerWidth = 500;
+        render(_jsx(Accordion, { icon: "icon", title: "Accordion Title", dateLabel: "date", children: "Accordion Content" }));
+        expect(screen.getByText("icon").parentElement).toHaveClass("af-accordion__summary");
+    });
+});

package/dist/Accordion/__tests__/AccordionTagDateContainer.test.d.ts

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

package/dist/Accordion/__tests__/AccordionTagDateContainer.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { AccordionTagDateContainer } from "../AccordionTagDateContainer";
+describe("AccordionTagDateContainer", () => {
+    it("renders correctly", () => {
+        const dateLabel = "01/01/2021";
+        const dateTime = "2021-01-01";
+        const tagLabel = "tag";
+        render(_jsx(AccordionTagDateContainer, { tagLabel: tagLabel, dateLabel: dateLabel, dateProps: { dateTime } }));
+        expect(screen.getByText(tagLabel).parentElement).toHaveClass("af-tag af-tag--warning");
+        expect(screen.getByText(dateLabel)).toHaveProperty("dateTime", dateTime);
+    });
+    it("should pass tagProps to Tag", () => {
+        const tag = "tag";
+        const tagProps = { classModifier: "success" };
+        render(_jsx(AccordionTagDateContainer, { tagLabel: tag, tagProps: tagProps }));
+        expect(screen.getByText(tag).parentElement).toHaveClass("af-tag af-tag--success");
+    });
+    it("should return null if no tag or date", () => {
+        const { container } = render(_jsx(AccordionTagDateContainer, {}));
+        expect(container).toBeEmptyDOMElement();
+    });
+});

package/dist/Accordion/index.d.ts

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

package/dist/Accordion/index.js

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

package/dist/AccordionCore/AccordionCore.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type MouseEvent, type ReactNode } from "react";
+type AccordionProps = {
+    summary: ReactNode;
+    children: ReactNode;
+    isOpen?: boolean;
+    className?: string;
+    classModifier?: string;
+    summaryProps?: ComponentProps<"summary">;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & Partial<ComponentProps<"details">>;
+export declare const AccordionCore: ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AccordionCore/AccordionCore.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, } from "react";
+import { getComponentClassName } from "../utilities";
+export const AccordionCore = ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-accordion"), [classModifier, className]);
+    const handleToggle = useCallback((event) => {
+        if (onClick) {
+            event.preventDefault();
+            onClick(event);
+        }
+    }, [onClick]);
+    return (_jsxs("details", { className: componentClassName, open: isOpen, ...detailsProps, children: [_jsx("summary", { className: "af-accordion__summary", onClick: handleToggle, role: "button", tabIndex: 0, ...summaryProps, children: summary }), _jsx("hr", { className: "af-accordion__separator" }), _jsx("div", { className: "af-accordion__content", children: children })] }));
+};

package/dist/AccordionCore/AccordionCore.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { AccordionCore } from ".";
+declare const meta: Meta<typeof AccordionCore>;
+export default meta;
+export declare const AccordionCoreStory: StoryObj<ComponentProps<typeof AccordionCore>>;
+export declare const AccordionCoreWithCustomStyledSummaryStory: StoryObj<ComponentProps<typeof AccordionCore>>;
+export declare const AccordionCoreWithCardStory: StoryObj<ComponentProps<typeof AccordionCore>>;

package/dist/AccordionCore/AccordionCore.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccordionCore } from ".";
+import { Card } from "..";
+const meta = {
+    component: AccordionCore,
+    title: "Components/AccordionCore",
+};
+export default meta;
+const defaultArgs = {
+    summary: "Titre onglet",
+    children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper magna et tempor blandit. 
+              Nulla vitae eros a odio pretium gravida. Sed eget tortor nec massa lobortis bibendum. Morbi eget 
+              ligula porttitor, euismod odio vestibulum, porta massa. Aenean vel venenatis tellus, sed iaculis nisl.`,
+    isOpen: undefined,
+    onClick: undefined,
+};
+export const AccordionCoreStory = {
+    name: "AccordionCore",
+    render: (args) => _jsx(AccordionCore, { ...args }),
+    args: defaultArgs,
+};
+export const AccordionCoreWithCustomStyledSummaryStory = {
+    name: "AccordionCore With Custom Styled Summary",
+    render: (args) => _jsx(AccordionCore, { ...args }),
+    args: {
+        summary: (_jsx("div", { style: {
+                backgroundColor: "red",
+                paddingBottom: "32px",
+            } })),
+        children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper magna et tempor blandit. 
+              Nulla vitae eros a odio pretium gravida. Sed eget tortor nec massa lobortis bibendum. Morbi eget 
+              ligula porttitor, euismod odio vestibulum, porta massa. Aenean vel venenatis tellus, sed iaculis nisl.`,
+        isOpen: undefined,
+        onClick: undefined,
+    },
+};
+export const AccordionCoreWithCardStory = {
+    name: "AccordionCore With Card",
+    render: (args) => (_jsx(Card, { classModifier: "large accordion", tabIndex: undefined, children: _jsx(AccordionCore, { ...args }) })),
+    args: defaultArgs,
+};

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

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

package/dist/AccordionCore/__tests__/AccordionCore.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { AccordionCore } from "../AccordionCore";
+describe("AccordionCore", () => {
+    it("renders correctly with all visual props", () => {
+        const title = "Accordion Title";
+        const children = "Accordion Content";
+        render(_jsx(AccordionCore, { summary: title, children: children }));
+        expect(screen.getByText(title)).toBeInTheDocument();
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.getByText("Accordion Content").closest("details")).toHaveClass("af-accordion");
+        const details = screen.getByText(children).closest("details");
+        expect(details).not.toHaveAttribute("open");
+        const summary = screen.getByText("Accordion Title");
+        summary.click();
+        expect(details).toHaveAttribute("open");
+        summary.click();
+        expect(details).not.toHaveAttribute("open");
+    });
+    it("should have custom class with modifier", () => {
+        const className = "custom-class";
+        const classModifier = "modifier";
+        render(_jsx(AccordionCore, { summary: "Accordion Title", className: className, classModifier: classModifier, children: "Accordion Content" }));
+        expect(screen.getByText("Accordion Content").closest("details")).toHaveClass(`${className} ${className}--${classModifier}`);
+    });
+    it("renders Accordion with open details", () => {
+        render(_jsx(AccordionCore, { summary: "Accordion Title", isOpen: true, children: "Accordion Content" }));
+        const details = screen.getByText("Accordion Content").closest("details");
+        expect(details).toHaveAttribute("open");
+    });
+    it("renders Accordion with close details", () => {
+        render(_jsx(AccordionCore, { summary: "Accordion Title", isOpen: false, children: "Accordion Content" }));
+        const details = screen.getByText("Accordion Content").closest("details");
+        expect(details).not.toHaveAttribute("open");
+    });
+    it("use onClick prop when summary click", () => {
+        const onClick = vi.fn();
+        render(_jsx(AccordionCore, { summary: "Accordion Title", onClick: onClick, children: "Accordion Content" }));
+        const summary = screen.getByText("Accordion Title");
+        summary.click();
+        expect(onClick).toHaveBeenCalled();
+    });
+    it("renders with custom title summary", () => {
+        render(_jsx(AccordionCore, { summary: _jsx("p", { className: "custom-title", children: "Custom Title" }), children: "Accordion Content" }));
+        expect(screen.getByText("Custom Title")).toHaveClass("custom-title");
+    });
+});

package/dist/AccordionCore/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+export { AccordionCore } from "./AccordionCore";

package/dist/AccordionCore/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/AccordionCore/AccordionCore.scss";
+export { AccordionCore } from "./AccordionCore";

package/dist/Layout/Footer/MenuLink.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import { useIsSmallScreen } from "../../utilities";
-const BREAKPOINT_SMALL = 1024;
+import { BREAKPOINT, useIsSmallScreen } from "../../utilities";
 export const MenuLink = ({ links, isAboutOpen = false }) => {
-    const isSmallScreen = useIsSmallScreen(BREAKPOINT_SMALL);
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT.MD);
     if (links.length === 0) {
         return null;
     }

package/dist/List/ContentTabList/ContentTabList.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from "../List";
 import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentTabList/ContentTabList.scss";
-import { useIsSmallScreen } from "../../utilities";
+import { BREAKPOINT, useIsSmallScreen } from "../../utilities";
 import { ContentTabItem } from "./ContentTabItem";
-const BREAKPOINT_SMALL = 668;
 export const ContentTabList = ({ items, classModifier, }) => {
-    const isMobile = useIsSmallScreen(BREAKPOINT_SMALL);
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     return (_jsx(List, { classModifier: `list large extra-padding content-tab-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...item }) => (_jsx(ContentTabItem, { ...item, isMobile: isMobile }, id ?? item.title))) }));
 };

package/dist/List/List.stories.js

@@ -23,7 +23,7 @@ export const Default = {
     },
     argTypes: {
         classModifier: {
-            options: ["large", "first-separator-full-width"],
+            options: ["large", "extra-padding", "first-separator-full-width"],
             control: { type: "multi-select" },
             defaultValue: [],
         },

package/dist/Pagination/Pagination.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/Pagination.scss";
 import { useEffect, useState } from "react";
-import { useIsSmallScreen } from "../utilities";
-import { PaginationMobile } from "./PaginationMobile";
+import { BREAKPOINT, useIsSmallScreen } from "../utilities";
 import { PaginationDesktop } from "./PaginationDesktop";
-const BREAKPOINT_SMALL = 1024;
+import { PaginationMobile } from "./PaginationMobile";
 export const Pagination = ({ numberPage, onChangePage, defaultPage, }) => {
-    const isMobile = useIsSmallScreen(BREAKPOINT_SMALL);
+    const isMobile = useIsSmallScreen(BREAKPOINT.MD);
     const [currentPage, setCurrentPage] = useState(defaultPage || 1);
     useEffect(() => {
         onChangePage(currentPage);

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import "@fontsource/source-sans-pro";
-export { Accordion } from "./Accordion/Accordion";
+export { Accordion } from "./Accordion";
+export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
 export type { AlertType } from "./Alert/Alert";
 export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";

package/dist/index.js

@@ -1,5 +1,6 @@
 import "@fontsource/source-sans-pro";
-export { Accordion } from "./Accordion/Accordion";
+export { Accordion } from "./Accordion";
+export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
 export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
 export { Card } from "./Card";

package/dist/utilities/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum BREAKPOINT {
+    SM = 667,
+    MD = 1023,
+    LG = 1279,
+    XL = 1599
+}

package/dist/utilities/constants.js

@@ -0,0 +1,7 @@
+export var BREAKPOINT;
+(function (BREAKPOINT) {
+    BREAKPOINT[BREAKPOINT["SM"] = 667] = "SM";
+    BREAKPOINT[BREAKPOINT["MD"] = 1023] = "MD";
+    BREAKPOINT[BREAKPOINT["LG"] = 1279] = "LG";
+    BREAKPOINT[BREAKPOINT["XL"] = 1599] = "XL";
+})(BREAKPOINT || (BREAKPOINT = {}));

package/dist/utilities/hooks/useIsSmallScreen.js

@@ -7,7 +7,7 @@ export const useIsSmallScreen = (breakPointToCheck) => {
         };
     }, []);
     const getSnapshot = useCallback(() => {
-        return window.innerWidth < breakPointToCheck;
+        return window.innerWidth <= breakPointToCheck;
     }, [breakPointToCheck]);
     const getServerSnapshot = useCallback(() => false, []);
     return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

package/dist/utilities.d.ts

@@ -1,2 +1,3 @@
-export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";
+export { BREAKPOINT } from "./utilities/constants";
 export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/dist/utilities.js

@@ -1,2 +1,3 @@
-export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";
+export { BREAKPOINT } from "./utilities/constants";
 export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.332",
+  "version": "0.2.0-beta.334",
   "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.332",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.334",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -84,7 +84,7 @@
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
+    "@vitest/ui": "^2.1.2",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",

package/dist/Accordion/AccordionItem.d.ts

@@ -1,6 +0,0 @@
-type AccordionItemProps = {
-    title: string;
-    children: React.ReactNode;
-};
-export declare const AccordionItem: ({ title, children }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Accordion/AccordionItem.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-export const AccordionItem = ({ title, children }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const id = useId();
-    const onClick = () => {
-        setIsOpen(!isOpen);
-    };
-    return (_jsxs("div", { className: "af-accordion-client__item", children: [_jsx("h3", { children: _jsx("button", { type: "button", "aria-expanded": isOpen, "aria-controls": `accordion-section-${id}`, id: `accordion-title-${id}`, onClick: onClick, children: title }) }), _jsx("div", { role: "region", "aria-labelledby": `accordion-title-${id}`, id: `accordion-section-${id}`, hidden: !isOpen, children: children })] }));
-};