allaw-ui 3.5.0 → 3.5.1

package/dist/components/atoms/buttons/InboxButton.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type InboxButtonProps = {
+    itemNumber?: number;
+    onClick?: () => void;
+    labelIfNone: string;
+    labelIfOne: string;
+    labelIfMultiple: string;
+    background?: "mid-grey" | "dark-grey" | "noir" | "light-red" | "light-blue" | "dark-green";
+    color?: "mid-grey" | "dark-grey" | "noir" | "pure-white" | "red" | "green" | "blue";
+    startIcon?: string;
+    startIconName?: string;
+};
+declare const InboxButton: ({ itemNumber, onClick, labelIfNone, labelIfOne, labelIfMultiple, background, color, startIcon, startIconName, }: InboxButtonProps) => React.JSX.Element;
+export default InboxButton;

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

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./InboxButton.module.css";
+var InboxButton = function (_a) {
+    var _b = _a.itemNumber, itemNumber = _b === void 0 ? 0 : _b, onClick = _a.onClick, labelIfNone = _a.labelIfNone, labelIfOne = _a.labelIfOne, labelIfMultiple = _a.labelIfMultiple, background = _a.background, color = _a.color, startIcon = _a.startIcon, startIconName = _a.startIconName;
+    var disabled = itemNumber === 0;
+    var label = itemNumber === 0
+        ? labelIfNone
+        : itemNumber === 1
+            ? labelIfOne
+            : labelIfMultiple.replace("{{count}}", String(itemNumber));
+    return (React.createElement("button", { className: clsx(styles.inboxBtn, disabled && styles.disabled, background && styles["bg-".concat(background)]), disabled: disabled, onClick: onClick },
+        startIcon && (React.createElement("i", { className: clsx(styles.icon, startIcon, color && styles["color-".concat(color)]), "aria-label": startIconName })),
+        React.createElement("span", { className: clsx(styles.label, disabled && styles.labelDisabled, color && styles["color-".concat(color)]) }, label)));
+};
+export default InboxButton;

package/dist/components/atoms/buttons/InboxButton.module.css

