allaw-ui 1.0.177 → 1.0.178

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 (7) hide show
  1. package/dist/components/molecules/contactCard/ContactCard.d.ts +1 -1
  2. package/dist/components/molecules/contactCard/ContactCard.js +22 -22
  3. package/dist/components/molecules/contactCard/ContactCard.stories.d.ts +9 -0
  4. package/dist/components/molecules/contactCard/ContactCard.stories.js +9 -0
  5. package/dist/components/molecules/contactCard/{ContactCard.css → contactCard.module.css} +26 -28
  6. package/dist/stories/Header.stories.d.ts +3 -3
  7. package/package.json +1 -1
package/dist/components/molecules/contactCard/ContactCard.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "./ContactCard.css";
3
2
  export interface ContactCardProps {
4
3
  name: string;
5
4
  status: string;
@@ -10,6 +9,7 @@ export interface ContactCardProps {
10
9
  onClick?: () => void;
11
10
  gender: "male" | "female";
12
11
  actionIconName?: string;
12
+ clientLabel?: string;
13
13
  }
14
14
  declare const ContactCard: React.FC<ContactCardProps>;
15
15
  export default ContactCard;
package/dist/components/molecules/contactCard/ContactCard.js CHANGED
@@ -1,33 +1,33 @@
1
1
  import React from "react";
2
- import "./ContactCard.css";
2
+ import styles from "./contactCard.module.css";
3
3
  import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
4
4
  import IconButton from "../../atoms/buttons/IconButton";
5
5
  import Link from "next/link";
6
6
  var ContactCard = function (_a) {
7
- var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
7
+ var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b, clientLabel = _a.clientLabel;
8
8
  var isPhoneEmpty = !phone || phone.trim() === "";
9
9
  var isEmailEmpty = !email || email.trim() === "";
10
- return (React.createElement("div", { className: "contact-card", onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
11
- React.createElement("div", { className: "content-container" },
12
- React.createElement("div", { className: "name-tag-container" },
13
- React.createElement("h3", { className: "contact-name" }, name),
10
+ var defaultClientLabel = gender === "male" ? "Client" : "Cliente";
11
+ var displayClientLabel = clientLabel || "".concat(defaultClientLabel, " de l'\u00E9tude");
12
+ return (React.createElement("div", { className: styles.contactCard, onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
13
+ React.createElement("div", { className: styles.contentContainer },
14
+ React.createElement("div", { className: styles.nameTagContainer },
15
+ React.createElement("h3", { className: styles.contactName }, name),
14
16
  React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
15
- React.createElement("div", { className: "info-container" },
16
- React.createElement("div", { className: "info-item" },
17
- React.createElement("i", { className: "allaw-icon-user info-icon" }),
18
- React.createElement("span", { className: "info-text" },
19
- gender === "male" ? "Client" : "Cliente",
20
- " de l'\u00E9tude")),
21
- React.createElement("div", { className: "telephone-email-items" },
22
- React.createElement("div", { className: "info-item" },
23
- React.createElement("i", { className: "allaw-icon-phone info-icon ".concat(isPhoneEmpty ? "info-icon-disabled" : "") }),
24
- React.createElement("span", { className: "info-text contact ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
25
- React.createElement("div", { className: "info-item" },
26
- React.createElement("i", { className: "allaw-icon-mail info-icon ".concat(isEmailEmpty ? "info-icon-disabled" : "") }),
27
- React.createElement("span", { className: "info-text contact ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
28
- isEditable && (React.createElement("div", { className: "action-button-container" },
17
+ React.createElement("div", { className: styles.infoContainer },
18
+ React.createElement("div", { className: styles.infoItem },
19
+ React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
20
+ React.createElement("span", { className: styles.infoText }, displayClientLabel)),
21
+ React.createElement("div", { className: styles.telephoneEmailItems },
22
+ React.createElement("div", { className: styles.infoItem },
23
+ React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon, " ").concat(isPhoneEmpty ? styles.infoIconDisabled : "") }),
24
+ React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isPhoneEmpty ? styles.emptyField : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
25
+ React.createElement("div", { className: styles.infoItem },
26
+ React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon, " ").concat(isEmailEmpty ? styles.infoIconDisabled : "") }),
27
+ React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isEmailEmpty ? styles.emptyField : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
28
+ isEditable && (React.createElement("div", { className: styles.actionButtonContainer },
29
29
  React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))),
30
- onClick && (React.createElement("div", { className: "action-button-container" },
31
- React.createElement("i", { className: "allaw-icon-arrow-right" })))));
30
+ onClick && (React.createElement("div", { className: styles.actionButtonContainer },
31
+ React.createElement("i", { className: "allaw-icon-right ".concat(styles.infoIcon) })))));
32
32
  };
33
33
  export default ContactCard;
package/dist/components/molecules/contactCard/ContactCard.stories.d.ts CHANGED
@@ -37,6 +37,12 @@ declare namespace _default {
37
37
  export { control_6 as control };
38
38
  export let description: string;
39
39
  }
40
+ namespace clientLabel {
41
+ let control_7: string;
42
+ export { control_7 as control };
43
+ let description_1: string;
44
+ export { description_1 as description };
45
+ }
40
46
  }
41
47
  export namespace args {
42
48
  let name_1: string;
@@ -53,6 +59,8 @@ declare namespace _default {
53
59
  export { gender_1 as gender };
54
60
  let actionIconName_1: string;
55
61
  export { actionIconName_1 as actionIconName };
62
+ let clientLabel_1: string;
63
+ export { clientLabel_1 as clientLabel };
56
64
  }
57
65
  export namespace parameters {
58
66
  namespace backgrounds {
@@ -71,4 +79,5 @@ export const Editable: any;
71
79
  export const WithCustomIcon: any;
72
80
  export const EmptyFields: any;
73
81
  export const PartiallyEmpty: any;
82
+ export const CustomClientLabel: any;
74
83
  import ContactCard from "./ContactCard";
package/dist/components/molecules/contactCard/ContactCard.stories.js CHANGED
@@ -33,6 +33,10 @@ export default {
33
33
  control: "text",
34
34
  description: "Nom de l'icône pour le bouton d'action",
35
35
  },
36
+ clientLabel: {
37
+ control: "text",
38
+ description: "Texte personnalisé pour 'Client/Cliente de l'étude'",
39
+ },
36
40
  },
37
41
  args: {
38
42
  name: "Jane DOE",
@@ -42,6 +46,7 @@ export default {
42
46
  isEditable: false,
43
47
  gender: "female",
44
48
  actionIconName: "allaw-icon-edit-2",
49
+ clientLabel: "",
45
50
  },
46
51
  parameters: {
47
52
  backgrounds: {
@@ -75,3 +80,7 @@ PartiallyEmpty.args = {
75
80
  phone: "06 12 34 56 78",
76
81
  email: "",
77
82
  };
83
+ export var CustomClientLabel = Template.bind({});
84
+ CustomClientLabel.args = {
85
+ clientLabel: "Utilisateur professionnel",
86
+ };
package/dist/components/molecules/contactCard/{ContactCard.css → contactCard.module.css} RENAMED
@@ -1,10 +1,10 @@
1
- @import "../../../styles/colors.css";
1
+ @import "../../../styles/colors.module.css";
2
2
 
3
- .contact-card {
3
+ .contactCard {
4
4
  font-family: "Open Sans", sans-serif;
5
5
  border-radius: 16px;
6
- border: 1px solid var(--venom-grey, #e6edf5);
7
- background: var(--Primary-Blanc, #fff);
6
+ border: 1px solid var(--grey-venom, #e6edf5);
7
+ background: var(--pure-white, #fff);
8
8
  display: flex;
9
9
  padding: 24px;
10
10
  width: 100%;
@@ -12,18 +12,16 @@
12
12
  align-items: stretch;
13
13
  align-self: stretch;
14
14
  border-radius: 16px;
15
- border: 1px solid var(--Primary-Venom-grey, #e6edf5);
16
- background: var(--Primary-Blanc, #fff);
17
15
  }
18
16
 
19
- .content-container {
17
+ .contentContainer {
20
18
  display: flex;
21
19
  flex-direction: row;
22
20
  align-items: center;
23
21
  gap: 24px;
24
22
  }
25
23
 
26
- .name-tag-container {
24
+ .nameTagContainer {
27
25
  display: flex;
28
26
  flex-direction: column;
29
27
  justify-content: center;
@@ -32,8 +30,8 @@
32
30
  padding-left: 2px;
33
31
  }
34
32
 
35
- .contact-name {
36
- color: var(--Primary-Mid-black, #171e25);
33
+ .contactName {
34
+ color: var(--noir, #171e25);
37
35
  font-family: Poppins;
38
36
  font-size: 24px;
39
37
  font-style: normal;
@@ -41,7 +39,7 @@
41
39
  line-height: 24px;
42
40
  }
43
41
 
44
- .info-container {
42
+ .infoContainer {
45
43
  display: flex;
46
44
  flex-direction: column;
47
45
  align-items: flex-start;
@@ -49,28 +47,28 @@
49
47
  padding-left: 6px;
50
48
  }
51
49
 
52
- .info-item {
50
+ .infoItem {
53
51
  display: flex;
54
52
  align-items: center;
55
53
  gap: 8px;
56
54
  }
57
55
 
58
- .info-icon {
56
+ .infoIcon {
59
57
  width: 24px;
60
58
  height: 24px;
61
- color: #25beeb;
59
+ color: var(--bleu-allaw, #25beeb);
62
60
  font-size: 20px;
63
61
  display: flex;
64
62
  justify-content: center;
65
63
  align-items: center;
66
64
  }
67
65
 
68
- .info-icon-disabled {
69
- color: var(--Tags-Mid-grey, #728ea7);
66
+ .infoIconDisabled {
67
+ color: var(--mid-grey, #728ea7);
70
68
  }
71
69
 
72
- .info-text {
73
- color: var(--Primary-Mid-black, #171e25);
70
+ .infoText {
71
+ color: var(--noir, #171e25);
74
72
  font-family: "Open Sans";
75
73
  font-size: 16px;
76
74
  font-style: normal;
@@ -78,12 +76,12 @@
78
76
  line-height: normal;
79
77
  }
80
78
 
81
- .info-text.contact.empty-field {
82
- color: var(--Tags-Mid-grey, #728ea7);
79
+ .infoText.contact.emptyField {
80
+ color: var(--mid-grey, #728ea7);
83
81
  font-style: italic;
84
82
  }
85
83
 
86
- .telephone-email-items {
84
+ .telephoneEmailItems {
87
85
  display: flex;
88
86
  flex-direction: row;
89
87
  justify-content: center;
@@ -92,7 +90,7 @@
92
90
  }
93
91
 
94
92
  @media (max-width: 800px) {
95
- .telephone-email-items {
93
+ .telephoneEmailItems {
96
94
  flex-direction: column;
97
95
  align-items: flex-start;
98
96
  gap: 10px;
@@ -100,16 +98,16 @@
100
98
  }
101
99
 
102
100
  @media (max-width: 600px) {
103
- .content-container {
101
+ .contentContainer {
104
102
  flex-direction: column;
105
103
  }
106
- .name-tag-container {
104
+ .nameTagContainer {
107
105
  align-items: flex-start;
108
106
  width: 100%;
109
107
  }
110
108
  }
111
109
 
112
- .action-button-container {
110
+ .actionButtonContainer {
113
111
  display: flex;
114
112
  flex-direction: column;
115
113
  justify-content: center;
@@ -119,7 +117,7 @@
119
117
  }
120
118
 
121
119
  @media (max-width: 450px) {
122
- .action-button-container {
120
+ .actionButtonContainer {
123
121
  display: block;
124
122
  position: absolute;
125
123
  top: 24px;
@@ -128,7 +126,7 @@
128
126
  }
129
127
  }
130
128
 
131
- .empty-field {
132
- color: var(--Tags-Mid-grey, #728ea7) !important;
129
+ .emptyField {
130
+ color: var(--mid-grey, #728ea7) !important;
133
131
  font-style: italic;
134
132
  }
package/dist/stories/Header.stories.d.ts CHANGED
@@ -7,9 +7,9 @@ declare const meta: {
7
7
  layout: string;
8
8
  };
9
9
  args: {
10
- onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
11
- onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
12
- onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
10
+ onLogin: import("@vitest/spy").Mock<[], void>;
11
+ onLogout: import("@vitest/spy").Mock<[], void>;
12
+ onCreateAccount: import("@vitest/spy").Mock<[], void>;
13
13
  };
14
14
  };
15
15
  export default meta;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.177",
3
+ "version": "1.0.178",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",