@axa-fr/design-system-look-and-feel-react 1.0.5-ci.59 → 1.0.5-ci.66

package/dist/index.d.ts

@@ -18,6 +18,8 @@ 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";

package/dist/index.js

@@ -17,6 +17,8 @@ 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.59",
+  "version": "1.0.5-ci.66",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,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",
@@ -47,7 +44,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.59",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.66",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -59,7 +56,6 @@
   "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",

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,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import home from "@material-symbols/svg-400/outlined/home.svg";
-import { MyFooter } from "./components/MyFooter";
-import { MyHeader } from "./components/MyHeader";
-import { Button, ButtonVariants, CheckboxSelect, RadioSelect, Svg, 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",
-    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" })] }), _jsxs("div", { className: "form__fields subgrid", children: [_jsx(RadioSelect, { className: "subgrid", label: "Genre", type: "horizontal", options: [
-                                    { label: "Homme", value: "H", icon: _jsx(Svg, { src: home }) },
-                                    { label: "Femme", value: "F", icon: _jsx(Svg, { src: home }) },
-                                    { label: "Les deux", value: "HF", icon: _jsx(Svg, { src: home }) },
-                                    {
-                                        label: "Ne se prononce pas",
-                                        value: "N",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                ], name: "radio-name" }), _jsx(CheckboxSelect, { className: "subgrid", type: "horizontal", labelGroup: "Titre", options: [
-                                    {
-                                        label: "Développeur",
-                                        value: "H",
-                                        name: "Développeur",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                    { label: "BA", value: "F", name: "BA", icon: _jsx(Svg, { src: home }) },
-                                    {
-                                        label: "EM",
-                                        value: "HF",
-                                        name: "EM",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                    { label: "PO", value: "A", name: "PO", icon: _jsx(Svg, { src: home }) },
-                                    {
-                                        label: "DBA",
-                                        value: "Au",
-                                        name: "DBA",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                    {
-                                        label: "Scrum Master",
-                                        value: "P",
-                                        name: "Scrum Master",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                    {
-                                        label: "Ne se prononce pas",
-                                        value: "N",
-                                        name: "Ne se prononce pas",
-                                        icon: _jsx(Svg, { src: home }),
-                                    },
-                                ] }), 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, {})] })] }));