allaw-ui 3.2.3 → 3.2.4

package/dist/components/atoms/buttons/ActionButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/ActionButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/PrimaryButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/PrimaryButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/SecondaryButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/SecondaryButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/TabNavigation.css

@@ -153,6 +153,8 @@
   font-weight: 500;
   line-height: 1;
   text-align: center;
+  transition: 0.2s ease-in-out;
+  min-width: 12px; /* Assure un minimum de largeur pour les labels très courts */
 }
 
 .tab-notification-dot {
@@ -182,3 +184,19 @@
 .tab-navigation.tab-navigation--round.small .tab-notification-dot {
   top: 10px;
 }
+
+/* Styles pour assurer une transition fluide entre les différentes tailles de labels */
+.tab-item {
+  transition: width 0.2s ease-in-out;
+}
+
+/* Style pour assurer un meilleur affichage des labels très courts */
+.tab-navigation.small .tab-item {
+  min-width: 32px; /* Largeur minimale pour les tabs très courts sur mobile */
+}
+
+/* Assurer que le label reste centré pendant la transition */
+.tab-item {
+  justify-content: center;
+  white-space: nowrap;
+}

package/dist/components/atoms/buttons/TabNavigation.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import "./TabNavigation.css";
 import "../../../styles/global.css";
+export type ResponsiveLabels = Record<number, string>;
 export interface TabNavigationProps {
     tabs: {
         label: string;
         isActive: boolean;
         hasNotification: boolean;
+        responsiveLabels?: ResponsiveLabels;
     }[];
     onTabClick: (index: number) => void;
     size?: "small" | "normal";

package/dist/components/atoms/buttons/TabNavigation.js

@@ -5,6 +5,7 @@ var TabNavigation = function (_a) {
     var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
     var navRef = useRef(null);
     var _d = useState(null), activeTabElement = _d[0], setActiveTabElement = _d[1];
+    var _e = useState(tabs.map(function (tab) { return tab.label; })), currentLabels = _e[0], setCurrentLabels = _e[1];
     // Scroll to active tab when it changes
     useEffect(function () {
         if (size === "small" && navRef.current && activeTabElement) {
@@ -21,8 +22,47 @@ var TabNavigation = function (_a) {
             setActiveTabElement(element);
         }
     };
+    // Effect for responsive labels
+    useEffect(function () {
+        // Skip if no tabs have responsive labels
+        if (!tabs.some(function (tab) { return tab.responsiveLabels; })) {
+            return;
+        }
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var newLabels = tabs.map(function (tab) {
+                if (!tab.responsiveLabels) {
+                    return tab.label;
+                }
+                var breakpoints = Object.keys(tab.responsiveLabels)
+                    .map(Number)
+                    .sort(function (a, b) { return a - b; });
+                // Find the appropriate label for the current width
+                var selectedLabel = tab.label; // Default to the prop label
+                for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                    var breakpoint = breakpoints_1[_i];
+                    if (width >= breakpoint) {
+                        selectedLabel = tab.responsiveLabels[breakpoint];
+                    }
+                    else {
+                        break;
+                    }
+                }
+                return selectedLabel;
+            });
+            setCurrentLabels(newLabels);
+        };
+        // Initial check
+        handleResize();
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [tabs]);
     return (React.createElement("div", { ref: navRef, className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, ref: function (el) { return setTabRef(el, tab.isActive); }, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
-        React.createElement("span", { className: "tab-label" }, tab.label),
+        React.createElement("span", { className: "tab-label" }, currentLabels[index]),
         tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
 };
 export default TabNavigation;

package/dist/components/atoms/buttons/TabNavigation.stories.d.ts

@@ -76,4 +76,6 @@ export const Small: any;
 export const Round: any;
 export const SmallRound: any;
 export const ManyTabsSmall: any;
+export const ResponsiveLabels: any;
+export const ResponsiveLabelsRound: any;
 import TabNavigation from "./TabNavigation";

package/dist/components/atoms/buttons/TabNavigation.stories.js

@@ -122,3 +122,57 @@ ManyTabsSmall.parameters = {
         defaultViewport: "mobile",
     },
 };
+// Exemple avec des labels responsifs
+export var ResponsiveLabels = Template.bind({});
+ResponsiveLabels.args = {
+    tabs: [
+        {
+            label: "Tous les dossiers",
+            isActive: true,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Tous",
+                375: "Ts",
+            },
+        },
+        {
+            label: "Notes importantes",
+            isActive: false,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Notes",
+                375: "Nt",
+            },
+        },
+        {
+            label: "Documents clients",
+            isActive: false,
+            hasNotification: true,
+            responsiveLabels: {
+                768: "Docs",
+                375: "Dc",
+            },
+        },
+        {
+            label: "Factures impayées",
+            isActive: false,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Factures",
+                375: "Fct",
+            },
+        },
+    ],
+    onTabClick: function (index) { return console.log("Tab ".concat(index, " cliqu\u00E9")); },
+    size: "normal",
+    variant: "normal",
+};
+ResponsiveLabels.parameters = {
+    docs: {
+        description: {
+            story: "Ce composant utilise des labels responsifs qui changent en fonction de la taille de l'écran. Essayez de redimensionner la fenêtre pour voir les changements.",
+        },
+    },
+};
+export var ResponsiveLabelsRound = Template.bind({});
+ResponsiveLabelsRound.args = __assign(__assign({}, ResponsiveLabels.args), { variant: "round" });

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/fileUploader/FileUploader.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/stepper/Stepper.js

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/stepper/Stepper.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/stories/Page.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/package.json

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