allaw-ui 1.0.17 → 1.0.19

package/dist/components/atoms/buttons/IconButton.css

@@ -109,3 +109,20 @@
   font-size: 18px;
   background: transparent;
 }
+
+.icon-button.custom-color {
+  background-color: var(--custom-background-color);
+}
+
+.icon-button.custom-color:hover {
+  opacity: 0.8;
+}
+
+/* Modifier les sélecteurs hover existants */
+.icon-button.smallFilled:not(.custom-color):hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.icon-button.largeFilled:not(.custom-color):hover {
+  background: var(--grey-venom, #e6edf5);
+}

package/dist/components/atoms/buttons/IconButton.js

@@ -2,8 +2,13 @@ import React from "react";
 import "./IconButton.css";
 import "../../../styles/global.css";
 var IconButton = function (_a) {
-    var style = _a.style, iconName = _a.iconName, _b = _a.color, color = _b === void 0 ? "var(--secondary-light-grey, #f4f7fb)" : _b, onClick = _a.onClick;
-    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick, style: { backgroundColor: color } },
+    var style = _a.style, iconName = _a.iconName, color = _a.color, onClick = _a.onClick;
+    var customStyle = color
+        ? {
+            "--custom-background-color": color,
+        }
+        : {};
+    return (React.createElement("button", { className: "icon-button ".concat(style, " ").concat(color ? "custom-color" : ""), onClick: onClick, style: customStyle },
         React.createElement("i", { className: "icon ".concat(iconName) })));
 };
 IconButton.defaultProps = {

package/dist/components/atoms/inputs/Input.d.ts

@@ -14,6 +14,7 @@ export interface InputProps {
     onChange?: (value: string) => void;
     value?: string;
     error?: string;
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
 }
 export interface InputRef {
     validate: () => boolean;

package/dist/components/atoms/inputs/Input.js

@@ -6,11 +6,11 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var Input = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error;
-    var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[1];
-    var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
-    var _f = useState(propError || ""), error = _f[0], setError = _f[1];
-    var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.color, color = _d === void 0 ? "noir" : _d;
+    var _e = useState(false), isPasswordVisible = _e[0], setIsPasswordVisible = _e[1];
+    var _f = useState(propValue || ""), value = _f[0], setValue = _f[1];
+    var _g = useState(propError || ""), error = _g[0], setError = _g[1];
+    var _h = useState(false), isTouched = _h[0], setIsTouched = _h[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -71,7 +71,7 @@ var Input = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: "Input Input-".concat(style) },
         React.createElement("div", { className: "Input-title-container" },
-            React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
+            React.createElement(Paragraph, { variant: "semiBold", color: color, text: title }),
             isRequired && title && (React.createElement("span", { className: "Input-required" },
                 "\u00A0",
                 "*"))),

package/dist/components/molecules/contactCard/ContactCard.css

@@ -304,12 +304,19 @@
   font-weight: 500;
 }
 
+.editable-contact-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
 .contact-card.editable {
   display: flex;
   padding: 24px;
-  width: 1214px;
+  width: 100%;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: stretch;
   align-self: stretch;
   border-radius: 16px;
   border: 1px solid var(--Primary-Venom-grey, #e6edf5);
@@ -318,6 +325,7 @@
 
 .contact-card.editable .content-container {
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: 24px;
 }
@@ -384,3 +392,39 @@
   align-items: center;
   gap: 16px;
 }
+
+@media (max-width: 800px) {
+  .contact-card.editable .telephone-email-items {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}
+
+@media (max-width: 600px) {
+  .contact-card.editable .content-container {
+    flex-direction: column;
+  }
+  .contact-card.editable .name-tag-container {
+    align-items: flex-start;
+    width: 100%;
+  }
+}
+
+@media (max-width: 450px) {
+  .contact-card.editable .action-button-container {
+    display: block;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+  }
+}
+
+.action-button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  height: 100%;
+  align-self: stretch;
+}

package/dist/components/molecules/contactCard/ContactCard.js

@@ -54,7 +54,7 @@ var ContactCard = function (_a) {
                     React.createElement("div", { className: "status-container" },
                         React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
             case "editable":
-                return (React.createElement(React.Fragment, null,
+                return (React.createElement("div", { className: "editable-contact-card" },
                     React.createElement("div", { className: "content-container" },
                         React.createElement("div", { className: "name-tag-container" },
                             React.createElement("h3", { className: "contact-name" }, name),
@@ -72,7 +72,8 @@ var ContactCard = function (_a) {
                                 React.createElement("div", { className: "info-item" },
                                     React.createElement("i", { className: "allaw-icon-mail info-icon" }),
                                     React.createElement("span", { className: "info-text contact" }, email))))),
-                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit })));
+                    React.createElement("div", { className: "action-button-container" },
+                        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))));
         }
     };
     return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());

package/dist/components/molecules/proCard/ProCard.js

@@ -5,6 +5,10 @@ import Image from "next/image";
 var NoPhoto = "/assets/NoPhoto.png";
 var ProCard = function (_a) {
     var imageUrl = _a.imageUrl, job = _a.job, firstName = _a.firstName, lastName = _a.lastName, address = _a.address, profileUrl = _a.profileUrl, _b = _a.isPro, isPro = _b === void 0 ? false : _b;
+    console.log("Données reçues dans ProCard:", {
+        address: address,
+        hasAddress: Boolean(address && /[a-zA-Z0-9]/.test(address)),
+    });
     var uppercaseJob = job.toUpperCase();
     return (React.createElement("div", { className: "pro-card" },
         React.createElement("div", { className: "pro-card-content" },

package/package.json

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