allaw-ui 2.8.8 → 2.8.9

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

@@ -11,6 +11,7 @@ export interface ColoredCheckboxProps {
     size?: "default" | "small";
     markType?: "cross" | "check";
     isSignedIn?: boolean;
+    unlinkIconPath?: 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) {
@@ -53,7 +57,7 @@ var ColoredCheckbox = function (_a) {
         : label;
     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 : unlinkIconPath, 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

@@ -62,6 +62,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 +98,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

@@ -30,7 +30,7 @@ export default {
         },
         boxColor: {
             control: "color",
-            defaultValue: "#000000",
+            defaultValue: "#25beeb",
         },
         markColor: {
             control: "color",
@@ -49,7 +49,7 @@ export default {
         markType: {
             control: {
                 type: "select",
-                options: ["cross", "check"],
+                options: ["check", "cross"],
             },
         },
         isSignedIn: {
@@ -58,6 +58,10 @@ export default {
             },
             defaultValue: true,
         },
+        unlinkIconPath: {
+            control: "text",
+            description: "Chemin vers l'icône de déconnexion",
+        },
     },
     parameters: {
         backgrounds: {
@@ -129,3 +133,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.8.9",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",