@axa-fr/canopee-react 1.1.0 → 1.1.1-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/client.d.ts +1 -0
  2. package/dist/client.js +1 -0
  3. package/dist/prospect-client/Card/CardApollo.d.ts +2 -0
  4. package/dist/prospect-client/Card/CardApollo.js +2 -0
  5. package/dist/prospect-client/Card/CardCommon.d.ts +4 -0
  6. package/dist/prospect-client/Card/CardCommon.js +9 -0
  7. package/dist/prospect-client/Card/CardLF.d.ts +2 -0
  8. package/dist/prospect-client/Card/CardLF.js +2 -0
  9. package/dist/prospect-client/Form/Dropdown/DropdownCommon.d.ts +2 -3
  10. package/dist/prospect-client/Form/Dropdown/DropdownCommon.js +3 -3
  11. package/dist/prospect-client/Form/InputDate/InputDate.helper.d.ts +1 -1
  12. package/dist/prospect-client/Form/InputDate/InputDateAtom.d.ts +3 -3
  13. package/dist/prospect-client/Form/InputDate/InputDateAtom.js +1 -1
  14. package/dist/prospect-client/Form/InputDate/InputDateCommon.d.ts +3 -2
  15. package/dist/prospect-client/Form/InputDate/InputDateCommon.js +1 -1
  16. package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.d.ts +4 -4
  17. package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.js +2 -2
  18. package/dist/prospect-client/Form/InputText/InputTextCommon.d.ts +2 -1
  19. package/dist/prospect-client/Form/InputText/InputTextCommon.js +2 -2
  20. package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionCommon.d.ts +3 -32
  21. package/dist/prospect-client/Form/TextArea/TextAreaCommon.d.ts +3 -3
  22. package/dist/prospect-client/Form/TextArea/TextAreaCommon.js +2 -2
  23. package/dist/prospect-client/Heading/types.d.ts +1 -1
  24. package/dist/prospect.d.ts +1 -0
  25. package/dist/prospect.js +1 -0
  26. package/package.json +3 -2
package/dist/client.d.ts CHANGED
@@ -58,3 +58,4 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
58
58
  export { Toggle } from "./prospect-client/Toggle/ToggleLF";
59
59
  export { Pagination } from "./prospect-client/Pagination/PaginationLF";
60
60
  export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
61
+ export { Card, type CardProps } from "./prospect-client/Card/CardLF";
package/dist/client.js CHANGED
@@ -57,3 +57,4 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
57
57
  export { Toggle } from "./prospect-client/Toggle/ToggleLF";
58
58
  export { Pagination } from "./prospect-client/Pagination/PaginationLF";
59
59
  export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
