@axa-fr/design-system-look-and-feel-react 1.0.5-ci.6 → 1.0.5-ci.67

package/dist/Title/Title.js

@@ -5,7 +5,7 @@ import { getComponentClassName } from "../utilities";
 import { TitleSize } from "./constants";
 import { TitleWithSubtitles } from "./TitleWithSubtitles";
 export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size, "af-title"), [classModifier, className, size]);
+    const componentClassName = useMemo(() => getComponentClassName("af-title", className, classModifier ? `${classModifier} ${size}` : size), [classModifier, className, size]);
     const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, level: level, ...args })), [title, firstSubtitle, level]);
     return (_jsx("header", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
 };

package/dist/index.d.ts

@@ -6,15 +6,20 @@ export { Alert } from "./Alert/Alert";
 export type { AlertType } from "./Alert/Alert";
 export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
+export { NavBar } from "./Layout/Header/NavBar/NavBar";
+export { PreviousLink } from "./Layout/Header/PreviousLink";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
@@ -22,8 +27,8 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
-export type { ButtonAction as ModalButtonAction } from "./ModalClient/type";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
+export type { ModalCoreBodyProps, ModalCoreFooterProps, ModalCoreHeaderProps, ModalCoreProps, ModalProps, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -32,4 +37,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/index.js

@@ -5,15 +5,20 @@ export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
 export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
+export { NavBar } from "./Layout/Header/NavBar/NavBar";
+export { PreviousLink } from "./Layout/Header/PreviousLink";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
@@ -21,7 +26,7 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -30,4 +35,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1 +1 @@
-export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
+export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-const getLastClassName = (classNameToUse) => {
-    if (!classNameToUse) {
+const getLastClassName = (defaultClassName) => {
+    if (!defaultClassName) {
         return null;
     }
-    return classNameToUse.split(" ").filter(Boolean).at(-1);
+    return defaultClassName.split(" ").filter(Boolean).at(-1);
 };
 const listClassModifier = (classModifier) => {
     if (!classModifier) {
@@ -11,17 +11,16 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
-export const getComponentClassName = (className, classModifier, defaultClassName) => {
-    const classNameToUse = className || defaultClassName;
-    if (!classNameToUse) {
+export const getComponentClassName = (defaultClassName, className, classModifier) => {
+    if (!defaultClassName) {
         return "";
     }
-    const classWithoutModifier = getLastClassName(classNameToUse);
+    const classWithoutModifier = getLastClassName(defaultClassName);
     const modifiers = listClassModifier(classModifier);
     const modifiersObject = modifiers
         .filter((it) => /\S/.test(it))
         .map((it) => {
         return `${classWithoutModifier}--${it}`;
     });
-    return classNames(classNameToUse, modifiersObject);
+    return classNames(defaultClassName, className, modifiersObject);
 };

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.6",
+  "version": "1.0.5-ci.67",
   "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -19,18 +21,15 @@
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
-    "start:storybook": "storybook dev -p 6009",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
     "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
     "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write",
-    "tsc": "tsc --noEmit",
+    "check-types": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage",
-    "chromatic": "npx chromatic"
+    "test:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -45,7 +44,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.6",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.67",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -57,64 +56,9 @@
   "dependencies": {
     "@fontsource/source-sans-pro": "^5.0.8",
     "@tanem/svg-injector": "^10.1.68",
-    "@types/react-dom": "^18.2.24",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
-    "rc-slider": "^11.1.7",
-    "react-select": "^5.9.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^3.0.5",
-    "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.1.2",
-    "chromatic": "^11.12.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "jest-axe": "^8.0.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "tsc-files": "^1.1.4",
-    "typescript": "^5.6.3",
-    "vitest": "^2.0.5"
+    "rc-slider": "^11.1.7"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
@@ -122,7 +66,6 @@
     "*.mdx": "prettier --write"
   },
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../../package.json"
   }
 }

package/dist/Form/Select/CustomOption.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { OptionProps } from "react-select";
-declare const CustomOption: React.FC<OptionProps>;
-export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { components } from "react-select";
-const CustomOption = ({ getValue, ...otherProps }) => {
-    const value = useMemo(() => getValue(), [getValue]);
-    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
-};
-export { CustomOption };

package/dist/Form/Select/DropdownIndicator.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { DropdownIndicatorProps } from "react-select";
-declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
-export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
-import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
-import { components } from "react-select";
-import classNames from "classnames";
-import { Svg } from "../../Svg";
-const DropdownIndicator = (props) => {
-    const { selectProps: { menuIsOpen, isDisabled }, } = props;
-    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
-};
-export { DropdownIndicator };

package/dist/Grid/components/Card.d.ts

@@ -1,3 +0,0 @@
-export declare const Card: ({ title }: {
-    title: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/Card.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Card = ({ title }) => (_jsxs("div", { className: "box-card", children: [_jsx("h3", { children: title }), _jsx("p", { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptatibus dolor ratione, ab natus reprehenderit itaque corporis officia ad necessitatibus enim et voluptatem reiciendis rem optio laudantium iure esse vero." })] }));

package/dist/Grid/components/Contacts.d.ts

@@ -1 +0,0 @@
-export declare const Contacts: () => import("react/jsx-runtime").JSX.Element[];

package/dist/Grid/components/Contacts.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import callIcon from "@material-symbols/svg-400/outlined/call-fill.svg";
-import mailIcon from "@material-symbols/svg-400/outlined/mail-fill.svg";
-import { List, Svg, ContentItemMono, ClickItem, createClickItemParent, } from "../..";
-export const Contacts = () => [...Array(6).keys()].map((_, index) => (_jsxs(List, { classModifier: "first-separator-full-width", children: [_jsx(ContentItemMono, { secondaryText: "agent g\u00E9n\u00E9ral", tertiaryText: "Doe", children: "John Doe" }), index % 3 === 0 && (_jsx(ClickItem, { icon: _jsx(Svg, { src: callIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
-                href: `tel:0601010101`,
-            }), children: "06 01 01 01 01" })), _jsx(ClickItem, { icon: _jsx(Svg, { src: mailIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
-                href: `mailto:john.doe@axa.fr`,
-            }), children: "john.doe@axa.fr" })] }, "John Doe-agent")));

package/dist/Grid/components/MainTitle.d.ts

@@ -1 +0,0 @@
-export declare const MainTitle: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MainTitle.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import article from "@material-symbols/svg-400/outlined/article-fill.svg";
-import { Svg, Title } from "../..";
-export const MainTitle = () => (_jsx(Title, { icon: _jsx(Svg, { src: article, "aria-hidden": true }), firstSubtitle: "Sous Titre 1", secondSubtitle: "Sous Titre 2", children: "Titre de la page" }));

package/dist/Grid/components/MyFooter.d.ts

@@ -1 +0,0 @@
-export declare const MyFooter: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MyFooter.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Footer } from "../../Layout/Footer";
-export const MyFooter = () => (_jsx(Footer, { links: [
-        {
-            link: "https://www.axa.fr/qui-sommes-nous.html",
-            text: "À propos",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/mentions-legales.html",
-            text: "Mentions légales",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/donnees-personnelles.html",
-            text: "Données personnelles",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/politique-cookies.html",
-            text: "Cookies",
-        },
-    ], socialMedias: [
-        { icon: "facebook", link: "https://www.facebook.com/axafrance" },
-        { icon: "twitter", link: "https://twitter.com/AXAFrance" },
-        {
-            icon: "youtube",
-            link: "https://www.youtube.com/user/AXAFranceChaine",
-        },
-        {
-            icon: "linkedin",
-            link: "https://www.linkedin.com/company/axa-france/",
-        },
-    ], copyright: `@AXA ${new Date().getFullYear()} - Tous droits réservés`, expandLinkText: "Liens utiles" }));

package/dist/Grid/components/MyHeader.d.ts

@@ -1 +0,0 @@
-export declare const MyHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MyHeader.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import person from "@material-symbols/svg-400/outlined/person-fill.svg";
-import lock from "@material-symbols/svg-400/outlined/lock-fill.svg";
-import { Header } from "../../Layout/Header";
-import { Button, ButtonVariants, Svg } from "../..";
-export const MyHeader = () => (_jsxs(Header, { defaultActiveLink: 0, rightItem: [
-        _jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
-        _jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
-    ], children: [_jsx("a", { className: "af-navbar-item__link", href: "/mes-contrats", children: "MES CONTRATS" }, "MES CONTRATS link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-avantages", children: "MES AVANTAGES" }, "MES AVANTAGES link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-documents", children: "MES DOCUMENTS" }, "MES DOCUMENTS link")] }));

package/dist/Grid/components/MyList.d.ts

@@ -1 +0,0 @@
-export declare const MyList: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MyList.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ContentItemDuo, List } from "../..";
-export const MyList = () => (_jsx(List, { classModifier: "extra-padding", children: [...Array(6).keys()].map(() => (_jsx(ContentItemDuo, { isVertical: false, isShowingDoneIcon: true, isShowingCloseIcon: false, buttonText: "En savoir plus", classModifier: "large", label: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, suscipit sint! Reiciendis, eos? Eveniet, aut qui. Autem reprehenderit", value: "R\u00E9ponse" }, crypto.randomUUID()))) }));

package/dist/Grid/components/Offsets.d.ts

@@ -1 +0,0 @@
-export declare const Offsets: () => import("react/jsx-runtime").JSX.Element[][];

package/dist/Grid/components/Offsets.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const MAX_OFFSET = 12;
-export const Offsets = () => [...Array(MAX_OFFSET).keys()].map((start) => {
-    const offset = start + 1;
-    const maxCols = MAX_OFFSET - offset + 1;
-    return [...Array(maxCols).keys()].map((col) => (_jsx("div", { className: `box box-offset box-offset-${offset}-${col + 1}` }, crypto.randomUUID())));
-});

package/dist/Grid/renderExampleForm.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderExampleForm.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MyFooter } from "./components/MyFooter";
-import { MyHeader } from "./components/MyHeader";
-import { Button, ButtonVariants, TextInput, Title } from "..";
-import { DebugGrid } from "./DebugGrid";
-function capitalizeFirstLetter(val) {
-    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-}
-const setAttributesFields = (value, label, type = "text") => ({
-    value,
-    type,
-    name: label,
-    id: label,
-    disabled: false,
-    required: true,
-    label: `${capitalizeFirstLetter(label)} de la personne`,
-    placeholder: `Votre ${label}`,
-    description: `Saisissez un ${label}`,
-    error: `Un ${label} est obligatoire`,
-    className: "subgrid af-form__input-text",
-    helper: "Do you need help ?",
-    buttonLabel: "En savoir plus",
-});
-const FIELDS = [
-    setAttributesFields("Gomez", "nom"),
-    setAttributesFields("Samuel", "prénom"),
-    setAttributesFields("samuel.gomez@axa.fr", "email", "email"),
-    setAttributesFields("0601020304", "téléphone"),
-];
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsx("main", { className: "grid example-form", children: _jsxs("form", { className: "form", children: [_jsxs("div", { className: "form__header subgrid", children: [_jsx(Title, { children: "Mon formulaire" }), _jsx("p", { children: "Les mentions avec * sont obligatoires" })] }), _jsx("div", { className: "form__fields subgrid", children: FIELDS.map((field) => (_jsx(TextInput, { ...field, classModifier: field.error ? "error" : "" }, field.id))) }), _jsxs("div", { className: "form__actions subgrid", children: [_jsx(Button, { variant: ButtonVariants.secondary, children: "Pr\u00E9c\u00E9dent" }), _jsx(Button, { variant: ButtonVariants.primary, children: "Valider" })] })] }) }), _jsx(MyFooter, {})] }));

package/dist/Grid/renderExamplePage.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderExamplePage.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Title, TitleSize } from "../Title";
-import { Contacts } from "./components/Contacts";
-import { MainTitle } from "./components/MainTitle";
-import { MyFooter } from "./components/MyFooter";
-import { MyHeader } from "./components/MyHeader";
-import { MyList } from "./components/MyList";
-import { DebugGrid } from "./DebugGrid";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsxs("main", { className: "grid example-page", children: [_jsx(MainTitle, {}), _jsxs("div", { className: "container-part", children: [_jsxs("div", { className: "subgrid af-left-part", children: [_jsx(Title, { size: TitleSize.L, children: "My list title" }), _jsxs("div", { className: "subgrid af-list-part", children: [_jsx(MyList, {}), _jsx(MyList, {})] })] }), _jsxs("div", { className: "subgrid af-right-part", children: [_jsx(Title, { size: TitleSize.L, children: "Contacts" }), _jsx("div", { className: "af-contacts-part subgrid", children: _jsx(Contacts, {}) })] })] })] }), _jsx(MyFooter, {})] }));

package/dist/Grid/renderWireframe.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderWireframe.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DebugGrid } from "./DebugGrid";
-import { Card } from "./components/Card";
-import { Offsets } from "./components/Offsets";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsxs("main", { className: "grid", children: [_jsx("h1", { className: "box", children: "Bonjour, Samuel G." }), _jsxs("div", { className: "box box-example-1 subgrid", children: [_jsx("h2", { className: "box", children: "Mes contrats" }), [...Array(6).keys()].map((_, index) => (_jsx(Card, { title: `contrat-${index + 1}` }, crypto.randomUUID())))] }), _jsxs("div", { className: "box box-example-2 subgrid", children: [_jsx("h2", { className: "box", children: "Profil" }), _jsx(Card, { title: "Mes coordonn\u00E9es" })] }), _jsxs("div", { className: "box box-example-3 subgrid", children: [_jsx("h2", { className: "box", children: "Mes Infos" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" })] }), _jsxs("div", { className: "box box-custom", children: [_jsx("h2", { className: "box", children: "Custom" }), _jsx("div", { className: "box box-content1", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos!" }), _jsx("div", { className: "box box-content2", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis." }), _jsx("footer", { children: "@copyright" })] }), _jsx(Offsets, {})] })] }));

package/dist/ModalClient/Modal.container.d.ts

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { PropsWithChildren } from "react";
-import { ModalProps } from "./type";
-export declare const ModalContainer: ({ open, setIsOpen, hasCloseButton, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;

package/dist/ModalClient/Modal.container.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { useEffect, useId, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Modal } from "./Modal";
-import { useModal } from "./Modal.hook";
-export const ModalContainer = ({ open, setIsOpen, hasCloseButton = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
-    const { handleClickOutside, handleKeyDown, handleCloseModal } = useModal({
-        setIsOpen,
-        onClose,
-        onClickOutside,
-    });
-    const modalRef = useRef(null);
-    const idTitle = useId();
-    const idContent = useId();
-    const actionCallback = (callback) => {
-        callback?.();
-        setIsOpen(false);
-    };
-    useEffect(() => {
-        const modalElement = modalRef.current;
-        if (modalElement) {
-            if (open) {
-                document.body.style.overflow = "hidden";
-                modalElement.showModal?.();
-            }
-            else {
-                document.body.style.overflow = "inherit";
-                modalElement.close?.();
-            }
-        }
-        return () => {
-            document.body.style.overflow = "inherit";
-        };
-    }, [open]);
-    useEffect(() => {
-        document.body.addEventListener("keydown", handleKeyDown);
-        document.body.addEventListener("click", handleClickOutside);
-        return () => {
-            document.body.removeEventListener("keydown", handleKeyDown);
-            document.body.removeEventListener("click", handleClickOutside);
-        };
-    }, [handleClickOutside, handleKeyDown]);
-    return createPortal(_jsx(Modal, { modalRef: modalRef, idTitle: idTitle, idContent: idContent, iconTitle: iconTitle, title: title, subtitle: subtitle, hasCloseButton: hasCloseButton, handleCloseModal: handleCloseModal, actionCallback: actionCallback, actions: actions, fullWidthButtons: fullWidthButtons, children: children }), document.body);
-};

package/dist/ModalClient/Modal.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { TModalType } from "./type";
-export declare const Modal: ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }: PropsWithChildren<TModalType>) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalClient/Modal.hook.d.ts

@@ -1,6 +0,0 @@
-import { TModalHook } from "./type";
-export declare const useModal: ({ setIsOpen, onClose, onClickOutside, }: TModalHook) => {
-    handleClickOutside: (event: MouseEvent) => void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    handleCloseModal: () => void;
-};

package/dist/ModalClient/Modal.hook.js

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-export const useModal = ({ setIsOpen, onClose, onClickOutside, }) => {
-    const handleCloseModal = useCallback(() => {
-        onClose?.();
-        setIsOpen(false);
-    }, [onClose, setIsOpen]);
-    const handleClickOutside = useCallback((event) => {
-        if (event.target.tagName !== "DIALOG") {
-            return;
-        }
-        if (onClickOutside) {
-            onClickOutside();
-            setIsOpen(false);
-        }
-        else {
-            handleCloseModal();
-        }
-    }, [handleCloseModal, onClickOutside, setIsOpen]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Escape") {
-            handleCloseModal();
-        }
-    }, [handleCloseModal]);
-    return { handleClickOutside, handleKeyDown, handleCloseModal };
-};

package/dist/ModalClient/Modal.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import close from "@material-symbols/svg-400/outlined/close.svg";
-import { ButtonClient as Button, Variants, Variants as ButtonVariants, } from "../Button/Button";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { Svg } from "../Svg";
-export const Modal = ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }) => (_jsxs("dialog", { ref: modalRef, className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseButton && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, variant: Variants.ghost, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: () => actionCallback(actions?.primary?.callback), disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: () => actionCallback(actions?.secondary?.callback), disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: () => actionCallback(actions?.tertiary?.callback), disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));

package/dist/ModalClient/index.d.ts

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/index.js

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/type.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from "react";
-export type ButtonAction = {
-    text: string;
-    disabled?: boolean;
-    callback: () => void;
-};
-export type TActionButton = {
-    primary?: ButtonAction;
-    secondary?: ButtonAction;
-    tertiary?: ButtonAction;
-};
-export type TModalHook = {
-    setIsOpen: (value: boolean) => void;
-    onClose?: () => void;
-    onClickOutside?: () => void;
-};
-export type ModalProps = TModalHook & {
-    open: boolean;
-    hasCloseButton?: boolean;
-    title: string;
-    subtitle?: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: TActionButton;
-};
-export type TModalType = {
-    modalRef: RefObject<HTMLDialogElement>;
-    idTitle: string;
-    idContent: string;
-    iconTitle: ReactNode;
-    title: string;
-    subtitle?: string;
-    hasCloseButton: boolean;
-    handleCloseModal: () => void;
-    actionCallback: (callback?: () => void) => void;
-    actions?: TActionButton;
-    fullWidthButtons?: boolean;
-};

package/dist/ModalClient/type.js

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