allaw-ui 4.5.2 → 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/dist/components/atoms/radios/RadioButton.css

@@ -5,9 +5,7 @@
   border: none;
   background: none;
   cursor: pointer;
-  transition:
-    color 0.15s,
-    border-bottom 0.15s;
+  transition: color 0.15s, border-bottom 0.15s;
 }
 
 .radio-button-user {
@@ -35,6 +33,29 @@
   gap: 8px;
 }
 
+/* Style modern - cohérent avec Input */
+.radio-button-modern {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: all 0.15s ease;
+}
+
+.radio-button-modern:hover {
+  background: none;
+}
+
+.radio-button-modern-active {
+  background: none;
+}
+
+.radio-button-modern-active:hover {
+  background: none;
+}
+
 .radio-button-icon {
   display: flex;
   align-items: center;
@@ -84,7 +105,35 @@
   width: 12px;
   height: 12px;
   flex-shrink: 0;
-  border-radius: 24px;
+  border-radius: 50%;
+  background: var(--primary-blue, #25beeb);
+}
+
+/* Style modern pour l'icône */
+.radio-button-modern .radio-button-icon {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--grey-venom, #e6edf5);
+  border-radius: 50%;
+  transition: all 0.15s ease;
+}
+
+.radio-button-modern:hover .radio-button-icon {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.radio-button-modern-active .radio-button-icon {
+  width: 20px;
+  height: 20px;
+  /* padding: 3px; */
+  /* border: 2px solid var(--mid-grey, #728ea7); */
+  border-radius: 50%;
+}
+
+.radio-button-modern-active .radio-button-icon-inner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
   background: var(--primary-blue, #25beeb);
 }
 

package/dist/components/atoms/radios/RadioButton.d.ts

@@ -3,7 +3,7 @@ import "../../../styles/global.css";
 import "./RadioButton.css";
 export interface RadioButtonProps {
     label: string;
-    style?: "user" | "hybride";
+    style?: "user" | "hybride" | "modern";
     isActive: boolean;
     onClick: () => void;
     dataTestId?: string;

package/dist/components/atoms/radios/RadioButton.stories.d.ts

@@ -33,4 +33,6 @@ export const UserDefault: any;
 export const UserActive: any;
 export const HybrideDefault: any;
 export const HybrideActive: any;
+export const ModernDefault: any;
+export const ModernActive: any;
 import RadioButton from "./RadioButton";

package/dist/components/atoms/radios/RadioButton.stories.js

@@ -25,7 +25,7 @@ export default {
         style: {
             control: {
                 type: "radio",
-                options: ["user", "hybride"],
+                options: ["user", "hybride", "modern"],
             },
         },
     },
@@ -73,3 +73,15 @@ HybrideActive.args = {
     style: "hybride",
     isActive: true,
 };
+export var ModernDefault = Template.bind({});
+ModernDefault.args = {
+    label: "Option moderne",
+    style: "modern",
+    isActive: false,
+};
+export var ModernActive = Template.bind({});
+ModernActive.args = {
+    label: "Option moderne",
+    style: "modern",
+    isActive: true,
+};

package/dist/components/molecules/radioForm/RadioForm.d.ts

@@ -7,6 +7,7 @@ export interface RadioFormProps {
     options: string[];
     defaultSelected?: string;
     onChange?: (selectedOption: string | null) => void;
+    style?: "default" | "modern";
 }
 declare const RadioForm: React.FC<RadioFormProps>;
 export default RadioForm;

package/dist/components/molecules/radioForm/RadioForm.js

@@ -4,8 +4,8 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 import RadioButton from "../../atoms/radios/RadioButton";
 var RadioForm = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, options = _a.options, defaultSelected = _a.defaultSelected, onChange = _a.onChange;
-    var _b = useState(defaultSelected || null), selectedOption = _b[0], setSelectedOption = _b[1];
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, defaultSelected = _a.defaultSelected, onChange = _a.onChange, _b = _a.style, style = _b === void 0 ? "default" : _b;
+    var _c = useState(defaultSelected || null), selectedOption = _c[0], setSelectedOption = _c[1];
     useEffect(function () {
         if (defaultSelected) {
             setSelectedOption(defaultSelected);
@@ -17,11 +17,14 @@ var RadioForm = function (_a) {
             onChange(option);
         }
     };
+    var getRadioButtonStyle = function () {
+        return style === "modern" ? "modern" : "hybride";
+    };
     return (React.createElement("div", { className: "radio-form" },
         React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
                 label,
                 " ",
                 isRequired && React.createElement("span", { className: "radio-form-required" }, "*")), size: "default" }),
-        React.createElement("div", { className: "radio-form-options" }, options.map(function (option, index) { return (React.createElement(RadioButton, { key: index, label: option, style: "hybride", isActive: selectedOption === option, onClick: function () { return handleOptionChange(option); } })); }))));
+        React.createElement("div", { className: "radio-form-options" }, options.map(function (option, index) { return (React.createElement(RadioButton, { key: index, label: option, style: getRadioButtonStyle(), isActive: selectedOption === option, onClick: function () { return handleOptionChange(option); } })); }))));
 };
 export default RadioForm;

package/dist/components/molecules/radioForm/RadioForm.stories.d.ts

@@ -18,10 +18,20 @@ declare namespace _default {
             let control_3: string;
             export { control_3 as control };
         }
+        namespace style {
+            export namespace control_4 {
+                export let type: string;
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_4 as control };
+        }
     }
 }
 export default _default;
 export const Default: any;
 export const WithDefaultSelection: any;
 export const MultipleOptions: any;
+export const ModernStyle: any;
+export const ModernStyleWithMultipleOptions: any;
 import RadioForm from "./RadioForm";

package/dist/components/molecules/radioForm/RadioForm.stories.js

@@ -21,6 +21,12 @@ export default {
         isRequired: { control: "boolean" },
         options: { control: "array" },
         defaultSelected: { control: "text" },
+        style: {
+            control: {
+                type: "radio",
+                options: ["default", "modern"],
+            },
+        },
     },
 };
 var Template = function (args) {
@@ -36,6 +42,7 @@ Default.args = {
     label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
     isRequired: true,
     options: ["Oui", "Non"],
+    style: "default",
 };
 export var WithDefaultSelection = Template.bind({});
 WithDefaultSelection.args = {
@@ -43,10 +50,26 @@ WithDefaultSelection.args = {
     isRequired: true,
     options: ["Oui", "Non"],
     defaultSelected: "Oui",
+    style: "default",
 };
 export var MultipleOptions = Template.bind({});
 MultipleOptions.args = {
     label: "Choisissez votre option préférée",
     isRequired: false,
     options: ["Option 1", "Option 2", "Option 3"],
+    style: "default",
+};
+export var ModernStyle = Template.bind({});
+ModernStyle.args = {
+    label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
+    isRequired: true,
+    options: ["Oui", "Non"],
+    style: "modern",
+};
+export var ModernStyleWithMultipleOptions = Template.bind({});
+ModernStyleWithMultipleOptions.args = {
+    label: "Choisissez votre option préférée",
+    isRequired: false,
+    options: ["Option 1", "Option 2", "Option 3"],
+    style: "modern",
 };

package/package.json

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