allaw-ui 3.9.6 → 3.9.8

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 (6) hide show
  1. package/dist/components/atoms/buttons/IconButton.css +19 -7
  2. package/dist/components/atoms/buttons/IconButton.stories.d.ts +2 -0
  3. package/dist/components/atoms/buttons/IconButton.stories.js +12 -0
  4. package/dist/components/molecules/contactCard/ContactCardEdit.d.ts +20 -0
  5. package/dist/components/molecules/contactCard/ContactCardEdit.js +47 -25
  6. package/package.json +1 -1
package/dist/components/atoms/buttons/IconButton.css CHANGED
@@ -70,31 +70,43 @@
70
70
  align-items: center;
71
71
  }
72
72
 
73
- /* Medium, square, transparent background with outline */
73
+ /* Medium, square, transparent background with outline - style BackButton */
74
74
  .icon-button.mediumOutline {
75
75
  display: flex;
76
- width: 35px;
77
- height: 35px;
76
+ width: 40px;
77
+ height: 40px;
78
78
  padding: 8px;
79
79
  justify-content: center;
80
80
  align-items: center;
81
81
  gap: 8px;
82
82
  flex-shrink: 0;
83
- border-radius: 4px;
84
- border: 1px solid var(--primary-blue, #25beeb);
83
+ border-radius: 8px;
84
+ border: 1px solid var(--primary-venom-grey, #e6edf5);
85
85
  background: transparent;
86
+ cursor: pointer;
87
+ transition: all 0.2s ease;
88
+ }
89
+
90
+ .icon-button.mediumOutline:hover {
91
+ background: rgba(37, 190, 235, 0.1);
92
+ border-color: var(--allaw-blue, #25beeb);
86
93
  }
87
94
 
88
95
  .icon-button.mediumOutline .icon {
89
96
  width: 24px;
90
97
  height: 24px;
91
98
  flex-shrink: 0;
92
- color: var(--bleu-allaw, #25beeb);
99
+ color: var(--primary-dark-grey, #456073);
93
100
  display: flex;
94
101
  flex-direction: row;
95
102
  justify-content: center;
96
103
  align-items: center;
97
- font-size: 18px;
104
+ font-size: 16px;
105
+ transition: color 0.2s ease;
106
+ }
107
+
108
+ .icon-button.mediumOutline:hover .icon {
109
+ color: var(--allaw-blue, #25beeb);
98
110
  }
99
111
 
100
112
  /* Just the outline icons */
package/dist/components/atoms/buttons/IconButton.stories.d.ts CHANGED
@@ -44,6 +44,8 @@ export default _default;
44
44
  export const SmallFilled: any;
45
45
  export const LargeFilled: any;
46
46
  export const MediumOutline: any;
47
+ export const MediumOutlineDocument: any;
48
+ export const MediumOutlineArrow: any;
47
49
  export const IconOnly: any;
48
50
  export const IconCircle: any;
49
51
  import IconButton from "./IconButton";
package/dist/components/atoms/buttons/IconButton.stories.js CHANGED
@@ -74,6 +74,18 @@ MediumOutline.args = {
74
74
  iconName: "allaw-icon-calendar",
75
75
  onClick: function () { return console.log("MediumOutline button clicked"); },
76
76
  };
77
+ export var MediumOutlineDocument = Template.bind({});
78
+ MediumOutlineDocument.args = {
79
+ style: "mediumOutline",
80
+ iconName: "allaw-icon-document",
81
+ onClick: function () { return console.log("MediumOutline document button clicked"); },
82
+ };
83
+ export var MediumOutlineArrow = Template.bind({});
84
+ MediumOutlineArrow.args = {
85
+ style: "mediumOutline",
86
+ iconName: "allaw-icon-arrow-left",
87
+ onClick: function () { return console.log("MediumOutline arrow button clicked"); },
88
+ };
77
89
  export var IconOnly = Template.bind({});
78
90
  IconOnly.args = {
79
91
  style: "iconOnly",
package/dist/components/molecules/contactCard/ContactCardEdit.d.ts CHANGED
@@ -7,6 +7,26 @@ export interface ContactCardEditProps {
7
7
  clientOfStudy?: boolean;
8
8
  officeName?: "du cabinet" | "de l'étude";
9
9
  birthDate?: Date;
10
+ hideActions?: boolean;
11
+ controlled?: boolean;
12
+ editData?: {
13
+ firstName: string;
14
+ lastName: string;
15
+ status: string;
16
+ clientType: string;
17
+ phone: string;
18
+ email: string;
19
+ birthDate?: Date;
20
+ };
21
+ onEditDataChange?: (data: {
22
+ firstName: string;
23
+ lastName: string;
24
+ status: string;
25
+ clientType: string;
26
+ phone: string;
27
+ email: string;
28
+ birthDate?: Date;
29
+ }) => void;
10
30
  onSave?: (data: {
11
31
  firstName: string;
12
32
  lastName: string;
package/dist/components/molecules/contactCard/ContactCardEdit.js CHANGED
@@ -16,8 +16,8 @@ import Select from "../../atoms/selects/Select";
16
16
  import Datepicker from "../../atoms/datepickers/Datepicker";
17
17
  import IconButton from "../../atoms/buttons/IconButton";
18
18
  var ContactCardEdit = function (_a) {
19
- var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, onSave = _a.onSave, onCancel = _a.onCancel;
20
- var _d = useState({
19
+ var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, _d = _a.hideActions, hideActions = _d === void 0 ? false : _d, _e = _a.controlled, controlled = _e === void 0 ? false : _e, externalEditData = _a.editData, onEditDataChange = _a.onEditDataChange, onSave = _a.onSave, onCancel = _a.onCancel;
20
+ var _f = useState({
21
21
  firstName: "",
22
22
  lastName: "",
23
23
  status: status,
@@ -25,7 +25,18 @@ var ContactCardEdit = function (_a) {
25
25
  phone: phone,
26
26
  email: email,
27
27
  birthDate: birthDate,
28
- }), editData = _d[0], setEditData = _d[1];
28
+ }), internalEditData = _f[0], setInternalEditData = _f[1];
29
+ // Utiliser les données externes si contrôlé, sinon les données internes
30
+ var editData = controlled && externalEditData ? externalEditData : internalEditData;
31
+ var updateEditData = function (updater) {
32
+ if (controlled && onEditDataChange) {
33
+ var newData = updater(editData);
34
+ onEditDataChange(newData);
35
+ }
36
+ else {
37
+ setInternalEditData(updater);
38
+ }
39
+ };
29
40
  // Options pour les selects
30
41
  var statusOptions = [
31
42
  { label: "Client actif", value: "Client actif" },
@@ -40,26 +51,37 @@ var ContactCardEdit = function (_a) {
40
51
  ];
41
52
  // Initialisation des données d'édition
42
53
  useEffect(function () {
43
- if (name) {
54
+ if (name && !controlled) {
44
55
  var nameParts_1 = name.split(" ");
45
- setEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: nameParts_1[0] || "", lastName: nameParts_1.slice(1).join(" ") || "", status: status, clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client", phone: phone, email: email, birthDate: birthDate })); });
56
+ setInternalEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: nameParts_1[0] || "", lastName: nameParts_1.slice(1).join(" ") || "", status: status, clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client", phone: phone, email: email, birthDate: birthDate })); });
46
57
  }
47
- }, [name, status, phone, email, birthDate, clientOfStudy, officeName]);
58
+ }, [
59
+ name,
60
+ status,
61
+ phone,
62
+ email,
63
+ birthDate,
64
+ clientOfStudy,
65
+ officeName,
66
+ controlled,
67
+ ]);
48
68
  var handleSave = function () {
49
69
  onSave === null || onSave === void 0 ? void 0 : onSave(editData);
50
70
  };
51
71
  var handleCancel = function () {
52
72
  // Reset des données
53
- var nameParts = name.split(" ");
54
- setEditData({
55
- firstName: nameParts[0] || "",
56
- lastName: nameParts.slice(1).join(" ") || "",
57
- status: status,
58
- clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
59
- phone: phone,
60
- email: email,
61
- birthDate: birthDate,
62
- });
73
+ if (!controlled) {
74
+ var nameParts = name.split(" ");
75
+ setInternalEditData({
76
+ firstName: nameParts[0] || "",
77
+ lastName: nameParts.slice(1).join(" ") || "",
78
+ status: status,
79
+ clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
80
+ phone: phone,
81
+ email: email,
82
+ birthDate: birthDate,
83
+ });
84
+ }
63
85
  onCancel === null || onCancel === void 0 ? void 0 : onCancel();
64
86
  };
65
87
  return (React.createElement("div", { className: styles.contactCardEdit },
@@ -67,41 +89,41 @@ var ContactCardEdit = function (_a) {
67
89
  React.createElement("div", { className: styles.nameTagContainer },
68
90
  React.createElement("div", { className: styles.nameInputsContainer },
69
91
  React.createElement(Input, { title: "", placeholder: "Pr\u00E9nom", value: editData.firstName, onChange: function (value) {
70
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: value })); });
92
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: value })); });
71
93
  }, disableAutofill: true }),
72
94
  React.createElement(Input, { title: "", placeholder: "Nom", value: editData.lastName, onChange: function (value) {
73
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { lastName: value })); });
95
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { lastName: value })); });
74
96
  }, disableAutofill: true })),
