allaw-ui 1.0.54 → 1.0.55

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.
Files changed (11) hide show
  1. package/dist/components/molecules/contactCard/ContactCard.css +24 -335
  2. package/dist/components/molecules/contactCard/ContactCard.d.ts +0 -4
  3. package/dist/components/molecules/contactCard/ContactCard.js +21 -74
  4. package/dist/components/molecules/contactCard/DetailedContactCard.d.ts +18 -0
  5. package/dist/components/molecules/contactCard/DetailedContactCard.js +61 -0
  6. package/dist/components/molecules/contactCard/detailedContactCard.css +324 -0
  7. package/dist/components/molecules/contactCard/index.d.ts +2 -0
  8. package/dist/components/molecules/contactCard/index.js +1 -0
  9. package/dist/index.d.ts +3 -0
  10. package/dist/index.js +2 -1
  11. package/package.json +1 -1
package/dist/components/molecules/contactCard/ContactCard.css CHANGED
@@ -5,313 +5,6 @@
5
5
  border-radius: 16px;
6
6
  border: 1px solid var(--venom-grey, #e6edf5);
7
7
  background: var(--Primary-Blanc, #fff);
8
- }
9
-
10
- .gender-separator {
11
- width: 4px;
12
- height: 4px;
13
- background-color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
14
- border-radius: 50%;
15
- }
16
-
17
- .contact-card.small .contact-details,
18
- .contact-card.medium .contact-details,
19
- .contact-card.large .contact-details {
20
- display: flex;
21
- align-items: center;
22
- gap: 8px;
23
- line-height: normal;
24
- }
25
-
26
- .contact-card.small {
27
- display: flex;
28
- width: 260px;
29
- padding: 15px 16px 15px 16px;
30
- justify-content: space-between;
31
- align-items: flex-end;
32
- }
33
-
34
- .contact-card.small .contact-card-content {
35
- display: flex;
36
- flex-direction: row;
37
- align-items: center;
38
- justify-content: center;
39
- gap: 13px;
40
- align-self: stretch;
41
- }
42
-
43
- .contact-card.small .profile-picture-container {
44
- border-radius: 64px;
45
- border: 2px solid var(--venom-grey, #e6edf5);
46
- background: lightgray 50% / cover no-repeat;
47
- display: flex;
48
- flex-direction: row;
49
- justify-content: center;
50
- align-items: center;
51
- padding-bottom: 0px;
52
- }
53
-
54
- .contact-card.small .contact-info {
55
- display: flex;
56
- flex-direction: column;
57
- justify-content: center;
58
- align-items: flex-start;
59
- gap: 24px;
60
- align-self: stretch;
61
- padding-bottom: 4px;
62
- padding-left: 1px;
63
- }
64
-
65
- .contact-card.small .contact-name {
66
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
67
- font-family: "Open Sans";
68
- font-size: 16px;
69
- font-style: normal;
70
- font-weight: 600;
71
- line-height: 5px;
72
- margin: 0;
73
- padding-bottom: 0px;
74
- }
75
-
76
- .contact-card.small .contact-details {
77
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
78
- font-family: "Open Sans";
79
- font-size: 12px;
80
- font-style: normal;
81
- font-weight: 400;
82
- line-height: 0px;
83
- letter-spacing: 0.12px;
84
- margin: 0;
85
- }
86
-
87
- .contact-card.medium {
88
- display: flex;
89
- width: 342px;
90
- padding: 14px 16px 13px 16px;
91
- align-items: stretch;
92
- gap: 16px;
93
- border-radius: 16px;
94
- border: 1px solid var(--venom-grey, #e6edf5);
95
- background: var(--Primary-Blanc, #fff);
96
- }
97
-
98
- .contact-card.medium .contact-card-content {
99
- display: flex;
100
- flex-direction: row;
101
- justify-content: space-between;
102
- align-items: center;
103
- flex: 1;
104
- height: 100%;
105
- gap: 10px;
106
- }
107
-
108
- .contact-card.medium .contact-info-group {
109
- display: flex;
110
- flex-direction: row;
111
- align-items: center;
112
- gap: 10px;
113
- }
114
-
115
- .contact-card.medium .profile-picture-container {
116
- border-radius: 64px;
117
- border: 3px solid var(--venom-grey, #e6edf5);
118
- display: flex;
119
- flex-direction: row;
120
- justify-content: center;
121
- align-items: center;
122
- }
123
- .contact-card.medium .contact-info {
124
- margin-left: -24px;
125
- margin-top: -4px;
126
- display: flex;
127
- flex-direction: column;
128
- justify-content: center;
129
- padding-left: 8px;
130
- }
131
-
132
- .contact-card.medium .contact-name {
133
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
134
- text-overflow: ellipsis;
135
- font-family: "Open Sans";
136
- font-size: 18px;
137
- font-style: normal;
138
- font-weight: 700;
139
- line-height: 24px;
140
- }
141
-
142
- .contact-card.medium .contact-details {
143
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
144
- font-family: "Open Sans";
145
- margin-top: 5px;
146
- font-size: 14px;
147
- font-style: normal;
148
- font-weight: 400;
149
- line-height: normal;
150
- }
151
-
152
- .contact-card.medium .status-container {
153
- display: flex;
154
- flex-direction: column;
155
- justify-content: center;
156
- align-items: center;
157
- height: 100%;
158
- align-self: stretch;
159
- }
160
-
161
- .contact-card.small .avatar,
162
- .contact-card.medium .avatar {
163
- width: 71px;
164
- height: 71px;
165
- border-radius: 50%;
166
- object-fit: cover;
167
- }
168
-
169
- .contact-card.large .avatar {
170
- width: 90px;
171
- height: 90px;
172
- border-radius: 50%;
173
- object-fit: cover;
174
- display: flex;
175
- justify-content: center;
176
- align-items: center;
177
- }
178
-
179
- .contact-header {
180
- display: flex;
181
- justify-content: space-between;
182
- align-items: center;
183
- width: 100%;
184
- }
185
-
186
- .contact-additional-info {
187
- margin-top: 16px;
188
- }
189
-
190
- .contact-additional-info p {
191
- margin: 8px 0;
192
- }
193
-
194
- .contact-additional-info strong {
195
- font-weight: 600;
196
- margin-right: 8px;
197
- }
198
-
199
- .contact-card.large {
200
- display: flex;
201
- width: 1141px;
202
- padding: 24px 24px 17px 24px;
203
- align-items: flex-start;
204
- gap: 56px;
205
- border-radius: 16px;
206
- border: 1px solid var(--venom-grey, #e6edf5);
207
- background: var(--Primary-Blanc, #fff);
208
- }
209
-
210
- .contact-card.large .profile-picture-container {
211
- width: 90px;
212
- height: 90px;
213
- flex-shrink: 0;
214
- border-radius: 94px;
215
- border: 2px solid var(--venom-grey, #e6edf5);
216
- background: lightgray 50% / cover no-repeat;
217
- display: flex;
218
- justify-content: center;
219
- align-items: center;
220
- box-sizing: content-box;
221
- }
222
-
223
- .contact-card.large .content-container {
224
- display: flex;
225
- flex-direction: column;
226
- justify-content: center;
227
- align-items: flex-start;
228
- gap: 0px;
229
- flex: 1 0 0;
230
- align-self: stretch;
231
- }
232
-
233
- .contact-card.large .contact-name {
234
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
235
- font-family: Poppins, sans-serif;
236
- font-size: 24px;
237
- font-style: normal;
238
- font-weight: 600;
239
- line-height: 16px;
240
- padding-bottom: 20px;
241
- }
242
-
243
- .contact-card.large .contact-details {
244
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
245
- font-family: "Open Sans", sans-serif;
246
- font-size: 14px;
247
- font-style: normal;
248
- font-weight: 400;
249
- line-height: 1px;
250
- }
251
-
252
- .contact-card.large .contact-additional-info {
253
- margin-top: 11px;
254
- }
255
-
256
- .contact-card.large .contact-additional-info {
257
- display: flex;
258
- flex-direction: column;
259
- justify-content: center;
260
- align-items: flex-start;
261
- gap: 0px;
262
- }
263
-
264
- .contact-card.large .contact-address-container {
265
- display: flex;
266
- flex-direction: row;
267
- justify-content: center;
268
- align-items: center;
269
- gap: 16px;
270
- line-height: 0px;
271
- }
272
-
273
- .contact-card.large .contact-telephone-email-container {
274
- display: flex;
275
- flex-direction: row;
276
- justify-content: center;
277
- align-items: center;
278
- gap: 48px;
279
- margin-top: -3px;
280
- }
281
-
282
- .contact-card.large .info-label {
283
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
284
- font-family: "Open Sans", sans-serif;
285
- font-size: 12px;
286
- font-style: normal;
287
- font-weight: 600;
288
- line-height: normal;
289
- }
290
-
291
- .contact-card.large .info-value {
292
- flex: 1 0 0;
293
- align-self: stretch;
294
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
295
- font-family: "Open Sans", sans-serif;
296
- font-size: 16px;
297
- font-style: normal;
298
- font-weight: 400;
299
- line-height: normal;
300
- }
301
-
302
- .contact-card.large .contact-phone {
303
- font-family: Inter, sans-serif;
304
- font-weight: 500;
305
- }
306
-
307
- .editable-contact-card {
308
- display: flex;
309
- flex-direction: row;
310
- justify-content: space-between;
311
- width: 100%;
312
- }
313
-
314
- .contact-card.editable {
315
8
  display: flex;
316
9
  padding: 24px;
317
10
  width: 100%;
@@ -323,14 +16,14 @@
323
16
  background: var(--Primary-Blanc, #fff);
324
17
  }
325
18
 
326
- .contact-card.editable .content-container {
19
+ .content-container {
327
20
  display: flex;
328
21
  flex-direction: row;
329
22
  align-items: center;
330
23
  gap: 24px;
331
24
  }
332
25
 
333
- .contact-card.editable .name-tag-container {
26
+ .name-tag-container {
334
27
  display: flex;
335
28
  flex-direction: column;
336
29
  justify-content: center;
@@ -339,7 +32,7 @@
339
32
  padding-left: 2px;
340
33
  }
341
34
 
342
- .contact-card.editable .contact-name {
35
+ .contact-name {
343
36
  color: var(--Primary-Mid-black, #171e25);
344
37
  font-family: Poppins;
345
38
  font-size: 24px;
@@ -348,7 +41,7 @@
348
41
  line-height: 24px;
349
42
  }
350
43
 
351
- .contact-card.editable .info-container {
44
+ .info-container {
352
45
  display: flex;
353
46
  flex-direction: column;
354
47
  align-items: flex-start;
@@ -356,13 +49,13 @@
356
49
  padding-left: 6px;
357
50
  }
358
51
 
359
- .contact-card.editable .info-item {
52
+ .info-item {
360
53
  display: flex;
361
54
  align-items: center;
362
55
  gap: 8px;
363
56
  }
364
57
 
365
- .contact-card.editable .info-icon {
58
+ .info-icon {
366
59
  width: 24px;
367
60
  height: 24px;
368
61
  color: #25beeb;
@@ -372,11 +65,11 @@
372
65
  align-items: center;
373
66
  }
374
67
 
375
- .contact-card.editable .info-icon-disabled {
68
+ .info-icon-disabled {
376
69
  color: var(--Tags-Mid-grey, #728ea7);
377
70
  }
378
71
 
379
- .contact-card.editable .info-text {
72
+ .info-text {
380
73
  color: var(--Primary-Mid-black, #171e25);
381
74
  font-family: "Open Sans";
382
75
  font-size: 16px;
@@ -385,12 +78,12 @@
385
78
  line-height: normal;
386
79
  }
387
80
 
388
- .contact-card.editable .info-text.contact.empty {
81
+ .info-text.contact.empty-field {
389
82
  color: var(--Tags-Mid-grey, #728ea7);
390
83
  font-style: italic;
391
84
  }
392
85
 
393
- .contact-card.editable .telephone-email-items {
86
+ .telephone-email-items {
394
87
  display: flex;
395
88
  flex-direction: row;
396
89
  justify-content: center;
@@ -399,7 +92,7 @@
399
92
  }
400
93
 
401
94
  @media (max-width: 800px) {
402
- .contact-card.editable .telephone-email-items {
95
+ .telephone-email-items {
403
96
  flex-direction: column;
404
97
  align-items: flex-start;
405
98
  gap: 10px;
@@ -407,39 +100,35 @@
407
100
  }
408
101
 
409
102
  @media (max-width: 600px) {
410
- .contact-card.editable .content-container {
103
+ .content-container {
411
104
  flex-direction: column;
412
105
  }
413
- .contact-card.editable .name-tag-container {
106
+ .name-tag-container {
414
107
  align-items: flex-start;
415
108
  width: 100%;
416
109
  }
417
110
  }
418
111
 
419
- @media (max-width: 450px) {
420
- .contact-card.editable .action-button-container {
421
- display: block;
422
- position: absolute;
423
- top: 24px;
424
- right: 24px;
425
- }
426
- }
427
-
428
112
  .action-button-container {
429
113
  display: flex;
430
114
  flex-direction: column;
431
115
  justify-content: center;
432
- align-items: flex-end;
433
- height: 100%;
116
+ align-items: center;
117
+ min-height: 100%;
434
118
  align-self: stretch;
435
119
  }
436
120
 
437
- .contact-card .empty-field {
438
- color: var(--Tags-Mid-grey, #728ea7) !important;
439
- font-style: italic;
121
+ @media (max-width: 450px) {
122
+ .action-button-container {
123
+ display: block;
124
+ position: absolute;
125
+ top: 24px;
126
+ right: 24px;
127
+ height: 100%;
128
+ }
440
129
  }
441
130
 
442
- .contact-card.large .empty-field {
131
+ .empty-field {
443
132
  color: var(--Tags-Mid-grey, #728ea7) !important;
444
133
  font-style: italic;
445
134
  }
package/dist/components/molecules/contactCard/ContactCard.d.ts CHANGED
@@ -1,12 +1,8 @@
1
1
  import React from "react";
2
2
  import "./ContactCard.css";
3
3
  export interface ContactCardProps {
4
- size: "small" | "medium" | "large" | "editable";
5
4
  name: string;
6
- birthDate: string;
7
- avatarUrl: string;
8
5
  status: string;
9
- address: string;
10
6
  phone: string;
11
7
  email: string;
12
8
  isEditable: boolean;
package/dist/components/molecules/contactCard/ContactCard.js CHANGED
@@ -2,82 +2,29 @@ import React from "react";
2
2
  import "./ContactCard.css";
3
3
  import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
4
4
  import IconButton from "../../atoms/buttons/IconButton";
5
- import Image from "next/image";
6
- var NoPhoto = "/assets/NoPhoto.png";
7
5
  var ContactCard = function (_a) {
8
- var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
6
+ var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
9
7
  var isPhoneEmpty = !phone || phone.trim() === "";
10
8
  var isEmailEmpty = !email || email.trim() === "";
11
- var renderContent = function () {
12
- switch (size) {
13
- case "small":
14
- return (React.createElement("div", { className: "contact-card-content" },
15
- React.createElement("div", { className: "profile-picture-container" },
16
- React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
17
- React.createElement("div", { className: "contact-info" },
18
- React.createElement("h3", { className: "contact-name" }, name),
19
- React.createElement("p", { className: "contact-details" },
20
- React.createElement("span", null, gender === "male" ? "M" : "F"),
21
- React.createElement("span", { className: "gender-separator" }),
22
- React.createElement("span", null, birthDate)))));
23
- case "medium":
24
- return (React.createElement("div", { className: "contact-card-content" },
25
- React.createElement("div", { className: "profile-picture-container" },
26
- React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
27
- React.createElement("div", { className: "contact-info" },
28
- React.createElement("h3", { className: "contact-name" }, name),
29
- React.createElement("p", { className: "contact-details" },
30
- React.createElement("span", null, gender === "male" ? "M" : "F"),
31
- React.createElement("span", { className: "gender-separator" }),
32
- React.createElement("span", null, birthDate))),
33
- React.createElement("div", { className: "status-container" },
34
- React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
35
- case "large":
36
- return (React.createElement(React.Fragment, null,
37
- React.createElement("div", { className: "profile-picture-container" },
38
- React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
39
- React.createElement("div", { className: "content-container" },
40
- React.createElement("div", null,
41
- React.createElement("h3", { className: "contact-name" }, name),
42
- React.createElement("p", { className: "contact-details" },
43
- React.createElement("span", null, gender === "male" ? "M" : "F"),
44
- React.createElement("span", { className: "gender-separator" }),
45
- React.createElement("span", null, birthDate))),
46
- React.createElement("div", { className: "contact-additional-info" },
47
- React.createElement("div", { className: "contact-address-container" },
48
- React.createElement("p", { className: "info-label" }, "ADRESSE"),
49
- React.createElement("p", { className: "info-value" }, address)),
50
- React.createElement("div", { className: "contact-telephone-email-container" },
51
- React.createElement("p", { className: "info-label" }, "CONTACT"),
52
- React.createElement("p", { className: "info-value" },
53
- React.createElement("span", { className: "contact-phone ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : phone)),
54
- React.createElement("p", { className: "info-value" },
55
- React.createElement("span", { className: "contact-phone ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : email))))),
56
- React.createElement("div", { className: "status-container" },
57
- React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
58
- case "editable":
59
- return (React.createElement("div", { className: "editable-contact-card" },
60
- React.createElement("div", { className: "content-container" },
61
- React.createElement("div", { className: "name-tag-container" },
62
- React.createElement("h3", { className: "contact-name" }, name),
63
- React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
64
- React.createElement("div", { className: "info-container" },
65
- React.createElement("div", { className: "info-item" },
66
- React.createElement("i", { className: "allaw-icon-user info-icon" }),
67
- React.createElement("span", { className: "info-text" },
68
- gender === "male" ? "Client" : "Cliente",
69
- " de l'\u00E9tude")),
70
- React.createElement("div", { className: "telephone-email-items" },
71
- React.createElement("div", { className: "info-item" },
72
- React.createElement("i", { className: "allaw-icon-phone info-icon ".concat(isPhoneEmpty ? "info-icon-disabled" : "") }),
73
- React.createElement("span", { className: "info-text contact ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : phone)),
74
- React.createElement("div", { className: "info-item" },
75
- React.createElement("i", { className: "allaw-icon-mail info-icon ".concat(isEmailEmpty ? "info-icon-disabled" : "") }),
76
- React.createElement("span", { className: "info-text contact ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : email))))),
77
- React.createElement("div", { className: "action-button-container" },
78
- React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))));
79
- }
80
- };
81
- return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());
9
+ return (React.createElement("div", { className: "contact-card" },
10
+ React.createElement("div", { className: "content-container" },
11
+ React.createElement("div", { className: "name-tag-container" },
12
+ React.createElement("h3", { className: "contact-name" }, name),
13
+ React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
14
+ React.createElement("div", { className: "info-container" },
15
+ React.createElement("div", { className: "info-item" },
16
+ React.createElement("i", { className: "allaw-icon-user info-icon" }),
17
+ React.createElement("span", { className: "info-text" },
18
+ gender === "male" ? "Client" : "Cliente",
19
+ " de l'\u00E9tude")),
20
+ React.createElement("div", { className: "telephone-email-items" },
21
+ React.createElement("div", { className: "info-item" },
22
+ React.createElement("i", { className: "allaw-icon-phone info-icon ".concat(isPhoneEmpty ? "info-icon-disabled" : "") }),
23
+ React.createElement("span", { className: "info-text contact ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : phone)),
24
+ React.createElement("div", { className: "info-item" },
25
+ React.createElement("i", { className: "allaw-icon-mail info-icon ".concat(isEmailEmpty ? "info-icon-disabled" : "") }),
26
+ React.createElement("span", { className: "info-text contact ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : email))))),
27
+ isEditable && (React.createElement("div", { className: "action-button-container" },
28
+ React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit })))));
82
29
  };
83
30
  export default ContactCard;
package/dist/components/molecules/contactCard/DetailedContactCard.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from "react";
2
+ import "./detailedContactCard.css";
3
+ export interface DetailedContactCardProps {
4
+ size: "small" | "medium" | "large";
5
+ name: string;
6
+ birthDate: string;
7
+ avatarUrl: string;
8
+ status: string;
9
+ address: string;
10
+ phone: string;
11
+ email: string;
12
+ isEditable: boolean;
13
+ onEdit: () => void;
14
+ gender: "male" | "female";
15
+ actionIconName?: string;
16
+ }
17
+ declare const DetailedContactCard: React.FC<DetailedContactCardProps>;
18
+ export default DetailedContactCard;
package/dist/components/molecules/contactCard/DetailedContactCard.js ADDED
@@ -0,0 +1,61 @@
1
+ import React from "react";
2
+ import "./detailedContactCard.css";
3
+ import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
4
+ import Image from "next/image";
5
+ var NoPhoto = "/assets/NoPhoto.png";
6
+ var DetailedContactCard = function (_a) {
7
+ var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, gender = _a.gender;
8
+ var isPhoneEmpty = !phone || phone.trim() === "";
9
+ var isEmailEmpty = !email || email.trim() === "";
10
+ var renderContent = function () {
11
+ switch (size) {
12
+ case "small":
13
+ return (React.createElement("div", { className: "detailed-contact-card-content" },
14
+ React.createElement("div", { className: "profile-picture-container" },
15
+ React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
16
+ React.createElement("div", { className: "contact-info" },
17
+ React.createElement("h3", { className: "contact-name" }, name),
18
+ React.createElement("p", { className: "contact-details" },
19
+ React.createElement("span", null, gender === "male" ? "M" : "F"),
20
+ React.createElement("span", { className: "gender-separator" }),
21
+ React.createElement("span", null, birthDate)))));
22
+ case "medium":
23
+ return (React.createElement("div", { className: "detailed-contact-card-content" },
24
+ React.createElement("div", { className: "profile-picture-container" },
25
+ React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
26
+ React.createElement("div", { className: "contact-info" },
27
+ React.createElement("h3", { className: "contact-name" }, name),
28
+ React.createElement("p", { className: "contact-details" },
29
+ React.createElement("span", null, gender === "male" ? "M" : "F"),
30
+ React.createElement("span", { className: "gender-separator" }),
31
+ React.createElement("span", null, birthDate))),
32
+ React.createElement("div", { className: "status-container" },
33
+ React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
34
+ case "large":
35
+ return (React.createElement(React.Fragment, null,
36
+ React.createElement("div", { className: "profile-picture-container" },
37
+ React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
38
+ React.createElement("div", { className: "content-container" },
39
+ React.createElement("div", null,
40
+ React.createElement("h3", { className: "contact-name" }, name),
41
+ React.createElement("p", { className: "contact-details" },
42
+ React.createElement("span", null, gender === "male" ? "M" : "F"),
43
+ React.createElement("span", { className: "gender-separator" }),
44
+ React.createElement("span", null, birthDate))),
45
+ React.createElement("div", { className: "contact-additional-info" },
46
+ React.createElement("div", { className: "contact-address-container" },
47
+ React.createElement("p", { className: "info-label" }, "ADRESSE"),
48
+ React.createElement("p", { className: "info-value" }, address)),
49
+ React.createElement("div", { className: "contact-telephone-email-container" },
50
+ React.createElement("p", { className: "info-label" }, "CONTACT"),
51
+ React.createElement("p", { className: "info-value" },
52
+ React.createElement("span", { className: "contact-phone ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : phone)),
53
+ React.createElement("p", { className: "info-value" },
54
+ React.createElement("span", { className: "contact-phone ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : email))))),
55
+ React.createElement("div", { className: "status-container" },
56
+ React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
57
+ }
58
+ };
59
+ return (React.createElement("div", { className: "detailed-contact-card ".concat(size) }, renderContent()));
60
+ };
61
+ export default DetailedContactCard;
package/dist/components/molecules/contactCard/detailedContactCard.css ADDED
@@ -0,0 +1,324 @@
1
+ @import "../../../styles/colors.css";
2
+
3
+ .detailed-contact-card {
4
+ font-family: "Open Sans", sans-serif;
5
+ border-radius: 16px;
6
+ border: 1px solid var(--venom-grey, #e6edf5);
7
+ background: var(--Primary-Blanc, #fff);
8
+ }
9
+
10
+ .gender-separator {
11
+ width: 4px;
12
+ height: 4px;
13
+ background-color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
14
+ border-radius: 50%;
15
+ }
16
+
17
+ .detailed-contact-card.small .contact-details,
18
+ .detailed-contact-card.medium .contact-details,
19
+ .detailed-contact-card.large .contact-details {
20
+ display: flex;
21
+ align-items: center;
22
+ gap: 8px;
23
+ line-height: normal;
24
+ }
25
+
26
+ .detailed-contact-card.small {
27
+ display: flex;
28
+ width: 260px;
29
+ padding: 15px 16px 15px 16px;
30
+ justify-content: space-between;
31
+ align-items: flex-end;
32
+ }
33
+
34
+ .detailed-contact-card.small .detailed-contact-card-content {
35
+ display: flex;
36
+ flex-direction: row;
37
+ align-items: center;
38
+ justify-content: center;
39
+ gap: 13px;
40
+ align-self: stretch;
41
+ }
42
+
43
+ .detailed-contact-card.small .profile-picture-container {
44
+ border-radius: 64px;
45
+ border: 2px solid var(--venom-grey, #e6edf5);
46
+ background: lightgray 50% / cover no-repeat;
47
+ display: flex;
48
+ flex-direction: row;
49
+ justify-content: center;
50
+ align-items: center;
51
+ padding-bottom: 0px;
52
+ }
53
+
54
+ .detailed-contact-card.small .contact-info {
55
+ display: flex;
56
+ flex-direction: column;
57
+ justify-content: center;
58
+ align-items: flex-start;
59
+ gap: 24px;
60
+ align-self: stretch;
61
+ padding-bottom: 4px;
62
+ padding-left: 1px;
63
+ }
64
+
65
+ .detailed-contact-card.small .contact-name {
66
+ color: var(--Primary-Mid-black, var(--primary-black, #171e25));
67
+ font-family: "Open Sans";
68
+ font-size: 16px;
69
+ font-style: normal;
70
+ font-weight: 600;
71
+ line-height: 5px;
72
+ margin: 0;
73
+ padding-bottom: 0px;
74
+ }
75
+
76
+ .detailed-contact-card.small .contact-details {
77
+ color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
78
+ font-family: "Open Sans";
79
+ font-size: 12px;
80
+ font-style: normal;
81
+ font-weight: 400;
82
+ line-height: 0px;
83
+ letter-spacing: 0.12px;
84
+ margin: 0;
85
+ }
86
+
87
+ .detailed-contact-card.medium {
88
+ display: flex;
89
+ width: 342px;
90
+ padding: 14px 16px 13px 16px;
91
+ align-items: stretch;
92
+ gap: 16px;
93
+ border-radius: 16px;
94
+ border: 1px solid var(--venom-grey, #e6edf5);
95
+ background: var(--Primary-Blanc, #fff);
96
+ }
97
+
98
+ .detailed-contact-card.medium .detailed-contact-card-content {
99
+ display: flex;
100
+ flex-direction: row;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ flex: 1;
104
+ height: 100%;
105
+ gap: 10px;
106
+ }
107
+
108
+ .detailed-contact-card.medium .contact-info-group {
109
+ display: flex;
110
+ flex-direction: row;
111
+ align-items: center;
112
+ gap: 10px;
113
+ }
114
+
115
+ .detailed-contact-card.medium .profile-picture-container {
116
+ border-radius: 64px;
117
+ border: 3px solid var(--venom-grey, #e6edf5);
118
+ display: flex;
119
+ flex-direction: row;
120
+ justify-content: center;
121
+ align-items: center;
122
+ }
123
+ .detailed-contact-card.medium .contact-info {
124
+ margin-left: -24px;
125
+ margin-top: -4px;
126
+ display: flex;
127
+ flex-direction: column;
128
+ justify-content: center;
129
+ padding-left: 8px;
130
+ }
131
+
132
+ .detailed-contact-card.medium .contact-name {
133
+ color: var(--Primary-Mid-black, var(--primary-black, #171e25));
134
+ text-overflow: ellipsis;
135
+ font-family: "Open Sans";
136
+ font-size: 18px;
137
+ font-style: normal;
138
+ font-weight: 700;
139
+ line-height: 24px;
140
+ }
141
+
142
+ .detailed-contact-card.medium .contact-details {
143
+ color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
144
+ font-family: "Open Sans";
145
+ margin-top: 5px;
146
+ font-size: 14px;
147
+ font-style: normal;
148
+ font-weight: 400;
149
+ line-height: normal;
150
+ }
151
+
152
+ .detailed-contact-card.medium .status-container {
153
+ display: flex;
154
+ flex-direction: column;
155
+ justify-content: center;
156
+ align-items: center;
157
+ height: 100%;
158
+ align-self: stretch;
159
+ }
160
+
161
+ .detailed-contact-card.small .avatar,
162
+ .detailed-contact-card.medium .avatar {
163
+ width: 71px;
164
+ height: 71px;
165
+ border-radius: 50%;
166
+ object-fit: cover;
167
+ }
168
+
169
+ .detailed-contact-card.large .avatar {
170
+ width: 90px;
171
+ height: 90px;
172
+ border-radius: 50%;
173
+ object-fit: cover;
174
+ display: flex;
175
+ justify-content: center;
176
+ align-items: center;
177
+ }
178
+
179
+ .contact-header {
180
+ display: flex;
181
+ justify-content: space-between;
182
+ align-items: center;
183
+ width: 100%;
184
+ }
185
+
186
+ .contact-additional-info {
187
+ margin-top: 16px;
188
+ }
189
+
190
+ .contact-additional-info p {
191
+ margin: 8px 0;
192
+ }
193
+
194
+ .contact-additional-info strong {
195
+ font-weight: 600;
196
+ margin-right: 8px;
197
+ }
198
+
199
+ .detailed-contact-card.large {
200
+ display: flex;
201
+ width: 1141px;
202
+ padding: 24px 24px 17px 24px;
203
+ align-items: flex-start;
204
+ gap: 56px;
205
+ border-radius: 16px;
206
+ border: 1px solid var(--venom-grey, #e6edf5);
207
+ background: var(--Primary-Blanc, #fff);
208
+ }
209
+
210
+ .detailed-contact-card.large .profile-picture-container {
211
+ width: 90px;
212
+ height: 90px;
213
+ flex-shrink: 0;
214
+ border-radius: 94px;
215
+ border: 2px solid var(--venom-grey, #e6edf5);
216
+ background: lightgray 50% / cover no-repeat;
217
+ display: flex;
218
+ justify-content: center;
219
+ align-items: center;
220
+ box-sizing: content-box;
221
+ }
222
+
223
+ .detailed-contact-card.large .content-container {
224
+ display: flex;
225
+ flex-direction: column;
226
+ justify-content: center;
227
+ align-items: flex-start;
228
+ gap: 0px;
229
+ flex: 1 0 0;
230
+ align-self: stretch;
231
+ }
232
+
233
+ .detailed-contact-card.large .contact-name {
234
+ color: var(--Primary-Mid-black, var(--primary-black, #171e25));
235
+ font-family: Poppins, sans-serif;
236
+ font-size: 24px;
237
+ font-style: normal;
238
+ font-weight: 600;
239
+ line-height: 16px;
240
+ padding-bottom: 20px;
241
+ }
242
+
243
+ .detailed-contact-card.large .contact-details {
244
+ color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
245
+ font-family: "Open Sans", sans-serif;
246
+ font-size: 14px;
247
+ font-style: normal;
248
+ font-weight: 400;
249
+ line-height: 1px;
250
+ }
251
+
252
+ .detailed-contact-card.large .contact-additional-info {
253
+ margin-top: 11px;
254
+ }
255
+
256
+ .detailed-contact-card.large .contact-additional-info {
257
+ display: flex;
258
+ flex-direction: column;
259
+ justify-content: center;
260
+ align-items: flex-start;
261
+ gap: 0px;
262
+ }
263
+
264
+ .detailed-contact-card.large .contact-address-container {
265
+ display: flex;
266
+ flex-direction: row;
267
+ justify-content: center;
268
+ align-items: center;
269
+ gap: 16px;
270
+ line-height: 0px;
271
+ }
272
+
273
+ .detailed-contact-card.large .contact-telephone-email-container {
274
+ display: flex;
275
+ flex-direction: row;
276
+ justify-content: center;
277
+ align-items: center;
278
+ gap: 48px;
279
+ margin-top: -3px;
280
+ }
281
+
282
+ .detailed-contact-card.large .info-label {
283
+ color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
284
+ font-family: "Open Sans", sans-serif;
285
+ font-size: 12px;
286
+ font-style: normal;
287
+ font-weight: 600;
288
+ line-height: normal;
289
+ }
290
+
291
+ .detailed-contact-card.large .info-value {
292
+ flex: 1 0 0;
293
+ align-self: stretch;
294
+ color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
295
+ font-family: "Open Sans", sans-serif;
296
+ font-size: 16px;
297
+ font-style: normal;
298
+ font-weight: 400;
299
+ line-height: normal;
300
+ }
301
+
302
+ .detailed-contact-card.large .contact-phone {
303
+ font-family: Inter, sans-serif;
304
+ font-weight: 500;
305
+ }
306
+
307
+ .action-button-container {
308
+ display: flex;
309
+ flex-direction: column;
310
+ justify-content: center;
311
+ align-items: flex-end;
312
+ height: 100%;
313
+ align-self: stretch;
314
+ }
315
+
316
+ .detailed-contact-card .empty-field {
317
+ color: var(--Tags-Mid-grey, #728ea7) !important;
318
+ font-style: italic;
319
+ }
320
+
321
+ .detailed-contact-card.large .empty-field {
322
+ color: var(--Tags-Mid-grey, #728ea7) !important;
323
+ font-style: italic;
324
+ }
package/dist/components/molecules/contactCard/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export { default as ContactCard } from "./ContactCard";
2
2
  export type { ContactCardProps } from "./ContactCard";
3
+ export { default as DetailedContactCard } from "./DetailedContactCard";
4
+ export type { DetailedContactCardProps } from "./DetailedContactCard";
package/dist/components/molecules/contactCard/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { default as ContactCard } from "./ContactCard";
2
+ export { default as DetailedContactCard } from "./DetailedContactCard";
package/dist/index.d.ts CHANGED
@@ -42,6 +42,9 @@ export { default as AppointmentSlot } from "./components/molecules/appointmentSl
42
42
  export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
43
43
  export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
44
44
  export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
45
+ export type { ContactCardProps } from "./components/molecules/contactCard/ContactCard";
46
+ export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
47
+ export type { DetailedContactCardProps } from "./components/molecules/contactCard/DetailedContactCard";
45
48
  export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
46
49
  export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
47
50
  export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
package/dist/index.js CHANGED
@@ -51,8 +51,9 @@ export { default as AppointmentSlot } from "./components/molecules/appointmentSl
51
51
  export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
52
52
  // Case Card
53
53
  export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
54
- // Contact Card
54
+ // Contact Cards
55
55
  export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
56
+ export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
56
57
  // Case Link Card
57
58
  export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
58
59
  // Case Link Card
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.54",
3
+ "version": "1.0.55",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",