@axa-fr/design-system-look-and-feel-react 1.0.5-ci.57 → 1.0.5-ci.59

package/dist/Form/FileUpload/FileUpload.d.ts

@@ -7,8 +7,8 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     dropzoneDescription?: string;
     instructions?: string;
     required?: boolean;
-    globalError: string;
-    errors: Array<{
+    globalError?: string;
+    errors?: Array<{
         id?: string | undefined;
         message: string;
     }>;
@@ -18,15 +18,16 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
         size: number;
         isLoading: boolean;
     }>;
-    accept: string;
+    accept?: string;
     isMobile?: boolean;
+    withPadding?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
     onView?: (id: string) => void;
     onDelete?: (id: string) => void;
 };
 declare const FileUpload: {
-    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { FileUpload };

package/dist/Form/FileUpload/FileUpload.js

@@ -23,7 +23,7 @@ function getReadableFileSizeString(fileSizeInBytes) {
     } while (fileSizeInBytesCopy > 1024);
     return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
 }
-const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
+const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding = false, onView, onDelete, ...otherProps }) => {
     const idError = useId();
     const getIcon = (isInError, isLoading) => {
         if (isInError) {
@@ -34,10 +34,12 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
         }
         return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
     };
-    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
                         const effectiveSize = getReadableFileSizeString(size);
-                        const isInError = errors.some((fileError) => fileError.id === fileId);
-                        const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
+                        const isInError = errors
+                            ? errors.some((fileError) => fileError.id === fileId)
+                            : false;
+                        const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
                         return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
                                                         if (e.key === "Enter") {
                                                             onView(fileId);

package/dist/Stepper/Stepper.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+import { HTMLAttributes } from "react";
 export type StepperProps = {
     currentStepProgress?: number;
     currentStep: number;

package/dist/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId } from "react";
-import classNames from "classnames";
 import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+import classNames from "classnames";
+import { useCallback, useId } from "react";
 const INITIAL_STEPPER_PROGRESS = 10;
 const MAX_STEPPER_PROGRESS = 100;
 export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
@@ -18,5 +18,5 @@ export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, curren
         }
         return 0;
     }, [currentStep, currentStepProgress]);
-    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
+    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [_jsxs("div", { children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle }))] }), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.57",
+  "version": "1.0.5-ci.59",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.57",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.59",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },