allaw-ui 5.0.7 → 5.0.9

package/dist/components/molecules/entityCard/EntityCard.d.ts

@@ -7,6 +7,7 @@ export type EntityCardProps = {
     actionType: "QUIT" | "REQUEST" | "REMOVE_REQUEST" | "NONE";
     onActionButtonClick?: () => void;
     onCardClick?: () => void;
+    role?: "member" | "admin" | "pending";
 };
-declare function EntityCard({ entityName, numberOfMembers, formatedAddress, immat, actionType, onActionButtonClick, onCardClick, }: EntityCardProps): React.JSX.Element;
+declare function EntityCard({ entityName, numberOfMembers, formatedAddress, immat, actionType, onActionButtonClick, onCardClick, role, }: EntityCardProps): React.JSX.Element;
 export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.js

@@ -1,53 +1,78 @@
 import React from "react";
 import styles from "./entityCard.module.css";
+import TertiaryButton from "../../atoms/buttons/TertiaryButton";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+import InlineTag from "../../atoms/tags/InlineTag";
 var ActionButton = function (_a) {
     var type = _a.type, action = _a.action;
     var elements = {
         QUIT: {
             text: "Quitter l'organisation",
             icon: "allaw-icon-close",
-            color: "#E15151",
+            color: "actions-error",
         },
         REQUEST: {
             text: "Demander à rejoindre",
             icon: "allaw-icon-arrow-right",
-            color: "#25BEEB",
+            color: "bleu-allaw",
         },
         REMOVE_REQUEST: {
             text: "Annuler la demande",
             icon: "allaw-icon-close",
-            color: "#E15151",
+            color: "actions-error",
         },
         NONE: {
             text: "",
             icon: "",
-            color: "",
+            color: "noir",
         },
     };
-    return (React.createElement("button", { style: { color: elements[type].color }, className: styles.actionButton, onClick: function () {
+    return (React.createElement(TertiaryButton, { label: elements[type].text, endIcon: elements[type].icon, color: elements[type].color, variant: true, onClick: function () {
             action && action();
-        } },
-        elements[type].text,
-        React.createElement("i", { className: elements[type].icon })));
+        } }));
+};
+var RoleTag = function (_a) {
+    var role = _a.role;
+    if (!role)
+        return null;
+    var roleConfig = {
+        admin: {
+            style: "default",
+            size: "12",
+            text: "admin",
+            backgroundColor: "bleu-allaw",
+        },
+        member: {
+            style: "border",
+            size: "12",
+            text: "membre",
+            backgroundColor: "mid-grey",
+        },
+        pending: {
+            style: "border",
+            size: "12",
+            text: "en attente",
+            backgroundColor: "actions-warning",
+        },
+    };
+    var config = roleConfig[role];
+    return (React.createElement(InlineTag, { style: config.style, size: config.size, text: config.text, backgroundColor: config.backgroundColor }));
 };
 function EntityCard(_a) {
-    var entityName = _a.entityName, numberOfMembers = _a.numberOfMembers, formatedAddress = _a.formatedAddress, immat = _a.immat, actionType = _a.actionType, onActionButtonClick = _a.onActionButtonClick, onCardClick = _a.onCardClick;
+    var entityName = _a.entityName, numberOfMembers = _a.numberOfMembers, formatedAddress = _a.formatedAddress, immat = _a.immat, actionType = _a.actionType, onActionButtonClick = _a.onActionButtonClick, onCardClick = _a.onCardClick, role = _a.role;
     return (React.createElement("div", { className: styles.card, style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
         React.createElement("div", { className: styles.picturePlaceHolder },
             React.createElement("i", { className: "allaw-icon-home" })),
         React.createElement("div", { className: styles.dataInfo },
             React.createElement("div", { className: styles.basicsInfo },
-                React.createElement("span", { className: styles.entityName }, entityName),
-                React.createElement("span", { className: styles.numberOfMembers }, formatedAddress)),
-            React.createElement("div", { className: styles.detailsInfo },
-                React.createElement("span", { className: styles.detail },
-                    React.createElement("i", { className: "allaw-icon-users" }),
-                    numberOfMembers,
-                    " membre",
-                    numberOfMembers > 1 ? "s" : ""),
-                React.createElement("span", { className: styles.detail },
-                    React.createElement("i", { className: "allaw-icon-prestation" }),
-                    immat))),
+                React.createElement("div", { className: styles.entityNameWrapper },
+                    React.createElement("span", { className: styles.entityName }, entityName),
+                    React.createElement(RoleTag, { role: role })),
+                React.createElement(TinyInfo, { variant: "medium14", color: "dark-grey", text: formatedAddress || "", startIcon: "allaw-icon-map-pin", align: "left" })),
+            React.createElement("div", { className: styles.detailsInfoContainer },
+                React.createElement("div", { className: styles.detailsInfo },
+                    React.createElement(TinyInfo, { variant: "medium14", color: "dark-grey", text: "".concat(numberOfMembers, " membre").concat(numberOfMembers > 1 ? "s" : ""), startIcon: "allaw-icon-users", align: "left" }),
+                    React.createElement(TinyInfo, { variant: "medium14", color: "dark-grey", text: immat || "", startIcon: "allaw-icon-prestation", align: "left" })))),
         actionType != "NONE" && (React.createElement(ActionButton, { type: actionType, action: onActionButtonClick }))));
 }
 export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.stories.d.ts

