@axa-fr/design-system-apollo-react 1.0.3-alpha.231 → 1.0.3-alpha.238

package/dist/Form/DateInput/DateInput.helper.d.ts

@@ -0,0 +1 @@
+export declare const formatDateInputValue: (type: "date" | "text", value?: Date | string | undefined) => string | undefined;

package/dist/Form/DateInput/DateInput.helper.js

@@ -0,0 +1,20 @@
+const MAXIMUM_SIZE_DATE = 10;
+export const formatDateInputValue = (type, value) => {
+    if (!value)
+        return undefined;
+    if (value instanceof Date) {
+        if (type === "date") {
+            return value.toISOString().slice(0, MAXIMUM_SIZE_DATE);
+        }
+        if (type === "text") {
+            const day = String(value.getDate()).padStart(2, "0");
+            const month = String(value.getMonth() + 1).padStart(2, "0");
+            const year = String(value.getFullYear()).padStart(4, "0");
+            return `${day}/${month}/${year}`;
+        }
+    }
+    if (typeof value === "string") {
+        return value;
+    }
+    return undefined;
+};

package/dist/Form/DateInput/DateInputApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/DateInput/DateInputApollo.scss";
+import type { ComponentProps } from "react";
+import { DateInput as DateInputCommon } from "./DateInputCommon";
+export declare const DateInput: (props: Omit<ComponentProps<typeof DateInputCommon>, "ItemLabelComponent" | "ItemMessageComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/DateInput/DateInputApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/DateInput/DateInputApollo.scss";
+import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { DateInput as DateInputCommon } from "./DateInputCommon";
+export const DateInput = (props) => (_jsx(DateInputCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));

package/dist/Form/DateInput/DateInputCommon.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, ComponentPropsWithRef, ComponentType } from "react";
+import { ItemLabel } from "../ItemLabel/ItemLabelCommon";
+import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
+type DateInputProps = Omit<ComponentPropsWithRef<"input">, "value"> & {
+    classModifier?: string;
+    defaultValue?: Date | string;
+    value?: Date | string;
+    helper?: string;
+    error?: string;
+    success?: string;
+    label: ComponentProps<typeof ItemLabel>["label"];
+    type?: "text" | "date";
+    ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabel>, "ButtonComponent">>;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+} & Partial<ComponentPropsWithRef<typeof ItemLabel>>;
+declare const DateInput: import("react").ForwardRefExoticComponent<Omit<DateInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { DateInput };

package/dist/Form/DateInput/DateInputCommon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { getComponentClassName } from "../../utilities/getComponentClassName";
+import { formatDateInputValue } from "./DateInput.helper";
+const DateInput = forwardRef(({ className, classModifier = "", defaultValue, value, placeholder = "JJ/MM/AAAA", helper, error, success, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, "aria-errormessage": ariaErrormessage, type = "text", ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", classModifier + (error || ariaErrormessage ? " error" : ""));
+    let inputId = useId();
+    inputId = otherProps.id ?? inputId;
+    const idMessage = useId();
+    const idHelp = useId();
+    const idLabel = useId();
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId, idLabel: idLabel }), _jsx("input", { ...otherProps, id: inputId, className: componentClassName, type: type, placeholder: placeholder || "", ref: inputRef, defaultValue: formatDateInputValue(type, defaultValue), value: formatDateInputValue(type, value), "aria-labelledby": idLabel, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error ?? ariaErrormessage), "aria-describedby": idHelp, required: required }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), _jsx(ItemMessageComponent, { id: idMessage, message: error ?? success, messageType: error ? "error" : "success" })] }));
+});
+DateInput.displayName = "DateInput";
+export { DateInput };

