allaw-ui 3.2.0 → 3.2.2

package/dist/components/atoms/inputs/TextArea.css

@@ -28,9 +28,10 @@
   width: 100%;
   padding-left: 4px;
   resize: vertical;
-  min-height: 100px;
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
 /* Style default */
@@ -82,8 +83,10 @@
   font-size: 16px;
   line-height: 24px;
   padding: 8px;
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
 .text-area-variation {
@@ -120,8 +123,10 @@
   border: none;
   outline: none;
   color: var(--noir);
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
 .text-area-variation .text-area-icon-button {

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

@@ -13,6 +13,7 @@ export interface TextAreaProps {
     value?: string;
     error?: string;
     maxHeight?: number;
+    minHeight?: number;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     dataCy?: string;

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

@@ -6,10 +6,10 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _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.maxHeight, maxHeight = _d === void 0 ? 400 : _d, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataCy = _a.dataCy;
-    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
-    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
-    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _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.maxHeight, maxHeight = _d === void 0 ? 400 : _d, _e = _a.minHeight, minHeight = _e === void 0 ? 100 : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, _g = _a.color, color = _g === void 0 ? "noir" : _g, dataCy = _a.dataCy;
+    var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
+    var _j = useState(propError || ""), error = _j[0], setError = _j[1];
+    var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
     var textareaRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -58,7 +58,10 @@ var TextArea = forwardRef(function (_a, ref) {
                 "*"))),
         React.createElement("div", { className: "text-area-container" },
             React.createElement("div", { className: "text-area-input", "data-cy": dataCy || "text-area" },
-                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: { maxHeight: "".concat(maxHeight, "px") } })),
+                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: {
+                        maxHeight: "".concat(maxHeight, "px"),
+                        minHeight: "".concat(minHeight, "px"),
+                    } })),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
 });

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

@@ -33,23 +33,47 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
-        namespace variant {
+        namespace minHeight {
             export namespace control_4 {
                 let type_3: string;
                 export { type_3 as type };
+                let min_1: number;
+                export { min_1 as min };
+                let max_1: number;
+                export { max_1 as max };
+                let step_1: number;
+                export { step_1 as step };
+            }
+            export { control_4 as control };
+            export let description: string;
+            export namespace table {
+                export namespace type_4 {
+                    let summary: string;
+                }
+                export { type_4 as type };
+                export namespace defaultValue {
+                    let summary_1: number;
+                    export { summary_1 as summary };
+                }
+            }
+        }
+        namespace variant {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
                 let options_1: string[];
                 export { options_1 as options };
             }
-            export { control_4 as control };
+            export { control_5 as control };
         }
         namespace color {
-            export namespace control_5 {
-                let type_4: string;
-                export { type_4 as type };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
                 let options_2: string[];
                 export { options_2 as options };
             }
-            export { control_5 as control };
+            export { control_6 as control };
         }
     }
     export namespace parameters {
@@ -67,4 +91,5 @@ export default _default;
 export const Default: any;
 export const Variation: any;
 export const WithValidation: any;
+export const LargeMinHeight: any;
 import TextArea from "./TextArea";

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

@@ -43,6 +43,19 @@ export default {
                 step: 50,
             },
         },