@@ -0,0 +1,100 @@
+@import "../../../styles/colors.css";
+
+.inboxBtn {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  width: 100%;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.inboxBtn:hover {
+  filter: brightness(0.95);
+}
+
+.disabled {
+  cursor: initial;
+  background-color: var(--tag-light-blue);
+  color: var(--tag-blue);
+}
+
+.label {
+  font-family: var(--font-open-sans);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.labelDisabled {
+  color: var(--tag-blue);
+}
+
+.bg-mid-grey {
+  background-color: var(--mid-grey);
+}
+
+.bg-dark-grey {
+  background-color: var(--dark-grey);
+}
+
+.bg-noir {
+  background-color: var(--noir);
+}
+
+.bg-pure-white {
+  background-color: var(--pure-white);
+}
+
+.bg-light-red {
+  background-color: var(--red-tag-light);
+}
+
+.bg-light-blue {
+  background-color: var(--blue-tag-light);
+}
+
+.bg-dark-green {
+  background-color: var(--green-tag-dark);
+}
+
+.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.color-noir {
+  color: var(--noir);
+}
+
+.color-pure-white {
+  color: var(--pure-white);
+}
+
+.color-red {
+  color: var(--actions-error);
+}
+
+.color-green {
+  color: var(--actions-valid);
+}
+
+.color-blue {
+  color: var(--blue-tag-dark);
+}
+
+.icon {
+  font-size: 24px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}

package/dist/components/atoms/buttons/InboxButton.stories.d.ts

@@ -0,0 +1,97 @@
+declare namespace _default {
+    export let title: string;
+    export { InboxButton as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace itemNumber {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+            let defaultValue: number;
+        }
+        namespace labelIfNone {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace labelIfOne {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace labelIfMultiple {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace background {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+                export let options: string[];
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace color {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace startIcon {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace startIconName {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_8 {
+                let component: string;
+            }
+            export { description_8 as description };
+        }
+    }
+}
+export default _default;
+export const AucuneNotification: any;
+export const UneNotification: any;
+export const PlusieursNotifications: any;
+export const ClientQualifications: any;
+import InboxButton from "./InboxButton";

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

@@ -0,0 +1,130 @@
+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 "../../../styles/global.css";
+import InboxButton from "./InboxButton";
+export default {
+    title: "Components/Atoms/Buttons/InboxButton",
+    component: InboxButton,
+    tags: ["autodocs"],
+    argTypes: {
+        itemNumber: {
+            control: { type: "number" },
+            description: "Nombre d’éléments à traiter",
+            defaultValue: 0,
+        },
+        labelIfNone: {
+            control: { type: "text" },
+            description: "Texte affiché si itemNumber === 0",
+        },
+        labelIfOne: {
+            control: { type: "text" },
+            description: "Texte affiché si itemNumber === 1",
+        },
+        labelIfMultiple: {
+            control: { type: "text" },
+            description: "Texte affiché si itemNumber > 1 (utiliser {{count}} pour injecter la valeur)",
+        },
+        background: {
+            control: {
+                type: "select",
+                options: [
+                    "light-blue",
+                    "light-red",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "tag-light-blue",
+                    "dark-green",
+                ],
+            },
+            description: "Couleur de fond (classe CSS)",
+        },
+        color: {
+            control: {
+                type: "select",
+                options: [
+                    "blue",
+                    "red",
+                    "green",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "pure-white",
+                ],
+            },
+            description: "Couleur du texte (classe CSS)",
+        },
+        startIcon: {
+            control: { type: "text" },
+            description: "Nom de la classe d’icône (ex : allaw-icon-folder)",
+        },
+        startIconName: {
+            control: { type: "text" },
+            description: "Label accessible pour l’icône (aria-label)",
+        },
+        onClick: { action: "clicked" },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Bouton de notification dynamique avec icône, texte conditionnel, et couleurs personnalisables via les classes CSS d’Allaw.",
+            },
+        },
+    },
+};
+var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", display: "flex", gap: "20px", flexWrap: "wrap" } },
+    React.createElement(InboxButton, __assign({}, args)))); };
+export var AucuneNotification = Template.bind({});
+AucuneNotification.args = {
+    itemNumber: 0,
+    labelIfNone: "Aucune notification",
+    labelIfOne: "1 Notification",
+    labelIfMultiple: "{{count}} notifications",
+    background: "light-blue",
+    color: "blue",
+    startIcon: "allaw-icon-inbox",
+    startIconName: "Dossier",
+};
+export var UneNotification = Template.bind({});
+UneNotification.args = {
+    itemNumber: 1,
+    labelIfNone: "Aucune notification",
+    labelIfOne: "1 Notification",
+    labelIfMultiple: "{{count}} notifications",
+    background: "light-red",
+    color: "red",
+    startIcon: "allaw-icon-inbox",
+    startIconName: "Dossier",
+};
+export var PlusieursNotifications = Template.bind({});
+PlusieursNotifications.args = {
+    itemNumber: 7,
+    labelIfNone: "Aucune Notification",
+    labelIfOne: "1 Notification",
+    labelIfMultiple: "{{count}} Notifications",
+    background: "light-red",
+    color: "red",
+    startIcon: "allaw-icon-inbox",
+    startIconName: "Dossier",
+};
+export var ClientQualifications = Template.bind({});
+ClientQualifications.args = {
+    itemNumber: 5,
+    labelIfNone: "Aucun client à qualifier",
+    labelIfOne: "1 Client à qualifier",
+    labelIfMultiple: "{{count}} clients à qualifier",
+    background: "dark-green",
+    color: "pure-white",
+    startIcon: "allaw-icon-check-circle",
+    startIconName: "Dossier",
+};

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

@@ -1,24 +1,26 @@
-export { default as FavoriteToggle } from "./FavoriteToggle";
-export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
-export { default as FilterButton } from "./FilterButton";
-export { default as GhostButton } from "./GhostButton";
-export { default as IconButton } from "./IconButton";
-export { default as PendingDocuments } from "./PendingDocuments";
-export { default as PrimaryButton } from "./PrimaryButton";
-export { default as SecondaryButton } from "./SecondaryButton";
-export { default as TabNavigation } from "./TabNavigation";
-export { default as TertiaryButton } from "./TertiaryButton";
-export { default as OAuthProviderButton } from "./OAuthProviderButton";
 export { default as ActionButton } from "./ActionButton";
+export type { ActionButtonProps } from "./ActionButton";
+export { default as FavoriteToggle } from "./FavoriteToggle";
 export type { FavoriteToggleProps } from "./FavoriteToggle";
+export { default as FilterButton } from "./FilterButton";
 export type { FilterButtonProps } from "./FilterButton";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
+export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";
+export { default as GhostButton } from "./GhostButton";
 export type { GhostButtonProps } from "./GhostButton";
+export { default as IconButton } from "./IconButton";
 export type { IconButtonProps } from "./IconButton";
+export { default as InboxButton } from "./InboxButton";
+export type { InboxButtonProps } from "./InboxButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
+export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
+export { default as PendingDocuments } from "./PendingDocuments";
 export type { PendingDocumentsProps } from "./PendingDocuments";
+export { default as PrimaryButton } from "./PrimaryButton";
 export type { PrimaryButtonProps } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
 export type { SecondaryButtonProps } from "./SecondaryButton";
+export { default as TabNavigation } from "./TabNavigation";
 export type { TabNavigationProps } from "./TabNavigation";
+export { default as TertiaryButton } from "./TertiaryButton";
 export type { TertiaryButtonProps } from "./TertiaryButton";
-export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
-export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";
-export type { ActionButtonProps } from "./ActionButton";

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

@@ -1,12 +1,13 @@
+export { default as ActionButton } from "./ActionButton";
 export { default as FavoriteToggle } from "./FavoriteToggle";
-export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
 export { default as FilterButton } from "./FilterButton";
+export { default as FilterButtonPrimary } from "./FilterButtonPrimary";
 export { default as GhostButton } from "./GhostButton";
 export { default as IconButton } from "./IconButton";
+export { default as InboxButton } from "./InboxButton";
+export { default as OAuthProviderButton } from "./OAuthProviderButton";
 export { default as PendingDocuments } from "./PendingDocuments";
 export { default as PrimaryButton } from "./PrimaryButton";
 export { default as SecondaryButton } from "./SecondaryButton";
 export { default as TabNavigation } from "./TabNavigation";
 export { default as TertiaryButton } from "./TertiaryButton";
-export { default as OAuthProviderButton } from "./OAuthProviderButton";
-export { default as ActionButton } from "./ActionButton";

package/package.json

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