allaw-ui 1.0.9 → 1.0.11

package/dist/components/atoms/progressBars/ProgressBar.js

@@ -9,7 +9,7 @@ var ProgressBar = function (_a) {
     return (React.createElement("div", { className: "progress-bar-container" },
         startIcon && currentStep > 1 ? (React.createElement("div", { className: "progress-bar-icon-container" },
             React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
-                React.createElement("i", { className: "allaw-icon-chevron-left" })))) : React.createElement("div", { style: { minWidth: "32px" } }),
+                React.createElement("i", { className: "allaw-icon-chevron-left" })))) : null,
         React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
             React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
         endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },

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

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

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

@@ -1,4 +1,3 @@
-// CardDate.tsx
 import React from "react";
 import "./cardDate.css";
 var DAYS_FR = ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."];
@@ -17,7 +16,7 @@ var MONTHS_FR = [
     "déc.",
 ];
 var CardDate = function (_a) {
-    var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
+    var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? "hybride" : _c, label = _a.label, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d;
     var parseDate = function (dateString) {
         var d = new Date(dateString);
         return {
@@ -28,18 +27,26 @@ var CardDate = function (_a) {
             yearShort: d.getFullYear().toString().slice(-2),
         };
     };
-    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" },
+    var _e = parseDate(date), weekDay = _e.weekDay, day = _e.day, month = _e.month, yearFull = _e.yearFull, yearShort = _e.yearShort;
+    return (React.createElement(React.Fragment, null, variant === "horizontal" ? (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-horizontal-label" }, label),
+        React.createElement("span", { className: "card-date-horizontal ".concat(isDisabled ? "disabled" : "", " ") },
             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" }, yearFull)))));
+            showYear ? yearShort : ""))) : variant === "vertical" ? (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-vertical-label" }, label),
+        React.createElement("span", { className: "card-date-vertical-weekday ".concat(isDisabled ? "disabled" : "") }, weekDay),
+        React.createElement("span", { className: "card-date-vertical-day ".concat(isDisabled ? "disabled" : "") }, day),
+        React.createElement("span", { className: "card-date-vertical-month ".concat(isDisabled ? "disabled" : "") }, month),
+        showYear && (React.createElement("span", { className: "card-date-vertical-year" }, yearFull)))) : (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-hybride-label" }, label),
+        React.createElement("span", { className: "card-date-vertical-day-line" },
+            React.createElement("span", { className: "card-date-hybride-day ".concat(isDisabled ? "disabled" : "") },
+                day,
+                " "),
+            React.createElement("span", { className: "card-date-hybride-month ".concat(isDisabled ? "disabled" : "") }, month)),
+        showYear && (React.createElement("span", { className: "card-date-hybride-year" }, yearFull))))));
 };
 export default CardDate;

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

@@ -5,7 +5,42 @@
   gap: 2px;
 }
 