+        minHeight: {
+            control: {
+                type: "number",
+                min: 50,
+                max: 500,
+                step: 10,
+            },
+            description: "Hauteur minimale du TextArea en pixels",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: 100 },
+            },
+        },
         variant: {
             control: {
                 type: "select",
@@ -89,6 +102,7 @@ Default.args = {
     style: "default",
     isRequired: false,
     maxHeight: 400,
+    minHeight: 100,
     variant: "medium",
     color: "noir",
 };
@@ -100,6 +114,7 @@ Variation.args = {
     style: "variation",
     isRequired: true,
     maxHeight: 400,
+    minHeight: 100,
 };
 export var WithValidation = Template.bind({});
 WithValidation.args = {
@@ -110,4 +125,17 @@ WithValidation.args = {
     isRequired: true,
     validate: "email",
     maxHeight: 400,
+    minHeight: 100,
+};
+export var LargeMinHeight = Template.bind({});
+LargeMinHeight.args = {
+    name: "largeTextArea",
+    title: "Description détaillée",
+    placeholder: "Entrez une description détaillée",
+    style: "default",
+    isRequired: false,
+    maxHeight: 400,
+    minHeight: 200,
+    variant: "medium",
+    color: "noir",
 };

package/dist/components/atoms/selects/ComboBox.css

@@ -15,6 +15,18 @@
   color: var(--dark-grey, #456073);
 }
 
+.combo-box-title-medium {
+  font-weight: 400;
+}
+
+.combo-box-title-semiBold {
+  font-weight: 600;
+}
+
+.combo-box-title-bold {
+  font-weight: 700;
+}
+
 .combo-box-input-container {
   display: flex;
   align-items: center;

package/dist/components/atoms/selects/ComboBox.d.ts

@@ -17,6 +17,7 @@ export interface ComboBoxProps {
     onError?: (error: string) => void;
     openOnMount?: boolean;
     title?: string;
+    titleStyle?: "medium" | "semiBold" | "bold";
 }
 export interface ComboBoxRef {
     validate: () => boolean;

package/dist/components/atoms/selects/ComboBox.js

@@ -5,24 +5,24 @@ import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 import { createPortal } from "react-dom";
 function ComboBox(_a, ref) {
-    var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onSelect = _a.onSelect, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title;
-    var _g = useState(openOnMount), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = useState(items), filteredItems = _j[0], setFilteredItems = _j[1];
-    var _k = useState(""), error = _k[0], setError = _k[1];
-    var _l = useState(false), isHovered = _l[0], setIsHovered = _l[1];
-    var _m = useState(-1), selectedIndex = _m[0], setSelectedIndex = _m[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onSelect = _a.onSelect, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleStyle, titleStyle = _g === void 0 ? "semiBold" : _g;
+    var _h = useState(openOnMount), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = useState(items), filteredItems = _k[0], setFilteredItems = _k[1];
+    var _l = useState(""), error = _l[0], setError = _l[1];
+    var _m = useState(false), isHovered = _m[0], setIsHovered = _m[1];
+    var _o = useState(-1), selectedIndex = _o[0], setSelectedIndex = _o[1];
     var comboBoxRef = useRef(null);
     var inputContainerRef = useRef(null);
     var listRef = useRef(null);
     var inputRef = useRef(null);
     var chevronRef = useRef(null);
-    var _o = useState(true), isInputValid = _o[0], setIsInputValid = _o[1];
-    var _p = useState({
+    var _p = useState(true), isInputValid = _p[0], setIsInputValid = _p[1];
+    var _q = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _p[0], setListPosition = _p[1];
+    }), listPosition = _q[0], setListPosition = _q[1];
     useEffect(function () {
         if (selectedItem) {
             var selectedItemData = items.find(function (item) { return item.value === selectedItem; });
@@ -150,7 +150,7 @@ function ComboBox(_a, ref) {
     }, [isOpen, filteredItems, selectedIndex]);
     return (React.createElement("div", { ref: comboBoxRef, className: "combo-box-container ".concat(isOpen ? "combo-box-pressed" : "", " ").concat(isHovered ? "combo-box-hovered" : ""), style: { width: "".concat(width, "%") }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         title && (React.createElement("div", { className: "combo-box-title-container" },
-            React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
+            React.createElement(Paragraph, { variant: titleStyle, color: "noir", text: title }),
             isRequired && (React.createElement("span", { className: "combo-box-required" },
                 "\u00A0",
                 "*")))),

package/dist/components/atoms/selects/ComboBox.stories.d.ts

@@ -61,6 +61,26 @@ declare namespace _default {
             export { control_6 as control };
         }
         export { title_1 as title };
+        export namespace titleStyle {
+            export let options: string[];
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            export let description: string;
+            export namespace table_1 {
+                export namespace type_8 {
+                    let summary: string;
+                }
+                export { type_8 as type };
+                export namespace defaultValue {
+                    let summary_1: string;
+                    export { summary_1 as summary };
+                }
+            }
+            export { table_1 as table };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -91,4 +111,6 @@ export const Pressed: any;
 export const Required: any;
 export const CustomWidth: any;
 export const OpenOnMount: any;
+export const TitleMedium: any;
+export const TitleBold: any;
 import ComboBox from "./ComboBox";

package/dist/components/atoms/selects/ComboBox.stories.js

@@ -63,6 +63,15 @@ export default {
                 type: "text",
             },
         },
+        titleStyle: {
+            options: ["medium", "semiBold", "bold"],
+            control: { type: "select" },
+            description: "Style du titre (graisse de police)",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "semiBold" },
+            },
+        },
     },
     parameters: {
         backgrounds: {
@@ -111,6 +120,7 @@ Default.args = {
     width: 100,
     openOnMount: true,
     title: "Sélectionnez une date",
+    titleStyle: "semiBold",
 };
 export var Pressed = Template.bind({});
 Pressed.args = __assign(__assign({}, Default.args), { selectedItem: "lundi-12-aout" });
@@ -120,3 +130,7 @@ export var CustomWidth = Template.bind({});
 CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
 export var OpenOnMount = Template.bind({});
 OpenOnMount.args = __assign(__assign({}, Default.args), { openOnMount: true });
+export var TitleMedium = Template.bind({});
+TitleMedium.args = __assign(__assign({}, Default.args), { titleStyle: "medium" });
+export var TitleBold = Template.bind({});
+TitleBold.args = __assign(__assign({}, Default.args), { titleStyle: "bold" });

package/package.json

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