allaw-ui 2.8.6 → 2.8.8

package/dist/assets/allaw-icon-unlink-red.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="2335.7976"
+   height="1866.5605"
+   viewBox="0 0 2335.7976 1866.5605"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="g1"
+     transform="translate(-4.4480934,-12.748703)">
+    <path
+       style="fill:#e15151;fill-opacity:1"
+       d="m 2269.7815,1878.0966 c -13.593,-2.635 -23.5249,-9.5969 -100,-70.096 C 2044.8682,1709.182 994.04249,879.65701 496.44811,487.06609 238.78822,283.77814 27.323043,116.00988 23.458207,111.81426 12.625553,100.05446 4.4480936,82.050354 4.4480936,69.960164 c 0,-13.02018 8.1553014,-31.97103 17.1751034,-39.91058 22.736142,-20.01315 52.503929,-22.8848301 77.313623,-7.45839 3.79827,2.36173 113.84214,88.941856 244.54195,192.400286 130.6998,103.45844 486.03602,384.58766 789.63603,624.73163 303.6,240.14389 693.3001,548.40379 866.0001,685.02189 172.7,136.6182 317.1836,251.489 321.0748,255.2685 9.5783,9.3035 14.4999,17.0576 17.8711,28.1566 2.4862,8.1852 2.6647,10.4765 1.4651,18.8037 -3.5208,24.4389 -21.5986,43.8132 -47.2523,50.6411 -7.9178,2.1074 -13.4903,2.2268 -22.4921,0.4817 z M 680.44812,1526.6632 c -51.04044,-2.7526 -110.96477,-14.0971 -160.28889,-30.345 -31.28393,-10.3052 -43.69596,-15.4028 -74.21337,-30.4796 -57.63055,-28.4716 -103.18031,-61.3968 -151.56211,-109.555 -33.63747,-33.482 -59.98711,-66.3934 -83.98212,-104.8961 -13.05937,-20.9552 -35.8899,-65.8915 -43.94867,-86.5022 -8.29405,-21.2125 -19.13701,-55.4351 -24.70293,-77.9677 -23.24257,-94.09279 -23.79635,-180.00469 -1.7793,-276.03229 18.81484,-82.0611 57.088,-161.65037 109.00027,-226.66671 9.76161,-12.2257 36.62492,-43.33334 37.42095,-43.33334 0.93498,0 89.45114,70.99954 89.82343,72.04812 0.23867,0.67221 -5.19645,7.08638 -12.07804,14.25371 -23.31589,24.28403 -42.82657,49.50436 -58.96194,76.21672 -43.1206,71.3868 -65.16858,152.7644 -65.24498,240.8148 -0.0466,53.6611 6.31376,95.26539 22.72763,148.66659 28.51889,92.7841 91.65512,178.2136 174.45673,236.057 50.17016,35.0478 115.64465,62.1678 177.33333,73.4527 46.23683,8.4582 39.04763,8.168 224.66668,9.0707 l 170.00001,0.8268 7.8935,2.9693 c 20.5598,7.7341 30.6449,18.8701 36.1176,39.8813 6.6256,25.4372 -4.9211,54.3885 -25.9397,65.0394 -14.9045,7.5527 -9.7212,7.3498 -181.40474,7.1032 -86.90001,-0.1248 -161.30001,-0.4049 -165.33334,-0.6224 z M 2014.8325,1313.1135 c -25.4553,-19.5589 -46.3053,-36.1766 -46.3333,-36.9283 -0.028,-0.7517 4.4949,-5.8517 10.0509,-11.3333 42.6738,-42.1022 80.7458,-103.8909 101.4413,-164.6333 16.6253,-48.7961 24.9272,-100.2101 24.9745,-154.66669 0.047,-54.3756 -7.3218,-100.8794 -24.4397,-154.2325 -28.8724,-89.9896 -91.787,-173.93582 -172.7447,-230.49106 -50.0575,-34.96908 -116.037,-62.36535 -176.6666,-73.35613 -47.3808,-8.58908 -39.4076,-8.26568 -225.3334,-9.13955 l -170,-0.79902 -9.048,-3.50947 c -19.6654,-7.62765 -29.6058,-18.82855 -34.9631,-39.39665 -6.6515,-25.53687 4.9927,-54.42477 26.2872,-65.21553 14.9632,-7.58243 9.2982,-7.37985 190.9032,-6.8268 159.7312,0.48643 167.7862,0.62716 189.5397,3.31138 46.3542,5.71979 86.5698,14.48922 125.9801,27.47126 31.5765,10.40152 43.8981,15.46042 74.6,30.62867 57.4597,28.38792 104.7103,62.55176 151.4326,109.49107 48.1582,48.3818 81.0834,93.93156 109.555,151.5621 15.0768,30.51743 20.1744,42.92943 30.4797,74.21333 34.6407,105.16 39.6741,210.9927 15.1379,318.28889 -19.0214,83.1805 -57.5484,165.5223 -106.3669,227.3334 -12.3679,15.6594 -36.6347,44.0358 -37.5374,43.8943 -0.3666,-0.057 -21.4937,-16.1072 -46.949,-35.6661 z M 670.44812,1002.2166 c -22.284,-3.35159 -36.00605,-12.22709 -44.04198,-28.48669 -9.37704,-18.9731 -9.37704,-38.7161 0,-57.6893 4.8759,-9.8657 10.2903,-15.4084 21.05229,-21.5511 9.92689,-5.6661 18.89143,-7.1454 47.80391,-7.8885 l 27.48089,-0.7062 70.51911,56.3324 c 38.78552,30.9828 71.70245,57.4557 73.14875,58.82859 2.57097,2.4405 0.48895,2.4924 -93.33334,2.3298 -52.77963,-0.091 -98.96297,-0.6176 -102.62963,-1.169 z m 881.54678,-55.78969 c -40.216,-31.4865 -73.8145,-57.9427 -74.6633,-58.7915 -1.1688,-1.1689 22.8808,-1.4332 99.12,-1.0896 94.5402,0.4262 101.1499,0.6081 108.6633,2.9912 21.3695,6.778 33.1464,19.0365 38.673,40.2544 6.3781,24.4872 -3.707,52.1861 -23.1211,63.5026 -13.1175,7.64619 -20.5851,9.12079 -49.5519,9.78499 l -26,0.5962 z"
+       id="path1" />
+  </g>
+</svg>

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

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

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

