allaw-ui 5.0.3 → 5.0.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.
Files changed (10) hide show
  1. package/dist/components/atoms/tags/OtherStatusTag.css +15 -0
  2. package/dist/components/atoms/tags/OtherStatusTag.js +1 -1
  3. package/dist/components/atoms/tags/OtherStatusTag.stories.d.ts +2 -0
  4. package/dist/components/atoms/tags/OtherStatusTag.stories.js +9 -0
  5. package/dist/components/molecules/appointmentSlot/AppointmentSlot.d.ts +5 -3
  6. package/dist/components/molecules/appointmentSlot/AppointmentSlot.js +69 -39
  7. package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.d.ts +26 -1
  8. package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.js +27 -9
  9. package/dist/components/molecules/appointmentSlot/{AppointmentSlot.css → appointmentSlot.module.css} +143 -102
  10. package/package.json +1 -1
package/dist/components/atoms/tags/OtherStatusTag.css CHANGED
@@ -26,6 +26,15 @@
26
26
  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
27
27
  }
28
28
 
29
+ .other-status-tag.readonly .icon {
30
+ display: flex;
31
+ width: 16px;
32
+ height: 16px;
33
+ justify-content: center;
34
+ align-items: center;
35
+ font-size: 14px;
36
+ }
37
+
29
38
  .other-status-tag.editable {
30
39
  height: 35px;
31
40
  padding: 8px;
@@ -123,3 +132,9 @@
123
132
  padding: 2.833px;
124
133
  font-size: 10px;
125
134
  }
135
+
136
+ .other-status-tag.readonly.compact .icon {
137
+ width: 14px;
138
+ height: 14px;
139
+ font-size: 12px;
140
+ }
package/dist/components/atoms/tags/OtherStatusTag.js CHANGED
@@ -8,7 +8,7 @@ var OtherStatusTag = function (_a) {
8
8
  return "".concat(text.slice(0, limit), "...");
9
9
  };
10
10
  return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style, " ").concat(type === "information" ? "information-color-".concat(informationColor) : "") },
11
- type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
11
+ (type === "information" || type === "readonly") && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
12
12
  React.createElement("span", { className: "other-status-tag-label", title: label }, truncateText(label, labelLimit)),
13
13
  type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));
14
14
  };
package/dist/components/atoms/tags/OtherStatusTag.stories.d.ts CHANGED
@@ -86,11 +86,13 @@ declare namespace _default {
86
86
  }
87
87
  export default _default;
88
88
  export const ReadOnly: any;
89
+ export const ReadOnlyWithIcon: any;
89
90
  export const Editable: any;
90
91
  export const Information: any;
91
92
  export const LongLabel: any;
92
93
  export const LongLabelWithoutLimit: any;
93
94
  export const ReadOnlyCompact: any;
95
+ export const ReadOnlyWithIconCompact: any;
94
96
  export const EditableCompact: any;
95
97
  export const InformationCompact: any;
96
98
  export const LongLabelCompact: any;
package/dist/components/atoms/tags/OtherStatusTag.stories.js CHANGED
@@ -85,6 +85,13 @@ ReadOnly.args = {
85
85
  startIcon: false,
86
86
  startIconName: "allaw-icon-pmr",
87
87
  };
88
+ export var ReadOnlyWithIcon = Template.bind({});
89
+ ReadOnlyWithIcon.args = {
90
+ label: "Rue des Ormes",
91
+ type: "readonly",
92
+ startIcon: true,
93
+ startIconName: "allaw-icon-map-pin",
94
+ };
88
95
  export var Editable = Template.bind({});
