allaw-ui 5.0.4 → 5.0.6

package/dist/components/atoms/tags/OtherStatusTag.css

@@ -26,6 +26,15 @@
   color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
 }
 
+.other-status-tag.readonly .icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+
 .other-status-tag.editable {
   height: 35px;
   padding: 8px;
@@ -123,3 +132,9 @@
   padding: 2.833px;
   font-size: 10px;
 }
+
+.other-status-tag.readonly.compact .icon {
+  width: 14px;
+  height: 14px;
+  font-size: 12px;
+}

package/dist/components/atoms/tags/OtherStatusTag.js

@@ -8,7 +8,7 @@ var OtherStatusTag = function (_a) {
         return "".concat(text.slice(0, limit), "...");
     };
     return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style, " ").concat(type === "information" ? "information-color-".concat(informationColor) : "") },
-        type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
+        (type === "information" || type === "readonly") && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
         React.createElement("span", { className: "other-status-tag-label", title: label }, truncateText(label, labelLimit)),
         type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));
 };

package/dist/components/atoms/tags/OtherStatusTag.stories.d.ts

@@ -86,11 +86,13 @@ declare namespace _default {
 }
 export default _default;
 export const ReadOnly: any;
+export const ReadOnlyWithIcon: any;
 export const Editable: any;
 export const Information: any;
 export const LongLabel: any;
 export const LongLabelWithoutLimit: any;
 export const ReadOnlyCompact: any;
+export const ReadOnlyWithIconCompact: any;
 export const EditableCompact: any;
 export const InformationCompact: any;
 export const LongLabelCompact: any;

package/dist/components/atoms/tags/OtherStatusTag.stories.js

@@ -85,6 +85,13 @@ ReadOnly.args = {
     startIcon: false,
     startIconName: "allaw-icon-pmr",
 };