@@ -1,9 +1,26 @@
 import React, { useState } from "react";
 import styles from "./ColoredCheckbox.module.css";
 import "../../../styles/global.css"; // Pour importer les icônes allaw
+// Fonction pour formater l'email avec des ellipses intelligentes
+var formatEmail = function (email) {
+    if (!email || typeof email !== "string" || !email.includes("@")) {
+        return email;
+    }
+    // Diviser l'email en parties
+    var _a = email.split("@"), localPart = _a[0], domainFull = _a[1];
+    // Diviser la partie domaine
+    var lastDotIndex = domainFull.lastIndexOf(".");
+    var domainPart = lastDotIndex > 0 ? domainFull.substring(0, lastDotIndex) : domainFull;
+    var tld = lastDotIndex > 0 ? domainFull.substring(lastDotIndex) : "";
+    return (React.createElement("div", { className: styles.emailContainer },
+        React.createElement("span", { className: "".concat(styles.emailPart, " ").concat(styles.emailLocalPart) }, localPart),
+        React.createElement("span", null, "@"),
+        React.createElement("span", { className: "".concat(styles.emailPart, " ").concat(styles.emailDomainPart) }, domainPart),
+        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;
-    var _h = useState(checked), isChecked = _h[0], setIsChecked = _h[1];
+    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];
     // Generate a random ID if none is provided
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
     var handleClick = function (e) {
@@ -30,8 +47,13 @@ var ColoredCheckbox = function (_a) {
     var labelStyle = {
         color: textColor,
     };
+    // Formater le label s'il s'agit d'une chaîne de caractères qui ressemble à un email
+    var formattedLabel = typeof label === "string" && label.includes("@")
+        ? formatEmail(label)
+        : 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 }))),
-        label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, label))));
+        isSignedIn === false && (React.createElement("img", { src: "/assets/allaw-icon-unlink-red.svg", alt: "Non connect\u00E9", className: styles.unlinkIcon })),
+        label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, formattedLabel))));
 };
 export default ColoredCheckbox;

