@axa-fr/canopee-react 2.0.0-alpha.70 → 2.0.0-alpha.71
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.
- package/dist/distributeur/Card/BaseCard.d.ts +14 -0
- package/dist/distributeur/Card/BaseCard.js +23 -0
- package/dist/distributeur/CardButton/CardButton.d.ts +18 -0
- package/dist/distributeur/CardButton/CardButton.js +12 -0
- package/dist/distributeur/Form/Experimental/InputContainer.d.ts +4 -1
- package/dist/distributeur/Form/Experimental/InputContainer.js +2 -2
- package/dist/distributeur/Form/Experimental/InputUnit.d.ts +1 -1
- package/dist/distributeur/Form/Experimental/InputUnit.js +1 -1
- package/dist/distributeur/Form/Experimental/ItemMessage.d.ts +1 -1
- package/dist/distributeur/Form/Experimental/ItemMessage.js +1 -1
- package/dist/distributeur/Form/Experimental/Label.d.ts +1 -2
- package/dist/distributeur/Form/Experimental/Legend.d.ts +12 -0
- package/dist/distributeur/Form/Experimental/Legend.js +3 -0
- package/dist/distributeur/Form/Experimental/Radio/AddRadioCard.d.ts +7 -0
- package/dist/distributeur/Form/Experimental/Radio/AddRadioCard.js +14 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioButton.d.ts +13 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioButton.js +3 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioCard.d.ts +10 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioCard.js +13 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioGroup.d.ts +8 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioGroup.js +10 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioInput.d.ts +18 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioInput.js +34 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioItem.d.ts +4 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioItem.js +10 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioText.d.ts +6 -0
- package/dist/distributeur/Form/Experimental/Radio/RadioText.js +3 -0
- package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.d.ts +8 -0
- package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.js +7 -0
- package/dist/distributeur/Form/Experimental/index.d.ts +6 -0
- package/dist/distributeur/Form/Experimental/index.js +6 -0
- package/dist/distributeur/Form/Experimental/types.d.ts +1 -1
- package/dist/distributeur/Form/Experimental/useInput.hook.js +1 -1
- package/dist/distributeur-experimental.d.ts +2 -0
- package/dist/distributeur-experimental.js +2 -0
- package/dist/distributeur.d.ts +2 -0
- package/dist/distributeur.js +2 -0
- package/package.json +2 -2
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, LabelHTMLAttributes } from "react";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Card/BaseCard.css";
|
|
3
|
+
type BaseCardOwnProps = {
|
|
4
|
+
orientation?: "horizontal" | "vertical";
|
|
5
|
+
};
|
|
6
|
+
type BaseCardButtonProps = BaseCardOwnProps & ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
7
|
+
component?: "button";
|
|
8
|
+
};
|
|
9
|
+
type BaseCardLabelProps = BaseCardOwnProps & LabelHTMLAttributes<HTMLLabelElement> & {
|
|
10
|
+
component: "label";
|
|
11
|
+
};
|
|
12
|
+
export type BaseCardProps = BaseCardButtonProps | BaseCardLabelProps;
|
|
13
|
+
export declare const BaseCard: (props: BaseCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { getClassName } from "../utilities/helpers/getClassName";
|
|
3
|
+
import "@axa-fr/canopee-css/distributeur/Card/BaseCard.css";
|
|
4
|
+
const isLabelCard = (props) => props.component === "label";
|
|
5
|
+
function stripCardInternalProps(props) {
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
|
+
const { component, className, children, orientation, ...rest } = props;
|
|
8
|
+
return rest;
|
|
9
|
+
}
|
|
10
|
+
export const BaseCard = (props) => {
|
|
11
|
+
const { className, children, orientation } = props;
|
|
12
|
+
const finalClassName = getClassName({
|
|
13
|
+
baseClassName: "af-basecard",
|
|
14
|
+
modifiers: [orientation],
|
|
15
|
+
className,
|
|
16
|
+
});
|
|
17
|
+
if (isLabelCard(props)) {
|
|
18
|
+
const labelProps = stripCardInternalProps(props);
|
|
19
|
+
return (_jsx("label", { className: finalClassName, ...labelProps, children: children }));
|
|
20
|
+
}
|
|
21
|
+
const { type, ...buttonProps } = stripCardInternalProps(props);
|
|
22
|
+
return (_jsx("button", { type: type === "submit" ? "submit" : "button", className: finalClassName, ...buttonProps, children: children }));
|
|
23
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import { type BaseCardProps } from "../Card/BaseCard";
|
|
3
|
+
import "@axa-fr/canopee-css/distributeur/CardButton/CardButton.css";
|
|
4
|
+
type CardButtonOwnProps = {
|
|
5
|
+
className?: string;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
orientation?: "horizontal" | "vertical";
|
|
9
|
+
};
|
|
10
|
+
type CardButtonAsButtonProps = CardButtonOwnProps & Omit<Extract<BaseCardProps, {
|
|
11
|
+
component?: "button";
|
|
12
|
+
}>, "className" | "children">;
|
|
13
|
+
type CardButtonAsLabelProps = CardButtonOwnProps & Omit<Extract<BaseCardProps, {
|
|
14
|
+
component: "label";
|
|
15
|
+
}>, "className" | "children">;
|
|
16
|
+
export type CardButtonProps = CardButtonAsButtonProps | CardButtonAsLabelProps;
|
|
17
|
+
export declare const CardButton: ({ className, children, icon, orientation, ...props }: CardButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { BaseCard } from "../Card/BaseCard";
|
|
3
|
+
import "@axa-fr/canopee-css/distributeur/CardButton/CardButton.css";
|
|
4
|
+
import { getClassName } from "../utilities/helpers/getClassName";
|
|
5
|
+
export const CardButton = ({ className, children = "Card Button", icon = null, orientation = "horizontal", ...props }) => {
|
|
6
|
+
const finalClassName = getClassName({
|
|
7
|
+
baseClassName: "af-card-button",
|
|
8
|
+
className,
|
|
9
|
+
modifiers: [orientation],
|
|
10
|
+
});
|
|
11
|
+
return (_jsxs(BaseCard, { className: finalClassName, ...props, children: [icon, children] }));
|
|
12
|
+
};
|
|
@@ -3,6 +3,9 @@ import type { PropsWithChildren } from "react";
|
|
|
3
3
|
type InputContainerProps = PropsWithChildren<{
|
|
4
4
|
vertical?: boolean;
|
|
5
5
|
className?: string;
|
|
6
|
+
component?: "div" | "fieldset";
|
|
7
|
+
"aria-labelledby"?: string;
|
|
8
|
+
"aria-describedby"?: string;
|
|
6
9
|
}>;
|
|
7
|
-
export declare const InputContainer: ({ children, vertical, className, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const InputContainer: ({ children, vertical, className, component: Component, ...props }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputContainer.css";
|
|
3
3
|
import classNames from "classnames";
|
|
4
|
-
export const InputContainer = ({ children, vertical, className, }) => {
|
|
4
|
+
export const InputContainer = ({ children, vertical, className, component: Component = "div", ...props }) => {
|
|
5
5
|
const containerClass = classNames("af-input__container", { "af-input__container--vertical": vertical }, className);
|
|
6
|
-
return _jsx(
|
|
6
|
+
return (_jsx(Component, { className: containerClass, ...props, children: children }));
|
|
7
7
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
|
|
2
2
|
import type { PropsWithChildren } from "react";
|
|
3
|
-
export declare const InputUnit: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const InputUnit: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
|
|
3
|
-
export const InputUnit = ({ children }) =>
|
|
3
|
+
export const InputUnit = ({ children }) => children ? _jsx("span", { className: "af-input__unit", children: children }) : null;
|
|
@@ -24,5 +24,5 @@ type Props = {
|
|
|
24
24
|
*/
|
|
25
25
|
id?: string;
|
|
26
26
|
};
|
|
27
|
-
export declare const ItemMessage: ({ variant, children, className, id }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare const ItemMessage: ({ variant, children, className, id }: Props) => import("react/jsx-runtime").JSX.Element | null;
|
|
28
28
|
export {};
|
|
@@ -15,5 +15,5 @@ export const ItemMessage = ({ variant, children, className, id }) => {
|
|
|
15
15
|
modifiers: [variant],
|
|
16
16
|
});
|
|
17
17
|
const icon = variant ? iconByVariant[variant] : null;
|
|
18
|
-
return (_jsxs("div", { className: componentClassName, id: id, children: [icon ? _jsx(Svg, { src: icon, className: "af-item-message__icon" }) : null, children] }));
|
|
18
|
+
return children ? (_jsxs("div", { className: componentClassName, id: id, children: [icon ? _jsx(Svg, { src: icon, className: "af-item-message__icon" }) : null, children] })) : null;
|
|
19
19
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
|
|
2
2
|
import type { ComponentProps } from "react";
|
|
3
|
-
type LabelProps = ComponentProps<"label"> & {
|
|
3
|
+
export type LabelProps = ComponentProps<"label"> & {
|
|
4
4
|
/**
|
|
5
5
|
* Whether the label is required or not.
|
|
6
6
|
* This will add a `*` after the label text.
|
|
@@ -10,4 +10,3 @@ type LabelProps = ComponentProps<"label"> & {
|
|
|
10
10
|
required?: boolean;
|
|
11
11
|
};
|
|
12
12
|
export declare const Label: ({ children, required, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
|
|
2
|
+
import type { ComponentProps } from "react";
|
|
3
|
+
export type LegendProps = ComponentProps<"span"> & {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the label is required or not.
|
|
6
|
+
* This will add a `*` after the label text.
|
|
7
|
+
* This is purely presentational and does not enforce any validation logic.
|
|
8
|
+
* @default false
|
|
9
|
+
*/
|
|
10
|
+
required?: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const Legend: ({ children, required, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
|
|
3
|
+
export const Legend = ({ children, required = false, ...props }) => (_jsxs("span", { className: "af-label", ...props, children: [children, required ? (_jsx("span", { className: "af-label__required", "aria-hidden": true, children: "*" })) : null] }));
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio/AddRadioCard.css";
|
|
3
|
+
export type AddRadioCardProps = {
|
|
4
|
+
orientation?: "horizontal" | "vertical";
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
};
|
|
7
|
+
export declare const AddRadioCard: ({ orientation, onClick, }: AddRadioCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
3
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio/AddRadioCard.css";
|
|
4
|
+
import AddIcon from "@material-symbols/svg-400/rounded/add_circle-fill.svg";
|
|
5
|
+
import { CardButton } from "../../../CardButton/CardButton";
|
|
6
|
+
import { Svg } from "../../../Svg";
|
|
7
|
+
import { getClassName } from "../../../utilities/helpers/getClassName";
|
|
8
|
+
export const AddRadioCard = ({ orientation = "horizontal", onClick, }) => {
|
|
9
|
+
const addRadioCardClassName = getClassName({
|
|
10
|
+
baseClassName: "af-radio-add-card",
|
|
11
|
+
modifiers: [orientation],
|
|
12
|
+
});
|
|
13
|
+
return (_jsx(CardButton, { className: addRadioCardClassName, onClick: onClick, icon: _jsx(Svg, { src: AddIcon, "aria-hidden": "true", className: "af-basecard__icon" }), orientation: orientation, children: _jsx("span", { className: "af-radiocard__label", children: "Ajouter" }) }));
|
|
14
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
2
|
+
import type { ChangeEvent, InputHTMLAttributes } from "react";
|
|
3
|
+
export type RadioButtonProps = {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
value: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
label: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
} & InputHTMLAttributes<HTMLInputElement>;
|
|
13
|
+
export declare const RadioButton: ({ id, name, label, onChange, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
3
|
+
export const RadioButton = ({ id, name, label, onChange, ...props }) => (_jsxs("label", { className: "af-radio__button", htmlFor: id, children: [label, _jsx("input", { type: "radio", id: id, name: name, onChange: onChange, ...props })] }));
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type RadioItemProps } from "./RadioItem";
|
|
3
|
+
export type RadioCardProps = {
|
|
4
|
+
label?: string;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
action?: ReactNode;
|
|
7
|
+
orientation?: "horizontal" | "vertical";
|
|
8
|
+
name: string;
|
|
9
|
+
} & RadioItemProps;
|
|
10
|
+
export declare const RadioCard: ({ id, icon, label, action, orientation, ...props }: RadioCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
3
|
+
import { CardButton } from "../../../CardButton/CardButton";
|
|
4
|
+
import { Svg } from "../../../Svg";
|
|
5
|
+
import { RadioItem } from "./RadioItem";
|
|
6
|
+
import { getClassName } from "../../../utilities/helpers/getClassName";
|
|
7
|
+
export const RadioCard = ({ id, icon, label, action, orientation = "horizontal", ...props }) => {
|
|
8
|
+
const radioCardClassName = getClassName({
|
|
9
|
+
baseClassName: "af-radiocard",
|
|
10
|
+
modifiers: [orientation],
|
|
11
|
+
});
|
|
12
|
+
return (_jsxs("div", { className: radioCardClassName, children: [_jsxs(CardButton, { component: "label", htmlFor: id, className: "af-radio__card", orientation: orientation, children: [_jsx(RadioItem, { id: id, ...props }), typeof icon === "string" ? (_jsx(Svg, { className: "af-basecard__icon", src: icon })) : (icon), _jsx("span", { className: "af-radiocard__label", children: label })] }), action ? _jsx("span", { className: "af-radiocard__action", children: action }) : null] }));
|
|
13
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type RadioGroupProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
orientation?: "horizontal" | "vertical";
|
|
6
|
+
variant?: "button" | "card";
|
|
7
|
+
};
|
|
8
|
+
export declare const RadioGroup: ({ children, orientation, variant, className, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { getClassName } from "../../../utilities/helpers/getClassName";
|
|
3
|
+
export const RadioGroup = ({ children, orientation = "horizontal", variant = "button", className, }) => {
|
|
4
|
+
const finalClassName = getClassName({
|
|
5
|
+
baseClassName: "af-radio__group",
|
|
6
|
+
modifiers: [orientation, variant],
|
|
7
|
+
className,
|
|
8
|
+
});
|
|
9
|
+
return _jsx("div", { className: finalClassName, children: children });
|
|
10
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { InputBaseProps } from "../types";
|
|
3
|
+
import { type RadioButtonProps } from "./RadioButton";
|
|
4
|
+
import { type RadioCardProps } from "./RadioCard";
|
|
5
|
+
export type RadioInputPropsButtonVariant = InputBaseProps & {
|
|
6
|
+
variant?: "button";
|
|
7
|
+
options: RadioButtonProps[];
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export type RadioInputPropsCardVariant = InputBaseProps & {
|
|
11
|
+
variant: "card";
|
|
12
|
+
showAddButton?: boolean;
|
|
13
|
+
orientation?: "horizontal" | "vertical";
|
|
14
|
+
onAdd: () => void;
|
|
15
|
+
options: RadioCardProps[];
|
|
16
|
+
};
|
|
17
|
+
export type RadioInputProps = RadioInputPropsCardVariant | RadioInputPropsButtonVariant;
|
|
18
|
+
export declare const RadioInput: ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }: RadioInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { InputContainer } from "../InputContainer";
|
|
3
|
+
import { InputUnit } from "../InputUnit";
|
|
4
|
+
import { ItemMessage } from "../ItemMessage";
|
|
5
|
+
import { Legend } from "../Legend";
|
|
6
|
+
import { useInput } from "../useInput.hook";
|
|
7
|
+
import {} from "./RadioButton";
|
|
8
|
+
import {} from "./RadioCard";
|
|
9
|
+
import { RadioGroup } from "./RadioGroup";
|
|
10
|
+
import { RadioInputOptions } from "./_radioInputOptions";
|
|
11
|
+
function getLabelPosition(labelPosition, orientation) {
|
|
12
|
+
if (labelPosition) {
|
|
13
|
+
return labelPosition;
|
|
14
|
+
}
|
|
15
|
+
if (orientation === "vertical") {
|
|
16
|
+
return "topLeft";
|
|
17
|
+
}
|
|
18
|
+
return "centerLeft";
|
|
19
|
+
}
|
|
20
|
+
export const RadioInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }) => {
|
|
21
|
+
const variant = props.variant || "button";
|
|
22
|
+
const { describedBy, errorId, helperId, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
|
|
23
|
+
id,
|
|
24
|
+
labelPosition: getLabelPosition(labelPosition, props.variant === "card" ? props.orientation : undefined),
|
|
25
|
+
inputClassName: inputClassNameProp,
|
|
26
|
+
labelClassName: labelClassNameProp,
|
|
27
|
+
errorMessage,
|
|
28
|
+
helpMessage,
|
|
29
|
+
});
|
|
30
|
+
const labelId = `${inputId}-label`;
|
|
31
|
+
return (_jsxs(InputContainer, { vertical: isContainerVertical, className: `${containerClassName} af-radio__input-container`, component: "fieldset", "aria-labelledby": labelId, "aria-describedby": describedBy, children: [_jsx(Legend, { id: labelId, required: required, className: labelClassName, children: label }), _jsx(RadioGroup, { variant: variant, className: inputClassNameProp, orientation: props.variant === "card"
|
|
32
|
+
? props.orientation || "horizontal"
|
|
33
|
+
: undefined, children: _jsx(RadioInputOptions, { inputId: inputId, isInvalid: isInvalid, describedBy: describedBy, ...props }) }), _jsx(InputUnit, { children: contentRight }), _jsx(ItemMessage, { id: helperId, children: helpMessage }), _jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })] }));
|
|
34
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
2
|
+
import type { InputHTMLAttributes } from "react";
|
|
3
|
+
export type RadioItemProps = InputHTMLAttributes<HTMLInputElement>;
|
|
4
|
+
export declare const RadioItem: ({ className, ...props }: RadioItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
|
|
3
|
+
import { getClassName } from "../../../utilities/helpers/getClassName";
|
|
4
|
+
export const RadioItem = ({ className, ...props }) => {
|
|
5
|
+
const finalClassName = getClassName({
|
|
6
|
+
baseClassName: "af-radio__item",
|
|
7
|
+
className,
|
|
8
|
+
});
|
|
9
|
+
return _jsx("input", { type: "radio", className: finalClassName, ...props });
|
|
10
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import { type RadioItemProps } from "./RadioItem";
|
|
3
|
+
export type RadioTextProps = {
|
|
4
|
+
label: ReactNode;
|
|
5
|
+
} & RadioItemProps;
|
|
6
|
+
export declare const RadioText: ({ id, label, ...props }: RadioTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { RadioItem } from "./RadioItem";
|
|
3
|
+
export const RadioText = ({ id, label, ...props }) => (_jsxs("label", { htmlFor: id, className: "af-radio__text", children: [_jsx(RadioItem, { id: id, ...props }), _jsx("span", { className: "af-radio__label", children: label })] }));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { RadioInputPropsButtonVariant, RadioInputPropsCardVariant } from "./RadioInput";
|
|
2
|
+
type RadioInputOptionsProps = {
|
|
3
|
+
inputId: string;
|
|
4
|
+
isInvalid: boolean;
|
|
5
|
+
describedBy?: string;
|
|
6
|
+
} & (Pick<RadioInputPropsCardVariant, "variant" | "options" | "showAddButton" | "orientation" | "onAdd"> | Pick<RadioInputPropsButtonVariant, "variant" | "options">);
|
|
7
|
+
export declare const RadioInputOptions: ({ inputId, isInvalid, describedBy, ...props }: RadioInputOptionsProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { AddRadioCard } from "./AddRadioCard";
|
|
3
|
+
import { RadioButton } from "./RadioButton";
|
|
4
|
+
import { RadioCard } from "./RadioCard";
|
|
5
|
+
export const RadioInputOptions = ({ inputId, isInvalid, describedBy, ...props }) => (_jsxs(_Fragment, { children: [!props.variant || props.variant === "button"
|
|
6
|
+
? props.options.map((o) => (_jsx(RadioButton, { ...o }, `${inputId}-${o.value}`)))
|
|
7
|
+
: null, props.variant === "card" ? (_jsxs(_Fragment, { children: [props.options.map((o) => (_jsx(RadioCard, { id: `${inputId}-${o.value}`, ...o, "aria-invalid": isInvalid, "aria-describedby": describedBy, orientation: props.orientation || "horizontal" }, `${inputId}-${o.value}`))), props.showAddButton ? (_jsx(AddRadioCard, { orientation: props.orientation || "horizontal", onClick: props.onAdd })) : null] })) : null] }));
|
|
@@ -7,3 +7,9 @@ export { TextInput } from "./TextInput";
|
|
|
7
7
|
export type { TextInputProps } from "./TextInput";
|
|
8
8
|
export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";
|
|
9
9
|
export { useInput } from "./useInput.hook";
|
|
10
|
+
export { RadioButton, type RadioButtonProps } from "./Radio/RadioButton";
|
|
11
|
+
export { RadioCard, type RadioCardProps } from "./Radio/RadioCard";
|
|
12
|
+
export { RadioGroup, type RadioGroupProps } from "./Radio/RadioGroup";
|
|
13
|
+
export { RadioInput, type RadioInputProps, type RadioInputPropsButtonVariant, type RadioInputPropsCardVariant, } from "./Radio/RadioInput";
|
|
14
|
+
export { RadioItem, type RadioItemProps } from "./Radio/RadioItem";
|
|
15
|
+
export { RadioText, type RadioTextProps } from "./Radio/RadioText";
|
|
@@ -5,3 +5,9 @@ export { ItemMessage } from "./ItemMessage";
|
|
|
5
5
|
export { Label } from "./Label";
|
|
6
6
|
export { TextInput } from "./TextInput";
|
|
7
7
|
export { useInput } from "./useInput.hook";
|
|
8
|
+
export { RadioButton } from "./Radio/RadioButton";
|
|
9
|
+
export { RadioCard } from "./Radio/RadioCard";
|
|
10
|
+
export { RadioGroup } from "./Radio/RadioGroup";
|
|
11
|
+
export { RadioInput, } from "./Radio/RadioInput";
|
|
12
|
+
export { RadioItem } from "./Radio/RadioItem";
|
|
13
|
+
export { RadioText } from "./Radio/RadioText";
|
|
@@ -35,7 +35,7 @@ export type InputBaseProps = {
|
|
|
35
35
|
* - `leftAbove` will place the label above the input, aligned to the left. This is used to have the label above the input.
|
|
36
36
|
* @default "centerLeft"
|
|
37
37
|
*/
|
|
38
|
-
labelPosition?:
|
|
38
|
+
labelPosition?: LabelPosition;
|
|
39
39
|
/**
|
|
40
40
|
* The help message to display below the input.
|
|
41
41
|
*/
|
|
@@ -11,7 +11,7 @@ export const useInput = (props) => {
|
|
|
11
11
|
});
|
|
12
12
|
const labelClassName = getClassName({
|
|
13
13
|
baseClassName: "af-label",
|
|
14
|
-
modifiers: [props.labelPosition === "
|
|
14
|
+
modifiers: [props.labelPosition === "topLeft" && "top-left"],
|
|
15
15
|
className: props.labelClassName,
|
|
16
16
|
});
|
|
17
17
|
const errorId = isInvalid ? `${inputId}-description` : undefined;
|
package/dist/distributeur.d.ts
CHANGED
|
@@ -72,3 +72,5 @@ export { CardData } from "./distributeur/CardData/CardData";
|
|
|
72
72
|
export type { CardDataVariant } from "./distributeur/CardData/CardData";
|
|
73
73
|
export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";
|
|
74
74
|
export { Timeline, type TimelineProps, type TimelineVariants, } from "./distributeur/Timeline/Timeline";
|
|
75
|
+
export { CardButton, type CardButtonProps, } from "./distributeur/CardButton/CardButton";
|
|
76
|
+
export { BaseCard, type BaseCardProps } from "./distributeur/Card/BaseCard";
|
package/dist/distributeur.js
CHANGED
|
@@ -61,3 +61,5 @@ export { SquareLoader } from "./distributeur/Loader/SquareLoader";
|
|
|
61
61
|
export { CardData } from "./distributeur/CardData/CardData";
|
|
62
62
|
export { EditorialMessage, } from "./distributeur/EditorialMessage/EditorialMessage";
|
|
63
63
|
export { Timeline, } from "./distributeur/Timeline/Timeline";
|
|
64
|
+
export { CardButton, } from "./distributeur/CardButton/CardButton";
|
|
65
|
+
export { BaseCard } from "./distributeur/Card/BaseCard";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axa-fr/canopee-react",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.71",
|
|
4
4
|
"description": "Package React - Design System Canopée",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./distributeur": {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
},
|
|
54
54
|
"homepage": "https://github.com/AxaFrance/design-system#readme",
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"@axa-fr/canopee-css": "2.0.0-alpha.
|
|
56
|
+
"@axa-fr/canopee-css": "2.0.0-alpha.71",
|
|
57
57
|
"@material-symbols/svg-400": ">= 0.19.0",
|
|
58
58
|
"@material-symbols/svg-700": ">= 0.19.0",
|
|
59
59
|
"react": ">= 19"
|