allaw-ui 5.5.8 → 5.6.0

package/dist/components/molecules/caseCard/CaseCard.css

@@ -182,26 +182,39 @@
   margin-bottom: 2px;
 }
 
+.case-card-pro-identity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+}
+
+.case-card-pro-name.tiny-info {
+  width: auto;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+}
+
 .case-card-document-badge {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 32px;
-  border-radius: 8px;
+  height: 24px;
+  border-radius: 6px;
   background-color: #eef5fc;
-  padding: 0 14px;
-  gap: 10px;
+  padding: 0 10px;
+  gap: 8px;
 }
 
 .case-card-document-badge i {
   color: #25beeb;
-  font-size: 18px;
+  font-size: 14px;
 }
 
 .case-card-document-counter {
   color: #456073;
   font-family: "Open Sans", sans-serif;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   line-height: 1;
   letter-spacing: 0.3px;

package/dist/components/molecules/caseCard/CaseCard.d.ts

@@ -23,6 +23,8 @@ export interface CaseCardProps {
     avatarUrl?: string;
     receivedDocuments?: number;
     totalDocuments?: number;
+    proFirstName?: string;
+    proLastName?: string;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

package/dist/components/molecules/caseCard/CaseCard.js

@@ -1,16 +1,58 @@
-import React from "react";
+"use client";
+import React, { useRef, useState, useEffect } from "react";
 import "./CaseCard.css";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import CardDate from "../../atoms/typography/CardDate";
 import ProgressBar from "../../atoms/progressBars/ProgressBar";
 import AvatarBubble from "../proSwitch/AvatarBubble";
+import { TinyInfo } from "../../atoms/typography";
 var CaseCard = function (_a) {
-    var clientName = _a.clientName, title = _a.title, _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _c = _a.categoryLabelLimit, categoryLabelLimit = _c === void 0 ? 20 : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.dateStyle, dateStyle = _e === void 0 ? "hybride" : _e, dateLabel = _a.dateLabel, _f = _a.barColor, barColor = _f === void 0 ? "blue" : _f, _g = _a.showYear, showYear = _g === void 0 ? true : _g, _h = _a.steps, steps = _h === void 0 ? 100 : _h, _j = _a.currentStep, currentStep = _j === void 0 ? 50 : _j, _k = _a.hideProgressBar, hideProgressBar = _k === void 0 ? false : _k, avatarUrl = _a.avatarUrl, receivedDocuments = _a.receivedDocuments, totalDocuments = _a.totalDocuments;
+    var clientName = _a.clientName, title = _a.title, _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _c = _a.categoryLabelLimit, categoryLabelLimit = _c === void 0 ? 20 : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.dateStyle, dateStyle = _e === void 0 ? "hybride" : _e, dateLabel = _a.dateLabel, _f = _a.barColor, barColor = _f === void 0 ? "blue" : _f, _g = _a.showYear, showYear = _g === void 0 ? true : _g, _h = _a.steps, steps = _h === void 0 ? 100 : _h, _j = _a.currentStep, currentStep = _j === void 0 ? 50 : _j, _k = _a.hideProgressBar, hideProgressBar = _k === void 0 ? false : _k, avatarUrl = _a.avatarUrl, receivedDocuments = _a.receivedDocuments, totalDocuments = _a.totalDocuments, proFirstName = _a.proFirstName, proLastName = _a.proLastName;
+    var cardRef = useRef(null);
+    var _l = useState(0), cardWidth = _l[0], setCardWidth = _l[1];
+    useEffect(function () {
+        var currentRef = cardRef.current;
+        if (!currentRef)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                setCardWidth(entry.contentRect.width);
+            }
+        });
+        observer.observe(currentRef);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    var getIdentityText = function () {
+        if (!proLastName)
+            return "";
+        // Niveau 1 (Espace suffisant) : Prénom entier et Nom (Largeur > 420px)
+        if (cardWidth > 420) {
+            return "".concat(proFirstName ? "".concat(proFirstName, " ") : "").concat(proLastName);
+        }
+        // Niveau 2 (Espace réduit) : Initiales du prénom et Nom (Largeur > 350px)
+        if (cardWidth > 350 && proFirstName) {
+            var initials = proFirstName
+                .split(/[\s-]+/)
+                .map(function (part) { return (part[0] ? "".concat(part[0].toUpperCase(), ".") : ""); })
+                .join("");
+            return "".concat(initials, " ").concat(proLastName);
+        }
+        // Niveau 3 (Espace très réduit) : Titre et Nom (Largeur > 280px)
+        if (cardWidth > 280) {
+            return "Me ".concat(proLastName);
+        }
+        // Niveau 4 (Manque de place critique) : Masquer totalement
+        return "";
+    };
+    var identityText = getIdentityText();
     var normalizedNotificationCount = Math.max(0, Math.floor(Number.isFinite(notificationCount) ? notificationCount : 0));
     var notificationLabel = normalizedNotificationCount > 99
         ? "99+"
         : String(normalizedNotificationCount);
-    return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
+    return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant), ref: cardRef },
         normalizedNotificationCount > 0 && (React.createElement("div", { className: "case-card-notification-badge", "aria-label": "".concat(notificationLabel, " notification").concat(normalizedNotificationCount > 1 ? "s" : ""), title: "".concat(notificationLabel, " notification").concat(normalizedNotificationCount > 1 ? "s" : "") }, notificationLabel)),
         React.createElement("div", { className: "case-card-content ".concat(hideProgressBar ? "case-card-content-no-progress" : "") },
             React.createElement("div", { className: "case-card-header" },
@@ -21,9 +63,13 @@ var CaseCard = function (_a) {
             React.createElement("div", { className: "case-card-footer" },
                 React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); })),
                 (avatarUrl ||
+                    proFirstName ||
+                    proLastName ||
                     (receivedDocuments !== undefined &&
                         totalDocuments !== undefined)) && (React.createElement("div", { className: "case-card-bottom-right" },
-                    avatarUrl && (React.createElement(AvatarBubble, { firstName: "", name: "", src: avatarUrl, size: 30, disableHoverAnimation: true, clickable: false })),
+                    (avatarUrl || proFirstName || proLastName) && (React.createElement("div", { className: "case-card-pro-identity" },
+                        React.createElement(AvatarBubble, { firstName: proFirstName || "", name: proLastName || "", src: avatarUrl, size: 24, disableHoverAnimation: true, clickable: false }),
+                        identityText && (React.createElement(TinyInfo, { variant: "medium12", color: "dark-grey", text: identityText, className: "case-card-pro-name", align: "left" })))),
                     receivedDocuments !== undefined &&
                         totalDocuments !== undefined && (React.createElement("div", { className: "case-card-document-badge" },
                         React.createElement("i", { className: "allaw-icon-document" }),

package/package.json

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