allaw-ui 5.5.3 → 5.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
backdrop-filter: blur(6px) saturate(140%);
|
|
22
22
|
-webkit-backdrop-filter: blur(6px) saturate(140%);
|
|
23
23
|
position: relative;
|
|
24
|
-
overflow:
|
|
24
|
+
overflow: visible;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.case-card-wrapper::before {
|
|
@@ -34,6 +34,32 @@
|
|
|
34
34
|
z-index: 1;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.case-card-notification-badge {
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: -10px;
|
|
40
|
+
right: -10px;
|
|
41
|
+
z-index: 3;
|
|
42
|
+
min-width: 22px;
|
|
43
|
+
height: 22px;
|
|
44
|
+
padding: 0 7px;
|
|
45
|
+
border-radius: 999px;
|
|
46
|
+
background: var(--bleu-allaw, #25beeb);
|
|
47
|
+
color: #ffffff;
|
|
48
|
+
border: 3px solid rgba(255, 255, 255, 1);
|
|
49
|
+
box-shadow: 0 6px 18px rgba(23, 30, 37, 0.18),
|
|
50
|
+
0 2px 6px rgba(23, 30, 37, 0.12);
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
font-family: "Open Sans", sans-serif;
|
|
55
|
+
font-size: 12px;
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
line-height: 1;
|
|
58
|
+
letter-spacing: 0.2px;
|
|
59
|
+
user-select: none;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
37
63
|
.case-card-wrapper:hover {
|
|
38
64
|
box-shadow: 0 6px 18px 0 rgba(37, 190, 235, 0.13),
|
|
39
65
|
0 2px 8px 0 rgba(114, 142, 167, 0.08);
|
|
@@ -134,10 +160,36 @@
|
|
|
134
160
|
.case-card-categories {
|
|
135
161
|
display: flex;
|
|
136
162
|
gap: 8px;
|
|
137
|
-
margin-top: 16px;
|
|
138
163
|
overflow: visible;
|
|
139
164
|
flex-wrap: wrap;
|
|
165
|
+
flex: 1;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.case-card-footer {
|
|
169
|
+
display: flex;
|
|
170
|
+
justify-content: space-between;
|
|
171
|
+
align-items: flex-end;
|
|
140
172
|
width: 100%;
|
|
173
|
+
margin-top: 16px;
|
|
174
|
+
gap: 8px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.case-card-bottom-right {
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: 8px;
|
|
181
|
+
flex-shrink: 0;
|
|
182
|
+
margin-bottom: 2px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.case-card-document-counter {
|
|
186
|
+
color: var(--mid-grey, #728ea7);
|
|
187
|
+
font-family: "Open Sans", sans-serif;
|
|
188
|
+
font-size: 12px;
|
|
189
|
+
font-weight: 400;
|
|
190
|
+
line-height: 1;
|
|
191
|
+
letter-spacing: 0.3px;
|
|
192
|
+
white-space: nowrap;
|
|
141
193
|
}
|
|
142
194
|
|
|
143
195
|
.case-card-mobile .case-card-next-appointment-label {
|
|
@@ -4,6 +4,7 @@ import { BarColor } from "../../atoms/progressBars/ProgressBar";
|
|
|
4
4
|
export interface CaseCardProps {
|
|
5
5
|
clientName: string;
|
|
6
6
|
title: string;
|
|
7
|
+
notificationCount?: number;
|
|
7
8
|
nextAppointment?: {
|
|
8
9
|
date: string;
|
|
9
10
|
time?: string;
|
|
@@ -19,6 +20,9 @@ export interface CaseCardProps {
|
|
|
19
20
|
steps?: number;
|
|
20
21
|
currentStep?: number;
|
|
21
22
|
hideProgressBar?: boolean;
|
|
23
|
+
avatarUrl?: string;
|
|
24
|
+
receivedDocuments?: number;
|
|
25
|
+
totalDocuments?: number;
|
|
22
26
|
}
|
|
23
27
|
declare const CaseCard: React.FC<CaseCardProps>;
|
|
24
28
|
export default CaseCard;
|
|
@@ -3,16 +3,28 @@ import "./CaseCard.css";
|
|
|
3
3
|
import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
|
|
4
4
|
import CardDate from "../../atoms/typography/CardDate";
|
|
5
5
|
import ProgressBar from "../../atoms/progressBars/ProgressBar";
|
|
6
|
+
import AvatarBubble from "../proSwitch/AvatarBubble";
|
|
6
7
|
var CaseCard = function (_a) {
|
|
7
|
-
var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant,
|
|
8
|
+
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;
|
|
9
|
+
var normalizedNotificationCount = Math.max(0, Math.floor(Number.isFinite(notificationCount) ? notificationCount : 0));
|
|
10
|
+
var notificationLabel = normalizedNotificationCount > 99
|
|
11
|
+
? "99+"
|
|
12
|
+
: String(normalizedNotificationCount);
|
|
8
13
|
return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
|
|
14
|
+
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)),
|
|
9
15
|
React.createElement("div", { className: "case-card-content ".concat(hideProgressBar ? "case-card-content-no-progress" : "") },
|
|
10
16
|
React.createElement("div", { className: "case-card-header" },
|
|
11
17
|
React.createElement("h2", { className: "case-card-title ".concat(isDisabled ? "closed" : ""), title: title }, title),
|
|
12
18
|
React.createElement("span", { className: "case-card-client-name" }, clientName)),
|
|
13
19
|
!hideProgressBar && (React.createElement("div", { className: "case-card-progress-bar" },
|
|
14
20
|
React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: steps, isWrapperProgressBar: false, currentStep: currentStep, barColor: barColor }))),
|
|
15
|
-
React.createElement("div", { className: "case-card-
|
|
21
|
+
React.createElement("div", { className: "case-card-footer" },
|
|
22
|
+
React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); })),
|
|
23
|
+
(avatarUrl || totalDocuments !== undefined) && (React.createElement("div", { className: "case-card-bottom-right" },
|
|
24
|
+
avatarUrl && (React.createElement(AvatarBubble, { firstName: "", name: "", src: avatarUrl, size: 24, disableHoverAnimation: true, clickable: false })),
|
|
25
|
+
totalDocuments !== undefined && (React.createElement("span", { className: "case-card-document-counter" }, receivedDocuments !== null && receivedDocuments !== void 0 ? receivedDocuments : 0,
|
|
26
|
+
" / ",
|
|
27
|
+
totalDocuments)))))),
|
|
16
28
|
nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
|
|
17
29
|
React.createElement(CardDate, { date: nextAppointment.date, showYear: showYear, variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
|
|
18
30
|
};
|