package/dist/Form/DateInput/DateInputLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/DateInput/DateInputLF.scss";
+import { ComponentProps } from "react";
+import { DateInput as DateInputCommon } from "./DateInputCommon";
+export declare const DateInput: (props: Omit<ComponentProps<typeof DateInputCommon>, "ItemLabelComponent" | "ItemMessageComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/DateInput/DateInputLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/DateInput/DateInputLF.scss";
+import { ItemLabel } from "../ItemLabel/ItemLabelLF";
+import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { DateInput as DateInputCommon } from "./DateInputCommon";
+export const DateInput = (props) => (_jsx(DateInputCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));

package/dist/ProgressBar/ProgressBarApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBar/ProgressBarApollo.scss";
+export { ProgressBar, type ProgressBarProps } from "./ProgressBarCommon";

package/dist/ProgressBar/ProgressBarApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBar/ProgressBarApollo.scss";
+export { ProgressBar } from "./ProgressBarCommon";

package/dist/ProgressBar/ProgressBarCommon.d.ts

@@ -0,0 +1,5 @@
+export type ProgressBarProps = {
+    value: number;
+    active?: boolean;
+};
+export declare const ProgressBar: ({ value, active, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBar/ProgressBarCommon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const MAX_STEPPER_PROGRESS = 100;
+export const ProgressBar = ({ value = MAX_STEPPER_PROGRESS, active = true, }) => {
+    const clampedValue = Math.max(0, Math.min(value, MAX_STEPPER_PROGRESS));
+    return (_jsx("div", { role: "progressbar", className: "af-progressbar", "aria-valuemin": 0, "aria-valuemax": MAX_STEPPER_PROGRESS, "aria-valuenow": clampedValue, "aria-current": active, "aria-hidden": !active, "aria-label": `Progression : ${clampedValue}%`, children: _jsx("div", { className: "af-progressbar__progress", style: { width: `${clampedValue}%` } }) }));
+};

package/dist/ProgressBar/ProgressBarLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBar/ProgressBarLF.scss";
+export { ProgressBar, type ProgressBarProps } from "./ProgressBarCommon";

package/dist/ProgressBar/ProgressBarLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBar/ProgressBarLF.scss";
+export { ProgressBar } from "./ProgressBarCommon";

package/dist/ProgressBarGroup/ProgressBarGroupApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBarGroup/ProgressBarGroupApollo.scss";
+import { ProgressBarGroupProps } from "./ProgressBarGroupCommon";
+export declare const ProgressBarGroup: (props: Omit<ProgressBarGroupProps, "ProgressBarComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBarGroup/ProgressBarGroupApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/ProgressBarGroup/ProgressBarGroupApollo.scss";
+import { ProgressBar } from "../ProgressBar/ProgressBarApollo";
+import { ProgressBarGroup as ProgressBarGroupCommon, } from "./ProgressBarGroupCommon";
+export const ProgressBarGroup = (props) => _jsx(ProgressBarGroupCommon, { ...props, ProgressBarComponent: ProgressBar });

package/dist/ProgressBarGroup/ProgressBarGroupCommon.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ComponentType } from "react";
+import { ProgressBar } from "../ProgressBar/ProgressBarCommon";
+export type ProgressBarGroupProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    nbSteps?: 3 | 4 | 5 | 6 | 7 | 8;
+    label?: string;
+    className?: string;
+    ProgressBarComponent: ComponentType<ComponentProps<typeof ProgressBar>>;
+};
+export declare const ProgressBarGroup: ({ currentStepProgress, nbSteps, currentStep, label, className, ProgressBarComponent, }: ProgressBarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBarGroup/ProgressBarGroupCommon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useId } from "react";
+const INITIAL_STEPPER_PROGRESS = 10;
+const MAX_STEPPER_PROGRESS = 100;
+export const ProgressBarGroup = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, nbSteps = 4, currentStep, label, className, ProgressBarComponent, }) => {
+    const stepperId = useId();
+    const getCurrentProgress = (index) => {
+        if (index < currentStep) {
+            return MAX_STEPPER_PROGRESS;
+        }
+        if (index === currentStep) {
+            return currentStepProgress || INITIAL_STEPPER_PROGRESS;
+        }
+        return 0;
+    };
+    return (_jsx("div", { id: stepperId, role: "group", "aria-label": label, className: classNames("af-progress-bar-group", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx(ProgressBarComponent, { value: getCurrentProgress(index), active: index === currentStep }, `${stepperId}-${index}`))) }));
+};

