allaw-ui 4.5.1 → 4.5.3

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

@@ -7,8 +7,10 @@
   gap: 15px;
   cursor: pointer;
   min-width: 210px;
+  max-width: 100%;
   border-radius: 10px;
   padding: 6px;
+  box-sizing: border-box;
 }
 
 .oauth-provider-button:hover {
@@ -21,6 +23,7 @@
 
 .oauth-provider-button.google {
   width: 100%;
+  max-width: 100%;
   background: #ffffff;
   box-shadow: 0px 2px 3px 0px #0000002b, 0px 0px 3px 0px #00000015;
 }
@@ -39,11 +42,13 @@
 .oauth-provider-button.apple {
   background: #000000;
   width: 100%;
+  max-width: 100%;
 }
 
 .oauth-provider-button.linkedin {
   background: #0a66c2;
   width: 100%;
+  max-width: 100%;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -99,6 +104,7 @@
 
 .oauth-provider-button.microsoft {
   width: 100%;
+  max-width: 100%;
   background: #ffffff;
   box-shadow: 0px 2px 3px 0px #0000002b, 0px 0px 3px 0px #00000015;
   font-family: Roboto;

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

@@ -59,19 +59,33 @@ var OAuthProviderButton = function (_a) {
         }, 50);
         return function () { return clearTimeout(timer); };
     }, []);
+    // Ajouter un useEffect pour surveiller les changements de taille
+    useEffect(function () {
+        var handleResize = function () {
+            updateLabel();
+        };
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [size, type, provider]);
     var updateLabel = function () {
         var _a = getLabels(), labels = _a.labels, shortLabels = _a.shortLabels;
         var thresholdWidth = getThresholdWidth(size);
         if (buttonRef.current) {
             var buttonWidth = buttonRef.current.offsetWidth;
+            // Debug: afficher les valeurs pour diagnostiquer
+            console.log("Button width:", buttonWidth, "Threshold:", thresholdWidth, "Size:", size);
+            // Toujours utiliser le label complet au début
             if (!label) {
                 setLabel(labels[type][provider]);
                 return;
             }
+            // Vérifier si on doit passer aux shortLabels
             if (buttonWidth < thresholdWidth) {
+                console.log("Using short label for", provider);
                 setLabel(shortLabels[provider]);
             }
             else {
+                console.log("Using full label for", provider);
                 setLabel(labels[type][provider]);
             }
         }

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