allaw-ui 5.0.1 → 5.0.3

package/dist/components/atoms/tags/InlineTag.d.ts

@@ -5,6 +5,7 @@ export interface InlineTagProps {
     weight?: "medium" | "semiBold" | "bold";
     backgroundColor?: "bleu-allaw" | "actions-error" | "actions-valid" | "actions-warning" | "mid-grey";
     startIcon?: string;
+    style?: "default" | "border";
 }
 declare const InlineTag: React.FC<InlineTagProps>;
 export default InlineTag;

package/dist/components/atoms/tags/InlineTag.js

@@ -3,7 +3,7 @@ import React from "react";
 import TinyInfo from "../typography/TinyInfo";
 import styles from "./inlineTag.module.css";
 var InlineTag = function (_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? "14" : _b, _c = _a.weight, weight = _c === void 0 ? "medium" : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? "bleu-allaw" : _d, startIcon = _a.startIcon;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? "14" : _b, _c = _a.weight, weight = _c === void 0 ? "medium" : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? "bleu-allaw" : _d, startIcon = _a.startIcon, _e = _a.style, style = _e === void 0 ? "default" : _e;
     var variant;
     if (weight === "bold") {
         variant = "bold".concat(size);
@@ -14,7 +14,23 @@ var InlineTag = function (_a) {
     else {
         variant = "".concat(weight).concat(size);
     }
-    return (React.createElement("div", { className: "".concat(styles.inlineTag, " ").concat(styles["bg-".concat(backgroundColor)]) },
-        React.createElement(TinyInfo, { text: text, variant: variant, color: "pure-white", startIcon: startIcon })));
+    var isBorderStyle = style === "border";
+    var styleClass = isBorderStyle
+        ? styles["border-".concat(backgroundColor)]
+        : styles["bg-".concat(backgroundColor)];
+    // Mapping des couleurs pour TinyInfo
+    var getTextColor = function () {
+        if (!isBorderStyle)
+            return "pure-white";
+        // actions-warning n'est pas supporté par TinyInfo, on utilise une classe CSS custom
+        if (backgroundColor === "actions-warning")
+            return undefined;
+        // Pour les autres couleurs, on peut les utiliser directement
+        return backgroundColor;
+    };
+    return (React.createElement("div", { className: "".concat(styles.inlineTag, " ").concat(styleClass) },
+        React.createElement(TinyInfo, { text: text, variant: variant, color: getTextColor(), startIcon: startIcon, className: isBorderStyle && backgroundColor === "actions-warning"
+                ? styles["color-".concat(backgroundColor)]
+                : undefined })));
 };
 export default InlineTag;

package/dist/components/atoms/tags/InlineTag.stories.d.ts

@@ -49,13 +49,24 @@ declare namespace _default {
             let description_4: string;
             export { description_4 as description };
         }
+        namespace style {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+            let options_3: string[];
+            export { options_3 as options };
+            let description_5: string;
+            export { description_5 as description };
+        }
     }
     export namespace parameters {
         namespace docs {
-            export namespace description_5 {
+            export namespace description_6 {
                 let component: string;
             }
-            export { description_5 as description };
+            export { description_6 as description };
         }
     }
 }
@@ -65,18 +76,34 @@ export const WithIcon: any;
 export const Error: any;
 export const Warning: any;
 export const Small: any;
+export const BorderStyle: any;
+export const BorderWithIcon: any;
 export function AllVariants(): React.JSX.Element;
 export namespace AllVariants {
     export namespace parameters_1 {
         export namespace docs_1 {
-            export namespace description_6 {
+            export namespace description_7 {
                 let story: string;
             }
-            export { description_6 as description };
+            export { description_7 as description };
         }
         export { docs_1 as docs };
     }
     export { parameters_1 as parameters };
 }
+export function AllBorderVariants(): React.JSX.Element;
+export namespace AllBorderVariants {
+    export namespace parameters_2 {
+        export namespace docs_2 {
+            export namespace description_8 {
+                let story_1: string;
+                export { story_1 as story };
+            }
+            export { description_8 as description };
+        }
+        export { docs_2 as docs };
+    }
+    export { parameters_2 as parameters };
+}
 import InlineTag from "./InlineTag";
 import React from "react";

package/dist/components/atoms/tags/InlineTag.stories.js

@@ -45,6 +45,11 @@ export default {
             control: { type: "text" },
             description: "Icône à afficher au début (classe CSS)",
         },
+        style: {
+            control: { type: "select" },
+            options: ["default", "border"],
+            description: "Style du tag (default: fond coloré, border: bordure colorée)",
+        },
     },
     parameters: {
         docs: {
@@ -93,6 +98,23 @@ Small.args = {
     weight: "medium",
     backgroundColor: "mid-grey",
 };
+export var BorderStyle = Template.bind({});
+BorderStyle.args = {
+    text: "Style Border",
+    size: "14",
+    weight: "medium",
+    backgroundColor: "bleu-allaw",
+    style: "border",
+};
+export var BorderWithIcon = Template.bind({});
+BorderWithIcon.args = {
+    text: "Certifié",
+    size: "14",
+    weight: "semiBold",
+    backgroundColor: "actions-valid",
+    startIcon: "allaw-icon-check",
+    style: "border",
+};
 export var AllVariants = function () { return (React.createElement("div", { style: {
         display: "flex",
         flexWrap: "wrap",
@@ -114,3 +136,24 @@ AllVariants.parameters = {
         },
     },
 };
+export var AllBorderVariants = function () { return (React.createElement("div", { style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "12px",
+        alignItems: "center",
+    } },
+    React.createElement(InlineTag, { text: "Bleu Allaw", backgroundColor: "bleu-allaw", style: "border" }),
+    React.createElement(InlineTag, { text: "Succ\u00E8s", backgroundColor: "actions-valid", startIcon: "allaw-icon-check", style: "border" }),
+    React.createElement(InlineTag, { text: "Erreur", backgroundColor: "actions-error", startIcon: "allaw-icon-alert", style: "border" }),
+    React.createElement(InlineTag, { text: "Attention", backgroundColor: "actions-warning", startIcon: "allaw-icon-warning", style: "border" }),
+    React.createElement(InlineTag, { text: "Neutre", backgroundColor: "mid-grey", style: "border" }),
+    React.createElement(InlineTag, { text: "Petit 12px", size: "12", backgroundColor: "bleu-allaw", style: "border" }),
+    React.createElement(InlineTag, { text: "Gras", weight: "bold", backgroundColor: "actions-valid", style: "border" }),
+    React.createElement(InlineTag, { text: "Semi-Bold", weight: "semiBold", backgroundColor: "bleu-allaw", style: "border" }))); };
+AllBorderVariants.parameters = {
+    docs: {
+        description: {
+            story: "Toutes les variantes du composant InlineTag avec le style border.",
+        },
+    },
+};

package/dist/components/atoms/tags/inlineTag.module.css

@@ -26,3 +26,48 @@
 .bg-mid-grey {
   background-color: #728ea7;
 }
+
+.border-bleu-allaw {
+  background-color: #ffffff;
+  border: 1px solid #25beeb;
+}
+
+.border-actions-error {
+  background-color: #ffffff;
+  border: 1px solid #e15151;
+}
+
+.border-actions-valid {
+  background-color: #ffffff;
+  border: 1px solid #29a36a;
+}
+
+.border-actions-warning {
+  background-color: #ffffff;
+  border: 1px solid #ffc857;
+}
+
+.border-mid-grey {
+  background-color: #ffffff;
+  border: 1px solid #728ea7;
+}
+
+.color-bleu-allaw {
+  color: #25beeb;
+}
+
+.color-actions-error {
+  color: #e15151;
+}
+
+.color-actions-valid {
+  color: #29a36a;
+}
+
+.color-actions-warning {
+  color: #ffc857 !important;
+}
+
+.color-mid-grey {
+  color: #728ea7;
+}

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

@@ -1,15 +1,5 @@
 @import "../../../styles/colors.css";
 
-:root {
-  --heading-h1-font-size: 60px;
-  --heading-h2-font-size: 36px;
-  --heading-h3-font-size: 28px;
-  --heading-h4-font-size: 24px;
-  --heading-h5-font-size: 20px;
-  --heading-h6-font-size: 18px;
-  --heading-h7-font-size: 14px;
-}
-
 .heading {
   font-family: Poppins;
   font-style: normal;
@@ -55,35 +45,6 @@
   font-weight: 600;
 }
 
-/* Responsive heading - adjusts font-size only, keeps semantic HTML tag */
-.heading.responsive {
-  /* Use the base variant size as fallback for mobile */
-}
-
-@media (min-width: 480px) {
-  .heading.responsive {
-    font-size: var(--font-size-480) !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .heading.responsive {
-    font-size: var(--font-size-768) !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .heading.responsive {
-    font-size: var(--font-size-1024) !important;
-  }
-}
-
-@media (min-width: 1440px) {
-  .heading.responsive {
-    font-size: var(--font-size-1440) !important;
-  }
-}
-
 .heading.color-bleu-allaw {
   color: var(--bleu-allaw);
 }

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

@@ -1,28 +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 ? "noir" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "left" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
-    // Size mapping for responsive sizes
-    var sizeMap = {
-        h1: "60px",
-        h2: "36px",
-        h3: "28px",
-        h4: "24px",
-        h5: "20px",
-        h6: "18px",
-        h7: "14px",
-    };
-    // Generate responsive class if responsiveSize is provided
-    var responsiveClass = responsiveSize ? "responsive" : "";
-    // Generate inline style for responsive sizes
-    var responsiveStyle = responsiveSize
-        ? {
-            "--font-size-480": sizeMap[responsiveSize[480] || variant],
-            "--font-size-768": sizeMap[responsiveSize[768] || variant],
-            "--font-size-1024": sizeMap[responsiveSize[1024] || variant],
-            "--font-size-1440": sizeMap[responsiveSize[1440] || variant],
-        }
-        : undefined;
-    return (React.createElement(Component, { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align, " ").concat(responsiveClass).trim(), style: responsiveStyle }, 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 ? "left" : _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

@@ -46,7 +46,12 @@ declare namespace _default {
         }
     }
     export namespace args {
-        let responsiveSize_1: undefined;
+        let responsiveSize_1: {
+            480: string;
+            768: string;
+            1024: string;
+            1440: string;
+        };
         export { responsiveSize_1 as responsiveSize };
     }
     export namespace parameters {

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

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from "react";
-import Heading from "./Heading";
 import "../../../styles/global.css";
+import Heading from "./Heading";
 export default {
     title: "Components/UI-Variables/Typography/Heading",
     component: Heading,
@@ -50,7 +50,12 @@ export default {
     },
     args: {
         // Valeurs par défaut pour tous les stories
-        responsiveSize: undefined,
+        responsiveSize: {
+            480: "h5",
+            768: "h4",
+            1024: "h3",
+            1440: "h2",
+        },
     },
     parameters: {
         backgrounds: {

package/package.json

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