allaw-ui 4.9.9 → 5.0.1

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

@@ -45,7 +45,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./searchBar.module.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
@@ -53,6 +53,10 @@ import TinyInfo from "../typography/TinyInfo";
 var SearchBar = function (_a) {
     var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, endIcon = _a.endIcon, startIcon = _a.startIcon, _c = _a.value, controlledValue = _c === void 0 ? "" : _c, onChange = _a.onChange, _d = _a.showClear, showClear = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.style, styleProp = _f === void 0 ? "classic" : _f, _g = _a.disableAutofill, disableAutofill = _g === void 0 ? false : _g, _h = _a.showLocate, showLocate = _h === void 0 ? false : _h, minChar = _a.minChar, _j = _a.loading, loading = _j === void 0 ? false : _j, resolveCityFromCoords = _a.resolveCityFromCoords;
     var _k = useState(controlledValue), value = _k[0], setValue = _k[1];
+    // Synchroniser l'état interne avec la prop value (mode controlled)
+    useEffect(function () {
+        setValue(controlledValue);
+    }, [controlledValue]);
     var _l = useState(null), locationError = _l[0], setLocationError = _l[1];
     var handleChange = function (event) {
         var newValue = event.target.value;

package/dist/components/atoms/inputs/searchBar.module.css

@@ -21,7 +21,7 @@
 }
 
 .searchBarPlaceholder {
-  color: #728ea7;
+  color: #171e25;
   font-family: "Open Sans";
   font-size: 16px;
   font-style: normal;
@@ -35,6 +35,11 @@
   padding-left: 3px;
 }
 
+.searchBarPlaceholder::placeholder {
+  color: #728ea7;
+  opacity: 0.8;
+}
+
 .searchBarStartIcon {
   display: inline-flex;
   align-items: center;

package/dist/components/atoms/typography/Heading.css

@@ -1,5 +1,15 @@
 @import "../../../styles/colors.css";
 
+:root {
+  --heading-h1-font-size: 60px;
+  --heading-h2-font-size: 36px;
+  --heading-h3-font-size: 28px;
+  --heading-h4-font-size: 24px;
+  --heading-h5-font-size: 20px;
+  --heading-h6-font-size: 18px;
+  --heading-h7-font-size: 14px;
+}
+
 .heading {
   font-family: Poppins;
   font-style: normal;
@@ -45,6 +55,35 @@
   font-weight: 600;
 }
 
+/* Responsive heading - adjusts font-size only, keeps semantic HTML tag */
+.heading.responsive {
+  /* Use the base variant size as fallback for mobile */
+}
+
+@media (min-width: 480px) {
+  .heading.responsive {
+    font-size: var(--font-size-480) !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .heading.responsive {
+    font-size: var(--font-size-768) !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .heading.responsive {
+    font-size: var(--font-size-1024) !important;
+  }
+}
+
+@media (min-width: 1440px) {
+  .heading.responsive {
+    font-size: var(--font-size-1440) !important;
+  }
+}
+
 .heading.color-bleu-allaw {
   color: var(--bleu-allaw);
 }

package/dist/components/atoms/typography/Heading.js

@@ -1,38 +1,28 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import "./Heading.css";
 var Heading = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "left" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
-    var _e = useState(variant), currentVariant = _e[0], setCurrentVariant = _e[1];
-    useEffect(function () {
-        if (!responsiveSize)
-            return;
-        var handleResize = function () {
-            var width = window.innerWidth;
-            var breakpoints = Object.keys(responsiveSize)
-                .map(Number)
-                .sort(function (a, b) { return a - b; });
-            // Find the appropriate variant for the current width
-            var selectedVariant = variant; // Default to the prop variant
-            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
-                var breakpoint = breakpoints_1[_i];
-                if (width >= breakpoint) {
-                    selectedVariant = responsiveSize[breakpoint];
-                }
-                else {
-                    break;
-                }
-            }
-            setCurrentVariant(selectedVariant);
-        };
-        // Initial check
-        handleResize();
-        // Add event listener
-        window.addEventListener("resize", handleResize);
-        // Cleanup
-        return function () {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, [responsiveSize, variant]);
-    return (React.createElement(Component, { className: "heading ".concat(currentVariant, " color-").concat(color, " align-").concat(align) }, text));
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "left" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
+    // Size mapping for responsive sizes
+    var sizeMap = {
+        h1: "60px",
+        h2: "36px",
+        h3: "28px",
+        h4: "24px",
+        h5: "20px",
+        h6: "18px",
+        h7: "14px",
+    };
+    // Generate responsive class if responsiveSize is provided
+    var responsiveClass = responsiveSize ? "responsive" : "";
+    // Generate inline style for responsive sizes
+    var responsiveStyle = responsiveSize
+        ? {
+            "--font-size-480": sizeMap[responsiveSize[480] || variant],
+            "--font-size-768": sizeMap[responsiveSize[768] || variant],
+            "--font-size-1024": sizeMap[responsiveSize[1024] || variant],
+            "--font-size-1440": sizeMap[responsiveSize[1440] || variant],
+        }
+        : undefined;
+    return (React.createElement(Component, { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align, " ").concat(responsiveClass).trim(), style: responsiveStyle }, text));
 };
 export default Heading;

package/dist/components/atoms/typography/Heading.stories.d.ts

@@ -46,12 +46,7 @@ declare namespace _default {
         }
     }
     export namespace args {
-        let responsiveSize_1: {
-            480: string;
-            768: string;
-            1024: string;
-            1440: string;
-        };
+        let responsiveSize_1: undefined;
         export { responsiveSize_1 as responsiveSize };
     }
     export namespace parameters {

package/dist/components/atoms/typography/Heading.stories.js

@@ -50,12 +50,7 @@ export default {
     },
     args: {
         // Valeurs par défaut pour tous les stories
-        responsiveSize: {
-            480: "h5",
-            768: "h4",
-            1024: "h3",
-            1440: "h2",
-        },
+        responsiveSize: undefined,
     },
     parameters: {
         backgrounds: {
@@ -73,49 +68,49 @@ var Template = function (args) { return React.createElement(Heading, __assign({}
 export var H1 = Template.bind({});
 H1.args = {
     variant: "h1",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 60px",
     as: "h1",
 };
 export var H2 = Template.bind({});
 H2.args = {
     variant: "h2",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 36px",
     as: "h2",
 };
 export var H3 = Template.bind({});
 H3.args = {
     variant: "h3",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 28px",
     as: "h3",
 };
 export var H4 = Template.bind({});
 H4.args = {
     variant: "h4",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 24px",
     as: "h4",
 };
 export var H5 = Template.bind({});
 H5.args = {
     variant: "h5",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – Medium – 24px",
     as: "h5",
 };
 export var H6 = Template.bind({});
 H6.args = {
     variant: "h6",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 18px",
     as: "h6",
 };
 export var H7 = Template.bind({});
 H7.args = {
     variant: "h7",
-    color: "pure-white",
+    color: "noir",
     text: "Poppins – SemiBold – 14px",
     as: "span",
 };

package/package.json

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