allaw-ui 3.7.3 → 3.7.4

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

@@ -1,27 +1,23 @@
 import React from "react";
 export interface InboxButtonProps {
-    /** Nombre d'éléments à afficher */
-    count?: number;
-    /** Callback au clic */
-    onClick?: () => void;
     /** Textes à afficher suivant la valeur de count */
     labels: {
         none: string;
         one: string;
         multiple: string;
     };
-    /** Identifiant pour les tests Playwright */
-    dataCy?: string;
-    /**
-     * Thème de couleur automatique :
-     * - "notification" : bleu si 0, rouge sinon (et disabled si 0)
-     * - "qualification" : vert si count>0, gris sinon
-     */
+    /** Nombre d'éléments à afficher */
+    count?: number;
+    /** Callback au clic */
+    onClick?: () => void;
+    /** Thème visuel */
     scheme?: "notification" | "qualification";
     /** Classe CSS de l'icône à gauche */
     iconClassName?: string;
     /** aria-label de l'icône */
     iconAriaLabel?: string;
+    /** Identifiant pour les tests Playwright */
+    dataCy?: string;
 }
 declare const InboxButton: React.FC<InboxButtonProps>;
 export default InboxButton;

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

@@ -1,47 +1,35 @@
-import clsx from "clsx";
 import React from "react";
 import styles from "./InboxButton.module.css";
 var InboxButton = function (_a) {
-    var _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, labels = _a.labels, dataCy = _a.dataCy, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel;
-    var isZero = count === 0;
-    var isDisabled = scheme === "qualification" && isZero;
-    var isQualificationZero = scheme === "qualification" && isZero;
-    // Choix du label
-    var label = isZero
-        ? labels.none
-        : count === 1
-            ? labels.one
-            : labels.multiple.replace("{{count}}", String(count));
-    // Choix automatique des classes bg + text
-    var bgKey;
-    var colorKey;
-    if (scheme === "notification") {
-        if (isZero) {
-            bgKey = "light-blue";
-            colorKey = "blue";
-        }
-        else {
-            bgKey = "light-red";
-            colorKey = "red";
-        }
-    }
-    else {
-        // qualification
-        if (isZero) {
-            bgKey = "pure-white";
-            colorKey = "mid-grey";
-        }
-        else {
-            bgKey = "light-red";
-            colorKey = "red";
-        }
-    }
-    return (React.createElement("button", { className: clsx(styles.inboxBtn, isDisabled && styles.disabled, isQualificationZero && styles.qualificationZero, !isDisabled && !isQualificationZero && styles["bg-".concat(bgKey)], scheme === "qualification" &&
-            !isQualificationZero &&
-            styles.qualificationActive, scheme === "notification" && !isZero && styles.notifActive, scheme === "qualification" && !isZero && styles.shiny), disabled: isDisabled, onClick: onClick, "data-cy": dataCy },
-        iconClassName && (React.createElement("i", { className: clsx(styles.icon, iconClassName, !isDisabled && !isQualificationZero && styles["color-".concat(colorKey)], isQualificationZero && styles.colorDarkGrey, scheme === "qualification" &&
-                !isQualificationZero &&
-                styles.colorNoir), "aria-label": iconAriaLabel })),
-        React.createElement("span", { className: clsx(styles.label, isDisabled && styles.labelDisabled, !isDisabled && !isQualificationZero && styles["color-".concat(colorKey)], isQualificationZero && styles.colorDarkGrey, scheme === "qualification" && !isQualificationZero && styles.colorNoir) }, label)));
+    var labels = _a.labels, _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel, dataCy = _a.dataCy;
+    // Calcul du label
+    var getLabel = function () {
+        if (count === 0)
+            return labels.none;
+        if (count === 1)
+            return labels.one;
+        return labels.multiple.replace("{{count}}", String(count));
+    };
+    // Logique des états
+    var isNotificationZero = scheme === "notification" && count === 0;
+    var isNotificationActive = scheme === "notification" && count > 0;
+    var isQualificationZero = scheme === "qualification" && count === 0;
+    var isQualificationActive = scheme === "qualification" && count > 0;
+    // Le bouton est disabled seulement pour notification à 0
+    var isDisabled = isNotificationZero;
+    // Classes CSS
+    var buttonClasses = [
+        styles.inboxBtn,
+        isNotificationZero && styles.notificationZero,
+        isNotificationActive && styles.notificationActive,
+        isQualificationZero && styles.qualificationZero,
+        isQualificationActive && styles.qualificationActive,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    var iconClasses = [styles.icon, iconClassName].filter(Boolean).join(" ");
+    return (React.createElement("button", { className: buttonClasses, disabled: isDisabled, onClick: onClick, "data-cy": dataCy },
+        iconClassName && (React.createElement("i", { className: iconClasses, "aria-label": iconAriaLabel })),
+        React.createElement("span", { className: styles.label }, getLabel())));
 };
 export default InboxButton;

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

@@ -1,196 +1,118 @@
-/* Effet shiny pour les boutons qualification actifs */
-.shiny {
-  position: relative;
-  overflow: hidden;
-}
-
-.shiny::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    120deg,
-    transparent,
-    rgba(225, 81, 81, 0.4),
-    transparent
-  );
-  animation: shine 5s ease-in-out infinite;
-  transition: left 0.65s ease-in-out;
-}
-
-@keyframes shine {
-  0% {
-    left: -100%;
-  }
-  13% {
-    left: 100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
+/* ===========================================
+   BASE STYLES
+   =========================================== */
 
 .inboxBtn {
+  /* Layout */
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem;
+
+  /* Dimensions */
   width: 100%;
+  padding: 0.5rem;
+
+  /* Style */
   border: none;
   border-radius: 0.5rem;
-}
-
-.notifActive {
-  cursor: pointer;
-}
-
-.notifActive:hover {
-  cursor: pointer;
-  background-color: #fbe8e8;
-}
-
-.qualificationActive:hover {
-  background-color: #fbe8e8;
-  border: 0px solid #fbe8e8;
-  cursor: pointer;
-}
-
-.qualificationActive:hover .icon {
-  color: #456073;
-}
-
-.qualificationActive:hover .label {
-  color: #456073;
-}
-
-.disabled {
-  cursor: default;
-  background-color: #daebfb;
-  /* color: #1985e8; */
-}
-
-.qualificationZero {
-  cursor: initial;
-  background-color: #ffffff;
-  color: #d1dce8;
-  border: 0px solid #e6edf5;
-}
-
-.qualificationActive {
-  background-color: #fdf2f2;
-  color: #456073;
-  position: relative;
-  border: 0px solid #fdf2f2;
-  overflow: hidden;
-}
-
-.colorDarkGrey {
-  color: #d1dce8;
-}
-
-.colorNoir {
-  color: #456073;
-}
 
-.label {
+  /* Typography */
   font-family: "Open Sans", sans-serif;
   font-size: 15px;
-  font-style: normal;
   font-weight: 600;
   line-height: normal;
 }
 
-.labelDisabled {
-  color: #d1dce8;
-}
-
-.bg-mid-grey {
-  background-color: #728ea7;
-}
-
-.bg-dark-grey {
-  background-color: #456073;
-}
-
-.bg-noir {
-  background-color: #000000;
+.icon {
+  font-size: 20px;
+  line-height: 1;
+  padding-right: 0.15rem;
 }
 
-.bg-pure-white {
-  background-color: #ffffff;
+.label {
+  /* Hérite de la couleur du bouton parent */
 }
 
-.bg-light-red {
-  background-color: #fdf2f2;
-}
+/* ===========================================
+   NOTIFICATION STATES
+   =========================================== */
 
-.bg-light-blue {
+/* Notification Zero: disabled, bleu */
+.notificationZero {
   background-color: #daebfb;
+  color: #1985e8;
+  cursor: default;
 }
 
-.bg-dark-green {
-  background-color: #29a36a;
-}
-
-.bg-grey-venom {
-  background-color: #e6edf5;
-}
-
-.bg-grey-light {
-  background-color: #f6fcfe;
+/* Notification Active: rouge, cliquable */
+.notificationActive {
+  background-color: #fdf2f2;
+  color: #e15151;
+  cursor: pointer;
 }
 
-.color-grey-light {
-  color: #f6fcfe;
+.notificationActive:hover {
+  background-color: #fbe8e8;
 }
 
-.color-mid-grey {
-  color: #728ea7;
-}
+/* ===========================================
+   QUALIFICATION STATES
+   =========================================== */
 
-.color-dark-grey {
-  color: #456073;
-}
-
-.color-noir {
-  color: #000000;
+/* Qualification Zero: rouge, cliquable */
+.qualificationZero {
+  background-color: #fdf2f2;
+  color: #e15151;
+  cursor: pointer;
 }
 
-.color-pure-white {
-  color: #ffffff;
+.qualificationZero:hover {
+  background-color: #fbe8e8;
 }
 
-.color-red {
+/* Qualification Active: rouge, cliquable + effet shiny */
+.qualificationActive {
+  background-color: #fdf2f2;
   color: #e15151;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
 
-.color-green {
-  color: #29a36a;
+.qualificationActive:hover {
+  background-color: #fbe8e8;
 }
 
-.color-blue {
-  color: #1985e8;
-}
+/* ===========================================
+   SHINY EFFECT (qualification active uniquement)
+   =========================================== */
 
-.icon {
-  font-size: 20px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  padding-right: 0.15rem;
+.qualificationActive::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    120deg,
+    transparent,
+    rgba(225, 81, 81, 0.4),
+    transparent
+  );
+  animation: shine 5s ease-in-out infinite;
 }
 
-@keyframes rotateReflection {
-  from {
-    transform: rotate(0deg);
+@keyframes shine {
+  0% {
+    left: -100%;
+  }
+  13% {
+    left: 100%;
   }
-  to {
-    transform: rotate(360deg);
+  100% {
+    left: 100%;
   }
 }

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

@@ -2,75 +2,67 @@ declare namespace _default {
     export let title: string;
     export { InboxButton as component };
     export let tags: string[];
-    export let argTypes: {
-        count: {
-            control: {
-                type: string;
-            };
-            description: string;
-            defaultValue: number;
-        };
-        "labels.none": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        "labels.one": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        "labels.multiple": {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-            };
-        };
-        scheme: {
-            control: {
-                type: string;
-                options: string[];
-            };
-            description: string;
-        };
-        iconClassName: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        iconAriaLabel: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        onClick: {
-            action: string;
-        };
-    };
+    export namespace argTypes {
+        namespace labels {
+            let control: string;
+            let description: string;
+        }
+        namespace count {
+            export namespace control_1 {
+                let type: string;
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+            export let defaultValue: number;
+        }
+        namespace scheme {
+            export namespace control_2 {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace iconClassName {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace iconAriaLabel {
+            export namespace control_4 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
     export namespace parameters {
         namespace docs {
-            namespace description {
+            export namespace description_5 {
                 let component: string;
             }
+            export { description_5 as description };
         }
     }
 }
 export default _default;
-export const AucuneNotification: any;
-export const UneNotification: any;
-export const PlusieursNotifications: any;
-export const ClientQualifications: any;
+export const NotificationZero: any;
+export const NotificationOne: any;
+export const NotificationMultiple: any;
+export const QualificationZero: any;
+export const QualificationOne: any;
+export const QualificationMultiple: any;
+export const SansIcone: any;
 import InboxButton from "./InboxButton";

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

@@ -17,95 +17,127 @@ export default {
     component: InboxButton,
     tags: ["autodocs"],
     argTypes: {
+        labels: {
+            control: "object",
+            description: "Textes à afficher selon le count",
+        },
         count: {
             control: { type: "number" },
-            description: "Nombre d’éléments à traiter",
+            description: "Nombre d'éléments à traiter",
             defaultValue: 0,
         },
-        "labels.none": {
-            control: { type: "text" },
-            description: "Texte affiché si count === 0",
-            table: { category: "labels" },
-        },
-        "labels.one": {
-            control: { type: "text" },
-            description: "Texte affiché si count === 1",
-            table: { category: "labels" },
-        },
-        "labels.multiple": {
-            control: { type: "text" },
-            description: "Texte affiché si count > 1 (utiliser {{count}})",
-            table: { category: "labels" },
-        },
         scheme: {
             control: { type: "select", options: ["notification", "qualification"] },
-            description: "Thème de couleur du bouton",
+            description: "Thème visuel du bouton",
         },
         iconClassName: {
             control: { type: "text" },
-            description: "Classe CSS de l’icône à afficher",
+            description: "Classe CSS de l'icône à afficher",
         },
         iconAriaLabel: {
             control: { type: "text" },
-            description: "Label accessible pour l’icône",
+            description: "Label accessible pour l'icône",
         },
         onClick: { action: "clicked" },
     },
     parameters: {
         docs: {
             description: {
-                component: "Bouton affichant un nombre d’éléments avec style conditionnel en fonction du thème.",
+                component: "Bouton avec compteur dynamique et thèmes visuels configurables pour notifications et qualifications.",
             },
         },
     },
 };
-var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", display: "flex", gap: "20px", flexWrap: "wrap" } },
+var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", maxWidth: "300px" } },
     React.createElement(InboxButton, __assign({}, args)))); };
-export var AucuneNotification = Template.bind({});
-AucuneNotification.args = {
+// ===========================================
+// NOTIFICATION SCHEME
+// ===========================================
+export var NotificationZero = Template.bind({});
+NotificationZero.args = {
     count: 0,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var UneNotification = Template.bind({});
-UneNotification.args = {
+export var NotificationOne = Template.bind({});
+NotificationOne.args = {
     count: 1,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var PlusieursNotifications = Template.bind({});
-PlusieursNotifications.args = {
-    count: 7,
+export var NotificationMultiple = Template.bind({});
+NotificationMultiple.args = {
+    count: 5,
+    scheme: "notification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune notification",
+        one: "1 notification",
+        multiple: "{{count}} notifications",
     },
-    scheme: "notification",
     iconClassName: "allaw-icon-inbox",
-    iconAriaLabel: "Inbox",
+    iconAriaLabel: "Notifications",
 };
-export var ClientQualifications = Template.bind({});
-ClientQualifications.args = {
-    count: 5,
+// ===========================================
+// QUALIFICATION SCHEME
+// ===========================================
+export var QualificationZero = Template.bind({});
+QualificationZero.args = {
+    count: 0,
+    scheme: "qualification",
     labels: {
-        none: "Aucune demande",
-        one: "1 demande en attente",
-        multiple: "{{count}} demandes en attente",
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
     },
+    iconClassName: "allaw-icon-check-circle",
+    iconAriaLabel: "Qualification",
+};
+export var QualificationOne = Template.bind({});
+QualificationOne.args = {
+    count: 1,
     scheme: "qualification",
+    labels: {
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
+    },
     iconClassName: "allaw-icon-check-circle",
-    iconAriaLabel: "Check",
+    iconAriaLabel: "Qualification",
+};
+export var QualificationMultiple = Template.bind({});
+QualificationMultiple.args = {
+    count: 3,
+    scheme: "qualification",
+    labels: {
+        none: "Aucune qualification",
+        one: "1 contact à qualifier",
+        multiple: "{{count}} contacts à qualifier",
+    },
+    iconClassName: "allaw-icon-check-circle",
+    iconAriaLabel: "Qualification",
+};
+// ===========================================
+// SANS ICÔNE
+// ===========================================
+export var SansIcone = Template.bind({});
+SansIcone.args = {
+    count: 2,
+    scheme: "qualification",
+    labels: {
+        none: "Aucun élément",
+        one: "1 élément",
+        multiple: "{{count}} éléments",
+    },
 };

package/package.json

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