60
+ export { Card } from "./prospect-client/Card/CardLF";
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/canopee-css/prospect/Card/CardApollo.css";
2
+ export { type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/canopee-css/prospect/Card/CardApollo.css";
2
+ export { CardCommon as Card, } from "./CardCommon";
@@ -0,0 +1,4 @@
1
+ import type { ComponentProps, ElementType } from "react";
2
+ import { type PolymorphicComponent } from "../utilities/types/PolymorphicComponent";
3
+ export type CardCommonProps<T extends ElementType> = PolymorphicComponent<T, ComponentProps<"div">>;
4
+ export declare const CardCommon: <T extends ElementType = "div">({ as, children, className, ...props }: CardCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { getClassName } from "../utilities/getClassName";
3
+ export const CardCommon = ({ as, children, className, ...props }) => {
4
+ const Component = as || "div";
5
+ return (_jsx(Component, { className: getClassName({
6
+ baseClassName: "af-card",
7
+ className,
8
+ }), ...props, children: children }));
9
+ };
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/canopee-css/client/Card/CardLF.css";
2
+ export { type CardCommonProps as CardProps, CardCommon as Card, } from "./CardCommon";
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/canopee-css/client/Card/CardLF.css";
2
+ export { CardCommon as Card, } from "./CardCommon";
@@ -4,7 +4,7 @@ import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCo
4
4
  export type DropdownProps = ComponentPropsWithRef<"select"> & {
5
5
  id?: string;
6
6
  classModifier?: string;
7
- label?: ItemLabelProps["label"];
7
+ label?: ItemLabelProps["children"];
8
8
  /**
9
9
  * @deprecated Use `message` and messageType instead.
10
10
  */
@@ -14,10 +14,9 @@ export type DropdownProps = ComponentPropsWithRef<"select"> & {
14
14
  */
15
15
  success?: string;
16
16
  placeholder?: string;
17
- buttonLabel?: string;
18
17
  description?: string;
19
18
  helper?: string;
20
- } & Partial<ItemLabelProps & ItemMessageProps>;
19
+ } & Pick<ItemLabelProps, "buttonLabel" | "moreButtonLabel" | "onButtonClick" | "onMoreButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
21
20
  type DropdownCommonProps = DropdownProps & {
22
21
  ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
23
22
  ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
@@ -1,13 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useId, } from "react";
3
2
  import classNames from "classnames";
4
- const DropdownCommon = forwardRef(({ id, required, label, error, placeholder, children, helper, success, message, messageType, description, buttonLabel, onButtonClick, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, ...otherProps }, inputRef) => {
3
+ import { forwardRef, useId, } from "react";
4
+ const DropdownCommon = forwardRef(({ id, required, label, error, placeholder, children, helper, success, message, messageType, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, ...otherProps }, inputRef) => {
5
5
  const idMessage = useId();
6
6
  let inputId = useId();
7
7
  inputId = id || inputId;
8
8
  const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
9
9
  const classname = classNames("af-form__dropdown-input", hasError && "af-form__dropdown-input--error");
10
- return (_jsxs("div", { className: "af-form__dropdown-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && _jsx("option", { value: "", children: placeholder }), children] }), helper ? (_jsx("span", { className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
10
+ return (_jsxs("div", { className: "af-form__dropdown-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && _jsx("option", { value: "", children: placeholder }), children] }), helper ? (_jsx("span", { className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
11
11
  });
12
12
  DropdownCommon.displayName = "Dropdown";
13
13
  export { DropdownCommon };
@@ -1,4 +1,4 @@
1
- export declare const formatInputDateValue: (value?: Date | string) => string | undefined;
1
+ export declare const formatInputDateValue: (value?: Date | string | number) => string | number | undefined;
2
2
  export declare const isValidDayDecimal: (char: string, index: number) => boolean;
3
3
  export declare const isValidDay: (day: number, index: number) => boolean;
4
4
  export declare const isValidMonthDecimal: (char: string, index: number) => boolean;
@@ -1,9 +1,9 @@
1
- import { type ComponentPropsWithRef } from "react";
1
+ import { type ComponentProps, type ComponentPropsWithRef } from "react";
2
2
  export type InputDateAtomProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
3
3
  defaultValue?: Date | string;
4
4
  value?: Date | string;
5
- min?: Date | string;
6
- max?: Date | string;
5
+ min?: ComponentProps<"input">["min"] | Date;
6
+ max?: ComponentProps<"input">["max"] | Date;
7
7
  };
8
8
  declare const InputDateAtom: import("react").ForwardRefExoticComponent<Omit<InputDateAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
9
9
  export { InputDateAtom };
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
2
+ import { forwardRef, } from "react";
3
3
  import { formatInputDateValue } from "./InputDate.helper";
4
4
  const InputDateAtom = forwardRef(({ defaultValue, value, min, max, ...otherProps }, inputRef) => (_jsx("input", { ...otherProps, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), min: formatInputDateValue(min), max: formatInputDateValue(max) })));
5
5
  InputDateAtom.displayName = "InputDateAtom";
@@ -1,12 +1,13 @@
1
1
  import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
2
2
  import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
3
3
  import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
4
+ import { type InputDateAtomProps } from "./InputDateAtom";
4
5
  export type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
5
6
  classModifier?: string;
6
7
  defaultValue?: Date | string;
7
8
  value?: Date | string;
8
- min?: Date | string;
9
- max?: Date | string;
9
+ min?: InputDateAtomProps["min"];
10
+ max?: InputDateAtomProps["max"];
10
11
  helper?: string;
11
12
  /**
12
13
  * @deprecated Use `message` and messageType instead.
@@ -24,7 +24,7 @@ const InputDateCommon = forwardRef(({ className, classModifier = "", helper, err
24
24
  const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
25
25
  const ariaErrormessage = hasError ? idMessage : undefined;
26
26
  const ariaInvalid = hasError || undefined;
27
- return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: buttonLabel || moreButtonLabel, onMoreButtonClick: onButtonClick || onMoreButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
27
+ return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
28
28
  });
29
29
  InputDateCommon.displayName = "InputDate";
30
30
  export { InputDateCommon };
@@ -1,9 +1,9 @@
1
1
  import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
2
2
  import { SingleValue } from "react-select";
3
+ import { Icon } from "../../Icon/IconCommon";
4
+ import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
3
5
  import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
4
6
  import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
5
- import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
6
- import { Icon } from "../../Icon/IconCommon";
7
7
  import { type OptionType } from "./InputPhone.types";
8
8
  export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
9
9
  classModifier?: string;
@@ -23,8 +23,8 @@ export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
23
23
  onChangeSelect?: (value: SingleValue<OptionType>) => void;
24
24
  onChangeInput?: (value: string) => void;
25
25
  mask?: (value: string) => string;
26
- label: ItemLabelProps["label"];
27
- } & Partial<ItemLabelProps & ItemMessageProps>;
26
+ label: ItemLabelProps["children"];
27
+ } & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
28
28
  type InputPhoneCommonProps = InputPhoneProps & {
29
29
  ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
30
30
  ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useId, } from "react";
3
3
  import { CountryCodeSelect } from "./CountryCodeSelect";
4
4
  import { maskFrenchPhoneNumber } from "./maskFrenchPhoneNumber";
5
- const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, defaultCountry, showSelect, disabled, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
5
+ const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, defaultCountry, showSelect, disabled, label, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
6
6
  let inputId = useId();
7
7
  inputId = otherProps.id || inputId;
8
8
  const idMessage = useId();
@@ -24,7 +24,7 @@ const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, er
24
24
  const maskedValue = mask(rawValue);
25
25
  onChangeInput?.(maskedValue);
26
26
  };
27
- return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect ? (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })) : null, _jsx(InputTextComponent, { ...otherProps, className: ["af-form__input-phone", className]
27
+ return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect ? (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })) : null, _jsx(InputTextComponent, { ...otherProps, className: ["af-form__input-phone", className]
28
28
  .filter(Boolean)
29
29
  .join(" "), classModifier: classModifier, ref: inputRef, error: hasError ? messageType || error : undefined, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idMessage: hasError ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, id: inputId })] }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
30
30
  });
@@ -5,6 +5,7 @@ import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCo
5
5
  export type InputTextProps = ComponentPropsWithRef<"input"> & {
6
6
  unit?: ReactNode;
7
7
  classModifier?: string;
8
+ label?: ItemLabelProps["children"];
8
9
  helper?: string;
9
10
  /**
10
11
  * @deprecated Use `message` and messageType instead.
@@ -14,7 +15,7 @@ export type InputTextProps = ComponentPropsWithRef<"input"> & {
14
15
  * @deprecated Use `message` and messageType instead.
15
16
  */
16
17
  success?: string;
17
- } & Partial<ItemLabelProps & ItemMessageProps>;
18
+ } & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
18
19
  type InputTextCommonProps = InputTextProps & {
19
20
  ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
20
21
  ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useId, } from "react";
3
- const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, ...otherProps }, inputRef) => {
3
+ const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, ...otherProps }, inputRef) => {
4
4
  let inputId = useId();
5
5
  inputId = otherProps.id || inputId;
6
6
  const idMessage = useId();
7
7
  const idHelp = useId();
8
8
  const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
9
- return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
9
+ return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
10
10
  ? messageType || error
11
11
  : undefined, required: required, idMessage: message || error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
12
12
  });
@@ -7,44 +7,15 @@ type BaseCardRadioOptionProps = Omit<ComponentProps<typeof Radio>, "size"> & {
7
7
  description?: ReactNode;
8
8
  subtitle?: ReactNode;
9
9
  };
10
- export type CardRadioOptionProps = (BaseCardRadioOptionProps & {
10
+ export type CardRadioOptionProps = BaseCardRadioOptionProps & {
11
11
  type?: "vertical" | "horizontal";
12
12
  icon?: ComponentProps<typeof IconCommon>["src"];
13
- src?: undefined;
14
- basePictureProps?: undefined;
15
- }) | (BaseCardRadioOptionProps & {
16
- type: "horizontal";
17
13
  src?: ComponentProps<typeof BasePicture>["src"];
18
14
  basePictureProps?: Omit<ComponentProps<typeof BasePicture>, "src">;
19
- icon?: undefined;
20
- });
15
+ };
21
16
  export type CardRadioOptionCommonProps = CardRadioOptionProps & {
22
17
  RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
23
18
  IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
24
19
  };
25
- export declare const CardRadioOptionCommon: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<import("../Radio/RadioCommon").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "size"> & {
26
- label: ReactNode;
27
- description?: ReactNode;
28
- subtitle?: ReactNode;
29
- } & {
30
- type?: "vertical" | "horizontal";
31
- icon?: ComponentProps<typeof IconCommon>["src"];
32
- src?: undefined;
33
- basePictureProps?: undefined;
34
- } & {
35
- RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
36
- IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
37
- }, "ref"> | Omit<Omit<Omit<import("../Radio/RadioCommon").RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "size"> & {
38
- label: ReactNode;
39
- description?: ReactNode;
40
- subtitle?: ReactNode;
41
- } & {
42
- type: "horizontal";
43
- src?: ComponentProps<typeof BasePicture>["src"];
44
- basePictureProps?: Omit<ComponentProps<typeof BasePicture>, "src">;
45
- icon?: undefined;
46
- } & {
47
- RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
48
- IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
49
- }, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
20
+ export declare const CardRadioOptionCommon: import("react").ForwardRefExoticComponent<Omit<CardRadioOptionCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
50
21
  export {};
@@ -1,14 +1,14 @@
1
- import { type ComponentProps, ComponentPropsWithRef, type ComponentType, MouseEventHandler } from "react";
1
+ import { type ComponentProps, ComponentPropsWithRef, type ComponentType } from "react";
2
2
  import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
3
3
  import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
4
4
  export type TextAreaProps = ComponentPropsWithRef<"textarea"> & {
5
+ label?: ItemLabelProps["children"];
5
6
  helper?: string;
6
7
  /**
7
8
  * @deprecated Use `message` and messageType instead.
8
9
  */
9
10
  error?: string;
10
- onButtonClick?: MouseEventHandler<HTMLButtonElement>;
11
- } & Partial<ItemMessageProps & ItemLabelProps>;
11
+ } & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
12
12
  type TextAreaCommonProps = TextAreaProps & {
13
13
  ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
14
14
  ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useId, } from "react";
3
- const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, onButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", ...inputProps }, inputRef) => {
3
+ const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", ...inputProps }, inputRef) => {
4
4
  const generatedId = useId();
5
5
  const inputId = id ?? generatedId;
6
6
  const helperId = `${inputId}-helper`;
@@ -8,7 +8,7 @@ const TextAreaCommon = forwardRef(({ id, className, label, description, helper,
8
8
  const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
9
9
  return (_jsxs("div", { className: ["af-form__input-container", className]
10
10
  .filter(Boolean)
11
- .join(" "), children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx("textarea", { id: inputId, className: "af-form__textarea", ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
11
+ .join(" "), children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: "af-form__textarea", ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
12
12
  });
13
13
  TextAreaCommon.displayName = "TextArea";
14
14
  export { TextAreaCommon };
@@ -1,6 +1,6 @@
1
1
  import type { TagProps } from "../Tag/TagCommon";
2
2
  import type { HeadingCommonProps } from "./HeadingCommon";
3
- export type HeadingLevel = 1 | 2 | 3;
3
+ export type HeadingLevel = 1 | 2 | 3 | 4;
4
4
  export type HeadingProps = HeadingCommonProps & {
5
5
  tagProps?: Omit<TagProps, "children">;
6
6
  };
@@ -54,3 +54,4 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
54
54
  export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
55
55
  export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
56
56
  export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
57
+ export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
package/dist/prospect.js CHANGED
@@ -53,3 +53,4 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
53
53
  export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
54
54
  export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
55
55
  export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationApollo";
56
+ export { Card } from "./prospect-client/Card/CardApollo";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/canopee-react",
3
- "version": "1.1.0",
3
+ "version": "1.1.1-alpha.10",
4
4
  "description": "Package React - Design System Canopée",
5
5
  "exports": {
6
6
  "./distributeur": {
@@ -21,6 +21,7 @@
21
21
  ],
22
22
  "scripts": {
23
23
  "prebuild": "rimraf dist",
24
+ "dev": "tsc -p tsconfig.build.json --watch",
24
25
  "build": "tsc -p tsconfig.build.json",
25
26
  "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
26
27
  "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
@@ -44,7 +45,7 @@
44
45
  },
45
46
  "homepage": "https://github.com/AxaFrance/design-system#readme",
46
47
  "peerDependencies": {
47
- "@axa-fr/canopee-css": "1.1.0",
48
+ "@axa-fr/canopee-css": "1.1.1-alpha.10",
48
49
  "@material-symbols/svg-400": ">= 0.19.0",
49
50
  "@material-symbols/svg-700": ">= 0.19.0",
50
51
  "react": ">= 18"