75
97
  React.createElement(Select, { items: statusOptions, selectedItem: editData.status, placeholder: "Statut", onChange: function (value) {
76
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { status: value })); });
98
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { status: value })); });
77
99
  } })),
78
100
  React.createElement("div", { className: styles.infoContainer },
79
101
  React.createElement("div", { className: styles.infoItem },
80
102
  React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
81
103
  React.createElement("div", { className: styles.clientTypeSelectContainer },
82
104
  React.createElement(Select, { items: clientTypeOptions, selectedItem: editData.clientType, placeholder: "Type de client", onChange: function (value) {
83
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { clientType: value })); });
105
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { clientType: value })); });
84
106
  } }))),
85
107
  React.createElement("div", { className: styles.telephoneEmailItems },
86
108
  React.createElement("div", { className: styles.infoItem },
87
109
  React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon) }),
88
110
  React.createElement("div", { className: styles.phoneInputContainer },
89
111
  React.createElement(Input, { title: "", placeholder: "T\u00E9l\u00E9phone", type: "tel", value: editData.phone, onChange: function (value) {
90
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { phone: value })); });
112
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { phone: value })); });
91
113
  }, disableAutofill: true }))),
92
114
  React.createElement("div", { className: styles.infoItem },
93
115
  React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon) }),
94
116
  React.createElement(Input, { title: "", placeholder: "Email", type: "email", value: editData.email, onChange: function (value) {
95
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { email: value })); });
117
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { email: value })); });
96
118
  }, disableAutofill: true })),
97
119
  birthDate && (React.createElement("div", { className: styles.infoItem },
98
120
  React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
99
121
  React.createElement(Datepicker, { value: editData.birthDate, onChange: function (date) {
100
- return setEditData(function (prev) { return (__assign(__assign({}, prev), { birthDate: date })); });
122
+ return updateEditData(function (prev) { return (__assign(__assign({}, prev), { birthDate: date })); });
101
123
  }, placeholder: "Date de naissance" })))))),
102
- React.createElement("div", { className: styles.actionsContainer },
124
+ !hideActions && (React.createElement("div", { className: styles.actionsContainer },
103
125
  React.createElement("div", { className: styles.editActionsContainer },
104
126
  React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-check", onClick: handleSave, color: "#29a36a" }),
105
- React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-close", onClick: handleCancel, color: "#728ea7" })))));
127
+ React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-close", onClick: handleCancel, color: "#728ea7" }))))));
106
128
  };
107
129
  export default ContactCardEdit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "3.9.6",
3
+ "version": "3.9.8",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",