allaw-ui 2.8.6 → 2.8.7

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

@@ -1,6 +1,23 @@
 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];
@@ -30,8 +47,12 @@ 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))));
+        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 {
@@ -43,9 +44,40 @@
 }
 
 .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

@@ -75,4 +75,10 @@ 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;
 import ColoredCheckbox from "./ColoredCheckbox";

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

@@ -70,7 +70,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 = {
@@ -101,3 +102,16 @@ 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" });

package/package.json

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