89
96
  Editable.args = {
90
97
  label: "Tags",
@@ -128,6 +135,8 @@ LongLabelWithoutLimit.parameters = {
128
135
  };
129
136
  export var ReadOnlyCompact = Template.bind({});
130
137
  ReadOnlyCompact.args = __assign(__assign({}, ReadOnly.args), { style: "compact" });
138
+ export var ReadOnlyWithIconCompact = Template.bind({});
139
+ ReadOnlyWithIconCompact.args = __assign(__assign({}, ReadOnlyWithIcon.args), { style: "compact" });
131
140
  export var EditableCompact = Template.bind({});
132
141
  EditableCompact.args = __assign(__assign({}, Editable.args), { style: "compact" });
133
142
  export var InformationCompact = Template.bind({});
package/dist/components/molecules/appointmentSlot/AppointmentSlot.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import "./AppointmentSlot.css";
3
- type AppointmentStatus = "pending" | "available" | "cancelled" | "passed" | "refused" | "confirmed" | "unavailable" | "summary";
2
+ type AppointmentStatus = "pending" | "available" | "cancelled" | "passed" | "refused" | "confirmed" | "unavailable";
3
+ type AppointmentStyle = "compact" | "big" | "summary";
4
4
  export interface AppointmentSlotProps {
5
5
  status: AppointmentStatus;
6
6
  startTime: string;
@@ -20,7 +20,9 @@ export interface AppointmentSlotProps {
20
20
  };
21
21
  isEditable?: boolean;
22
22
  appointmentDetails?: string;
23
- style?: "compact" | "big";
23
+ style?: AppointmentStyle;
24
+ meetingType?: "INPERSON" | "VISIO" | "CALL" | "IMPORTED";
25
+ location?: string;
24
26
  }
25
27
  declare const AppointmentSlot: React.FC<AppointmentSlotProps>;
26
28
  export default AppointmentSlot;
package/dist/components/molecules/appointmentSlot/AppointmentSlot.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import React, { useState, useCallback } from "react";
2
- import "./AppointmentSlot.css";
2
+ import styles from "./appointmentSlot.module.css";
3
3
  import AppointementStatusTag from "../../atoms/tags/AppointementStatusTag";
4
4
  import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
5
5
  import ActionCircleButton from "../../atoms/buttons/ActionCircleButton";
6
6
  import IconButton from "../../atoms/buttons/IconButton";
7
7
  var AppointmentSlot = function (_a) {
8
- var status = _a.status, startTime = _a.startTime, endTime = _a.endTime, date = _a.date, clientName = _a.clientName, appointmentContent = _a.appointmentContent, tags = _a.tags, noteCount = _a.noteCount, documentCount = _a.documentCount, actions = _a.actions, _b = _a.style, style = _b === void 0 ? "compact" : _b;
8
+ var status = _a.status, startTime = _a.startTime, endTime = _a.endTime, date = _a.date, clientName = _a.clientName, appointmentContent = _a.appointmentContent, tags = _a.tags, noteCount = _a.noteCount, documentCount = _a.documentCount, actions = _a.actions, _b = _a.style, style = _b === void 0 ? "compact" : _b, isEditable = _a.isEditable, meetingType = _a.meetingType, location = _a.location;
9
9
  var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
10
10
  // Handlers
11
11
  var handleApprove = useCallback(function () {
@@ -33,76 +33,106 @@ var AppointmentSlot = function (_a) {
33
33
  };
34
34
  // Helper function
35
35
  var isClickableElement = function (element) {
36
- return (element.closest(".action-button-container, .document-actions, button") !==
37
- null);
36
+ return (element.closest(".".concat(styles.actionButtonContainer, ", .").concat(styles.documentActions, ", button")) !== null);
38
37
  };
39
38
  // Render functions
40
- var renderHeader = function () { return (React.createElement("div", { className: "appointment-header" },
41
- React.createElement("span", { className: "appointment-time" }, "".concat(startTime, " - ").concat(endTime)),
42
- status !== "summary" && (React.createElement(AppointementStatusTag, { status: status, variant: style === "compact" ? "small" : "default" })))); };
39
+ var renderHeader = function () { return (React.createElement("div", { className: styles.appointmentHeader },
40
+ React.createElement("span", { className: styles.appointmentTime }, "".concat(startTime, " - ").concat(endTime)),
41
+ style !== "summary" && (React.createElement(AppointementStatusTag, { status: status, variant: style === "compact" ? "small" : "default" })))); };
43
42
  var renderFooter = function () {
44
43
  if (status === "available") {
45
44
  return renderAvailableFooter();
46
45
  }
47
- if (status === "summary") {
48
- return null;
49
- }
50
46
  if (status !== "unavailable") {
51
47
  return renderDefaultFooter();
52
48
  }
53
49
  return null;
54
50
  };
55
- var renderAvailableFooter = function () { return (React.createElement("div", { className: "appointment-footer" },
56
- React.createElement("div", { className: "action-button-container", onClick: actions === null || actions === void 0 ? void 0 : actions.onMakeUnavailable },
57
- React.createElement("div", { className: "icon-close-container" },
51
+ var renderAvailableFooter = function () { return (React.createElement("div", { className: styles.appointmentFooter },
52
+ React.createElement("div", { className: styles.actionButtonContainer, onClick: actions === null || actions === void 0 ? void 0 : actions.onMakeUnavailable },
53
+ React.createElement("div", { className: styles.iconCloseContainer },
58
54
  React.createElement("i", { className: "allaw-icon-close" })),
59
- React.createElement("span", { className: "make-unavailable-text" }, "Rendre indisponible")))); };
60
- var renderDefaultFooter = function () { return (React.createElement("div", { className: "appointment-footer" },
61
- React.createElement("div", { className: "footer-left" },
62
- clientName && React.createElement("div", { className: "client-name" }, clientName),
63
- appointmentContent && (React.createElement("div", { className: "appointment-content" }, appointmentContent)),
55
+ React.createElement("span", { className: styles.makeUnavailableText }, "Rendre indisponible")))); };
56
+ var renderDefaultFooter = function () { return (React.createElement("div", { className: styles.appointmentFooter },
57
+ React.createElement("div", { className: styles.footerLeft },
58
+ clientName && React.createElement("div", { className: styles.clientName }, clientName),
59
+ appointmentContent && (React.createElement("div", { className: styles.appointmentContent }, appointmentContent)),
64
60
  renderTags()),
65
61
  renderActionButtons())); };
62
+ var getMeetingTypeTag = function () {
63
+ if (!meetingType)
64
+ return null;
65
+ var iconName = "";
66
+ var label = "";
67
+ switch (meetingType) {
68
+ case "INPERSON":
69
+ iconName = "allaw-icon-map-pin";
70
+ label = location || "Présentiel";
71
+ break;
72
+ case "VISIO":
73
+ iconName = "allaw-icon-visio";
74
+ label = "Visio";
75
+ break;
76
+ case "CALL":
77
+ iconName = "allaw-icon-phone";
78
+ label = "Téléphone";
79
+ break;
80
+ case "IMPORTED":
81
+ iconName = "allaw-icon-calendar";
82
+ label = "Calendrier connecté";
83
+ break;
84
+ default:
85
+ return null;
86
+ }
87
+ return (React.createElement(OtherStatusTag, { label: label, type: "readonly", startIcon: true, startIconName: iconName, style: style === "compact" ? "compact" : "normal" }));
88
+ };
66
89
  var renderTags = function () {
67
- return tags && (React.createElement("div", { className: "tags-container" }, tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag, style: style === "compact" ? "compact" : "normal" })); })));
90
+ var meetingTag = getMeetingTypeTag();
91
+ var hasTags = tags && tags.length > 0;
92
+ if (!meetingTag && !hasTags)
93
+ return null;
94
+ return (React.createElement("div", { className: styles.tagsContainer },
95
+ meetingTag,
96
+ hasTags &&
97
+ tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag, style: style === "compact" ? "compact" : "normal" })); })));
68
98
  };
