@axa-fr/canopee-react 1.1.1-alpha.9 → 1.2.0

package/dist/client.d.ts

@@ -59,3 +59,5 @@ export { Toggle } from "./prospect-client/Toggle/ToggleLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Card, type CardProps } from "./prospect-client/Card/CardLF";
+export { List, type ListProps } from "./prospect-client/List/List/ListLF";
+export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";

package/dist/client.js

@@ -58,3 +58,5 @@ export { Toggle } from "./prospect-client/Toggle/ToggleLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Card } from "./prospect-client/Card/CardLF";
+export { List } from "./prospect-client/List/List/ListLF";
+export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";

package/dist/prospect-client/ContentItemDuoAction/ContentItemDuoActionCommon.d.ts

@@ -12,7 +12,7 @@ export type ContentItemDuoActionToggleProps = {
     ContentItemMonoComponent: ComponentType<ContentItemProps>;
     contentItemProps: ContentItemProps;
     ToggleComponent: ComponentType<ToggleProps>;
-    toggleProps: ToggleProps;
+    toggleProps?: ToggleProps;
 };
 export type ContentItemDuoActionButtonsProps = {
     className?: string;

package/dist/prospect-client/LevelSelector/LevelSelectorApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/prospect/LevelSelector/LevelSelectorApollo.css";
+import { type LevelSelectorProps } from "./LevelSelectorCommon";
+export declare const LevelSelector: (props: LevelSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export { type LevelSelectorProps };

package/dist/prospect-client/LevelSelector/LevelSelectorApollo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/LevelSelector/LevelSelectorApollo.css";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { Card } from "../Card/CardApollo";
+import { LevelSelectorCommon, } from "./LevelSelectorCommon";
+export const LevelSelector = (props) => {
+    return (_jsx(LevelSelectorCommon, { ...props, ClickIconComponent: ClickIcon, CardComponent: Card }));
+};

package/dist/prospect-client/LevelSelector/LevelSelectorCommon.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ComponentType } from "react";
+import { ClickIcon } from "../ClickIcon/ClickIconCommon";
+import { CardCommon } from "../Card/CardCommon";
+export type LevelSelectorProps = {
+    title: string;
+    description?: string;
+    value?: number;
+    stepsCount?: 1 | 2 | 3;
+    minusAriaLabel?: string;
+    plusAriaLabel?: string;
+    onChange?: (value: number) => void;
+};
+type LevelSelectorCommonProps = LevelSelectorProps & {
+    ClickIconComponent: ComponentType<ComponentProps<typeof ClickIcon>>;
+    CardComponent: ComponentType<ComponentProps<typeof CardCommon>>;
+};
+export declare const LevelSelectorCommon: ({ title, description, value, stepsCount, ClickIconComponent, CardComponent, minusAriaLabel, plusAriaLabel, onChange, }: LevelSelectorCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/LevelSelector/LevelSelectorCommon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import add from "@material-symbols/svg-400/rounded/add-fill.svg";
+import remove from "@material-symbols/svg-400/rounded/remove-fill.svg";
+import { useId } from "react";
+export const LevelSelectorCommon = ({ title, description, value = 0, stepsCount = 2, ClickIconComponent, CardComponent, minusAriaLabel = "Diminuer le niveau", plusAriaLabel = "Augmenter le niveau", onChange, }) => {
+    const levelSelectorId = useId();
+    const stepsArray = Array.from({ length: stepsCount }, (_, index) => index + 1);
+    return (_jsxs(CardComponent, { as: "fieldset", role: "radiogroup", className: "af-level-selector", children: [Boolean(title) && (_jsx("legend", { className: "af-level-selector__title", children: title })), _jsxs("div", { className: "af-level-selector__content", children: [_jsx(ClickIconComponent, { "aria-label": minusAriaLabel, src: remove, onClick: () => onChange?.(value - 1), disabled: value === 0 }), _jsx("div", { className: "af-level-selector__group", children: stepsArray.map((step) => (_jsx("label", { className: `af-level-selector__radio ${step <= value ? "af-level-selector__active" : ""}`, "aria-label": `Niveau ${step}`, children: _jsx("input", { type: "radio", name: `level-selector-${levelSelectorId}`, "aria-describedby": `level-selector-${levelSelectorId}-description`, value: step, checked: step === value, onChange: () => onChange?.(step) }) }, step))) }), _jsx(ClickIconComponent, { "aria-label": plusAriaLabel, src: add, onClick: () => onChange?.(value + 1), disabled: value === stepsCount })] }), Boolean(description) && (_jsx("span", { id: `level-selector-${levelSelectorId}-description`, className: "af-level-selector__description", "aria-live": "polite", children: description }))] }));
+};

package/dist/prospect-client/LevelSelector/LevelSelectorLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/client/LevelSelector/LevelSelectorLF.css";
+import { type LevelSelectorProps } from "./LevelSelectorCommon";
+export declare const LevelSelector: (props: LevelSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export { type LevelSelectorProps };

package/dist/prospect-client/LevelSelector/LevelSelectorLF.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/LevelSelector/LevelSelectorLF.css";
+import { ClickIcon } from "../ClickIcon/ClickIconLF";
+import { Card } from "../Card/CardLF";
+import { LevelSelectorCommon, } from "./LevelSelectorCommon";
+export const LevelSelector = (props) => {
+    return (_jsx(LevelSelectorCommon, { ...props, ClickIconComponent: ClickIcon, CardComponent: Card }));
+};

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/dist/prospect-client/List/List/ListApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/prospect/List/List/ListApollo.css";
+import { type ListProps } from "./ListCommon";
+export { type ListProps } from "./ListCommon";
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/List/List/ListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/List/List/ListApollo.css";
+import { Card } from "../../Card/CardApollo";
+import { ListCommon } from "./ListCommon";
+export const List = (props) => (_jsx(ListCommon, { ...props, CardComponent: Card }));

package/dist/prospect-client/List/List/ListCommon.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ComponentType } from "react";
+import { CardCommon as Card, type CardCommonProps } from "../../Card/CardCommon";
+export type ListProps = CardCommonProps<"ul" | "ol">;
+type ListPropsCommon = ListProps & {
+    CardComponent: ComponentType<ComponentProps<typeof Card>>;
+};
+export declare const ListCommon: ({ children, CardComponent, as, ...listProps }: ListPropsCommon) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/List/List/ListCommon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { generateId } from "../../utilities/generateId";
+export const ListCommon = ({ children, CardComponent, as = "ul", ...listProps }) => (_jsx(CardComponent, { as: as, ...listProps, children: Children.toArray(children).map((child) => (_jsx("li", { children: child }, generateId(child)))) }));

package/dist/prospect-client/List/List/ListLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/client/List/List/ListLF.css";
+import { type ListProps } from "./ListCommon";
+export { type ListProps } from "./ListCommon";
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/List/List/ListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/List/List/ListLF.css";
+import { Card } from "../../Card/CardLF";
+import { ListCommon } from "./ListCommon";
+export const List = (props) => (_jsx(ListCommon, { ...props, CardComponent: Card }));

package/dist/prospect-client/Pagination/PaginationCommon.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ComponentType, type ComponentPropsWithoutRef } from "react";
-import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ClickIcon } from "../ClickIcon/ClickIconCommon";
 import { ItemPaginationCommon } from "./ItemPagination/ItemPaginationCommon";
 import { type getItemsProps } from "./Pagination.helper";
 export type PaginationProps = getItemsProps & ComponentPropsWithoutRef<"nav"> & {

package/dist/prospect-client/Pagination/PaginationCommon.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import chevronBackward from "@material-symbols/svg-400/rounded/chevron_backward.svg";
 import chevronForward from "@material-symbols/svg-400/rounded/chevron_forward.svg";
 import { getClassName } from "../utilities/getClassName";
-import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ClickIcon } from "../ClickIcon/ClickIconCommon";
 import { ELLIPSIS, } from "./ItemPagination/ItemPaginationCommon";
 import { getItems } from "./Pagination.helper";
 export const PaginationCommon = ({ numberPages = 1, onChangePage, className, currentPage = 1, asItem, hidePrevNext = false, "aria-label": ariaLabel = "Pagination", ItemPaginationComponent, prevButtonProps, nextButtonProps, }) => {

package/dist/prospect.d.ts

@@ -55,3 +55,5 @@ export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
 export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
 export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
+export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
+export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";

package/dist/prospect.js

@@ -54,3 +54,5 @@ export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
 export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
 export { Card } from "./prospect-client/Card/CardApollo";
+export { List } from "./prospect-client/List/List/ListApollo";
+export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.1.1-alpha.9",
+  "version": "1.2.0",
   "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.9",
+    "@axa-fr/canopee-css": "1.2.0",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"