package/dist/ProgressBarGroup/ProgressBarGroupLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/ProgressBarGroup/ProgressBarGroupLF.scss";
+import { ProgressBarGroupProps } from "./ProgressBarGroupCommon";
+export declare const ProgressBarGroup: (props: Omit<ProgressBarGroupProps, "ProgressBarComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBarGroup/ProgressBarGroupLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/ProgressBarGroup/ProgressBarGroupLF.scss";
+import { ProgressBar } from "../ProgressBar/ProgressBarLF";
+import { ProgressBarGroup as ProgressBarGroupCommon, } from "./ProgressBarGroupCommon";
+export const ProgressBarGroup = (props) => _jsx(ProgressBarGroupCommon, { ...props, ProgressBarComponent: ProgressBar });

package/dist/Stepper/StepperApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Stepper/StepperApollo.scss";
+import { StepperProps } from "./StepperCommon";
+export declare const Stepper: (props: Omit<StepperProps, "ProgressBarGroupComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/StepperApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Stepper/StepperApollo.scss";
+import { ProgressBarGroup } from "../ProgressBarGroup/ProgressBarGroupApollo";
+import { Stepper as StepperCommon } from "./StepperCommon";
+export const Stepper = (props) => _jsx(StepperCommon, { ...props, ProgressBarGroupComponent: ProgressBarGroup });

package/dist/Stepper/StepperCommon.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, HTMLAttributes } from "react";
+import { ProgressBarGroupProps } from "../ProgressBarGroup/ProgressBarGroupCommon";
+export type StepperProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    currentSubtitle?: string;
+    currentTitle?: string;
+    nbSteps?: 3 | 4 | 5 | 6 | 7 | 8;
+    helper?: string;
+    message?: string;
+    ProgressBarGroupComponent: ComponentType<Omit<ProgressBarGroupProps, "ProgressBarComponent">>;
+} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
+export declare const Stepper: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/StepperCommon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ItemMessage } from "../Form/ItemMessage/ItemMessageCommon";
+export const Stepper = ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, ...props }) => {
+    const stepperId = useId();
+    return (_jsxs("div", { className: "af-stepper", ...props, children: [_jsxs("div", { className: "af-stepper__header", children: [_jsx("h2", { className: "af-stepper__title", "aria-describedby": stepperId, children: currentTitle }), Boolean(currentSubtitle) && (_jsx("p", { className: "af-stepper__subtitle", children: currentSubtitle }))] }), _jsx(ProgressBarGroupComponent, { label: currentTitle, className: className, currentStep: currentStep, nbSteps: nbSteps, currentStepProgress: currentStepProgress }), Boolean(helper) && _jsx("span", { className: "af-stepper__helper", children: helper }), _jsx(ItemMessage, { message: message, messageType: "success" })] }));
+};

package/dist/Stepper/StepperLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-apollo-css/dist/Stepper/StepperLF.scss";
+import { StepperProps } from "./StepperCommon";
+export declare const Stepper: (props: Omit<StepperProps, "ProgressBarGroupComponent">) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/StepperLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Stepper/StepperLF.scss";
+import { ProgressBarGroup } from "../ProgressBarGroup/ProgressBarGroupLF";
+import { Stepper as StepperCommon } from "./StepperCommon";
+export const Stepper = (props) => _jsx(StepperCommon, { ...props, ProgressBarGroupComponent: ProgressBarGroup });

package/dist/index.d.ts

@@ -19,3 +19,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageApollo";
+export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
+export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
+export { Stepper } from "./Stepper/StepperApollo";
+export { DateInput } from "./Form/DateInput/DateInputApollo";

package/dist/index.js

@@ -19,3 +19,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
 export { Message, messageVariants, } from "./Message/MessageApollo";
+export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
+export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
+export { Stepper } from "./Stepper/StepperApollo";
+export { DateInput } from "./Form/DateInput/DateInputApollo";

package/dist/indexLF.d.ts

@@ -18,3 +18,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageLF";
+export { ProgressBar } from "./ProgressBar/ProgressBarLF";
+export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
+export { Stepper } from "./Stepper/StepperLF";
+export { DateInput } from "./Form/DateInput/DateInputLF";

package/dist/indexLF.js

@@ -18,3 +18,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
 export { Message, messageVariants, } from "./Message/MessageLF";
+export { ProgressBar } from "./ProgressBar/ProgressBarLF";
+export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
+export { Stepper } from "./Stepper/StepperLF";
+export { DateInput } from "./Form/DateInput/DateInputLF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.3-alpha.231",
+  "version": "1.0.3-alpha.238",
   "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.3-alpha.231",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.231",
+    "@axa-fr/design-system-apollo-css": "1.0.3-alpha.238",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.238",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },