allaw-ui 2.8.8 → 2.9.0

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

@@ -11,6 +11,9 @@ export interface ColoredCheckboxProps {
     size?: "default" | "small";
     markType?: "cross" | "check";
     isSignedIn?: boolean;
+    unlinkIconPath?: string | {
+        default: string;
+    };
 }
 declare const ColoredCheckbox: React.FC<ColoredCheckboxProps>;
 export default ColoredCheckbox;

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

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import styles from "./ColoredCheckbox.module.css";
 import "../../../styles/global.css"; // Pour importer les icônes allaw
+// URL data en base64 pour l'icône de déconnexion (solution de secours)
+// Cette icône représente un lien brisé/déconnecté en rouge
+var DEFAULT_UNLINK_ICON = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNjY3IDEwLjY2N0w4LjY2NyA4LjY2NyIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTEyLjY2NyA0LjY2N0MxMy40MDMgNS40MDMgMTMuNDAzIDYuNTk3IDEyLjY2NyA3LjMzM0MxMS45MyA4LjA3IDEwLjczNyA4LjA3IDEwIDcuMzMzQzkuMjYzIDYuNTk3IDkuMjYzIDUuNDAzIDEwIDQuNjY3QzEwLjczNyAzLjkzIDExLjkzIDMuOTMgMTIuNjY3IDQuNjY3WiIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTUuMzMzIDExLjMzM0M2LjA3IDEyLjA3IDcuMjYzIDEyLjA3IDggMTEuMzMzQzguNzM3IDEwLjU5NyA4LjczNyA5LjQwMyA4IDguNjY3QzcuMjYzIDcuOTMgNi4wNyA3LjkzIDUuMzMzIDguNjY3QzQuNTk3IDkuNDAzIDQuNTk3IDEwLjU5NyA1LjMzMyAxMS4zMzNaIiBzdHJva2U9IiNGRjAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNy4zMzMgNy4zMzNMNS4zMzMgNS4zMzMiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";
 // Fonction pour formater l'email avec des ellipses intelligentes
 var formatEmail = function (email) {
     if (!email || typeof email !== "string" || !email.includes("@")) {
@@ -19,8 +22,9 @@ var formatEmail = function (email) {
         React.createElement("span", { className: styles.emailTLD }, tld)));
 };
 var ColoredCheckbox = function (_a) {
-    var id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.boxColor, boxColor = _c === void 0 ? "#000000" : _c, _d = _a.markColor, markColor = _d === void 0 ? "#FFFFFF" : _d, _e = _a.textColor, textColor = _e === void 0 ? "#000000" : _e, _f = _a.size, size = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g, _h = _a.isSignedIn, isSignedIn = _h === void 0 ? true : _h;
-    var _j = useState(checked), isChecked = _j[0], setIsChecked = _j[1];
+    var id = _a.id, _b = _a.label, label = _b === void 0 ? "mon-email@provider.com" : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.boxColor, boxColor = _d === void 0 ? "#000000" : _d, _e = _a.markColor, markColor = _e === void 0 ? "#FFFFFF" : _e, _f = _a.textColor, textColor = _f === void 0 ? "#000000" : _f, _g = _a.size, size = _g === void 0 ? "default" : _g, _h = _a.markType, markType = _h === void 0 ? "cross" : _h, _j = _a.isSignedIn, isSignedIn = _j === void 0 ? true : _j, _k = _a.unlinkIconPath, unlinkIconPath = _k === void 0 ? "/assets/images/allaw-icon-unlink-red.svg" : _k;
+    var _l = useState(checked), isChecked = _l[0], setIsChecked = _l[1];
+    var _m = useState(false), iconError = _m[0], setIconError = _m[1];
     // Generate a random ID if none is provided
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
     var handleClick = function (e) {
@@ -51,9 +55,20 @@ var ColoredCheckbox = function (_a) {
     var formattedLabel = typeof label === "string" && label.includes("@")
         ? formatEmail(label)
         : label;
+    // Gérer les différents formats d'importation d'image
+    var getIconPath = function () {
+        if (!unlinkIconPath)
+            return DEFAULT_UNLINK_ICON;
+        // Si c'est un objet importé (comme avec import x from 'y')
+        if (typeof unlinkIconPath === "object" && unlinkIconPath.default) {
+            return unlinkIconPath.default;
+        }
+        // Si c'est une chaîne de caractères
+        return unlinkIconPath;
+    };
     return (React.createElement("div", { className: styles.container },
         React.createElement("button", { id: checkboxId, className: "".concat(styles.checkbox, " ").concat(isChecked ? styles.checked : "", " ").concat(size === "small" ? styles.small : ""), onClick: handleClick, style: checkboxStyle, "aria-checked": isChecked, role: "checkbox", "data-cy": "checkbox-".concat(checkboxId) }, isChecked && (React.createElement("span", { className: "".concat(styles.icon, " ").concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check"), style: markStyle }))),
-        isSignedIn === false && (React.createElement("img", { src: "/assets/allaw-icon-unlink-red.svg", alt: "Non connect\u00E9", className: styles.unlinkIcon })),
+        isSignedIn === false && (React.createElement("img", { src: iconError ? DEFAULT_UNLINK_ICON : getIconPath(), alt: "Non connect\u00E9", className: styles.unlinkIcon, width: "16", height: "16", style: { width: "16px", height: "16px" }, onError: function () { return setIconError(true); } })),
         label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, formattedLabel))));
 };
 export default ColoredCheckbox;

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

@@ -4,13 +4,17 @@ declare namespace _default {
     export let tags: string[];
     export namespace args {
         let label: string;
+        let checked: boolean;
+        let boxColor: string;
+        let markType: string;
     }
     export namespace argTypes {
-        export namespace checked {
+        export namespace checked_1 {
             namespace control {
                 let type: string;
             }
         }
+        export { checked_1 as checked };
         export namespace onChange {
             let action: string;
         }
@@ -19,11 +23,12 @@ declare namespace _default {
             export { control_1 as control };
         }
         export { label_1 as label };
-        export namespace boxColor {
+        export namespace boxColor_1 {
             let control_2: string;
             export { control_2 as control };
             export let defaultValue: string;
         }
+        export { boxColor_1 as boxColor };
         export namespace markColor {
             let control_3: string;
             export { control_3 as control };
@@ -44,7 +49,7 @@ declare namespace _default {
             }
             export { control_5 as control };
         }
-        export namespace markType {
+        export namespace markType_1 {
             export namespace control_6 {
                 let type_2: string;
                 export { type_2 as type };
@@ -53,6 +58,7 @@ declare namespace _default {
             }
             export { control_6 as control };
         }
+        export { markType_1 as markType };
         export namespace isSignedIn {
             export namespace control_7 {
                 let type_3: string;
@@ -62,6 +68,11 @@ declare namespace _default {
             let defaultValue_3: boolean;
             export { defaultValue_3 as defaultValue };
         }
+        export namespace unlinkIconPath {
+            let control_8: string;
+            export { control_8 as control };
+            export let description: string;
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -93,4 +104,5 @@ export const LongEmailLabelVerySmallContainer: any;
 export const NotSignedIn: any;
 export const NotSignedInEmail: any;
 export const NotSignedInChecked: any;
+export const CustomIconPath: any;
 import ColoredCheckbox from "./ColoredCheckbox";

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

@@ -16,7 +16,10 @@ export default {
     component: ColoredCheckbox,
     tags: ["autodocs"],
     args: {
-        label: "Sample label",
+        label: "my-email-address@provider.com",
+        checked: true,
+        boxColor: "#25beeb",
+        markType: "check",
     },
     argTypes: {
         checked: {
@@ -30,7 +33,7 @@ export default {
         },
         boxColor: {
             control: "color",
-            defaultValue: "#000000",
+            defaultValue: "#25beeb",
         },
         markColor: {
             control: "color",
@@ -58,6 +61,10 @@ export default {
             },
             defaultValue: true,
         },
+        unlinkIconPath: {
+            control: "text",
+            description: "Chemin vers l'icône de déconnexion",
+        },
     },
     parameters: {
         backgrounds: {
@@ -81,13 +88,13 @@ var Template = function (args) {
 };
 export var Default = Template.bind({});
 Default.args = {
-    checked: false,
-    label: "Default Checkbox",
-    boxColor: "#000000",
+    checked: true,
+    label: "my-email-address@provider.com",
+    boxColor: "#25beeb",
     markColor: "#FFFFFF",
     textColor: "#000000",
     size: "default",
-    markType: "cross",
+    markType: "check",
     isSignedIn: true,
 };
 export var Checked = Template.bind({});
@@ -129,3 +136,6 @@ export var NotSignedInEmail = Template.bind({});
 NotSignedInEmail.args = __assign(__assign({}, EmailLabel.args), { label: "vincent.desbrosses@hotmail.com", isSignedIn: false });
 export var NotSignedInChecked = Template.bind({});
 NotSignedInChecked.args = __assign(__assign({}, NotSignedIn.args), { checked: true });
+// Exemple avec un chemin d'icône personnalisé
+export var CustomIconPath = Template.bind({});
+CustomIconPath.args = __assign({}, NotSignedIn.args);

package/package.json

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