allaw-ui 1.0.18 → 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

@@ -325,6 +325,7 @@
 
 .contact-card.editable .content-container {
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: 24px;
 }
@@ -392,6 +393,33 @@
   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;

package/package.json

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