@axa-fr/design-system-apollo-react 1.0.5-alpha.385 → 1.0.5-alpha.387

package/dist/DataAgent/DataAgentApollo.d.ts

@@ -0,0 +1,3 @@
+import { type DataAgentProps } from "./DataAgentCommon";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.scss";
+export declare const DataAgent: (props: DataAgentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataAgent/DataAgentApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataAgentCommon } from "./DataAgentCommon";
+import { ClickItem } from "../List/ClickItem/ClickItemApollo";
+import { ContentItemMono } from "../ContentItemMono/ContentItemMonoApollo";
+import { Divider } from "../Divider/DividerApollo";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentApollo.scss";
+export const DataAgent = (props) => (_jsx(DataAgentCommon, { ...props, DividerComponent: Divider, ClickItemComponent: ClickItem, ContentItemMonoComponent: ContentItemMono }));

package/dist/DataAgent/DataAgentCommon.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps, ComponentType } from "react";
+import { Divider } from "../Divider/DividerCommon";
+import type { ContentItemProps, ContentMonoItemIconProps, ContentMonoItemPictureProps, ContentMonoItemStickProps } from "../ContentItemMono/ContentItemMonoCommon";
+import type { ClickItemProps } from "../List/ClickItem/types";
+export type TupleMax3<T> = [T] | [T, T] | [T, T, T];
+export type DataAgentProps = {
+    className?: string;
+    agentProps: ContentMonoItemPictureProps;
+    agentContractProps?: ContentMonoItemStickProps;
+    contents?: TupleMax3<ContentMonoItemIconProps>;
+    clickContents?: TupleMax3<ClickItemProps>;
+    texteOrias?: string;
+};
+type DataAgentCommonProps = DataAgentProps & {
+    DividerComponent: ComponentType<ComponentProps<typeof Divider>>;
+    ContentItemMonoComponent: ComponentType<ContentItemProps>;
+    ClickItemComponent: ComponentType<ClickItemProps>;
+};
+export declare const DataAgentCommon: ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, }: DataAgentCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DataAgent/DataAgentCommon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo } from "react";
+import { getComponentClassName } from "../utilities/getComponentClassName";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+import { BREAKPOINT } from "../utilities/constants";
+export const DataAgentCommon = ({ className, agentProps, agentContractProps, contents, clickContents, texteOrias, DividerComponent, ContentItemMonoComponent, ClickItemComponent, }) => {
+    const componentClassName = useMemo(() => getComponentClassName("af-data-agent", className), [className]);
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    const renderForDefaultLayout = () => (_jsxs(_Fragment, { children: [_jsxs("section", { className: "af-data-agent__intro", children: [_jsx(ContentItemMonoComponent, { ...agentProps, type: "picture" }), agentContractProps && (_jsx(ContentItemMonoComponent, { ...agentContractProps, type: "stick" }))] }), _jsx(DividerComponent, {}), contents && contents?.length > 0 && (_jsx("section", { className: "af-data-agent__info-content", children: contents.map((content) => (_jsxs(Fragment, { children: [_jsx(ContentItemMonoComponent, { ...content, type: "icon" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `content--${crypto.randomUUID()}`))) })), clickContents && clickContents?.length > 0 && (_jsx("section", { className: "af-data-agent__info-click-content", children: clickContents.map((clickContent) => (_jsxs(Fragment, { children: [_jsx(ClickItemComponent, { ...clickContent, variant: "small" }), _jsx(DividerComponent, { className: "af-data-agent__line" })] }, `clickContent--${crypto.randomUUID()}`))) })), Boolean(texteOrias) && (_jsx("p", { className: "af-data-agent__text-orias", children: texteOrias }))] }));
+    const renderForMobileLayout = () => (_jsx("section", { className: "af-data-agent__intro", children: _jsx(ClickItemComponent, { ...agentProps, basePictureProps: {
+                src: agentProps.picture,
+                alt: agentProps.title,
+            }, variant: "agent" }) }));
+    return (_jsx("section", { className: componentClassName, children: isMobile ? renderForMobileLayout() : renderForDefaultLayout() }));
+};

package/dist/DataAgent/DataAgentLF.d.ts

@@ -0,0 +1,3 @@
+import { type DataAgentProps } from "./DataAgentCommon";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.scss";
+export declare const DataAgent: (props: DataAgentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataAgent/DataAgentLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataAgentCommon } from "./DataAgentCommon";
+import { ClickItem } from "../List/ClickItem/ClickItemLF";
+import { ContentItemMono } from "../ContentItemMono/ContentItemMonoLF";
+import { Divider } from "../Divider/DividerLF";
+import "@axa-fr/design-system-apollo-css/dist/DataAgent/DataAgentLF.scss";
+export const DataAgent = (props) => (_jsx(DataAgentCommon, { ...props, DividerComponent: Divider, ClickItemComponent: ClickItem, ContentItemMonoComponent: ContentItemMono }));

package/dist/List/ClickItem/ClickItemApollo.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/List/ClickItem/ClickItemApollo.scss";
 import { ClickItemCommon } from "./ClickItemCommon";
 import { ClickItemContent } from "./components/ClickItemContentApollo";
-import { ClickItemSuffix } from "./components/ClickItemSuffixAppollo";
+import { ClickItemSuffix } from "./components/ClickItemSuffixApollo";
 import { ClickItemPrefix } from "./components/ClickItemPrefixApollo";
 export const ClickItem = (props) => (_jsx(ClickItemCommon, { ClickItemContentComponent: ClickItemContent, ClickItemSuffixComponent: ClickItemSuffix, ClickItemPrefixComponent: ClickItemPrefix, ...props }));
 export { clickItemStates, clickItemVariants, } from "./ClickItemCommon";

package/dist/List/ClickItem/ClickItemCommon.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClickItemWrapper } from "./ClickItemWrapper";
 export const clickItemVariants = {
     small: "small",
     medium: "medium",
@@ -11,15 +12,20 @@ export const clickItemStates = {
     loading: "loading",
 };
 export const ClickItemCommon = ({ className = "", state = "default", variant = "large", icon, title, subtitle, textSecondary, textTertiary, tagLabel, tagProps, basePictureProps, onClick, ariaLabelForActionIcon, ClickItemContentComponent, ClickItemSuffixComponent, ClickItemPrefixComponent, }) => {
-    return (_jsxs("div", { className: [
+    const clickableProps = onClick && {
+        "aria-label": ariaLabelForActionIcon,
+        onClick,
+        disabled: state === "disabled" || state === "loading",
+    };
+    return (_jsxs(ClickItemWrapper, { isClickable: Boolean(onClick), className: [
             "af-apollo-click-item",
             `af-apollo-click-item--${variant}`,
             `af-apollo-click-item--${state}`,
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx("div", { className: "af-apollo-click-item__leading", children: _jsx(ClickItemPrefixComponent, { variant: variant, state: state, basePictureProps: basePictureProps, icon: icon }) }), _jsx("div", { className: "af-apollo-click-item__content", children: _jsx(ClickItemContentComponent, { title: title, subtitle: subtitle, textSecondary: textSecondary, textTertiary: textTertiary, tagLabel: tagLabel, tagProps: {
+            .join(" "), ...clickableProps, children: [_jsx("div", { className: "af-apollo-click-item__leading", children: _jsx(ClickItemPrefixComponent, { variant: variant, state: state, basePictureProps: basePictureProps, icon: icon }) }), _jsx("div", { className: "af-apollo-click-item__content", children: _jsx(ClickItemContentComponent, { title: title, subtitle: subtitle, textSecondary: textSecondary, textTertiary: textTertiary, tagLabel: tagLabel, tagProps: {
                         ...(tagProps ?? {}),
                         variant: state === "disabled" ? "neutral" : tagProps?.variant,
-                    } }) }), _jsx("div", { className: "af-apollo-click-item__trailing", children: _jsx(ClickItemSuffixComponent, { variant: variant, state: state, onClick: onClick, ariaLabelForActionIcon: ariaLabelForActionIcon }) })] }));
+                    } }) }), _jsx("div", { className: "af-apollo-click-item__trailing", children: _jsx(ClickItemSuffixComponent, { variant: variant, state: state }) })] }));
 };

package/dist/List/ClickItem/ClickItemWrapper.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+type ClickItemWrapperProps = HTMLAttributes<HTMLElement> & {
+    isClickable?: boolean;
+};
+export declare const ClickItemWrapper: ({ isClickable, children, ...props }: ClickItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ClickItem/ClickItemWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ClickItemWrapper = ({ isClickable = true, children, ...props }) => {
+    if (isClickable) {
+        return (_jsx("button", { type: "button", ...props, children: children }));
+    }
+    return _jsx("div", { ...props, children: children });
+};

package/dist/List/ClickItem/components/ClickItemPrefixCommon.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ClickItemPrefixCommon = ({ state, variant, icon, basePictureProps, IconComponent, BasePictureComponent, }) => {
+    if (!(Boolean(basePictureProps) && variant === "agent") && !icon) {
+        return null;
+    }
     if (Boolean(basePictureProps) && variant === "agent") {
         return _jsx(BasePictureComponent, { ...basePictureProps });
     }
-    if (icon) {
-        return (_jsx(IconComponent, { role: "presentation", src: icon, variant: state === "disabled" && variant !== "small" ? "disabled" : "primary" }));
-    }
-    return null;
+    return (_jsx(IconComponent, { role: "presentation", src: icon ?? "", variant: state === "disabled" && variant !== "small" ? "disabled" : "primary" }));
 };

package/dist/List/ClickItem/components/{ClickItemSuffixAppollo.js → ClickItemSuffixApollo.js}

@@ -2,6 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import arrowForward from "@material-symbols/svg-400/rounded/arrow_forward-fill.svg";
 import { Icon } from "../../../Icon/IconApollo";
 import { Spinner } from "../../../Spinner/SpinnerApollo";
-import { ClickIcon } from "../../../ClickIcon/ClickIconApollo";
 import { ClickItemSuffixCommon, } from "./ClickItemSuffixCommon";
-export const ClickItemSuffix = (props) => (_jsx(ClickItemSuffixCommon, { trailingClickIcon: arrowForward, IconComponent: Icon, SpinnerComponent: Spinner, ClickIconComponent: ClickIcon, ...props }));
+export const ClickItemSuffix = (props) => (_jsx(ClickItemSuffixCommon, { trailingClickIcon: arrowForward, IconComponent: Icon, SpinnerComponent: Spinner, ...props }));

package/dist/List/ClickItem/components/ClickItemSuffixCommon.d.ts

@@ -1,18 +1,14 @@
-import { ComponentProps, ComponentType, type MouseEvent } from "react";
+import { ComponentProps, ComponentType } from "react";
 import type { IconProps } from "../../../Icon/IconCommon";
 import { ClickItemStates, ClickItemVariants } from "../ClickItemCommon";
 import { Spinner } from "../../../Spinner/SpinnerCommon";
-import type { ClickIconProps } from "../../../ClickIcon/ClickIconCommon";
 export type ClickItemSuffixProps = {
     state: ClickItemStates;
     variant: ClickItemVariants;
-    ariaLabelForActionIcon?: string;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 export type ClickItemSuffixCommonProps = ClickItemSuffixProps & {
     trailingClickIcon: string;
     IconComponent: ComponentType<IconProps>;
     SpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
-    ClickIconComponent: ComponentType<ClickIconProps>;
 };
-export declare const ClickItemSuffixCommon: ({ state, variant, trailingClickIcon, ariaLabelForActionIcon, onClick, IconComponent, SpinnerComponent, ClickIconComponent, }: ClickItemSuffixCommonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ClickItemSuffixCommon: ({ state, variant, trailingClickIcon, IconComponent, SpinnerComponent, }: ClickItemSuffixCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/List/ClickItem/components/ClickItemSuffixCommon.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import keyboardArrowRight from "@material-symbols/svg-400/rounded/keyboard_arrow_right-fill.svg";
-export const ClickItemSuffixCommon = ({ state, variant, trailingClickIcon, ariaLabelForActionIcon, onClick, IconComponent, SpinnerComponent, ClickIconComponent, }) => {
-    if (variant === "large") {
-        return state === "loading" ? (_jsx(SpinnerComponent, { size: 32 })) : (_jsx(ClickIconComponent, { src: trailingClickIcon, "aria-label": ariaLabelForActionIcon, disabled: state === "disabled", onClick: onClick }));
+export const ClickItemSuffixCommon = ({ state, variant, trailingClickIcon, IconComponent, SpinnerComponent, }) => {
+    if (variant === "large" && state === "loading") {
+        return _jsx(SpinnerComponent, { size: 32 });
     }
     if (variant === "small") {
-        return (_jsx(IconComponent, { src: keyboardArrowRight, "aria-label": ariaLabelForActionIcon }));
+        return _jsx(IconComponent, { src: keyboardArrowRight, role: "presentation" });
     }
-    if (variant === "agent") {
-        return (_jsx(ClickIconComponent, { src: trailingClickIcon, "aria-label": ariaLabelForActionIcon, onClick: onClick }));
-    }
-    return null;
+    const isDisabled = variant === "large" && state === "disabled";
+    return (_jsx("div", { className: ["af-click-icon", isDisabled && "af-click-icon--disabled"]
+            .filter(Boolean)
+            .join(" "), children: _jsx(IconComponent, { src: trailingClickIcon, role: "presentation", variant: isDisabled ? "disabled" : "primary" }) }));
 };

package/dist/List/ClickItem/components/ClickItemSuffixLF.js

@@ -2,6 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import keyboardArrowRight from "@material-symbols/svg-400/rounded/keyboard_arrow_right-fill.svg";
 import { Icon } from "../../../Icon/IconLF";
 import { Spinner } from "../../../Spinner/SpinnerLF";
-import { ClickIcon } from "../../../ClickIcon/ClickIconLF";
 import { ClickItemSuffixCommon, } from "./ClickItemSuffixCommon";
-export const ClickItemSuffix = (props) => (_jsx(ClickItemSuffixCommon, { trailingClickIcon: keyboardArrowRight, IconComponent: Icon, SpinnerComponent: Spinner, ClickIconComponent: ClickIcon, ...props }));
+export const ClickItemSuffix = (props) => (_jsx(ClickItemSuffixCommon, { trailingClickIcon: keyboardArrowRight, IconComponent: Icon, SpinnerComponent: Spinner, ...props }));

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./C
 export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
+export { DataAgent } from "./DataAgent/DataAgentApollo";
 export { Divider } from "./Divider/DividerApollo";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
 export { CardCheckbox, 

package/dist/index.js

@@ -10,6 +10,7 @@ export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageApol
 export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
+export { DataAgent } from "./DataAgent/DataAgentApollo";
 export { Divider } from "./Divider/DividerApollo";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
 export { CardCheckbox, 

package/dist/indexLF.d.ts

@@ -10,6 +10,7 @@ export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./C
 export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
+export { DataAgent } from "./DataAgent/DataAgentLF";
 export { Divider } from "./Divider/DividerLF";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
 export { CardCheckbox, 

package/dist/indexLF.js

@@ -10,6 +10,7 @@ export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageLF";
 export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
+export { DataAgent } from "./DataAgent/DataAgentLF";
 export { Divider } from "./Divider/DividerLF";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
 export { CardCheckbox, 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.385",
+  "version": "1.0.5-alpha.387",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.385",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.385",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.387",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.387",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },