allaw-ui 1.0.7 → 1.0.9

package/dist/components/atoms/typography/CardDate.d.ts

@@ -3,6 +3,7 @@ import "./cardDate.css";
 interface CardDateProps {
     date: string;
     showYear?: boolean;
+    variant?: "small" | "normal";
 }
 declare const CardDate: React.FC<CardDateProps>;
 export default CardDate;

package/dist/components/atoms/typography/CardDate.js

@@ -17,21 +17,29 @@ var MONTHS_FR = [
     "déc.",
 ];
 var CardDate = function (_a) {
-    var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b;
+    var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
     var parseDate = function (dateString) {
         var d = new Date(dateString);
         return {
             weekDay: DAYS_FR[d.getDay()],
             day: d.getDate(),
             month: MONTHS_FR[d.getMonth()],
-            year: d.getFullYear(),
+            yearFull: d.getFullYear(),
+            yearShort: d.getFullYear().toString().slice(-2),
         };
     };
-    var _c = parseDate(date), weekDay = _c.weekDay, day = _c.day, month = _c.month, year = _c.year;
-    return (React.createElement("div", { className: "card-date" },
+    var _d = parseDate(date), weekDay = _d.weekDay, day = _d.day, month = _d.month, yearFull = _d.yearFull, yearShort = _d.yearShort;
+    return (React.createElement(React.Fragment, null, variant === "small" ? (React.createElement("div", { className: "card-date" },
+        React.createElement("span", { className: "card-date-closed-at" }, "Cl\u00F4tur\u00E9 le"),
+        React.createElement("span", { className: "card-date-small" },
+            day,
+            " ",
+            month,
+            " ",
+            yearShort))) : (React.createElement("div", { className: "card-date" },
         React.createElement("span", { className: "card-date-weekday" }, weekDay),
         React.createElement("span", { className: "card-date-day" }, day),
         React.createElement("span", { className: "card-date-month" }, month),
-        showYear && React.createElement("span", { className: "card-date-year" }, year)));
+        showYear && React.createElement("span", { className: "card-date-year" }, yearFull)))));
 };
 export default CardDate;

package/dist/components/atoms/typography/cardDate.css

@@ -36,3 +36,21 @@
   font-family: "Inter", sans-serif;
   font-size: 12px;
 }
+
+.card-date-closed-at {
+  color: var(--mid-grey, #728ea7);
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  text-transform: lowercase;
+  line-height: 1;
+  padding-bottom: 5px;
+}
+
+.card-date-small {
+  color: var(--mid-grey, #728ea7);
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 0.7;
+  padding-bottom: 3px;
+}

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

@@ -2,19 +2,21 @@
 
 .case-card-wrapper {
   display: flex;
-  width: 100%;
-  min-width: 350px;
+  flex-grow: 1;
   max-width: 500px;
+  min-width: 350px;
   height: 150px;
   padding: 10px 18px 14px 18px;
   justify-content: space-between;
   align-items: flex-start;
+  flex-shrink: 0;
   border-radius: 8px;
   border: 3px solid transparent;
   background: var(--Primary-Blanc, #fff);
   box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
   cursor: pointer;
   transition: all 0.15s ease;
+  width: 100%;
 }
 
 .case-card-wrapper:hover {
@@ -25,7 +27,7 @@
 
 .case-card-wrapper:active {
   transform: scale(1.01);
-  background-color: var(--grey-light);
+  background-color: var(--grey-light), #f6fcfe;
 }
 
 .case-card-wrapper.case-card-mobile,
@@ -38,9 +40,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
+  align-self: stretch;
 }
 
 .case-card-header {
@@ -64,7 +64,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  color: var(--Primary-Mid-black, var(--dark-grey, #171e25));
+  color: var(--dark-grey, #171e25);
   text-overflow: ellipsis;
   font-family: Inter, sans-serif;
   font-size: 17px;
@@ -77,6 +77,10 @@
   width: 100%;
 }
 
+.case-card-title.closed {
+  color: var(--mid-grey, #728ea7);
+}
+
 .case-card-next-appointment {
   display: flex;
   flex-direction: column;
@@ -84,7 +88,6 @@
   gap: 8px;
   padding-top: 6px;
   padding-left: 16px;
-  flex-shrink: 0;
 }
 
 .case-card-next-appointment-label {
@@ -100,8 +103,6 @@
   display: flex;
   gap: 8px;
   margin-top: 8px;
-  flex-wrap: wrap;
-  width: 100%;
 }
 
 .case-card-mobile .case-card-next-appointment-label {

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

@@ -10,6 +10,7 @@ export interface CaseCardProps {
     categories: string[];
     variant: "desktop" | "mobile" | "archived";
     categoryLabelLimit?: number;
+    isClosed?: boolean;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

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

@@ -3,14 +3,14 @@ import "./CaseCard.css";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import CardDate from "../../atoms/typography/CardDate";
 var CaseCard = function (_a) {
-    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b;
+    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isClosed, isClosed = _c === void 0 ? false : _c;
     return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
         React.createElement("div", { className: "case-card-content" },
             React.createElement("div", { className: "case-card-header" },
-                React.createElement("h2", { className: "case-card-title", title: title }, title),
+                React.createElement("h2", { className: "case-card-title ".concat(isClosed ? "closed" : ""), title: title }, title),
                 React.createElement("span", { className: "case-card-client-name" }, clientName)),
             React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
         nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
-            React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop" })))));
+            React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop", variant: isClosed ? "small" : "normal" })))));
 };
 export default CaseCard;

package/package.json

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