+export var ReadOnlyWithIcon = Template.bind({});
+ReadOnlyWithIcon.args = {
+    label: "Rue des Ormes",
+    type: "readonly",
+    startIcon: true,
+    startIconName: "allaw-icon-map-pin",
+};
 export var Editable = Template.bind({});
 Editable.args = {
     label: "Tags",
@@ -128,6 +135,8 @@ LongLabelWithoutLimit.parameters = {
 };
 export var ReadOnlyCompact = Template.bind({});
 ReadOnlyCompact.args = __assign(__assign({}, ReadOnly.args), { style: "compact" });
+export var ReadOnlyWithIconCompact = Template.bind({});
+ReadOnlyWithIconCompact.args = __assign(__assign({}, ReadOnlyWithIcon.args), { style: "compact" });
 export var EditableCompact = Template.bind({});
 EditableCompact.args = __assign(__assign({}, Editable.args), { style: "compact" });
 export var InformationCompact = Template.bind({});

package/dist/components/molecules/appointmentSlot/AppointmentSlot.d.ts

@@ -21,6 +21,8 @@ export interface AppointmentSlotProps {
     isEditable?: boolean;
     appointmentDetails?: string;
     style?: AppointmentStyle;
+    meetingType?: "INPERSON" | "VISIO" | "CALL" | "IMPORTED";
+    location?: string;
 }
 declare const AppointmentSlot: React.FC<AppointmentSlotProps>;
 export default AppointmentSlot;

package/dist/components/molecules/appointmentSlot/AppointmentSlot.js

@@ -5,7 +5,7 @@ import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import ActionCircleButton from "../../atoms/buttons/ActionCircleButton";
 import IconButton from "../../atoms/buttons/IconButton";
 var AppointmentSlot = function (_a) {
-    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;
+    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;
     var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
     // Handlers
     var handleApprove = useCallback(function () {
@@ -59,8 +59,42 @@ var AppointmentSlot = function (_a) {
             appointmentContent && (React.createElement("div", { className: styles.appointmentContent }, appointmentContent)),
             renderTags()),
         renderActionButtons())); };
+    var getMeetingTypeTag = function () {
+        if (!meetingType)
+            return null;
+        var iconName = "";
+        var label = "";
+        switch (meetingType) {
+            case "INPERSON":
+                iconName = "allaw-icon-map-pin";
+                label = location || "Présentiel";
+                break;
+            case "VISIO":
+                iconName = "allaw-icon-visio";
+                label = "Visio";
+                break;
+            case "CALL":
+                iconName = "allaw-icon-phone";
+                label = "Téléphone";
+                break;
+            case "IMPORTED":
+                iconName = "allaw-icon-calendar";
+                label = "Calendrier connecté";
+                break;
+            default:
+                return null;
+        }
+        return (React.createElement(OtherStatusTag, { label: label, type: "readonly", startIcon: true, startIconName: iconName, style: style === "compact" ? "compact" : "normal" }));
+    };
     var renderTags = function () {
-        return tags && (React.createElement("div", { className: styles.tagsContainer }, tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag, style: style === "compact" ? "compact" : "normal" })); })));
+        var meetingTag = getMeetingTypeTag();
+        var hasTags = tags && tags.length > 0;
+        if (!meetingTag && !hasTags)
+            return null;
+        return (React.createElement("div", { className: styles.tagsContainer },
+            meetingTag,
+            hasTags &&
+                tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag, style: style === "compact" ? "compact" : "normal" })); })));
     };
     var renderActionButtons = function () {
         switch (status) {

package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.d.ts

@@ -47,6 +47,22 @@ declare namespace _default {
             let defaultValue_1: boolean;
             export { defaultValue_1 as defaultValue };
         }
+        namespace meetingType {
+            export namespace control_6 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_3: (string | undefined)[];
+                export { options_3 as options };
+            }
+            export { control_6 as control };
+            export let description: string;
+        }
+        namespace location {
+            let control_7: string;
+            export { control_7 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
     }
     export namespace parameters {
         namespace actions {
@@ -73,4 +89,7 @@ export const Cancelled: any;
 export const Refused: any;
 export const Summary: any;
 export const SummaryNotEditable: any;
+export const ConfirmedWithMeetingType: any;
+export const ConfirmedWithVisio: any;
+export const SummaryWithMeetingType: any;
 import AppointmentSlot from "./AppointmentSlot";

package/dist/components/molecules/appointmentSlot/AppointmentSlot.stories.js

@@ -62,6 +62,17 @@ export default {
             control: "boolean",
             defaultValue: true,
         },
+        meetingType: {
+            control: {
+                type: "select",
+                options: [undefined, "INPERSON", "VISIO", "CALL", "IMPORTED"],
+            },
+            description: "Type de rendez-vous",
+        },
+        location: {
+            control: "text",
+            description: "Adresse du rendez-vous (pour INPERSON)",
+        },
     },
     parameters: {
         actions: {
@@ -185,3 +196,9 @@ Summary.args = {
 };
 export var SummaryNotEditable = Template.bind({});
 SummaryNotEditable.args = __assign(__assign({}, Summary.args), { isEditable: false });
+export var ConfirmedWithMeetingType = Template.bind({});
+ConfirmedWithMeetingType.args = __assign(__assign({}, Confirmed.args), { meetingType: "INPERSON", location: "Rue des Ormes" });
+export var ConfirmedWithVisio = Template.bind({});
+ConfirmedWithVisio.args = __assign(__assign({}, Confirmed.args), { meetingType: "VISIO" });
+export var SummaryWithMeetingType = Template.bind({});
+SummaryWithMeetingType.args = __assign(__assign({}, Summary.args), { meetingType: "INPERSON", location: "Rue des Ormes" });

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as BorderRadius } from "./components/atoms/uiVariables/BorderRa
 export { default as Shadows } from "./components/atoms/uiVariables/Shadows";
 export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
 export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
+export type { AppointmentSlotProps } from "./components/molecules/appointmentSlot/AppointmentSlot";
 export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
@@ -134,4 +135,4 @@ export type { AiTextProps } from "./components/molecules/AiText/aiText";
 export { default as Notification } from "./components/molecules/notification/Notification";
 export type { NotificationProps } from "./components/molecules/notification/Notification";
 export { default as Section } from "./components/molecules/section/Section";
-export type { SectionProps, SectionAction } from "./components/molecules/section/Section";
+export type { SectionProps, SectionAction, } from "./components/molecules/section/Section";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",