69
99
  var renderActionButtons = function () {
70
100
  switch (status) {
71
101
  case "pending":
72
- return (React.createElement("div", { className: "action-button-container" },
102
+ return (React.createElement("div", { className: styles.actionButtonContainer },
73
103
  React.createElement(ActionCircleButton, { status: "dual", onApprove: handleApprove, onReject: handleReject })));
74
104
  case "confirmed":
75
- return documentCount && parseInt(documentCount) > 0 ? (React.createElement("div", { className: "document-actions" },
105
+ return documentCount && parseInt(documentCount) > 0 ? (React.createElement("div", { className: styles.documentActions },
76
106
  React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
77
- React.createElement("span", { className: "document-count" }, documentCount))) : null;
107
+ React.createElement("span", { className: styles.documentCount }, documentCount))) : null;
78
108
  case "passed":
79
- return (React.createElement("div", { className: "document-actions" },
109
+ return (React.createElement("div", { className: styles.documentActions },
80
110
  React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-edit-2", onClick: actions === null || actions === void 0 ? void 0 : actions.onEdit }),
81
- noteCount && React.createElement("span", { className: "note-count" }, noteCount),
111
+ noteCount && React.createElement("span", { className: styles.noteCount }, noteCount),
82
112
  documentCount && parseInt(documentCount) > 0 && (React.createElement(React.Fragment, null,
83
113
  React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
84
- React.createElement("span", { className: "document-count" }, documentCount)))));
114
+ React.createElement("span", { className: styles.documentCount }, documentCount)))));
85
115
  default:
86
116
  return null;
87
117
  }
88
118
  };
