allaw-ui 1.0.8 → 1.0.10
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.
- package/dist/components/atoms/progressBars/ProgressBar.js +1 -1
- package/dist/components/atoms/typography/CardDate.d.ts +3 -0
- package/dist/components/atoms/typography/CardDate.js +24 -9
- package/dist/components/atoms/typography/cardDate.css +101 -4
- package/dist/components/molecules/caseCard/CaseCard.css +29 -10
- package/dist/components/molecules/caseCard/CaseCard.d.ts +4 -0
- package/dist/components/molecules/caseCard/CaseCard.js +6 -3
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var ProgressBar = function (_a) {
|
|
|
9
9
|
return (React.createElement("div", { className: "progress-bar-container" },
|
|
10
10
|
startIcon && currentStep > 1 ? (React.createElement("div", { className: "progress-bar-icon-container" },
|
|
11
11
|
React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
|
|
12
|
-
React.createElement("i", { className: "allaw-icon-chevron-left" })))) :
|
|
12
|
+
React.createElement("i", { className: "allaw-icon-chevron-left" })))) : null,
|
|
13
13
|
React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
|
|
14
14
|
React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
|
|
15
15
|
endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
|
|
@@ -3,6 +3,9 @@ import "./cardDate.css";
|
|
|
3
3
|
interface CardDateProps {
|
|
4
4
|
date: string;
|
|
5
5
|
showYear?: boolean;
|
|
6
|
+
variant?: "horizontal" | "hybride" | "vertical";
|
|
7
|
+
label?: string;
|
|
8
|
+
isDisabled?: boolean;
|
|
6
9
|
}
|
|
7
10
|
declare const CardDate: React.FC<CardDateProps>;
|
|
8
11
|
export default CardDate;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// CardDate.tsx
|
|
2
1
|
import React from "react";
|
|
3
2
|
import "./cardDate.css";
|
|
4
3
|
var DAYS_FR = ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."];
|
|
@@ -17,21 +16,37 @@ var MONTHS_FR = [
|
|
|
17
16
|
"déc.",
|
|
18
17
|
];
|
|
19
18
|
var CardDate = function (_a) {
|
|
20
|
-
var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b;
|
|
19
|
+
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;
|
|
21
20
|
var parseDate = function (dateString) {
|
|
22
21
|
var d = new Date(dateString);
|
|
23
22
|
return {
|
|
24
23
|
weekDay: DAYS_FR[d.getDay()],
|
|
25
24
|
day: d.getDate(),
|
|
26
25
|
month: MONTHS_FR[d.getMonth()],
|
|
27
|
-
|
|
26
|
+
yearFull: d.getFullYear(),
|
|
27
|
+
yearShort: d.getFullYear().toString().slice(-2),
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
|
-
var
|
|
31
|
-
return (React.createElement("div", { className: "card-date" },
|
|
32
|
-
React.createElement("span", { className: "card-date-
|
|
33
|
-
React.createElement("span", { className: "card-date-
|
|
34
|
-
|
|
35
|
-
|
|
30
|
+
var _e = parseDate(date), weekDay = _e.weekDay, day = _e.day, month = _e.month, yearFull = _e.yearFull, yearShort = _e.yearShort;
|
|
31
|
+
return (React.createElement(React.Fragment, null, variant === "horizontal" ? (React.createElement("div", { className: "card-date" },
|
|
32
|
+
label && React.createElement("span", { className: "card-date-horizontal-label" }, label),
|
|
33
|
+
React.createElement("span", { className: "card-date-horizontal ".concat(isDisabled ? "disabled" : "", " ") },
|
|
34
|
+
day,
|
|
35
|
+
" ",
|
|
36
|
+
month,
|
|
37
|
+
" ",
|
|
38
|
+
showYear ? yearShort : ""))) : variant === "vertical" ? (React.createElement("div", { className: "card-date" },
|
|
39
|
+
label && React.createElement("span", { className: "card-date-vertical-label" }, label),
|
|
40
|
+
React.createElement("span", { className: "card-date-vertical-weekday ".concat(isDisabled ? "disabled" : "") }, weekDay),
|
|
41
|
+
React.createElement("span", { className: "card-date-vertical-day ".concat(isDisabled ? "disabled" : "") }, day),
|
|
42
|
+
React.createElement("span", { className: "card-date-vertical-month ".concat(isDisabled ? "disabled" : "") }, month),
|
|
43
|
+
showYear && (React.createElement("span", { className: "card-date-vertical-year" }, yearFull)))) : (React.createElement("div", { className: "card-date" },
|
|
44
|
+
label && React.createElement("span", { className: "card-date-hybride-label" }, label),
|
|
45
|
+
React.createElement("span", { className: "card-date-vertical-day-line" },
|
|
46
|
+
React.createElement("span", { className: "card-date-hybride-day ".concat(isDisabled ? "disabled" : "") },
|
|
47
|
+
day,
|
|
48
|
+
" "),
|
|
49
|
+
React.createElement("span", { className: "card-date-hybride-month ".concat(isDisabled ? "disabled" : "") }, month)),
|
|
50
|
+
showYear && (React.createElement("span", { className: "card-date-hybride-year" }, yearFull))))));
|
|
36
51
|
};
|
|
37
52
|
export default CardDate;
|
|
@@ -5,7 +5,42 @@
|
|
|
5
5
|
gap: 2px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.card-date
|
|
8
|
+
.card-date.vertical {
|
|
9
|
+
flex-direction: column; /* Assurez-vous que la direction est verticale */
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* horizontal */
|
|
13
|
+
|
|
14
|
+
.card-date-horizontal {
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
color: var(--dark-grey, #456073);
|
|
17
|
+
font-family: "Inter", sans-serif;
|
|
18
|
+
font-size: 14px;
|
|
19
|
+
font-weight: 400;
|
|
20
|
+
line-height: 0.7;
|
|
21
|
+
padding-bottom: 3px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.card-date-horizontal-label {
|
|
25
|
+
color: var(--mid-grey, #728ea7);
|
|
26
|
+
font-family: "Inter", sans-serif;
|
|
27
|
+
font-size: 12px;
|
|
28
|
+
text-transform: lowercase;
|
|
29
|
+
line-height: 1;
|
|
30
|
+
padding-bottom: 5px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.card-date-horizontal-weekday {
|
|
34
|
+
color: var(--dark-grey, #456073);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.card-date-horizontal-weekday.disabled {
|
|
38
|
+
color: var(--mid-grey, #728ea7);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* vertical */
|
|
42
|
+
|
|
43
|
+
.card-date-vertical-weekday {
|
|
9
44
|
color: var(--mid-grey, #728ea7);
|
|
10
45
|
font-family: "Inter", sans-serif;
|
|
11
46
|
font-size: 14px;
|
|
@@ -14,7 +49,7 @@
|
|
|
14
49
|
padding-bottom: 5px;
|
|
15
50
|
}
|
|
16
51
|
|
|
17
|
-
.card-date-day {
|
|
52
|
+
.card-date-vertical-day {
|
|
18
53
|
color: var(--dark-grey, #456073);
|
|
19
54
|
font-family: "Inter", sans-serif;
|
|
20
55
|
font-size: 36px;
|
|
@@ -23,7 +58,50 @@
|
|
|
23
58
|
padding-bottom: 3px;
|
|
24
59
|
}
|
|
25
60
|
|
|
26
|
-
.card-date-month {
|
|
61
|
+
.card-date-vertical-month {
|
|
62
|
+
color: var(--dark-grey, #456073);
|
|
63
|
+
font-family: "Inter", sans-serif;
|
|
64
|
+
font-size: 18px;
|
|
65
|
+
line-height: 0.9;
|
|
66
|
+
padding-bottom: 1px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.card-date-vertical-year {
|
|
70
|
+
color: var(--mid-grey, #728ea7);
|
|
71
|
+
font-family: "Inter", sans-serif;
|
|
72
|
+
font-size: 12px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.card-date-vertical-label {
|
|
76
|
+
color: var(--mid-grey, #728ea7);
|
|
77
|
+
font-family: "Inter", sans-serif;
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
text-transform: lowercase;
|
|
80
|
+
line-height: 1;
|
|
81
|
+
padding-bottom: 5px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* hybride */
|
|
85
|
+
|
|
86
|
+
.card-date-hybride-weekday {
|
|
87
|
+
color: var(--mid-grey, #728ea7);
|
|
88
|
+
font-family: "Inter", sans-serif;
|
|
89
|
+
font-size: 14px;
|
|
90
|
+
text-transform: lowercase;
|
|
91
|
+
line-height: 1;
|
|
92
|
+
padding-bottom: 5px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.card-date-hybride-day {
|
|
96
|
+
color: var(--dark-grey, #456073);
|
|
97
|
+
font-family: "Inter", sans-serif;
|
|
98
|
+
font-size: 22px;
|
|
99
|
+
font-weight: 700;
|
|
100
|
+
line-height: 0.7;
|
|
101
|
+
padding-bottom: 3px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card-date-hybride-month {
|
|
27
105
|
color: var(--dark-grey, #456073);
|
|
28
106
|
font-family: "Inter", sans-serif;
|
|
29
107
|
font-size: 18px;
|
|
@@ -31,8 +109,27 @@
|
|
|
31
109
|
padding-bottom: 1px;
|
|
32
110
|
}
|
|
33
111
|
|
|
34
|
-
.card-date-year {
|
|
112
|
+
.card-date-hybride-year {
|
|
113
|
+
color: var(--mid-grey, #728ea7);
|
|
114
|
+
font-family: "Inter", sans-serif;
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
letter-spacing: 0.3px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.card-date-hybride-label {
|
|
35
120
|
color: var(--mid-grey, #728ea7);
|
|
36
121
|
font-family: "Inter", sans-serif;
|
|
37
122
|
font-size: 12px;
|
|
123
|
+
text-transform: lowercase;
|
|
124
|
+
line-height: 1;
|
|
125
|
+
padding-bottom: 5px;
|
|
126
|
+
letter-spacing: 0.3px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.card-date-vertical-day.disabled,
|
|
130
|
+
.card-date-vertical-month.disabled,
|
|
131
|
+
.card-date-hybride-day.disabled,
|
|
132
|
+
.card-date-hybride-month.disabled,
|
|
133
|
+
.card-date-horizontal.disabled {
|
|
134
|
+
color: var(--mid-grey, #728ea7);
|
|
38
135
|
}
|
|
@@ -11,23 +11,24 @@
|
|
|
11
11
|
align-items: flex-start;
|
|
12
12
|
flex-shrink: 0;
|
|
13
13
|
border-radius: 8px;
|
|
14
|
-
border: 3px solid transparent;
|
|
15
14
|
background: var(--Primary-Blanc, #fff);
|
|
16
15
|
box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
|
|
17
16
|
cursor: pointer;
|
|
18
17
|
transition: all 0.15s ease;
|
|
19
18
|
width: 100%;
|
|
19
|
+
border: 3px solid var(--grey-venom, #e6edf5);
|
|
20
|
+
/* border: 1px solid var(-grey-venom, #e6edf5); */
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
.case-card-wrapper:hover {
|
|
23
24
|
border-color: var(--bleu-allaw, #25beeb);
|
|
24
25
|
box-shadow: 0px 4px 12px rgba(15, 133, 168, 0.12);
|
|
25
|
-
transform: scale(1.
|
|
26
|
+
transform: scale(1.01);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
.case-card-wrapper:active {
|
|
29
|
-
transform: scale(1.
|
|
30
|
-
background-color: var(--grey-light);
|
|
30
|
+
transform: scale(1.015);
|
|
31
|
+
background-color: var(--grey-light), #f6fcfe;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
.case-card-wrapper.case-card-mobile,
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
justify-content: space-between;
|
|
42
43
|
align-items: flex-start;
|
|
43
44
|
align-self: stretch;
|
|
45
|
+
width: 100%;
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
.case-card-header {
|
|
@@ -64,7 +66,7 @@
|
|
|
64
66
|
-webkit-line-clamp: 2;
|
|
65
67
|
-webkit-box-orient: vertical;
|
|
66
68
|
overflow: hidden;
|
|
67
|
-
color: var(--
|
|
69
|
+
color: var(--dark-grey, #171e25);
|
|
68
70
|
text-overflow: ellipsis;
|
|
69
71
|
font-family: Inter, sans-serif;
|
|
70
72
|
font-size: 17px;
|
|
@@ -77,13 +79,22 @@
|
|
|
77
79
|
width: 100%;
|
|
78
80
|
}
|
|
79
81
|
|
|
82
|
+
.case-card-title.closed {
|
|
83
|
+
color: var(--mid-grey, #728ea7);
|
|
84
|
+
}
|
|
85
|
+
|
|
80
86
|
.case-card-next-appointment {
|
|
81
87
|
display: flex;
|
|
82
88
|
flex-direction: column;
|
|
83
|
-
align-items:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
height: 100%;
|
|
92
|
+
min-width: 100px;
|
|
93
|
+
/* flex-grow: 1;
|
|
94
|
+
flex-shrink: 0; */
|
|
95
|
+
/* gap: 8px; */
|
|
96
|
+
/* padding-top: 6px;
|
|
97
|
+
padding-left: 16px; */
|
|
87
98
|
}
|
|
88
99
|
|
|
89
100
|
.case-card-next-appointment-label {
|
|
@@ -98,7 +109,9 @@
|
|
|
98
109
|
.case-card-categories {
|
|
99
110
|
display: flex;
|
|
100
111
|
gap: 8px;
|
|
101
|
-
margin-top: 8px;
|
|
112
|
+
/* margin-top: 8px; */
|
|
113
|
+
margin-top: 16px;
|
|
114
|
+
/* background-color: red; */
|
|
102
115
|
}
|
|
103
116
|
|
|
104
117
|
.case-card-mobile .case-card-next-appointment-label {
|
|
@@ -108,3 +121,9 @@
|
|
|
108
121
|
.case-card-archived .case-card-next-appointment {
|
|
109
122
|
display: none;
|
|
110
123
|
}
|
|
124
|
+
|
|
125
|
+
.case-card-progress-bar {
|
|
126
|
+
/* background-color: lightgray; */
|
|
127
|
+
width: 100%;
|
|
128
|
+
margin-left: -10px;
|
|
129
|
+
}
|
|
@@ -10,6 +10,10 @@ export interface CaseCardProps {
|
|
|
10
10
|
categories: string[];
|
|
11
11
|
variant: "desktop" | "mobile" | "archived";
|
|
12
12
|
categoryLabelLimit?: number;
|
|
13
|
+
isClosed?: boolean;
|
|
14
|
+
isDisabled?: boolean;
|
|
15
|
+
dateStyle?: "horizontal" | "hybride" | "vertical";
|
|
16
|
+
dateLabel?: string;
|
|
13
17
|
}
|
|
14
18
|
declare const CaseCard: React.FC<CaseCardProps>;
|
|
15
19
|
export default CaseCard;
|
|
@@ -2,15 +2,18 @@ import React from "react";
|
|
|
2
2
|
import "./CaseCard.css";
|
|
3
3
|
import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
|
|
4
4
|
import CardDate from "../../atoms/typography/CardDate";
|
|
5
|
+
import ProgressBar from "../../atoms/progressBars/ProgressBar";
|
|
5
6
|
var CaseCard = function (_a) {
|
|
6
|
-
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;
|
|
7
|
+
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;
|
|
7
8
|
return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
|
|
8
9
|
React.createElement("div", { className: "case-card-content" },
|
|
9
10
|
React.createElement("div", { className: "case-card-header" },
|
|
10
|
-
React.createElement("h2", { className: "case-card-title", title: title }, title),
|
|
11
|
+
React.createElement("h2", { className: "case-card-title ".concat(isClosed ? "closed" : ""), title: title }, title),
|
|
11
12
|
React.createElement("span", { className: "case-card-client-name" }, clientName)),
|
|
13
|
+
React.createElement("div", { className: "case-card-progress-bar" },
|
|
14
|
+
React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: 100, currentStep: 50 })),
|
|
12
15
|
React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
|
|
13
16
|
nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
|
|
14
|
-
React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop" })))));
|
|
17
|
+
React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop", variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
|
|
15
18
|
};
|
|
16
19
|
export default CaseCard;
|