package/dist/components/molecules/checkboxForm/ColoredCheckbox.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   gap: 0.75rem;
   cursor: pointer;
+  width: 100%;
 }
 
 .checkbox {
@@ -42,10 +43,47 @@
   font-size: 11px;
 }
 
+.unlinkIcon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 .label {
-  font-family: sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 14px;
   line-height: 1.5;
   cursor: pointer;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.emailContainer {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.emailPart {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.emailLocalPart {
+  flex-shrink: 1;
+  min-width: 40px;
+}
+
+.emailDomainPart {
+  flex-shrink: 2;
+}
+
+.emailTLD {
+  flex-shrink: 0;
 }

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

@@ -53,6 +53,15 @@ declare namespace _default {
             }
             export { control_6 as control };
         }
+        export namespace isSignedIn {
+            export namespace control_7 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_7 as control };
+            let defaultValue_3: boolean;
+            export { defaultValue_3 as defaultValue };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -75,4 +84,13 @@ export const SmallChecked: any;
 export const CustomColors: any;
 export const NoLabel: any;
 export const DarkBackground: any;
+export const EmailLabel: any;
+export const EmailLabelSmallContainer: any;
+export const EmailLabelVerySmallContainer: any;
+export const LongEmailLabel: any;
+export const LongEmailLabelSmallContainer: any;
+export const LongEmailLabelVerySmallContainer: any;
+export const NotSignedIn: any;
+export const NotSignedInEmail: any;
+export const NotSignedInChecked: any;
 import ColoredCheckbox from "./ColoredCheckbox";

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

@@ -52,6 +52,12 @@ export default {
                 options: ["cross", "check"],
             },
         },
+        isSignedIn: {
+            control: {
+                type: "boolean",
+            },
+            defaultValue: true,
+        },
     },
     parameters: {
         backgrounds: {
@@ -70,7 +76,8 @@ var Template = function (args) {
     var handleChange = function (newChecked) {
         setChecked(newChecked);
     };
-    return (React.createElement(ColoredCheckbox, __assign({}, args, { checked: checked, onChange: handleChange })));
+    return (React.createElement("div", { style: { width: args.containerWidth || "100%" } },
+        React.createElement(ColoredCheckbox, __assign({}, args, { checked: checked, onChange: handleChange }))));
 };
 export var Default = Template.bind({});
 Default.args = {
@@ -81,6 +88,7 @@ Default.args = {
     textColor: "#000000",
     size: "default",
     markType: "cross",
+    isSignedIn: true,
 };
 export var Checked = Template.bind({});
 Checked.args = __assign(__assign({}, Default.args), { checked: true, label: "Checked Checkbox" });
@@ -101,3 +109,23 @@ DarkBackground.args = __assign(__assign({}, Default.args), { checked: true, boxC
 DarkBackground.parameters = {
     backgrounds: { default: "dark" },
 };
+// Exemples avec des adresses email
+export var EmailLabel = Template.bind({});
+EmailLabel.args = __assign(__assign({}, Default.args), { checked: true, label: "vincent.desbrosses@hotmail.com", boxColor: "#25beeb" });
+export var EmailLabelSmallContainer = Template.bind({});
+EmailLabelSmallContainer.args = __assign(__assign({}, EmailLabel.args), { containerWidth: "300px" });
+export var EmailLabelVerySmallContainer = Template.bind({});
+EmailLabelVerySmallContainer.args = __assign(__assign({}, EmailLabel.args), { containerWidth: "200px" });
+export var LongEmailLabel = Template.bind({});
+LongEmailLabel.args = __assign(__assign({}, Default.args), { checked: true, label: "very.long.email.address.with.many.parts@some-company-with-long-domain-name.com", boxColor: "#25beeb" });
+export var LongEmailLabelSmallContainer = Template.bind({});
+LongEmailLabelSmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "300px" });
+export var LongEmailLabelVerySmallContainer = Template.bind({});
+LongEmailLabelVerySmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "200px" });
+// Exemples avec isSignedIn
+export var NotSignedIn = Template.bind({});
+NotSignedIn.args = __assign(__assign({}, Default.args), { label: "User not signed in", isSignedIn: false });
+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 });

package/package.json

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