allaw-ui 3.2.0 → 3.2.1

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.1",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",