allaw-ui 5.5.4 → 5.5.6

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

@@ -160,10 +160,52 @@
 .case-card-categories {
   display: flex;
   gap: 8px;
-  margin-top: 16px;
   overflow: visible;
   flex-wrap: wrap;
+  flex: 1;
+}
+
+.case-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   width: 100%;
+  margin-top: 16px;
+  gap: 8px;
+}
+
+.case-card-bottom-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+
+.case-card-document-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: 6px;
+  background-color: #eef5fc;
+  padding: 0 10px;
+  gap: 8px;
+}
+
+.case-card-document-badge i {
+  color: #25beeb;
+  font-size: 14px;
+}
+
+.case-card-document-counter {
+  color: #456073;
+  font-family: "Open Sans", sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
 }
 
 .case-card-mobile .case-card-next-appointment-label {

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

@@ -20,6 +20,9 @@ export interface CaseCardProps {
     steps?: number;
     currentStep?: number;
     hideProgressBar?: boolean;
+    avatarUrl?: string;
+    receivedDocuments?: number;
+    totalDocuments?: number;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

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

@@ -3,8 +3,9 @@ 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";
 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;
+    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 normalizedNotificationCount = Math.max(0, Math.floor(Number.isFinite(notificationCount) ? notificationCount : 0));
     var notificationLabel = normalizedNotificationCount > 99
         ? "99+"
@@ -17,7 +18,19 @@ var CaseCard = function (_a) {
                 React.createElement("span", { className: "case-card-client-name" }, clientName)),
             !hideProgressBar && (React.createElement("div", { className: "case-card-progress-bar" },
                 React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: steps, isWrapperProgressBar: false, currentStep: currentStep, barColor: barColor }))),
-            React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
+            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 ||
+                    (receivedDocuments !== undefined &&
+                        totalDocuments !== undefined)) && (React.createElement("div", { className: "case-card-bottom-right" },
+                    avatarUrl && (React.createElement(AvatarBubble, { firstName: "", name: "", src: avatarUrl, size: 24, disableHoverAnimation: true, clickable: false })),
+                    receivedDocuments !== undefined &&
+                        totalDocuments !== undefined && (React.createElement("div", { className: "case-card-document-badge" },
+                        React.createElement("i", { className: "allaw-icon-document" }),
+                        React.createElement("span", { className: "case-card-document-counter" },
+                            receivedDocuments,
+                            " / ",
+                            totalDocuments))))))),
         nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
             React.createElement(CardDate, { date: nextAppointment.date, showYear: showYear, variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
 };

package/package.json

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