@axa-fr/design-system-slash-react 1.2.1-alpha.124 → 1.2.1-alpha.127

package/dist/Layout/Header/Infos/Infos.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.css";
 export type TInfo = {
     definition: ReactNode;
     id?: string;

package/dist/Layout/Header/Infos/Infos.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
 import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
+import { Fragment } from "react";
 import { getComponentClassName } from "../../../utilities";
 import { generateId } from "../../../utilities/helpers/generateId";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.css";
 import { Svg } from "../../../Svg";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {

package/dist/Layout/Header/User/User.d.ts

@@ -1,17 +1,59 @@
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.css";
 import { MouseEvent, ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.scss";
 type Props = {
+    /**
+     * User's name
+     */
+    name: string;
+    /**
+     * User's profile or role, optional
+     */
+    profile?: string;
+    /**
+     * Children elements to be rendered next to the user's name and role
+     */
     children?: ReactNode;
+    /**
+     * Class modifier to apply additional styles\
+     * @example
+     * ```tsx
+     * <User classModifier="custom-class" />
+     * ```
+     * This will apply the class `af-info-user--custom-class` to the component.
+     */
     classModifier?: string;
+    /**
+     * classNames to override completely the component's style
+     */
     className?: string;
+    /**
+     * URL to navigate to when the user name is clicked
+     * If provided, the user name will be wrapped in an anchor tag.
+     * If not provided, the user name will be displayed as plain text.
+     */
     href?: string;
-    name: string;
+    /**
+     * Function to call when the user name link is clicked
+     * @param action - Contains the event and optionally the path
+     */
     onClick?: (action: {
         path?: string;
         event: MouseEvent<HTMLAnchorElement>;
     }) => void;
+    /**
+     * Optional path to be used in the onClick function
+     * @example
+     * ```tsx
+     * <User onClick={({ path }) => console.log(path)} path="/user-profile" />
+     * ```
+     * This will log `/user-profile` when the user name link is clicked.
+     */
     path?: string;
-    profile?: string;
+    /**
+     * Title for the user link, defaults to "Voir mon profil"
+     * This is used as the `title` attribute for the anchor tag if `href` is provided.
+     * It provides additional context for screen readers and tooltips.
+     */
     title?: string;
 };
 declare const User: ({ children, classModifier, className, href, name, path, profile, onClick, title, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Layout/Header/User/User.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InnerUser } from "./InnerUser";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/User/User.css";
 import { getComponentClassName } from "../../../utilities";
+import { InnerUser } from "./InnerUser";
 const defaultClassName = "af-info-user";
 const User = ({ children, classModifier, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.124",
+  "version": "1.2.1-alpha.127",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.124",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.127",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },