allaw-ui 4.7.5 → 4.7.7

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InlineTagProps {
+    text: string;
+    size?: "14" | "12";
+    weight?: "medium" | "semiBold" | "bold";
+    backgroundColor?: "bleu-allaw" | "actions-error" | "actions-valid" | "actions-warning" | "mid-grey";
+    startIcon?: string;
+}
+declare const InlineTag: React.FC<InlineTagProps>;
+export default InlineTag;

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

@@ -0,0 +1,20 @@
+"use client";
+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 variant;
+    if (weight === "bold") {
+        variant = "bold".concat(size);
+    }
+    else if (weight === "semiBold" && size === "14") {
+        variant = "semiBold14";
+    }
+    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 })));
+};
+export default InlineTag;

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

@@ -0,0 +1,82 @@
+declare namespace _default {
+    export let title: string;
+    export { InlineTag as component };
+    export namespace argTypes {
+        namespace text {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        namespace size {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            export let options: string[];
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace weight {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace backgroundColor {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            let options_2: string[];
+            export { options_2 as options };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace startIcon {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_5 {
+                let component: string;
+            }
+            export { description_5 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithIcon: any;
+export const Error: any;
+export const Warning: any;
+export const Small: any;
+export function AllVariants(): React.JSX.Element;
+export namespace AllVariants {
+    export namespace parameters_1 {
+        export namespace docs_1 {
+            export namespace description_6 {
+                let story: string;
+            }
+            export { description_6 as description };
+        }
+        export { docs_1 as docs };
+    }
+    export { parameters_1 as parameters };
+}
+import InlineTag from "./InlineTag";
+import React from "react";

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

@@ -0,0 +1,116 @@
+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 from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import InlineTag, { InlineTagProps } from "./InlineTag";
+export default {
+    title: "Components/Atoms/Tags/InlineTag",
+    component: InlineTag,
+    argTypes: {
+        text: {
+            control: { type: "text" },
+            description: "Texte à afficher dans le tag",
+        },
+        size: {
+            control: { type: "select" },
+            options: ["14", "12"],
+            description: "Taille du texte",
+        },
+        weight: {
+            control: { type: "select" },
+            options: ["medium", "semiBold", "bold"],
+            description: "Graisse du texte",
+        },
+        backgroundColor: {
+            control: { type: "select" },
+            options: [
+                "bleu-allaw",
+                "actions-error",
+                "actions-valid",
+                "actions-warning",
+                "mid-grey",
+            ],
+            description: "Couleur de fond du tag",
+        },
+        startIcon: {
+            control: { type: "text" },
+            description: "Icône à afficher au début (classe CSS)",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Composant InlineTag - Tag personnalisable avec TinyInfo, couleurs et icônes.",
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(InlineTag, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    text: "Tag par défaut",
+    size: "14",
+    weight: "medium",
+    backgroundColor: "bleu-allaw",
+};
+export var WithIcon = Template.bind({});
+WithIcon.args = {
+    text: "Certifié",
+    size: "14",
+    weight: "semiBold",
+    backgroundColor: "actions-valid",
+    startIcon: "allaw-icon-check",
+};
+export var Error = Template.bind({});
+Error.args = {
+    text: "Erreur",
+    size: "12",
+    weight: "medium",
+    backgroundColor: "actions-error",
+    startIcon: "allaw-icon-alert",
+};
+export var Warning = Template.bind({});
+Warning.args = {
+    text: "Attention",
+    size: "14",
+    weight: "bold",
+    backgroundColor: "actions-warning",
+    startIcon: "allaw-icon-warning",
+};
+export var Small = Template.bind({});
+Small.args = {
+    text: "Petit",
+    size: "12",
+    weight: "medium",
+    backgroundColor: "mid-grey",
+};
+export var AllVariants = function () { return (React.createElement("div", { style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "12px",
+        alignItems: "center",
+    } },
+    React.createElement(InlineTag, { text: "Bleu Allaw", backgroundColor: "bleu-allaw" }),
+    React.createElement(InlineTag, { text: "Succ\u00E8s", backgroundColor: "actions-valid", startIcon: "allaw-icon-check" }),
+    React.createElement(InlineTag, { text: "Erreur", backgroundColor: "actions-error", startIcon: "allaw-icon-alert" }),
+    React.createElement(InlineTag, { text: "Attention", backgroundColor: "actions-warning", startIcon: "allaw-icon-warning" }),
+    React.createElement(InlineTag, { text: "Neutre", backgroundColor: "mid-grey" }),
+    React.createElement(InlineTag, { text: "Petit 12px", size: "12", backgroundColor: "bleu-allaw" }),
+    React.createElement(InlineTag, { text: "Gras", weight: "bold", backgroundColor: "actions-valid" }),
+    React.createElement(InlineTag, { text: "Semi-Bold", weight: "semiBold", backgroundColor: "bleu-allaw" }))); };
+AllVariants.parameters = {
+    docs: {
+        description: {
+            story: "Toutes les variantes du composant InlineTag avec différentes couleurs, tailles et styles.",
+        },
+    },
+};

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

@@ -1,6 +1,8 @@
 export { default as AppointementStatusTag } from "./AppointementStatusTag";
 export { default as FolderStatusTag } from "./FolderStatusTag";
 export { default as OtherStatusTag } from "./OtherStatusTag";
+export { default as InlineTag } from "./InlineTag";
 export type { AppointementStatusTagProps } from "./AppointementStatusTag";
 export type { FolderStatusTagProps } from "./FolderStatusTag";
 export type { OtherStatusTagProps } from "./OtherStatusTag";
+export type { InlineTagProps } from "./InlineTag";

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

@@ -1,3 +1,4 @@
 export { default as AppointementStatusTag } from "./AppointementStatusTag";
 export { default as FolderStatusTag } from "./FolderStatusTag";
 export { default as OtherStatusTag } from "./OtherStatusTag";
+export { default as InlineTag } from "./InlineTag";

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

@@ -0,0 +1,28 @@
+.inlineTag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 50px;
+  white-space: nowrap;
+}
+
+.bg-bleu-allaw {
+  background-color: #25beeb;
+}
+
+.bg-actions-error {
+  background-color: #e15151;
+}
+
+.bg-actions-valid {
+  background-color: #29a36a;
+}
+
+.bg-actions-warning {
+  background-color: #ffc857;
+}
+
+.bg-mid-grey {
+  background-color: #728ea7;
+}

package/dist/index.d.ts

@@ -40,6 +40,8 @@ export type { DatepickerFormProps } from "./components/molecules/datepickerForm/
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
+export { default as InlineTag } from "./components/atoms/tags/InlineTag";
+export type { InlineTagProps } from "./components/atoms/tags/InlineTag";
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Link } from "./components/atoms/typography/Link";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";

package/dist/index.js

@@ -41,6 +41,7 @@ export { default as DatepickerForm } from "./components/molecules/datepickerForm
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
+export { default as InlineTag } from "./components/atoms/tags/InlineTag";
 // Typography
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Link } from "./components/atoms/typography/Link";

package/package.json

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