allaw-ui 3.1.2 → 3.1.4

package/dist/components/atoms/checkboxes/Checkbox.css

@@ -130,3 +130,15 @@
 .checkbox-icon-light-pressed {
   padding-left: 5px;
 }
+
+.checkbox-style-form {
+  border: 2px solid var(--grey-venom, #e6edf5);
+}
+
+.checkbox-style-form:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.checkbox-style-form.checkbox-pressed {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}

package/dist/components/atoms/checkboxes/Checkbox.d.ts

@@ -7,7 +7,7 @@ export interface CheckboxProps {
     onChange?: (checked: boolean) => void;
     color?: string;
     size?: "default" | "small";
-    style?: "default" | "light";
+    style?: "default" | "light" | "form";
     markType?: "cross" | "check";
 }
 declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/atoms/checkboxes/Checkbox.js

@@ -14,6 +14,6 @@ var Checkbox = function (_a) {
         }
     };
     var checkboxColor = style === "light" ? "light" : color;
-    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat("checkbox-".concat(checkboxColor), " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : ""), onClick: handleClick, "data-cy": "checkbox-".concat(id) }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat("checkbox-icon-".concat(checkboxColor), " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
+    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat("checkbox-".concat(checkboxColor), " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : "", " ").concat(style === "form" ? "checkbox-style-form" : ""), onClick: handleClick, "data-cy": "checkbox-".concat(id) }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat("checkbox-icon-".concat(checkboxColor), " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
 };
 export default Checkbox;

package/dist/components/atoms/checkboxes/Checkbox.stories.js

@@ -48,7 +48,7 @@ export default {
         style: {
             control: {
                 type: "select",
-                options: ["default", "light"],
+                options: ["default", "light", "form"],
             },
         },
         markType: {

package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts

@@ -12,7 +12,7 @@ export interface CheckboxFormProps {
     linkUrl?: string;
     onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
     size?: "default" | "small";
-    style?: "default" | "light";
+    style?: "default" | "light" | "form";
     markType?: "cross" | "check";
 }
 declare const CheckboxForm: React.FC<CheckboxFormProps>;

package/dist/components/molecules/checkboxForm/CheckboxForm.js

@@ -3,18 +3,21 @@ import Checkbox from "../../atoms/checkboxes/Checkbox";
 import Paragraph from "../../atoms/typography/Paragraph";
 import "./CheckboxForm.css";
 var CheckboxForm = function (_a) {
-    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, label = _a.label, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, linkText = _a.linkText, linkUrl = _a.linkUrl, onLinkClick = _a.onLinkClick, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.style, style = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g;
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, color = _a.color, label = _a.label, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, linkText = _a.linkText, linkUrl = _a.linkUrl, onLinkClick = _a.onLinkClick, _d = _a.size, size = _d === void 0 ? "default" : _d, _e = _a.style, style = _e === void 0 ? "default" : _e, _f = _a.markType, markType = _f === void 0 ? "cross" : _f;
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
     var handleCheckboxChange = function (checked) {
         if (onChange) {
             onChange(checked);
         }
     };
-    var checkboxColor = style === "light" ? "light" : color;
-    return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(checkboxColor, " ").concat(size === "small" ? "checkbox-form-small" : "") },
+    // Ne pas appliquer de couleur par défaut si style="form"
+    var defaultColor = style === "form" ? undefined : "noir";
+    // Appliquer la couleur light si style="light", sinon utiliser la couleur fournie ou la couleur par défaut
+    var checkboxColor = style === "light" ? "light" : color || defaultColor;
+    return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(checkboxColor || "noir", " ").concat(size === "small" ? "checkbox-form-small" : "") },
         React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: checkboxColor, size: size, style: style, markType: markType }),
         label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
