allaw-ui 2.6.8 → 2.7.0

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

@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes } from "react";
 import "./SecondaryButton.css";
 import "../../../styles/global.css";
+export type ResponsiveLabels = Record<number, string>;
 export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
@@ -15,6 +16,7 @@ export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
     type?: "button" | "submit" | "reset";
     isLoading?: boolean;
     size?: "medium" | "large";
+    responsiveLabels?: ResponsiveLabels;
 }
 declare const SecondaryButton: React.ForwardRefExoticComponent<SecondaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default SecondaryButton;

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

@@ -61,10 +61,11 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
 import "./SecondaryButton.css";
 import "../../../styles/global.css";
 var SecondaryButton = forwardRef(function (_a, ref) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading", "size"]);
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, responsiveLabels = _a.responsiveLabels, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading", "size", "responsiveLabels"]);
     var buttonRef = React.useRef(null);
     var _j = useState(false), internalIsLoading = _j[0], setInternalIsLoading = _j[1];
     var _k = useState(""), loadingDots = _k[0], setLoadingDots = _k[1];
+    var _l = useState(label), currentLabel = _l[0], setCurrentLabel = _l[1];
     useImperativeHandle(ref, function () { return buttonRef.current; });
     var isButtonLoading = isLoading || internalIsLoading;
     useEffect(function () {
@@ -84,6 +85,39 @@ var SecondaryButton = forwardRef(function (_a, ref) {
             }
         };
     }, [isButtonLoading]);
+    // Effect for responsive labels
+    useEffect(function () {
+        if (!responsiveLabels) {
+            setCurrentLabel(label);
+            return;
+        }
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var breakpoints = Object.keys(responsiveLabels)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            // Find the appropriate label for the current width
+            var selectedLabel = 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 = responsiveLabels[breakpoint];
+                }
+                else {
+                    break;
+                }
+            }
+            setCurrentLabel(selectedLabel);
+        };
+        // Initial check
+        handleResize();
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [responsiveLabels, label]);
     var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -110,7 +144,7 @@ var SecondaryButton = forwardRef(function (_a, ref) {
     }); };
     return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : "", " ").concat(color ? "secondary-button-color-".concat(color) : "", " ").concat(size === "large" ? "secondary-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         startIcon && (React.createElement("span", { className: "secondary-button-icon ".concat(startIconName) })),
-        React.createElement("span", { className: "secondary-button-label" }, label),
+        React.createElement("span", { className: "secondary-button-label" }, currentLabel),
         isButtonLoading ? (React.createElement("span", { className: "secondary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIconName) }))));
 });
 SecondaryButton.displayName = "SecondaryButton";

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

@@ -4,9 +4,16 @@ declare namespace _default {
     export { SecondaryButton as component };
     export let tags: string[];
     export let excludeStories: RegExp;
-    export let args: {};
+    export namespace args {
+        let responsiveLabels: {
+            480: string;
+            768: string;
+            1024: string;
+            1440: string;
+        };
+    }
     export namespace argTypes {
-        namespace startIcon {
+        export namespace startIcon {
             namespace control {
                 let type: string;
             }
@@ -17,7 +24,7 @@ declare namespace _default {
                 export { _false as false };
             }
         }
-        namespace endIcon {
+        export namespace endIcon {
             export namespace control_1 {
                 let type_1: string;
                 export { type_1 as type };
@@ -31,10 +38,10 @@ declare namespace _default {
             }
             export { mapping_1 as mapping };
         }
-        namespace onClick {
+        export namespace onClick {
             let action: string;
         }
-        namespace color {
+        export namespace color {
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
@@ -43,7 +50,7 @@ declare namespace _default {
             export let options: string[];
             export let defaultValue: string;
         }
-        namespace size {
+        export namespace size {
             export namespace control_3 {
                 let type_3: string;
                 export { type_3 as type };
@@ -52,6 +59,11 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
+        export namespace responsiveLabels_1 {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        export { responsiveLabels_1 as responsiveLabels };
     }
     export namespace parameters {
         namespace backgrounds {
@@ -81,4 +93,5 @@ export const WithValidColor: any;
 export const LargeButton: any;
 export const LargeButtonWithIcons: any;
 export const LargeColoredButton: any;
+export const ResponsiveButton: any;
 import SecondaryButton from "./SecondaryButton";

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

@@ -54,7 +54,12 @@ export default {
     component: SecondaryButton,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    args: __assign({}, ActionsData),
+    args: __assign(__assign({}, ActionsData), { responsiveLabels: {
+            480: "Court",
+            768: "Moyen",
+            1024: "Label complet",
+            1440: "Label complet avec détails",
+        } }),
     argTypes: {
         startIcon: {
             control: {
@@ -96,6 +101,9 @@ export default {
                 options: ["medium", "large"],
             },
         },
+        responsiveLabels: {
+            control: "object",
+        },
     },
     parameters: {
         backgrounds: {
@@ -160,3 +168,10 @@ export var LargeButtonWithIcons = Template.bind({});
 LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
 export var LargeColoredButton = Template.bind({});
 LargeColoredButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton Coloré", color: "bleu-allaw", size: "large" });
+export var ResponsiveButton = Template.bind({});
+ResponsiveButton.args = __assign(__assign({}, Default.args), { label: "Label par défaut", responsiveLabels: {
+        480: "Partager",
+        768: "Partager sur",
+        1024: "Partager sur LinkedIn",
+        1440: "Partager votre avis sur LinkedIn",
+    }, color: "bleu-allaw" });

package/dist/components/atoms/typography/Heading.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useState } from "react";
 import "./Heading.css";
 var Heading = function (_a) {

package/package.json

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