@@ -11,4 +11,12 @@ export const LongContent: any;
 export const Mobile: any;
 export const Tablet: any;
 export const NoAction: any;
+export const WithRoleAdmin: any;
+export const WithRoleMember: any;
+export const WithRolePending: any;
+export function AllRoles(): React.JSX.Element;
+export namespace AllRoles {
+    let storyName: string;
+}
 import EntityCard from "./EntityCard";
+import React from "react";

package/dist/components/molecules/entityCard/EntityCard.stories.js

@@ -49,3 +49,15 @@ Tablet.parameters = {
 };
 export var NoAction = Template.bind({});
 NoAction.args = __assign(__assign({}, Default.args), { actionType: "NONE" });
+export var WithRoleAdmin = Template.bind({});
+WithRoleAdmin.args = __assign(__assign({}, Default.args), { entityName: "Cabinet Martin & Associés", role: "admin", actionType: "QUIT" });
+export var WithRoleMember = Template.bind({});
+WithRoleMember.args = __assign(__assign({}, Default.args), { entityName: "Cabinet Dupont & Fils", role: "member", actionType: "QUIT" });
+export var WithRolePending = Template.bind({});
+WithRolePending.args = __assign(__assign({}, Default.args), { entityName: "Cabinet Durand", role: "pending", actionType: "REMOVE_REQUEST" });
+export var AllRoles = function () { return (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } },
+    React.createElement(EntityCard, __assign({}, Default.args, { entityName: "Cabinet avec r\u00F4le Admin", role: "admin", actionType: "QUIT", onActionButtonClick: action("QUIT clicked") })),
+    React.createElement(EntityCard, __assign({}, Default.args, { entityName: "Cabinet avec r\u00F4le Membre", role: "member", actionType: "QUIT", onActionButtonClick: action("QUIT clicked") })),
+    React.createElement(EntityCard, __assign({}, Default.args, { entityName: "Cabinet avec r\u00F4le En attente", role: "pending", actionType: "REMOVE_REQUEST", onActionButtonClick: action("REMOVE_REQUEST clicked") })),
+    React.createElement(EntityCard, __assign({}, Default.args, { entityName: "Cabinet sans r\u00F4le", actionType: "REQUEST", onActionButtonClick: action("REQUEST clicked") })))); };
+AllRoles.storyName = "Tous les rôles";

package/dist/components/molecules/entityCard/entityCard.module.css

@@ -9,6 +9,11 @@
   align-self: stretch;
   border-radius: 16px;
   border: 1.5px solid var(--Primary-Venom-grey, #e6edf5);
+  transition: border-color 0.2s ease-in-out;
+}
+
+.card:hover {
+  border-color: var(--Primary-Blue-allaw, #25beeb);
 }
 
 .picturePlaceHolder {
@@ -38,8 +43,14 @@
   flex-direction: column;
   gap: 0.25rem;
   align-items: start;
-  flex: 1;
-  min-width: 200px;
+}
+
+.entityNameWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
 }
 
 .entityName {
@@ -51,10 +62,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: 22px; /* 137.5% */
-  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-shrink: 1;
 }
 
 .numberOfMembers {
@@ -72,13 +83,24 @@
   white-space: nowrap;
 }
 
-.detailsInfo {
+.detailsInfoContainer {
   display: flex;
-  flex-direction: row;
-  gap: 1rem;
+  flex-direction: column;
+  /* gap: 1rem; */
   align-items: center;
   flex-wrap: wrap;
   flex-shrink: 0;
+  flex: 1;
+}
+.detailsInfo {
+  display: flex;
+  flex-direction: column;
+  /* gap: 1rem; */
+  align-items: flex-start;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  flex: 1;
+  gap: 0.4rem;
 }
 
 .detail {
@@ -121,6 +143,11 @@
   font-size: 12px;
 }
 
+.actionButtonWrapper {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 /* Media queries pour la responsivité */
 @media (max-width: 820px) {
   .card {
@@ -131,12 +158,12 @@
     gap: 1.5rem;
   }
 
-  .detailsInfo {
+  /* .detailsInfo {
     gap: 0.75rem;
-  }
+  } */
 }
 
-@media (max-width: 640px) {
+@media (max-width: 740px) {
   .card {
     flex-direction: column;
     align-items: flex-start;
@@ -201,3 +228,27 @@
     padding: 6px 10px;
   }
 }
+
+/* @media (max-width: 941px) {
+  .detailsInfoContainer {
+    align-items: flex-start;
+  }
+} */
+
+@media (max-width: 940px) {
+  .detailsInfoContainer {
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 600px) {
+  .actionButtonWrapper {
+    margin-left: 0;
+    width: 100%;
+    order: 10;
+  }
+
+  .card {
+    flex-wrap: wrap;
+  }
+}

package/package.json

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