-            React.createElement(Paragraph, { variant: "semiBold", color: color, text: React.createElement(React.Fragment, null,
+            React.createElement(Paragraph, { variant: style === "form" ? "medium" : "semiBold", color: color || defaultColor, text: React.createElement(React.Fragment, null,
                     React.createElement("span", null, label),
                     linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: onLinkClick }, linkText))), size: size }),
             isRequired && (React.createElement("span", { className: "checkbox-form-required" },

package/dist/components/molecules/checkboxForm/CheckboxForm.stories.d.ts

@@ -87,4 +87,8 @@ export const Light: any;
 export const LightChecked: any;
 export const LightCheckMark: any;
 export const LightCheckedCheckMark: any;
+export const Form: any;
+export const FormChecked: any;
+export const FormCheckMark: any;
+export const FormCheckedCheckMark: any;
 import CheckboxForm from "./CheckboxForm";

package/dist/components/molecules/checkboxForm/CheckboxForm.stories.js

@@ -58,7 +58,7 @@ export default {
         style: {
             control: {
                 type: "select",
-                options: ["default", "light"],
+                options: ["default", "light", "form"],
             },
         },
         markType: {
@@ -147,3 +147,11 @@ export var LightCheckMark = Template.bind({});
 LightCheckMark.args = __assign(__assign({}, Light.args), { label: "Light CheckboxForm with check mark", markType: "check" });
 export var LightCheckedCheckMark = Template.bind({});
 LightCheckedCheckMark.args = __assign(__assign({}, LightCheckMark.args), { checked: true, label: "Light Checked CheckboxForm with check mark" });
+export var Form = Template.bind({});
+Form.args = __assign(__assign({}, Default.args), { label: "Form CheckboxForm", style: "form" });
+export var FormChecked = Template.bind({});
+FormChecked.args = __assign(__assign({}, Form.args), { checked: true, label: "Form Checked CheckboxForm" });
+export var FormCheckMark = Template.bind({});
+FormCheckMark.args = __assign(__assign({}, Form.args), { label: "Form CheckboxForm with check mark", markType: "check" });
+export var FormCheckedCheckMark = Template.bind({});
+FormCheckedCheckMark.args = __assign(__assign({}, FormCheckMark.args), { checked: true, label: "Form Checked CheckboxForm with check mark" });

package/dist/components/molecules/fileUploader/FileUploader.d.ts

@@ -35,6 +35,7 @@ export interface FileUploaderProps {
         offsetY: number;
         shape: "circle" | "square" | "banner";
     };
+    originalFileName?: string;
 }
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -41,7 +41,7 @@ import ImageCropperModal from "./ImageCropperModal";
 import IconButton from "../../atoms/buttons/IconButton";
 import TertiaryButton from "../../atoms/buttons/TertiaryButton";
 var FileUploader = function (_a) {
-    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, _c = _a.enableCropping, enableCropping = _c === void 0 ? false : _c, _d = _a.cropShape, cropShape = _d === void 0 ? "square" : _d, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _e = _a.uploadProgress, uploadProgress = _e === void 0 ? 0 : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.autoManageProgress, autoManageProgress = _g === void 0 ? false : _g, _h = _a.progressSteps, progressSteps = _h === void 0 ? 10 : _h, _j = _a.progressInterval, progressInterval = _j === void 0 ? 500 : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? null : _k, _l = _a.buttonLabel, buttonLabel = _l === void 0 ? "Choisir un fichier" : _l, _m = _a.acceptedLabel, acceptedLabel = _m === void 0 ? "Format accepté :" : _m, _o = _a.maxSizeLabel, maxSizeLabel = _o === void 0 ? "Taille maximale :" : _o, fileName = _a.fileName, fileSize = _a.fileSize, _p = _a.filePresentationLabel, filePresentationLabel = _p === void 0 ? "Voici votre fichier." : _p, initialFile = _a.initialFile, initialPreviewUrl = _a.initialPreviewUrl, initialCropMetadata = _a.initialCropMetadata;
+    var acceptedExtensions = _a.acceptedExtensions, maxFileSizeMB = _a.maxFileSizeMB, _b = _a.enableDragAndDrop, enableDragAndDrop = _b === void 0 ? true : _b, _c = _a.enableCropping, enableCropping = _c === void 0 ? false : _c, _d = _a.cropShape, cropShape = _d === void 0 ? "square" : _d, iconUrl = _a.iconUrl, descriptionParts = _a.descriptionParts, onFileRead = _a.onFileRead, onFileRemove = _a.onFileRemove, _e = _a.uploadProgress, uploadProgress = _e === void 0 ? 0 : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.autoManageProgress, autoManageProgress = _g === void 0 ? false : _g, _h = _a.progressSteps, progressSteps = _h === void 0 ? 10 : _h, _j = _a.progressInterval, progressInterval = _j === void 0 ? 500 : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? null : _k, _l = _a.buttonLabel, buttonLabel = _l === void 0 ? "Choisir un fichier" : _l, _m = _a.acceptedLabel, acceptedLabel = _m === void 0 ? "Format accepté :" : _m, _o = _a.maxSizeLabel, maxSizeLabel = _o === void 0 ? "Taille maximale :" : _o, fileName = _a.fileName, fileSize = _a.fileSize, _p = _a.filePresentationLabel, filePresentationLabel = _p === void 0 ? "Voici votre fichier." : _p, initialFile = _a.initialFile, initialPreviewUrl = _a.initialPreviewUrl, initialCropMetadata = _a.initialCropMetadata, originalFileName = _a.originalFileName;
     var _q = useState(initialFile || null), selectedFile = _q[0], setSelectedFile = _q[1];
     var _r = useState(null), fileContent = _r[0], setFileContent = _r[1];
     var _s = useState(false), isHovering = _s[0], setIsHovering = _s[1];
@@ -51,6 +51,7 @@ var FileUploader = function (_a) {
     var _w = useState(0), internalProgress = _w[0], setInternalProgress = _w[1];
     var progressIntervalRef = useRef(null);
     var fileInputRef = useRef(null);
+    var _x = useState(originalFileName), currentFileName = _x[0], setCurrentFileName = _x[1];
     useEffect(function () {
         if (initialFile) {
             setSelectedFile(initialFile);
@@ -64,7 +65,10 @@ var FileUploader = function (_a) {
         if (initialCropMetadata) {
             setCropMetadata(initialCropMetadata);
         }
-    }, [initialFile, initialPreviewUrl, initialCropMetadata]);
+        if (originalFileName) {
+            setCurrentFileName(originalFileName);
+        }
+    }, [initialFile, initialPreviewUrl, initialCropMetadata, originalFileName]);
     useEffect(function () {
         return function () {
             if (previewUrl && !initialPreviewUrl) {
@@ -147,6 +151,7 @@ var FileUploader = function (_a) {
                         setSelectedFile(null);
                         setPreviewUrl(null);
                         setCropMetadata(null);
+                        setCurrentFileName(undefined);
                         return [2 /*return*/];
                     }
                     _a.label = 1;
@@ -156,6 +161,7 @@ var FileUploader = function (_a) {
                 case 2:
                     content = _a.sent();
                     setFileContent(content);
+                    setCurrentFileName(file.name);
                     if (isImageFile(file)) {
                         url = URL.createObjectURL(file);
                         setPreviewUrl(url);
@@ -190,6 +196,7 @@ var FileUploader = function (_a) {
                     setSelectedFile(null);
                     setPreviewUrl(null);
                     setCropMetadata(null);
+                    setCurrentFileName(undefined);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -214,7 +221,7 @@ var FileUploader = function (_a) {
         }
     };
     var handleFileDelete = function () {
-        if (previewUrl) {
+        if (previewUrl && !initialPreviewUrl) {
             URL.revokeObjectURL(previewUrl);
         }
         if (autoManageProgress) {
@@ -225,6 +232,7 @@ var FileUploader = function (_a) {
         setFileContent(null);
         setPreviewUrl(null);
         setCropMetadata(null);
+        setCurrentFileName(undefined);
         resetFileInput();
         onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove();
     };
@@ -317,9 +325,7 @@ var FileUploader = function (_a) {
                 React.createElement("div", { className: styles.uploaded_file_icon }, iconUrl ? (React.createElement(Image, { src: iconUrl, alt: "File icon", className: styles.file_icon, width: 20, height: 20 })) : (React.createElement("i", { className: "allaw-icon-file" }))),
                 React.createElement("div", { className: styles.uploaded_file_name_size },
                     React.createElement("div", { className: styles.uploaded_file_name },
-                        React.createElement("span", { className: styles.file_name }, displayFileName ||
-                            (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.name) ||
-                            "Analyse en cours..."),
+                        React.createElement("span", { className: styles.file_name }, displayFileName || currentFileName || "Analyse en cours..."),
                         selectedFile && (React.createElement("i", { className: "allaw-icon-check ".concat(styles.success_icon) }))),
                     React.createElement("div", { className: styles.uploaded_file_size },
                         React.createElement("span", { className: styles.file_size }, displayFileSize > 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",