allaw-ui 4.8.7 → 4.8.9

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

@@ -12,6 +12,7 @@ export interface SearchBarProps {
     style?: "classic" | "form";
     disableAutofill?: boolean;
     showLocate?: boolean;
+    minChar?: number;
     resolveCityFromCoords?: (lat: number, lon: number) => Promise<string | undefined>;
 }
 declare const SearchBar: React.FC<SearchBarProps>;

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

@@ -51,7 +51,7 @@ import "../../../styles/global.css";
 import "../../../styles/icons.css";
 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, resolveCityFromCoords = _a.resolveCityFromCoords;
+    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, resolveCityFromCoords = _a.resolveCityFromCoords;
     var _j = useState(controlledValue), value = _j[0], setValue = _j[1];
     var _k = useState(null), locationError = _k[0], setLocationError = _k[1];
     var handleChange = function (event) {
@@ -137,10 +137,13 @@ var SearchBar = function (_a) {
             }
         }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 });
     };
+    var currentValue = controlledValue || value;
+    var hasMinChar = minChar && minChar > 0 && currentValue.length >= minChar;
     var wrapperClassName = [
         styles.searchBar,
         styleProp === "form" ? styles.styleForm : "",
         size === "big" ? styles.sizeBig : "",
+        hasMinChar ? styles.minCharReached : "",
     ]
         .filter(Boolean)
         .join(" ");
@@ -162,7 +165,9 @@ var SearchBar = function (_a) {
                     e.preventDefault();
                     e.stopPropagation();
                     handleLocate();
-                }, "aria-label": "Me localiser", title: "Me localiser" }, "Me localiser"))),
+                }, "aria-label": "Me localiser", title: "Me localiser" },
+                React.createElement("span", { className: styles.searchBarLocateText }, "Me localiser"),
+                React.createElement("i", { className: "allaw-icon-map-pin ".concat(styles.searchBarLocateIcon) })))),
         locationError && (React.createElement("div", { className: styles.searchBarError },
             React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: locationError, align: "left" })))));
 };

package/dist/components/atoms/inputs/SearchBar.stories.d.ts

@@ -16,6 +16,7 @@ declare namespace _default {
         let startIcon: undefined;
         let showLocate: boolean;
         let locateIcon: string;
+        let minChar: undefined;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -90,6 +91,18 @@ declare namespace _default {
             export { description_3 as description };
         }
         export { showClear_1 as showClear };
+        export namespace minChar_1 {
+            export namespace control_9 {
+                let type_7: string;
+                export { type_7 as type };
+                export let min: number;
+                export let max: number;
+            }
+            export { control_9 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export { minChar_1 as minChar };
         export namespace onChange_1 {
             let action_1: string;
             export { action_1 as action };
@@ -115,4 +128,6 @@ export const FormStyle: any;
 export const WithStartIcon: any;
 export const BigFormStartIconNoEnd: any;
 export const WithLocate: any;
+export const WithMinChar: any;
+export const ResponsiveLocate: any;
 import SearchBar from "./SearchBar";

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

@@ -21,7 +21,7 @@ export default {
     component: SearchBar,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined, showLocate: false, locateIcon: "allaw-icon-map-pin" }),
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined, showLocate: false, locateIcon: "allaw-icon-map-pin", minChar: undefined }),
     argTypes: {
         placeholder: {
             control: {
@@ -68,6 +68,10 @@ export default {
             control: "boolean",
             description: "Affiche une croix pour effacer le champ si true.",
         },
+        minChar: {
+            control: { type: "number", min: 0, max: 20 },
+            description: "Nombre minimum de caractères pour changer la couleur de bordure en vert (#29a36a).",
+        },
         onChange: { action: "changed" },
     },
     parameters: {
@@ -153,3 +157,28 @@ WithLocate.args = {
     showLocate: true,
     locateIcon: "allaw-icon-map-pin",
 };
+export var WithMinChar = Template.bind({});
+WithMinChar.args = {
+    placeholder: "Saisissez au moins 6 caractères",
+    endIcon: "allaw-icon-search",
+    showClear: true,
+    size: "normal",
+    style: "form",
+    minChar: 6,
+};
+export var ResponsiveLocate = Template.bind({});
+ResponsiveLocate.args = {
+    placeholder: "Ville (redimensionnez la fenêtre)",
+    startIcon: "allaw-icon-map-pin",
+    showClear: true,
+    size: "normal",
+    style: "form",
+    showLocate: true,
+};
+ResponsiveLocate.parameters = {
+    docs: {
+        description: {
+            story: "Le bouton 'Me localiser' devient une icône en dessous de 480px de largeur. Redimensionnez votre navigateur pour voir l'effet.",
+        },
+    },
+};

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

@@ -110,6 +110,37 @@
   font-size: 13px;
 }
 
+.searchBarLocateText {
+  display: inline;
+}
+
+.searchBarLocateIcon {
+  display: none;
+  font-size: 14px;
+}
+
+/* Responsive behavior for mobile */
+@media (max-width: 479px) {
+  .searchBarLocateText {
+    display: none;
+  }
+
+  .searchBarLocateIcon {
+    display: inline;
+  }
+
+  .searchBarLocateButton {
+    padding: 0;
+    width: 28px;
+    min-width: 28px;
+  }
+
+  .sizeBig .searchBarLocateButton {
+    width: 32px;
+    min-width: 32px;
+  }
+}
+
 .searchBarClearButton {
   display: flex;
   align-items: center;
@@ -145,10 +176,23 @@
 }
 
 .styleForm:focus-within {
-  border-color: #728ea7;
+  border-color: #25beeb;
 }
 
 .searchBarError {
   margin-top: 8px;
   margin-left: 14px;
 }
+
+/* MinChar variant */
+.minCharReached {
+  border-color: #29a36a !important;
+}
+
+.minCharReached:hover {
+  border-color: #29a36a !important;
+}
+
+.minCharReached:focus-within {
+  border-color: #29a36a !important;
+}

package/package.json

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