-.card-date-weekday {
+.card-date.vertical {
+  flex-direction: column; /* Assurez-vous que la direction est verticale */
+}
+
+/* horizontal */
+
+.card-date-horizontal {
+  flex-direction: row;
+  color: var(--dark-grey, #456073);
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 0.7;
+  padding-bottom: 3px;
+}
+
+.card-date-horizontal-label {
+  color: var(--mid-grey, #728ea7);
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  text-transform: lowercase;
+  line-height: 1;
+  padding-bottom: 5px;
+}
+
+.card-date-horizontal-weekday {
+  color: var(--dark-grey, #456073);
+}
+
+.card-date-horizontal-weekday.disabled {
+  color: var(--mid-grey, #728ea7);
+}
+
+/* vertical */
+
+.card-date-vertical-weekday {
   color: var(--mid-grey, #728ea7);
   font-family: "Inter", sans-serif;
   font-size: 14px;
@@ -14,7 +49,7 @@
   padding-bottom: 5px;
 }
 
-.card-date-day {
+.card-date-vertical-day {
   color: var(--dark-grey, #456073);
   font-family: "Inter", sans-serif;
   font-size: 36px;
@@ -23,7 +58,7 @@
   padding-bottom: 3px;
 }
 
-.card-date-month {
+.card-date-vertical-month {
   color: var(--dark-grey, #456073);
   font-family: "Inter", sans-serif;
   font-size: 18px;
@@ -31,26 +66,70 @@
   padding-bottom: 1px;
 }
 
-.card-date-year {
+.card-date-vertical-year {
   color: var(--mid-grey, #728ea7);
   font-family: "Inter", sans-serif;
   font-size: 12px;
 }
 
-.card-date-closed-at {
+.card-date-vertical-label {
   color: var(--mid-grey, #728ea7);
   font-family: "Inter", sans-serif;
-  font-size: 14px;
+  font-size: 12px;
   text-transform: lowercase;
   line-height: 1;
   padding-bottom: 5px;
 }
 
-.card-date-small {
+/* hybride */
+
+.card-date-hybride-weekday {
   color: var(--mid-grey, #728ea7);
   font-family: "Inter", sans-serif;
   font-size: 14px;
-  font-weight: 400;
+  text-transform: lowercase;
+  line-height: 1;
+  padding-bottom: 5px;
+}
+
+.card-date-hybride-day {
+  color: var(--dark-grey, #456073);
+  font-family: "Inter", sans-serif;
+  font-size: 22px;
+  font-weight: 700;
   line-height: 0.7;
   padding-bottom: 3px;
 }
+
+.card-date-hybride-month {
+  color: var(--dark-grey, #456073);
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  line-height: 0.9;
+  padding-bottom: 1px;
+}
+
+.card-date-hybride-year {
+  color: var(--mid-grey, #728ea7);
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+}
+
+.card-date-hybride-label {
+  color: var(--mid-grey, #728ea7);
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  text-transform: lowercase;
+  line-height: 1;
+  padding-bottom: 5px;
+  letter-spacing: 0.3px;
+}
+
+.card-date-vertical-day.disabled,
+.card-date-vertical-month.disabled,
+.card-date-hybride-day.disabled,
+.card-date-hybride-month.disabled,
+.card-date-horizontal.disabled {
+  color: var(--mid-grey, #728ea7);
+}

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

@@ -11,22 +11,23 @@
   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%;
+  border: 3px solid var(--grey-venom, #e6edf5);
+  /* border: 1px solid var(-grey-venom, #e6edf5); */
 }
 
 .case-card-wrapper:hover {
   border-color: var(--bleu-allaw, #25beeb);
   box-shadow: 0px 4px 12px rgba(15, 133, 168, 0.12);
-  transform: scale(1.005);
+  transform: scale(1.01);
 }
 
 .case-card-wrapper:active {
-  transform: scale(1.01);
+  transform: scale(1.015);
   background-color: var(--grey-light), #f6fcfe;
 }
 
@@ -41,6 +42,8 @@
   justify-content: space-between;
   align-items: flex-start;
   align-self: stretch;
+  width: calc(100% - 100px);
+  overflow: hidden;
 }
 
 .case-card-header {
@@ -48,6 +51,8 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .case-card-client-name {
@@ -60,12 +65,11 @@
 }
 
 .case-card-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  max-width: 100%;
   overflow: hidden;
-  color: var(--dark-grey, #171e25);
   text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dark-grey, #171e25);
   font-family: Inter, sans-serif;
   font-size: 17px;
   font-weight: 600;
@@ -73,8 +77,6 @@
   letter-spacing: 0.1px;
   padding-top: 4px;
   margin: 0;
-  word-break: break-word;
-  width: 100%;
 }
 
 .case-card-title.closed {
@@ -84,10 +86,11 @@
 .case-card-next-appointment {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
-  padding-top: 6px;
-  padding-left: 16px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-width: 100px;
+  flex-shrink: 0;
 }
 
 .case-card-next-appointment-label {
@@ -102,7 +105,9 @@
 .case-card-categories {
   display: flex;
   gap: 8px;
-  margin-top: 8px;
+  /* margin-top: 8px; */
+  margin-top: 16px;
+  /* background-color: red; */
 }
 
 .case-card-mobile .case-card-next-appointment-label {
@@ -112,3 +117,9 @@
 .case-card-archived .case-card-next-appointment {
   display: none;
 }
+
+.case-card-progress-bar {
+  /* background-color: lightgray; */
+  width: 100%;
+  margin-left: -10px;
+}

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

@@ -11,6 +11,9 @@ export interface CaseCardProps {
     variant: "desktop" | "mobile" | "archived";
     categoryLabelLimit?: number;
     isClosed?: boolean;
+    isDisabled?: boolean;
+    dateStyle?: "horizontal" | "hybride" | "vertical";
+    dateLabel?: string;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

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

@@ -2,15 +2,18 @@ import React from "react";
 import "./CaseCard.css";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import CardDate from "../../atoms/typography/CardDate";
+import ProgressBar from "../../atoms/progressBars/ProgressBar";
 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, _c = _a.isClosed, isClosed = _c === void 0 ? false : _c;
+    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, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.dateStyle, dateStyle = _e === void 0 ? "hybride" : _e, dateLabel = _a.dateLabel;
     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 ".concat(isClosed ? "closed" : ""), title: title }, title),
                 React.createElement("span", { className: "case-card-client-name" }, clientName)),
+            React.createElement("div", { className: "case-card-progress-bar" },
+                React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: 100, currentStep: 50 })),
             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", variant: isClosed ? "small" : "normal" })))));
+            React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop", variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
 };
 export default CaseCard;

package/package.json

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