allaw-ui 4.8.2 → 4.8.3

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

@@ -1,13 +1,15 @@
 import React from "react";
-import "./SearchBar.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 export interface SearchBarProps {
     placeholder?: string;
     endIcon?: string;
+    startIcon?: string;
     value?: string;
     onChange?: (value: string) => void;
     showClear?: boolean;
+    size?: "normal" | "big";
+    style?: "classic" | "form";
 }
 declare const SearchBar: React.FC<SearchBarProps>;
 export default SearchBar;

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

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import "./SearchBar.css";
+import styles from "./searchBar.module.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var SearchBar = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, _c = _a.endIcon, endIcon = _c === void 0 ? "allaw-icon-search" : _c, _d = _a.value, controlledValue = _d === void 0 ? "" : _d, onChange = _a.onChange, _e = _a.showClear, showClear = _e === void 0 ? false : _e;
-    var _f = useState(controlledValue), value = _f[0], setValue = _f[1];
+    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;
+    var _g = useState(controlledValue), value = _g[0], setValue = _g[1];
     var handleChange = function (event) {
         var newValue = event.target.value;
         setValue(newValue);
@@ -18,11 +18,20 @@ var SearchBar = function (_a) {
             onChange("");
         }
     };
-    return (React.createElement("div", { className: "SearchBar" },
-        React.createElement("input", { type: "text", placeholder: placeholder, className: "SearchBar-placeholder", value: controlledValue || value, onChange: handleChange }),
-        showClear && (controlledValue || value) && (React.createElement("button", { type: "button", className: "SearchBar-clear-button", onClick: handleClear, "aria-label": "Effacer la recherche" },
+    var wrapperClassName = [
+        styles.searchBar,
+        styleProp === "form" ? styles.styleForm : "",
+        size === "big" ? styles.sizeBig : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (React.createElement("div", { className: wrapperClassName },
+        startIcon && (React.createElement("span", { className: styles.searchBarStartIcon, "aria-hidden": "true" },
+            React.createElement("i", { className: startIcon }))),
+        React.createElement("input", { type: "text", placeholder: placeholder, className: styles.searchBarPlaceholder, value: controlledValue || value, onChange: handleChange }),
+        showClear && (controlledValue || value) && (React.createElement("button", { type: "button", className: styles.searchBarClearButton, onClick: handleClear, "aria-label": "Effacer la recherche" },
             React.createElement("i", { className: "allaw-icon-x-small" }))),
-        React.createElement("button", { className: "SearchBar-icon-button", tabIndex: -1, "aria-label": "Rechercher" },
-            React.createElement("i", { className: endIcon }))));
+        endIcon && (React.createElement("button", { className: styles.searchBarIconButton, tabIndex: -1, "aria-label": "Rechercher" },
+            React.createElement("i", { className: endIcon })))));
 };
 export default SearchBar;

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

@@ -11,6 +11,9 @@ declare namespace _default {
     export namespace args {
         let endIcon: string;
         let showClear: boolean;
+        let size: string;
+        let style: string;
+        let startIcon: undefined;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -26,17 +29,46 @@ declare namespace _default {
             export { control_1 as control };
         }
         export { endIcon_1 as endIcon };
-        export namespace value {
+        export namespace startIcon_1 {
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
             }
             export { control_2 as control };
+            export let description: string;
         }
-        export namespace showClear_1 {
-            let control_3: string;
+        export { startIcon_1 as startIcon };
+        export namespace size_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
             export { control_3 as control };
-            export let description: string;
+            export let options: string[];
+        }
+        export { size_1 as size };
+        export namespace style_1 {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+        export { style_1 as style };
+        export namespace value {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        export namespace showClear_1 {
+            let control_6: string;
+            export { control_6 as control };
+            let description_1: string;
+            export { description_1 as description };
         }
         export { showClear_1 as showClear };
         export namespace onChange_1 {
@@ -59,4 +91,8 @@ declare namespace _default {
 export default _default;
 export const Default: any;
 export const WithClear: any;
+export const Big: any;
+export const FormStyle: any;
+export const WithStartIcon: any;
+export const BigFormStartIconNoEnd: 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 }),
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined }),
     argTypes: {
         placeholder: {
             control: {
@@ -33,6 +33,24 @@ export default {
                 type: "text",
             },
         },
+        startIcon: {
+            control: {
+                type: "text",
+            },
+            description: "Icône au début du champ (ex: allaw-icon-map-pin)",
+        },
+        size: {
+            control: {
+                type: "radio",
+            },
+            options: ["normal", "big"],
+        },
+        style: {
+            control: {
+                type: "radio",
+            },
+            options: ["classic", "form"],
+        },
         value: {
             control: {
                 type: "text",
@@ -68,6 +86,8 @@ Default.args = {
     placeholder: "Faites une recherche",
     endIcon: "allaw-icon-search",
     showClear: false,
+    size: "normal",
+    style: "classic",
     onChange: function (value) { return console.log("Search value:", value); },
 };
 export var WithClear = Template.bind({});
@@ -76,5 +96,41 @@ WithClear.args = {
     endIcon: "allaw-icon-search",
     showClear: true,
     value: "test",
+    size: "normal",
+    style: "classic",
     onChange: function (value) { return console.log("Search value:", value); },
 };
+export var Big = Template.bind({});
+Big.args = {
+    placeholder: "Faites une recherche",
+    endIcon: "allaw-icon-search",
+    showClear: false,
+    size: "big",
+    style: "classic",
+};
+export var FormStyle = Template.bind({});
+FormStyle.args = {
+    placeholder: "Faites une recherche",
+    endIcon: "allaw-icon-search",
+    showClear: false,
+    size: "normal",
+    style: "form",
+};
+export var WithStartIcon = Template.bind({});
+WithStartIcon.args = {
+    placeholder: "Recherchez une adresse",
+    startIcon: "allaw-icon-map-pin",
+    endIcon: "allaw-icon-search",
+    showClear: false,
+    size: "normal",
+    style: "classic",
+};
+export var BigFormStartIconNoEnd = Template.bind({});
+BigFormStartIconNoEnd.args = {
+    placeholder: "Décrivez votre besoin, ex. :  Je veux vendre un appartement",
+    startIcon: "allaw-icon-search",
+    endIcon: undefined,
+    showClear: false,
+    size: "big",
+    style: "form",
+};

package/dist/components/atoms/inputs/{SearchBar.css → searchBar.module.css}

@@ -1,6 +1,4 @@
-@import "../../../styles/colors.css";
-
-.SearchBar {
+.searchBar {
   display: flex;
   width: 100%;
   height: 45px;
@@ -9,12 +7,21 @@
   gap: 8px;
   flex-shrink: 0;
   border-radius: 73px;
-  border: 1px solid var(--venom-grey, #e6edf5);
-  background: var(--Primary-Blanc, #fff);
+  border: 1px solid #e6edf5;
+  background: #fff;
+}
+
+/* Size variants */
+.sizeBig {
+  height: 52px;
+}
+
+.sizeBig .searchBarPlaceholder {
+  font-size: 18px;
 }
 
-.SearchBar-placeholder {
-  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+.searchBarPlaceholder {
+  color: #728ea7;
   font-family: "Open Sans";
   font-size: 16px;
   font-style: normal;
@@ -28,7 +35,20 @@
   padding-left: 3px;
 }
 
-.SearchBar-icon-button {
+.searchBarStartIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.searchBarStartIcon i {
+  color: #25beeb;
+  font-size: 18px;
+}
+
+.searchBarIconButton {
   display: flex;
   width: 33px;
   height: 33px;
@@ -39,11 +59,16 @@
   gap: 5px;
   border-radius: 20px;
   border: 1px solid rgba(0, 0, 0, 0.05);
-  background: var(--primary-blue, #25beeb);
+  background: #25beeb;
   cursor: pointer;
 }
 
-.SearchBar-icon-button i {
+.sizeBig .searchBarIconButton {
+  width: 36px;
+  height: 36px;
+}
+
+.searchBarIconButton i {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
@@ -54,7 +79,7 @@
   justify-content: center;
 }
 
-.SearchBar-clear-button {
+.searchBarClearButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,12 +94,25 @@
   transition: background 0.15s;
 }
 
-.SearchBar-clear-button:hover {
+.searchBarClearButton:hover {
   background: #f6fcfe;
 }
 
-.SearchBar-clear-button i {
+.searchBarClearButton i {
   color: #728ea7;
   font-size: 18px;
   pointer-events: none;
 }
+
+/* Style variants */
+.styleForm {
+  border: 2px solid #e6edf5;
+}
+
+.styleForm:hover {
+  border-color: #d1dce8;
+}
+
+.styleForm:focus-within {
+  border-color: #728ea7;
+}

package/package.json

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