@axa-fr/canopee-react 1.1.1-alpha.22 → 1.1.1-alpha.24

package/dist/prospect-client/List/ContentItemDuo/ContentItemDuoCommon.d.ts

@@ -1,16 +1,24 @@
 import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 import type { ButtonProps } from "../../Button/ButtonCommon";
+type ContentItemDuoPositions = {
+    position?: "horizontal";
+    size?: "small" | "large";
+} | {
+    size?: "large";
+    position: "vertical";
+};
 export type ContentItemDuoProps = {
-    label: string;
+    label: ReactNode;
     value: ReactNode;
-    isVertical?: boolean;
-    className?: string;
-    classModifier?: string;
     buttonText?: string;
     onButtonClick?: () => void;
-} & ComponentProps<"div">;
+    /** @deprecated Use `position` instead */
+    isVertical?: boolean;
+    /** @deprecated Use `size` or `className` instead */
+    classModifier?: string;
+} & ContentItemDuoPositions & ComponentProps<"div">;
 type ContentItemDuoCommonProps = ContentItemDuoProps & {
     ButtonComponent: ComponentType<ButtonProps>;
 };
-export declare const ContentItemDuoCommon: ({ label, value, isVertical, className, classModifier, buttonText, onButtonClick, ButtonComponent, ...containerProps }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentItemDuoCommon: ({ label, value, position, size, className, classModifier, isVertical, buttonText, onButtonClick, ButtonComponent, ...containerProps }: ContentItemDuoCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/List/ContentItemDuo/ContentItemDuoCommon.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, } from "react";
-import { getComponentClassName } from "../../utilities/getComponentClassName";
-export const ContentItemDuoCommon = ({ label, value, isVertical = false, className, classModifier, buttonText, onButtonClick, ButtonComponent, ...containerProps }) => {
-    const componentClassName = useMemo(() => {
-        const classModifiers = [classModifier];
-        if (isVertical) {
-            classModifiers.push("vertical");
-        }
-        return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
-    }, [classModifier, className, isVertical]);
-    return (_jsxs("div", { className: componentClassName, ...containerProps, children: [_jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText ? (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(ButtonComponent, { variant: "ghost", onClick: onButtonClick, children: buttonText }) })) : null] }));
+import { getClassName } from "../../utilities/getClassName";
+export const ContentItemDuoCommon = ({ label, value, position = "horizontal", size = "large", className, classModifier, isVertical, buttonText, onButtonClick, ButtonComponent, ...containerProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-content-item-duo",
+        className,
+        modifiers: [
+            isVertical ? "vertical" : position,
+            size === "small" && size,
+            classModifier,
+        ],
+    });
+    return (_jsxs("div", { className: componentClassName, ...containerProps, children: [_jsx("dt", { className: "af-content-item-duo__label", children: label }), _jsx("dd", { className: "af-content-item-duo__value", children: value }), Boolean(buttonText && onButtonClick) && (_jsx(ButtonComponent, { className: "af-content-item-duo__button", variant: "ghost", onClick: onButtonClick, children: buttonText }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.1.1-alpha.22",
+  "version": "1.1.1-alpha.24",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.1.1-alpha.22",
+    "@axa-fr/canopee-css": "1.1.1-alpha.24",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"