allaw-ui 5.0.7 → 5.0.8

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

@@ -1,34 +1,34 @@
 import React from "react";
 import styles from "./entityCard.module.css";
+import TertiaryButton from "../../atoms/buttons/TertiaryButton";
+import TinyInfo from "../../atoms/typography/TinyInfo";
 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 })));
+        } }));
 };
 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;
@@ -38,16 +38,11 @@ function EntityCard(_a) {
         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(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.module.css

@@ -38,8 +38,6 @@
   flex-direction: column;
   gap: 0.25rem;
   align-items: start;
-  flex: 1;
-  min-width: 200px;
 }
 
 .entityName {
@@ -72,13 +70,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 +130,11 @@
   font-size: 12px;
 }
 
+.actionButtonWrapper {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 /* Media queries pour la responsivité */
 @media (max-width: 820px) {
   .card {
@@ -131,12 +145,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 +215,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.8",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",