allaw-ui 4.5.3 → 4.5.4

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

@@ -140,3 +140,10 @@
 .oauth-provider-button.microsoft .label {
   text-transform: none !important;
 }
+
+/* Styles pour les boutons avec label court */
+.oauth-provider-button.short-label {
+  min-width: 150px;
+  max-width: 200px;
+  gap: 10px;
+}

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

@@ -7,6 +7,7 @@ export interface OAuthProviderButtonProps {
     url: string;
     size: 14 | 16 | 18 | 20 | 22 | 24;
     onClick?: () => void;
+    displayShortLabel?: boolean;
 }
 declare const OAuthProviderButton: React.FC<OAuthProviderButtonProps>;
 export default OAuthProviderButton;

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

@@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
 import "./OAuthProviderButton.css";
 import "../../../styles/global.css";
 var OAuthProviderButton = function (_a) {
-    var provider = _a.provider, type = _a.type, url = _a.url, size = _a.size, onClick = _a.onClick;
-    var _b = useState(""), label = _b[0], setLabel = _b[1];
+    var provider = _a.provider, type = _a.type, url = _a.url, size = _a.size, onClick = _a.onClick, _b = _a.displayShortLabel, displayShortLabel = _b === void 0 ? false : _b;
+    var _c = useState(""), label = _c[0], setLabel = _c[1];
     var buttonRef = useRef(null);
     var getLabels = function () {
         var labels = {
@@ -66,9 +66,14 @@ var OAuthProviderButton = function (_a) {
         };
         window.addEventListener("resize", handleResize);
         return function () { return window.removeEventListener("resize", handleResize); };
-    }, [size, type, provider]);
+    }, [size, type, provider, displayShortLabel]);
     var updateLabel = function () {
         var _a = getLabels(), labels = _a.labels, shortLabels = _a.shortLabels;
+        // Si displayShortLabel est true, toujours utiliser le label court
+        if (displayShortLabel) {
+            setLabel(shortLabels[provider]);
+            return;
+        }
         var thresholdWidth = getThresholdWidth(size);
         if (buttonRef.current) {
             var buttonWidth = buttonRef.current.offsetWidth;
@@ -172,7 +177,7 @@ var OAuthProviderButton = function (_a) {
         }
     };
     var maxWidth = getMaxWidth();
-    return (React.createElement("button", { ref: buttonRef, className: "oauth-provider-button ".concat(provider), onClick: handleClick, style: { height: "".concat(size * 2.55, "px"), maxWidth: maxWidth } },
+    return (React.createElement("button", { ref: buttonRef, className: "oauth-provider-button ".concat(provider).concat(displayShortLabel ? " short-label" : ""), onClick: handleClick, style: { height: "".concat(size * 2.55, "px"), maxWidth: maxWidth } },
         renderIcon(),
         React.createElement("span", { className: "label", style: { fontSize: "".concat(size, "px") } }, label)));
 };

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

@@ -38,6 +38,13 @@ declare namespace _default {
         export namespace onClick {
             let action: string;
         }
+        export namespace displayShortLabel {
+            export namespace control_4 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_4 as control };
+        }
     }
 }
 export default _default;
@@ -53,4 +60,8 @@ export const GoogleCalendar: any;
 export const AppleCalendar: any;
 export const LinkedinCalendar: any;
 export const MicrosoftCalendar: any;
+export const GoogleLoginShort: any;
+export const AppleSignupShort: any;
+export const LinkedinLoginShort: any;
+export const MicrosoftSignupShort: any;
 import OAuthProviderButton from "./OAuthProviderButton";

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

@@ -41,6 +41,11 @@ export default {
             },
         },
         onClick: { action: "clicked" },
+        displayShortLabel: {
+            control: {
+                type: "boolean",
+            },
+        },
     },
 };
 var Template = function (args) { return React.createElement(OAuthProviderButton, __assign({}, args)); };
@@ -128,3 +133,36 @@ MicrosoftCalendar.args = {
     url: "https://outlook.office.com/calendar",
     size: 20,
 };
+// Exemples avec displayShortLabel
+export var GoogleLoginShort = Template.bind({});
+GoogleLoginShort.args = {
+    provider: "google",
+    type: "login",
+    url: "https://google.com",
+    size: 20,
+    displayShortLabel: true,
+};
+export var AppleSignupShort = Template.bind({});
+AppleSignupShort.args = {
+    provider: "apple",
+    type: "signup",
+    url: "https://apple.com/signup",
+    size: 20,
+    displayShortLabel: true,
+};
+export var LinkedinLoginShort = Template.bind({});
+LinkedinLoginShort.args = {
+    provider: "linkedin",
+    type: "login",
+    url: "https://linkedin.com",
+    size: 20,
+    displayShortLabel: true,
+};
+export var MicrosoftSignupShort = Template.bind({});
+MicrosoftSignupShort.args = {
+    provider: "microsoft",
+    type: "signup",
+    url: "https://microsoft.com/signup",
+    size: 20,
+    displayShortLabel: true,
+};

package/package.json

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