allaw-ui 1.0.10 → 1.0.12

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

@@ -68,10 +68,25 @@
 .progress-bar-fill {
   height: 8px;
   border-radius: 8px;
-  background: var(--primary-blue, #25beeb);
   transition: width 0.35s ease;
 }
 
+.progress-bar-fill-blue {
+  background: var(--primary-blue, #25beeb);
+}
+
+.progress-bar-fill-red {
+  background: var(--actions-error, #e15151);
+}
+
+.progress-bar-fill-green {
+  background: var(--actions-valid, #29a36a);
+}
+
+.progress-bar-fill-grey {
+  background: var(--mid-grey, #728ea7);
+}
+
 .progress-bar-close {
   display: flex;
   flex-direction: row;
@@ -79,7 +94,6 @@
   align-items: center;
   width: 32px;
   height: 32px;
-  /* padding: 5px; */
   padding-right: 2px;
   flex-shrink: 0;
   cursor: pointer;

package/dist/components/atoms/progressBars/ProgressBar.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import "./ProgressBar.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
+export type BarColor = "blue" | "red" | "green" | "grey";
 export interface ProgressBarProps {
     steps: number;
     currentStep: number;
@@ -10,6 +11,7 @@ export interface ProgressBarProps {
     onStartIconClick?: () => void;
     onEndIconClick?: () => void;
     showProgressBar?: boolean;
+    barColor?: BarColor;
 }
 declare const ProgressBar: React.FC<ProgressBarProps>;
 export default ProgressBar;

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

@@ -3,7 +3,7 @@ import "./ProgressBar.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var ProgressBar = function (_a) {
-    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d;
+    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e;
     var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
     var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
     return (React.createElement("div", { className: "progress-bar-container" },
@@ -11,7 +11,7 @@ var ProgressBar = function (_a) {
             React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
                 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, "%") } })),
+            React.createElement("div", { className: "progress-bar-fill progress-bar-fill-".concat(barColor), style: { width: "".concat(progressWidth, "%") } })),
         endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
             React.createElement("i", { className: "allaw-icon-close" })))));
 };

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

@@ -42,7 +42,8 @@
   justify-content: space-between;
   align-items: flex-start;
   align-self: stretch;
-  width: 100%;
+  width: calc(100% - 100px);
+  overflow: hidden;
 }
 
 .case-card-header {
@@ -50,6 +51,8 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .case-card-client-name {
@@ -62,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;
@@ -75,8 +77,6 @@
   letter-spacing: 0.1px;
   padding-top: 4px;
   margin: 0;
-  word-break: break-word;
-  width: 100%;
 }
 
 .case-card-title.closed {
@@ -90,11 +90,7 @@
   justify-content: center;
   height: 100%;
   min-width: 100px;
-  /* flex-grow: 1;
-  flex-shrink: 0; */
-  /* gap: 8px; */
-  /* padding-top: 6px;
-  padding-left: 16px; */
+  flex-shrink: 0;
 }
 
 .case-card-next-appointment-label {

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

@@ -1,5 +1,6 @@
 import React from "react";
 import "./CaseCard.css";
+import { BarColor } from "../../atoms/progressBars/ProgressBar";
 export interface CaseCardProps {
     clientName: string;
     title: string;
@@ -10,10 +11,10 @@ export interface CaseCardProps {
     categories: string[];
     variant: "desktop" | "mobile" | "archived";
     categoryLabelLimit?: number;
-    isClosed?: boolean;
     isDisabled?: boolean;
     dateStyle?: "horizontal" | "hybride" | "vertical";
     dateLabel?: string;
+    barColor?: BarColor;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

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

@@ -4,14 +4,14 @@ 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, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.dateStyle, dateStyle = _e === void 0 ? "hybride" : _e, dateLabel = _a.dateLabel;
+    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.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e;
     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("h2", { className: "case-card-title ".concat(isDisabled ? "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(ProgressBar, { startIcon: false, endIcon: false, steps: 100, currentStep: 50, 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 })); }))),
         nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
             React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop", variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));

package/package.json

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