89
- if (status === "summary") {
90
- return (React.createElement("div", { className: "appointment-slot-summary ".concat(style) },
91
- React.createElement("div", { className: "appointment-header" },
92
- React.createElement("div", { className: "date-time-container" },
93
- React.createElement("span", { className: "summary-date" }, date),
94
- React.createElement("span", { className: "summary-time" }, "".concat(startTime, " - ").concat(endTime))),
95
- React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: actions === null || actions === void 0 ? void 0 : actions.onEdit })),
96
- React.createElement("div", { className: "appointment-footer" },
97
- React.createElement("div", { className: "appointment-content-container" },
98
- React.createElement("div", { className: "client-name" }, clientName),
99
- React.createElement("div", { className: "appointment-content" }, appointmentContent),
119
+ if (style === "summary") {
120
+ return (React.createElement("div", { className: "".concat(styles.summary, " ").concat(styles[status]) },
121
+ React.createElement("div", { className: styles.appointmentHeader },
122
+ React.createElement("div", { className: styles.dateTimeContainer },
123
+ React.createElement("span", { className: styles.summaryDate }, date),
124
+ React.createElement("span", { className: styles.summaryTime }, "".concat(startTime, " - ").concat(endTime))),
125
+ isEditable !== false ? (React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: actions === null || actions === void 0 ? void 0 : actions.onEdit })) : (React.createElement(AppointementStatusTag, { status: status, variant: "default" }))),
126
+ React.createElement("div", { className: styles.appointmentFooter },
127
+ React.createElement("div", { className: styles.appointmentContentContainer },
128
+ React.createElement("div", { className: styles.clientName }, clientName),
129
+ React.createElement("div", { className: styles.appointmentContent }, appointmentContent),
100
130
  renderTags()),
101
- React.createElement("div", { className: "document-actions-container" }, documentCount && parseInt(documentCount) > 0 && (React.createElement("div", { className: "document-actions" },
131
+ React.createElement("div", { className: styles.documentActionsContainer }, documentCount && parseInt(documentCount) > 0 && (React.createElement("div", { className: styles.documentActions },
102
132
  React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document", onClick: actions === null || actions === void 0 ? void 0 : actions.onViewDocument }),
103
- React.createElement("span", { className: "document-count" }, documentCount)))))));
133
+ React.createElement("span", { className: styles.documentCount }, documentCount)))))));
104
134
  }
105
- return (React.createElement("div", { className: "appointment-slot ".concat(status, " ").concat(isActive ? "active" : "", " ").concat(style), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onClick: handleClick },
135
+ return (React.createElement("div", { className: "".concat(styles.appointmentSlot, " ").concat(styles[status], " ").concat(isActive ? styles.active : "", " ").concat(style === "compact" ? styles.compact : styles.big), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onClick: handleClick },
106
136
  renderHeader(),
107
137
  renderFooter()));
108
138
  };
package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.d.ts CHANGED
@@ -41,6 +41,28 @@ declare namespace _default {
41
41
  export { control_4 as control };
42
42
  export let defaultValue: string;
43
43
  }
44
+ namespace isEditable {
45
+ let control_5: string;
46
+ export { control_5 as control };
47
+ let defaultValue_1: boolean;
48
+ export { defaultValue_1 as defaultValue };
49
+ }
50
+ namespace meetingType {
51
+ export namespace control_6 {
52
+ let type_3: string;
53
+ export { type_3 as type };
54
+ let options_3: (string | undefined)[];
55
+ export { options_3 as options };
56
+ }
57
+ export { control_6 as control };
58
+ export let description: string;
59
+ }
60
+ namespace location {
61
+ let control_7: string;
62
+ export { control_7 as control };
63
+ let description_1: string;
64
+ export { description_1 as description };
65
+ }
44
66
  }
