allaw-ui 5.0.2 → 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/package.json

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