allaw-ui 2.6.6 → 2.6.8

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

@@ -58,7 +58,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
-import styles from "./ActionButton.modules.css";
+import styles from "./ActionButton.module.css";
 var ActionButton = 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, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, variant = _a.variant, _f = _a.size, size = _f === void 0 ? "medium" : _f, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
     var buttonRef = React.useRef(null);

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

@@ -47,7 +47,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React from "react";
 import ActionButton from "./ActionButton";
-import "../../../styles/global.css";
 export var ActionsData = {};
 export default {
     title: "Components/Atoms/Buttons/ActionButton",

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

@@ -4,6 +4,7 @@
   font-family: Poppins;
   font-style: normal;
   line-height: normal;
+  display: block;
 }
 
 .heading.h1 {

package/dist/components/atoms/typography/Heading.d.ts

@@ -1,10 +1,16 @@
 import React from "react";
 import "./Heading.css";
+export type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
+export type HeadingColor = "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+export type HeadingAlign = "left" | "justify" | "center";
+export type ResponsiveSize = Record<number, HeadingVariant>;
 export interface HeadingProps {
-    variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
-    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    variant: HeadingVariant;
+    color?: HeadingColor;
     text: React.ReactNode;
-    align?: "left" | "justify" | "center";
+    align?: HeadingAlign;
+    responsiveSize?: ResponsiveSize;
+    as?: React.ElementType;
 }
 declare const Heading: React.FC<HeadingProps>;
 export default Heading;

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

@@ -1,7 +1,38 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./Heading.css";
 var Heading = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c;
-    return (React.createElement("span", { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align) }, text));
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
+    var _e = useState(variant), currentVariant = _e[0], setCurrentVariant = _e[1];
+    useEffect(function () {
+        if (!responsiveSize)
+            return;
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var breakpoints = Object.keys(responsiveSize)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            // Find the appropriate variant for the current width
+            var selectedVariant = variant; // Default to the prop variant
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    selectedVariant = responsiveSize[breakpoint];
+                }
+                else {
+                    break;
+                }
+            }
+            setCurrentVariant(selectedVariant);
+        };
+        // Initial check
+        handleResize();
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [responsiveSize, variant]);
+    return (React.createElement(Component, { className: "heading ".concat(currentVariant, " color-").concat(color, " align-").concat(align) }, text));
 };
 export default Heading;

package/dist/components/atoms/typography/Heading.stories.d.ts

@@ -22,6 +22,37 @@ declare namespace _default {
             let control_2: string;
             export { control_2 as control };
         }
+        namespace align {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_3 as control };
+        }
+        namespace responsiveSize {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace as {
+            export namespace control_5 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_3: string[];
+                export { options_3 as options };
+            }
+            export { control_5 as control };
+        }
+    }
+    export namespace args {
+        let responsiveSize_1: {
+            480: string;
+            768: string;
+            1024: string;
+            1440: string;
+        };
+        export { responsiveSize_1 as responsiveSize };
     }
     export namespace parameters {
         namespace backgrounds {
@@ -42,4 +73,6 @@ export const H4: any;
 export const H5: any;
 export const H6: any;
 export const H7: any;
+export const ResponsiveHeading: any;
+export const CustomElement: any;
 import Heading from "./Heading";

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

@@ -32,6 +32,30 @@ export default {
         text: {
             control: "text",
         },
+        align: {
+            control: {
+                type: "select",
+                options: ["left", "justify", "center"],
+            },
+        },
+        responsiveSize: {
+            control: "object",
+        },
+        as: {
+            control: {
+                type: "select",
+                options: ["span", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div"],
+            },
+        },
+    },
+    args: {
+        // Valeurs par défaut pour tous les stories
+        responsiveSize: {
+            480: "h5",
+            768: "h4",
+            1024: "h3",
+            1440: "h2",
+        },
     },
     parameters: {
         backgrounds: {
@@ -51,40 +75,68 @@ H1.args = {
     variant: "h1",
     color: "pure-white",
     text: "Poppins – SemiBold – 60px",
+    as: "h1",
 };
 export var H2 = Template.bind({});
 H2.args = {
     variant: "h2",
     color: "pure-white",
     text: "Poppins – SemiBold – 36px",
+    as: "h2",
 };
 export var H3 = Template.bind({});
 H3.args = {
     variant: "h3",
     color: "pure-white",
     text: "Poppins – SemiBold – 28px",
+    as: "h3",
 };
 export var H4 = Template.bind({});
 H4.args = {
     variant: "h4",
     color: "pure-white",
     text: "Poppins – SemiBold – 24px",
+    as: "h4",
 };
 export var H5 = Template.bind({});
 H5.args = {
     variant: "h5",
     color: "pure-white",
     text: "Poppins – Medium – 24px",
+    as: "h5",
 };
 export var H6 = Template.bind({});
 H6.args = {
     variant: "h6",
     color: "pure-white",
     text: "Poppins – SemiBold – 18px",
+    as: "h6",
 };
 export var H7 = Template.bind({});
 H7.args = {
     variant: "h7",
     color: "pure-white",
     text: "Poppins – SemiBold – 14px",
+    as: "span",
+};
+export var ResponsiveHeading = Template.bind({});
+ResponsiveHeading.args = {
+    variant: "h6", // Default variant
+    color: "noir",
+    text: "This heading changes size based on viewport width",
+    align: "left",
+    responsiveSize: {
+        480: "h5",
+        768: "h4",
+        1024: "h3",
+        1440: "h2",
+    },
+    as: "h2",
+};
+export var CustomElement = Template.bind({});
+CustomElement.args = {
+    variant: "h3",
+    color: "bleu-allaw",
+    text: "This heading uses a paragraph tag",
+    as: "p",
 };

package/package.json

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