45
67
  export namespace parameters {
46
68
  namespace actions {
@@ -66,5 +88,8 @@ export const Passed: any;
66
88
  export const Cancelled: any;
67
89
  export const Refused: any;
68
90
  export const Summary: any;
69
- export const SummaryBig: any;
91
+ export const SummaryNotEditable: any;
92
+ export const ConfirmedWithMeetingType: any;
93
+ export const ConfirmedWithVisio: any;
94
+ export const SummaryWithMeetingType: any;
70
95
  import AppointmentSlot from "./AppointmentSlot";
package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.js CHANGED
@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import React from "react";
13
13
  import AppointmentSlot from "./AppointmentSlot";
14
- import "../../../styles/global.css";
15
14
  export default {
16
15
  title: "Components/Molecules/AppointmentSlot",
17
16
  component: AppointmentSlot,
@@ -26,7 +25,6 @@ export default {
26
25
  "available",
27
26
  "unavailable",
28
27
  "passed",
29
- "summary",
30
28
  "cancelled",
31
29
  "refused",
32
30
  ],
@@ -37,7 +35,6 @@ export default {
37
35
  "available",
38
36
  "unavailable",
39
37
  "passed",
40
- "summary",
41
38
  "cancelled",
42
39
  "refused",
43
40
  ],
@@ -52,15 +49,30 @@ export default {
52
49
  },
53
50
  date: {
54
51
  control: "text",
55
- if: { arg: "status", eq: "summary" },
52
+ if: { arg: "style", eq: "summary" },
56
53
  },
57
54
  style: {
58
55
  control: {
59
56
  type: "select",
60
- options: ["compact", "big"],
57
+ options: ["compact", "big", "summary"],
61
58
  },
62
59
  defaultValue: "compact",
63
60
  },
61
+ isEditable: {
62
+ control: "boolean",
63
+ defaultValue: true,
64
+ },
65
+ meetingType: {
66
+ control: {
67
+ type: "select",
68
+ options: [undefined, "INPERSON", "VISIO", "CALL", "IMPORTED"],
69
+ },
70
+ description: "Type de rendez-vous",
71
+ },
72
+ location: {
73
+ control: "text",
74
+ description: "Adresse du rendez-vous (pour INPERSON)",
75
+ },
64
76
  },
65
77
  parameters: {
66
78
  actions: {
@@ -168,8 +180,8 @@ Refused.args = {
168
180
  };
169
181
  export var Summary = Template.bind({});
170
182
  Summary.args = {
171
- status: "summary",
172
- style: "compact",
183
+ status: "confirmed",
184
+ style: "summary",
173
185
  startTime: "14:15",
174
186
  endTime: "15:00",
175
187
  date: "LUN. 12 AVRIL 2023",
@@ -182,5 +194,11 @@ Summary.args = {
182
194
  onViewDocument: function () { return console.log("View document clicked"); },
183
195
  },
184
196
  };
185
- export var SummaryBig = Template.bind({});
186
- SummaryBig.args = __assign(__assign({}, Summary.args), { style: "big" });
197
+ export var SummaryNotEditable = Template.bind({});
198
+ SummaryNotEditable.args = __assign(__assign({}, Summary.args), { isEditable: false });
199
+ export var ConfirmedWithMeetingType = Template.bind({});
200
+ ConfirmedWithMeetingType.args = __assign(__assign({}, Confirmed.args), { meetingType: "INPERSON", location: "Rue des Ormes" });
201
+ export var ConfirmedWithVisio = Template.bind({});
202
+ ConfirmedWithVisio.args = __assign(__assign({}, Confirmed.args), { meetingType: "VISIO" });
203
+ export var SummaryWithMeetingType = Template.bind({});
204
+ SummaryWithMeetingType.args = __assign(__assign({}, Summary.args), { meetingType: "INPERSON", location: "Rue des Ormes" });
package/dist/components/molecules/appointmentSlot/{AppointmentSlot.css → appointmentSlot.module.css} RENAMED
@@ -1,7 +1,5 @@
1
- @import "../../../styles/colors.css";
2
-
3
1
  /* Base styles */
4
- .appointment-slot {
2
+ .appointmentSlot {
5
3
  display: flex;
6
4
  width: 329px;
7
5
  padding: 16px;
@@ -10,37 +8,50 @@
10
8
  align-items: flex-start;
11
9
  gap: 16px;
12
10
  border-radius: 16px;
13
- background: var(--Primary-Blanc, #fff);
11
+ background: #fff;
14
12
  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
15
13
  cursor: pointer;
16
- transition:
17
- background-color 0.05s ease,
18
- transform 0.1s ease;
14
+ transition: background-color 0.05s ease, transform 0.1s ease;
19
15
  user-select: none;
20
16
  }
21
17
 
22
- .appointment-slot:hover {
18
+ .appointmentSlot:hover {
23
19
  transform: scale(1.015);
24
20
  }
25
21
 
26
- .appointment-slot.active {
27
- background: var(--grey-light-2);
22
+ .active {
23
+ background: #f4f7fb;
28
24
  }
29
25
 
30
26
  /* Status-specific styles */
31
- .appointment-slot.confirmed,
32
- .appointment-slot.available,
33
- .appointment-slot.unavailable,
34
- .appointment-slot.passed {
35
- border: 1px solid var(--venom-grey, #e6edf5);
27
+ .confirmed,
28
+ .available,
29
+ .unavailable,
30
+ .passed {
31
+ border: 1px solid #e6edf5;
36
32
  }
37
33
 
38
- .appointment-slot.pending {
34
+ .pending {
39
35
  border: 1px solid rgba(225, 81, 81, 0.54);
40
36
  }
41
37
 
38
+ .cancelled,
39
+ .refused {
40
+ border: 1px solid #e6edf5;
41
+ }
42
+
43
+ .compact {
44
+ /* Modificateur de style, les règles sont définies via les sélecteurs descendants */
45
+ box-sizing: border-box;
46
+ }
47
+
48
+ .big {
49
+ /* Modificateur de style, les règles sont définies via les sélecteurs descendants */
50
+ box-sizing: border-box;
51
+ }
52
+
42
53
  /* Header styles */
43
- .appointment-header {
54
+ .appointmentHeader {
44
55
  display: flex;
45
56
  justify-content: space-between;
46
57
  align-items: center;
@@ -48,8 +59,8 @@
48
59
  width: 100%;
49
60
  }
50
61
 
51
- .appointment-time {
52
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
62
+ .appointmentTime {
63
+ color: #171e25;
53
64
  text-align: center;
54
65
  font-family: Inter, sans-serif;
55
66
  font-size: 20px;
@@ -59,23 +70,23 @@
59
70
  letter-spacing: 0.2px;
60
71
  }
61
72
 
62
- .appointment-slot.available .appointment-time,
63
- .appointment-slot.unavailable .appointment-time,
64
- .appointment-slot.passed .appointment-time {
65
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
73
+ .available .appointmentTime,
74
+ .unavailable .appointmentTime,
75
+ .passed .appointmentTime {
76
+ color: #728ea7;
66
77
  }
67
78
 
68
79
  /* Footer styles */
69
- .appointment-footer {
80
+ .appointmentFooter {
70
81
  display: flex;
71
82
  padding-top: 10px;
72
83
  justify-content: space-between;
73
84
  align-items: flex-end;
74
85
  align-self: stretch;
75
- border-top: 1px solid var(--venom-grey, #e6edf5);
86
+ border-top: 1px solid #e6edf5;
76
87
  }
77
88
 
78
- .footer-left {
89
+ .footerLeft {
79
90
  display: flex;
80
91
  flex-direction: column;
81
92
  justify-content: center;
@@ -84,8 +95,8 @@
84
95
  align-self: stretch;
85
96
  }
86
97
 
87
- .client-name {
88
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
98
+ .clientName {
99
+ color: #728ea7;
89
100
  font-family: "Open Sans", sans-serif;
90
101
  font-size: 12px;
91
102
  font-style: normal;
@@ -94,8 +105,8 @@
94
105
  letter-spacing: 0.36px;
95
106
  }
96
107
 
97
- .appointment-content {
98
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
108
+ .appointmentContent {
109
+ color: #456073;
99
110
  font-family: "Open Sans", sans-serif;
100
111
  font-size: 16px;
101
112
  font-style: normal;
@@ -104,7 +115,7 @@
104
115
  }
105
116
 
106
117
  /* Tags styles */
107
- .tags-container {
118
+ .tagsContainer {
108
119
  display: flex;
109
120
  align-items: flex-start;
110
121
  gap: 8px;
@@ -112,15 +123,15 @@
112
123
  }
113
124
 
114
125
  /* Document actions styles */
115
- .document-actions {
126
+ .documentActions {
116
127
  display: flex;
117
128
  align-items: center;
118
129
  gap: 8px;
119
130
  }
120
131
 
121
- .document-count,
122
- .note-count {
123
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
132
+ .documentCount,
133
+ .noteCount {
134
+ color: #171e25;
124
135
  font-family: Inter, sans-serif;
125
136
  font-size: 14px;
126
137
  font-style: normal;
@@ -129,57 +140,56 @@
129
140
  }
130
141
 
131
142
  /* Action button styles */
132
- .action-button-container {
143
+ .actionButtonContainer {
133
144
  position: relative;
134
145
  z-index: 1;
135
146
  }
136
147
 
137
148
  /* Pending status styles */
138
- .appointment-slot.pending .action-button-container,
139
- .appointment-slot.pending .document-actions,
140
- .appointment-slot.pending button {
149
+ .pending .actionButtonContainer,
150
+ .pending .documentActions,
151
+ .pending button {
141
152
  pointer-events: auto;
142
153
  }
143
154
 
144
- .appointment-slot.pending {
155
+ .pending {
145
156
  pointer-events: none;
146
157
  }
147
158
 
148
- .appointment-slot.pending
149
- > *:not(.action-button-container):not(.document-actions):not(button) {
159
+ .pending > *:not(.actionButtonContainer):not(.documentActions):not(button) {
150
160
  pointer-events: auto;
151
161
  }
152
162
 
153
163
  /* Available and unavailable status styles */
154
- .appointment-slot.available,
155
- .appointment-slot.unavailable {
164
+ .available,
165
+ .unavailable {
156
166
  justify-content: flex-start;
157
167
  }
158
168
 
159
- .appointment-slot.available .footer-left,
160
- .appointment-slot.unavailable .footer-left {
169
+ .available .footerLeft,
170
+ .unavailable .footerLeft {
161
171
  display: none;
162
172
  }
163
173
 
164
- .appointment-slot.available .appointment-footer,
165
- .appointment-slot.unavailable .appointment-footer {
174
+ .available .appointmentFooter,
175
+ .unavailable .appointmentFooter {
166
176
  border-top: none;
167
177
  padding-top: 0;
168
178
  }
169
179
 
170
180
  /* Available status specific styles */
171
- .appointment-slot.available {
181
+ .available {
172
182
  gap: 11px;
173
183
  }
174
184
 
175
- .appointment-slot.available .appointment-footer {
185
+ .available .appointmentFooter {
176
186
  display: flex;
177
187
  justify-content: flex-end;
178
188
  align-items: center;
179
189
  align-self: stretch;
180
190
  }
181
191
 
182
- .appointment-slot.available .action-button-container {
192
+ .available .actionButtonContainer {
183
193
  display: flex;
184
194
  padding: 4px 6px;
185
195
  border-radius: 8px;
@@ -188,11 +198,11 @@
188
198
  gap: 4px;
189
199
  }
190
200
 
191
- .appointment-slot.available .action-button-container:hover {
192
- background-color: var(--Primary-Light-grey, #f4f7fb);
201
+ .available .actionButtonContainer:hover {
202
+ background-color: #f4f7fb;
193
203
  }
194
204
 
195
- .appointment-slot.available .icon-close-container {
205
+ .available .iconCloseContainer {
196
206
  display: flex;
197
207
  width: 16px;
198
208
  height: 16px;
@@ -200,17 +210,17 @@
200
210
  justify-content: center;
201
211
  align-items: center;
202
212
  font-size: 9px;
203
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
213
+ color: #456073;
204
214
  }
205
215
 
206
- .appointment-slot.available .icon-close {
216
+ .available .iconClose {
207
217
  width: 9px;
208
218
  height: 9px;
209
219
  flex-shrink: 0;
210
220
  }
211
221
 
212
- .appointment-slot.available .make-unavailable-text {
213
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
222
+ .available .makeUnavailableText {
223
+ color: #456073;
214
224
  font-family: "Open Sans", sans-serif;
215
225
  font-size: 14px;
216
226
  font-style: normal;
@@ -218,44 +228,78 @@
218
228
  line-height: normal;
219
229
  }
220
230
 
221
- .available-icon-close {
231
+ .availableIconClose {
222
232
  font-size: 8px;
223
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
233
+ color: #456073;
224
234
  }
225
235
 
226
236
  /* Passed status styles */
227
- .appointment-slot.passed .document-actions {
237
+ .passed .documentActions {
228
238
  display: flex;
229
239
  align-items: center;
230
240
  gap: 8px;
231
241
  }
232
242
 
233
- .appointment-slot.passed .document-count,
234
- .appointment-slot.passed .note-count {
243
+ .passed .documentCount,
244
+ .passed .noteCount {
235
245
  display: flex;
236
246
  align-items: center;
237
247
  gap: 4px;
238
248
  }
239
249
 
240
- .appointment-slot.passed .document-count-icon,
241
- .appointment-slot.passed .note-count-icon {
250
+ .passed .documentCountIcon,
251
+ .passed .noteCountIcon {
242
252
  width: 16px;
243
253
  height: 16px;
244
254
  }
245
255
 
246
- .appointment-slot.passed .document-count-number,
247
- .appointment-slot.passed .note-count-number {
248
- color: var(--Primary-Mid-black, #171e25);
256
+ .passed .documentCountNumber,
257
+ .passed .noteCountNumber {
258
+ color: #171e25;
249
259
  font-family: Inter, sans-serif;
250
260
  font-size: 14px;
251
261
  font-weight: 600;
252
262
  line-height: normal;
253
263
  }
254
264
 
255
- /* Summary status styles */
256
- .appointment-slot-summary {
265
+ .iconCloseContainer {
266
+ display: flex;
267
+ width: 16px;
268
+ height: 16px;
269
+ padding: 3px;
270
+ justify-content: center;
271
+ align-items: center;
272
+ font-size: 9px;
273
+ color: #456073;
274
+ }
275
+
276
+ .makeUnavailableText {
277
+ color: #456073;
278
+ font-family: "Open Sans", sans-serif;
279
+ font-size: 14px;
280
+ font-style: normal;
281
+ font-weight: 400;
282
+ line-height: normal;
283
+ }
284
+
285
+ .documentCountIcon,
286
+ .noteCountIcon {
287
+ width: 16px;
288
+ height: 16px;
289
+ }
290
+
291
+ .documentCountNumber,
292
+ .noteCountNumber {
293
+ color: #171e25;
294
+ font-family: Inter, sans-serif;
295
+ font-size: 14px;
296
+ font-weight: 600;
297
+ line-height: normal;
298
+ }
299
+
300
+ /* Summary style */
301
+ .summary {
257
302
  width: 463px;
258
- /* height: 182px; */
259
303
  display: flex;
260
304
  padding: 16px;
261
305
  flex-direction: column;
@@ -263,18 +307,18 @@
263
307
  align-items: flex-start;
264
308
  gap: 12px;
265
309
  border-radius: 16px;
266
- background: var(--Primary-Blanc, #fff);
310
+ background: #fff;
267
311
  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
268
312
  }
269
313
 
270
- .appointment-slot-summary .appointment-header {
314
+ .summary .appointmentHeader {
271
315
  display: flex;
272
316
  justify-content: space-between;
273
317
  align-items: flex-start;
274
318
  align-self: stretch;
275
319
  }
276
320
 
277
- .appointment-slot-summary .appointment-content-container {
321
+ .appointmentContentContainer {
278
322
  display: flex;
279
323
  flex-direction: column;
280
324
  justify-content: center;
@@ -282,11 +326,11 @@
282
326
  gap: 10px;
283
327
  }
284
328
 
285
- .appointment-slot-summary .appointment-footer {
329
+ .summary .appointmentFooter {
286
330
  padding-top: 11px;
287
331
  }
288
332
 
289
- .appointment-slot-summary .date-time-container {
333
+ .dateTimeContainer {
290
334
  display: flex;
291
335
  flex-direction: column;
292
336
  justify-content: center;
@@ -294,8 +338,8 @@
294
338
  gap: 3px;
295
339
  }
296
340
 
297
- .appointment-slot-summary .summary-date {
298
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
341
+ .summaryDate {
342
+ color: #456073;
299
343
  text-align: center;
300
344
  font-family: Inter, sans-serif;
301
345
  font-size: 20px;
@@ -304,8 +348,8 @@
304
348
  line-height: 0.8;
305
349
  }
306
350
 
307
- .appointment-slot-summary .summary-time {
308
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
351
+ .summaryTime {
352
+ color: #456073;
309
353
  font-family: Inter, sans-serif;
310
354
  font-size: 20px;
311
355
  font-style: normal;
@@ -314,7 +358,7 @@
314
358
  letter-spacing: 0.2px;
315
359
  }
316
360
 
317
- .appointment-slot-summary .icon-container {
361
+ .iconContainer {
318
362
  display: flex;
319
363
  width: 40px;
320
364
  height: 40px;
@@ -323,8 +367,8 @@
323
367
  align-items: center;
324
368
  }
325
369
 
326
- .appointment-slot-summary .appointment-content {
327
- color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
370
+ .summary .appointmentContent {
371
+ color: #456073;
328
372
  font-family: "Open Sans";
329
373
  font-size: 16px;
330
374
  font-style: normal;
@@ -332,8 +376,8 @@
332
376
  line-height: 1;
333
377
  }
334
378
 
335
- .appointment-slot-summary .client-name {
336
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
379
+ .summary .clientName {
380
+ color: #728ea7;
337
381
  font-family: "Open Sans", sans-serif;
338
382
  font-size: 12px;
339
383
  font-style: normal;
@@ -342,7 +386,7 @@
342
386
  letter-spacing: 0.36px;
343
387
  }
344
388
 
345
- .appointment-slot-summary .tags-container {
389
+ .summary .tagsContainer {
346
390
  display: flex;
347
391
  align-items: flex-start;
348
392
  gap: 8px;
@@ -350,14 +394,15 @@
350
394
  padding-top: 3px;
351
395
  }
352
396
 
353
- .appointment-slot-summary .document-actions-container {
397
+ .documentActionsContainer {
354
398
  display: flex;
355
399
  flex-direction: column;
356
400
  justify-content: center;
357
401
  align-items: flex-end;
358
402
  gap: 8px;
359
403
  }
360
- .appointment-slot-summary .document-actions {
404
+
405
+ .summary .documentActions {
361
406
  display: flex;
362
407
  flex-direction: row;
363
408
  justify-content: center;
@@ -366,44 +411,40 @@
366
411
  }
367
412
 
368
413
  /* Styles compacts */
369
- /* .appointment-slot.compact {
370
- max-width: 280px;
371
- } */
372
-
373
- .appointment-slot.compact .appointment-time {
414
+ .compact .appointmentTime {
374
415
  font-size: 14px;
375
416
  }
376
417
 
377
- .appointment-slot.compact .client-name {
418
+ .compact .clientName {
378
419
  font-size: 12px;
379
420
  }
380
421
 
381
- .appointment-slot.compact .appointment-content {
422
+ .compact .appointmentContent {
382
423
  font-size: 14px;
383
424
  }
384
425
 
385
- .appointment-slot.compact .make-unavailable-text {
426
+ .compact .makeUnavailableText {
386
427
  font-size: 12px;
387
428
  }
388
429
 
389
- .appointment-slot.compact .document-count,
390
- .appointment-slot.compact .note-count {
430
+ .compact .documentCount,
431
+ .compact .noteCount {
391
432
  font-size: 12px;
392
433
  }
393
434
 
394
435
  /* Styles compacts pour le mode summary */
395
- .appointment-slot-summary.compact .summary-date {
436
+ .summary.compact .summaryDate {
396
437
  font-size: 14px;
397
438
  }
398
439
 
399
- .appointment-slot-summary.compact .summary-time {
440
+ .summary.compact .summaryTime {
400
441
  font-size: 14px;
401
442
  }
402
443
 
403
- .appointment-slot-summary.compact .appointment-content {
444
+ .summary.compact .appointmentContent {
404
445
  font-size: 14px;
405
446
  }
406
447
 
407
- .appointment-slot-summary.compact .client-name {
448
+ .summary.compact .clientName {
408
449
  font-size: 12px;
409
450
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "5.0.3",
3
+ "version": "5.0.5",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",