allaw-ui 2.7.9 → 2.8.0

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

@@ -4,6 +4,8 @@ export type ResponsiveConfig = {
     label?: string;
     height?: number;
     width?: number;
+    maxWidth?: number;
+    imageVerticalOffset?: number;
 };
 export type ResponsiveBreakpoints = Record<number, ResponsiveConfig>;
 export interface SelectCardProps {
@@ -15,6 +17,8 @@ export interface SelectCardProps {
     size?: "small" | "medium" | "large";
     onClick: () => void;
     responsiveConfig?: ResponsiveBreakpoints;
+    maxWidth?: number;
+    imageVerticalOffset?: number;
 }
 declare const SelectCard: React.FC<SelectCardProps>;
 export default SelectCard;

package/dist/components/atoms/radios/SelectCard.js

@@ -1,10 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useEffect, useState } from "react";
 import styles from "./SelectCard.module.css";
 import "../../../styles/icons.css";
 var SelectCard = function (_a) {
-    var iconName = _a.iconName, iconUrl = _a.iconUrl, label = _a.label, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, onClick = _a.onClick, responsiveConfig = _a.responsiveConfig;
-    var _e = useState(label), currentLabel = _e[0], setCurrentLabel = _e[1];
-    var _f = useState({}), currentStyle = _f[0], setCurrentStyle = _f[1];
+    var iconName = _a.iconName, iconUrl = _a.iconUrl, label = _a.label, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, onClick = _a.onClick, responsiveConfig = _a.responsiveConfig, maxWidth = _a.maxWidth, _e = _a.imageVerticalOffset, imageVerticalOffset = _e === void 0 ? 0 : _e;
+    var _f = useState(label), currentLabel = _f[0], setCurrentLabel = _f[1];
+    var _g = useState({}), currentStyle = _g[0], setCurrentStyle = _g[1];
+    var _h = useState(imageVerticalOffset), currentImageOffset = _h[0], setCurrentImageOffset = _h[1];
     useEffect(function () {
         if (!responsiveConfig)
             return;
@@ -17,6 +29,8 @@ var SelectCard = function (_a) {
             var selectedLabel = label;
             var selectedWidth = undefined;
             var selectedHeight = undefined;
+            var selectedMaxWidth = maxWidth;
+            var selectedImageOffset = imageVerticalOffset;
             // Trouver la configuration appropriée pour la largeur actuelle
             for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
                 var breakpoint = breakpoints_1[_i];
@@ -28,6 +42,10 @@ var SelectCard = function (_a) {
                         selectedWidth = config.width;
                     if (config.height)
                         selectedHeight = config.height;
+                    if (config.maxWidth !== undefined)
+                        selectedMaxWidth = config.maxWidth;
+                    if (config.imageVerticalOffset !== undefined)
+                        selectedImageOffset = config.imageVerticalOffset;
                 }
                 else {
                     break;
@@ -37,7 +55,9 @@ var SelectCard = function (_a) {
             setCurrentStyle({
                 width: selectedWidth ? "".concat(selectedWidth, "px") : undefined,
                 height: selectedHeight ? "".concat(selectedHeight, "px") : undefined,
+                maxWidth: selectedMaxWidth ? "".concat(selectedMaxWidth, "px") : undefined,
             });
+            setCurrentImageOffset(selectedImageOffset);
         };
         // Vérification initiale
         handleResize();
@@ -47,7 +67,7 @@ var SelectCard = function (_a) {
         return function () {
             window.removeEventListener("resize", handleResize);
         };
-    }, [responsiveConfig, label]);
+    }, [responsiveConfig, label, maxWidth, imageVerticalOffset]);
     var handleClick = function () {
         if (!isDisabled) {
             onClick();
@@ -62,9 +82,19 @@ var SelectCard = function (_a) {
         }
         return null;
     };
-    return (React.createElement("button", { className: "".concat(styles.selectCard, " \n                ").concat(isActive ? styles.active : "", " \n                ").concat(isDisabled ? styles.disabled : "", " \n                ").concat(styles[size]), onClick: handleClick, disabled: isDisabled, type: "button", style: currentStyle, title: currentLabel },
+    // Calculer le style pour l'icône avec l'offset vertical
+    var iconWrapperStyle = {
+        transform: currentImageOffset !== 0
+            ? "translateY(".concat(currentImageOffset, "px)")
+            : undefined,
+    };
+    // Calculer le style pour le bouton avec maxWidth
+    var buttonStyle = __assign(__assign({}, currentStyle), { maxWidth: maxWidth && !currentStyle.maxWidth
+            ? "".concat(maxWidth, "px")
+            : currentStyle.maxWidth });
+    return (React.createElement("button", { className: "".concat(styles.selectCard, " \n                ").concat(isActive ? styles.active : "", " \n                ").concat(isDisabled ? styles.disabled : "", " \n                ").concat(styles[size]), onClick: handleClick, disabled: isDisabled, type: "button", style: buttonStyle, title: currentLabel },
         React.createElement("div", { className: styles.contentWrapper },
-            (iconName || iconUrl) && (React.createElement("div", { className: styles.iconWrapper }, renderIcon())),
+            (iconName || iconUrl) && (React.createElement("div", { className: styles.iconWrapper, style: iconWrapperStyle }, renderIcon())),
             React.createElement("span", { className: styles.label }, currentLabel))));
 };
 export default SelectCard;

package/dist/components/atoms/radios/SelectCard.module.css

@@ -26,6 +26,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  position: relative;
 }
 
 .iconWrapper {
@@ -34,6 +35,7 @@
   justify-content: center;
   height: 48px; /* Hauteur fixe pour l'icône */
   margin-bottom: 4px; /* Espace supplémentaire en bas de l'icône */
+  transition: transform 0.2s ease;
 }
 
 /* Taille d'icône par défaut */
@@ -66,7 +68,6 @@
 .small {
   min-width: 80px;
   min-height: 80px;
-  max-width: 80px;
 }
 
 .small .iconFont {
@@ -85,7 +86,6 @@
 .medium {
   min-width: 120px;
   min-height: 120px;
-  max-width: 120px;
 }
 
 .medium .iconFont {
@@ -104,7 +104,6 @@
 .large {
   min-width: 160px;
   min-height: 160px;
-  max-width: 160px;
 }
 
 .large .iconFont {

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

@@ -47,12 +47,24 @@ declare namespace _default {
             let description_5: string;
             export { description_5 as description };
         }
-        namespace responsiveConfig {
+        namespace maxWidth {
             let control_6: string;
             export { control_6 as control };
             let description_6: string;
             export { description_6 as description };
         }
+        namespace imageVerticalOffset {
+            let control_7: string;
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace responsiveConfig {
+            let control_8: string;
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -73,5 +85,8 @@ export const Small: any;
 export const Large: any;
 export const WithImageUrl: any;
 export const WithLongText: any;
+export const WithCustomMaxWidth: any;
+export const WithImageOffset: any;
+export const WithNegativeImageOffset: any;
 export const WithResponsiveConfig: any;
 import SelectCard from "./SelectCard";

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

@@ -48,6 +48,14 @@ export default {
             },
             description: "Taille du bouton",
         },
+        maxWidth: {
+            control: "number",
+            description: "Largeur maximale du bouton en pixels",
+        },
+        imageVerticalOffset: {
+            control: "number",
+            description: "Décalage vertical de l'icône en pixels (positif = vers le bas, négatif = vers le haut)",
+        },
         responsiveConfig: {
             control: "object",
             description: "Configuration responsive du bouton",
@@ -131,6 +139,33 @@ WithLongText.args = {
     isDisabled: false,
     size: "medium",
 };
+export var WithCustomMaxWidth = Template.bind({});
+WithCustomMaxWidth.args = {
+    label: "Bouton avec largeur maximale personnalisée",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    maxWidth: 200,
+};
+export var WithImageOffset = Template.bind({});
+WithImageOffset.args = {
+    label: "Icône décalée vers le bas",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    imageVerticalOffset: 10,
+};
+export var WithNegativeImageOffset = Template.bind({});
+WithNegativeImageOffset.args = {
+    label: "Icône décalée vers le haut",
+    iconName: "allaw-icon-upload-file",
+    isActive: false,
+    isDisabled: false,
+    size: "medium",
+    imageVerticalOffset: -10,
+};
 export var WithResponsiveConfig = Template.bind({});
 WithResponsiveConfig.args = {
     label: "Version Desktop",
@@ -143,11 +178,15 @@ WithResponsiveConfig.args = {
             label: "Version Tablette",
             width: 100,
             height: 100,
+            maxWidth: 150,
+            imageVerticalOffset: 5,
         },
         480: {
             label: "Mobile",
             width: 80,
             height: 80,
+            maxWidth: 100,
+            imageVerticalOffset: -5,
         },
     },
 };

package/package.json

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