@axa-fr/design-system-look-and-feel-react 1.0.4-ci.7 → 1.0.4-ci.9

package/dist/Form/Radio/RadioSelect.js

@@ -14,9 +14,6 @@ export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onCha
         }
         return null;
     }, []);
-    return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
-                                "aria-checked": value === inputProps.value,
-                                checked: value === inputProps.value,
-                            }), ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
+    return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
 });
 RadioSelect.displayName = "RadioSelect";

package/dist/Grid/DebugGrid.d.ts

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Grid/DebugGrid.scss";
-export declare const DebugGrid: ({ cols }: {
+export declare const DebugGrid: ({ cols, isCheckedByDefault, }: {
     cols?: number;
+    isCheckedByDefault?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/DebugGrid.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Grid/DebugGrid.scss";
+import { useState } from "react";
 import { Checkbox } from "../Form/Checkbox";
-export const DebugGrid = ({ cols = 12 }) => {
-    const [checked, setChecked] = useState(true);
+export const DebugGrid = ({ cols = 12, isCheckedByDefault = false, }) => {
+    const [checked, setChecked] = useState(isCheckedByDefault);
     const handleChecked = () => setChecked(!checked);
     return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { className: "af-checkbox af-checkbox-select af-checkbox-select--debuggrid", label: "Grid", name: "debuggrid", checked: checked, onClick: handleChecked }), _jsx("div", { className: "debug-grid", children: _jsx("div", { className: "grid", children: [...Array(cols).keys()].map((col) => (_jsx("div", { className: "cols" }, col))) }) })] }));
 };

package/dist/Grid/renderExampleForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MyHeader } from "./components/MyHeader";
 import { MyFooter } from "./components/MyFooter";
+import { MyHeader } from "./components/MyHeader";
 import { Button, ButtonVariants, TextInput, Title } from "..";
 import { DebugGrid } from "./DebugGrid";
 function capitalizeFirstLetter(val) {
@@ -27,4 +27,4 @@ const FIELDS = [
     setAttributesFields("samuel.gomez@axa.fr", "email", "email"),
     setAttributesFields("0601020304", "téléphone"),
 ];
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, {}), _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, {})] }));
+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.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MyHeader } from "./components/MyHeader";
-import { MyFooter } from "./components/MyFooter";
+import { Title, TitleSize } from "../Title";
+import { Contacts } from "./components/Contacts";
 import { MainTitle } from "./components/MainTitle";
-import { DebugGrid } from "./DebugGrid";
+import { MyFooter } from "./components/MyFooter";
+import { MyHeader } from "./components/MyHeader";
 import { MyList } from "./components/MyList";
-import { Contacts } from "./components/Contacts";
-import { Title, TitleSize } from "../Title";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, {}), _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, {})] }));
+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.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { DebugGrid } from "./DebugGrid";
 import { Card } from "./components/Card";
 import { Offsets } from "./components/Offsets";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, {}), _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, {})] })] }));
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.4-ci.7",
+  "version": "1.0.4-ci.9",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.4-ci.7",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.4-ci.9",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },