@axa-fr/design-system-look-and-feel-react 0.2.0-beta.320 → 0.2.0-beta.322

package/dist/Form/Radio/Radio.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
 import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
-import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { forwardRef, useId } from "react";
 import { Svg } from "../../Svg";
+import { InputError } from "../InputError";
 const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
     let inputId = useId();
     inputId = inputProps.id || inputId;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { message: errorMessage })] }));
 });
 Radio.displayName = "Radio";
 export { Radio };

package/dist/Form/Radio/RadioSelect.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
 import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
-import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { forwardRef, useId, } from "react";
 import { Svg } from "../../Svg";
+import { InputError } from "../InputError";
 export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
     const generatedId = useId();
     const optionId = id || generatedId;
     return (_jsxs(_Fragment, { children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", "aria-labelledby": optionId, ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
                                 "aria-checked": value === inputProps.value,
                                 checked: 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 && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+                            }) }), _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, { message: errorMessage })] }));
 });
 RadioSelect.displayName = "RadioSelect";

package/dist/List/List.stories.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import arrow from "@material-symbols/svg-400/outlined/arrow_right.svg";
-import trash from "@material-symbols/svg-400/outlined/delete.svg";
-import sync from "@material-symbols/svg-400/outlined/sync-fill.svg";
+import { jsx as _jsx } from "react/jsx-runtime";
+import trashIcon from "@material-symbols/svg-400/outlined/delete.svg";
+import publishedWithChangesIcon from "@material-symbols/svg-400/outlined/published_with_changes-fill.svg";
 import { Svg } from "../Svg";
+import { ClickItem } from "./ClickList";
+import { ContentItemMono } from "./ContentItemMono";
 import { List } from "./List";
 const meta = {
     title: "Components/List",
@@ -14,41 +15,15 @@ export const Default = {
     render: ({ classModifier, ...args }) => (_jsx(List, { classModifier: classModifier.join(" "), ...args })),
     args: {
         children: [
-            _jsx("div", { children: _jsx("span", { children: "Pr\u00E9nom NOM" }) }, "list-item-1"),
-            _jsx("div", { children: _jsx("span", { children: "nom.pr\u00E9nom@mail.fr" }) }, "list-item-2"),
-            _jsxs("div", { style: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                }, children: [_jsx(Svg, { src: sync }), _jsxs("div", { style: {
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            width: "100%",
-                        }, children: [_jsx("span", { children: "Modifier le profil" }), _jsx(Svg, { src: arrow })] })] }, "list-item-3"),
-            _jsx("div", { style: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: "4rem",
-                }, children: _jsxs("div", { style: {
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        gap: "0.5rem",
-                    }, children: [_jsx(Svg, { src: trash }), _jsx("span", { children: "Supprimer le profil" })] }) }, "list-element-3"),
+            _jsx(ContentItemMono, { secondaryText: "nom.pr\u00E9nom@mail.fr", children: "Pr\u00E9nom NOM" }, 0),
+            _jsx(ClickItem, { icon: _jsx(Svg, { src: publishedWithChangesIcon }), children: "Modifier le profil" }, 1),
+            _jsx(ClickItem, { icon: _jsx(Svg, { src: trashIcon }), children: "Supprimer le profil" }, 2),
         ],
-        classModifier: [],
+        classModifier: ["first-separator-full-width"],
     },
     argTypes: {
         classModifier: {
-            options: [
-                "large",
-                "first-separator-full-width",
-                "first-separator-full-width",
-            ],
+            options: ["large", "first-separator-full-width"],
             control: { type: "multi-select" },
             defaultValue: [],
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.320",
+  "version": "0.2.0-beta.322",
   "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.320",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.322",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },