allaw-ui 3.5.1 → 3.5.3

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

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

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

@@ -2,15 +2,46 @@ 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)));
+    var _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, labels = _a.labels, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel;
+    var isZero = count === 0;
+    var isDisabled = scheme === "notification" && 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 = "pure-white";
+            colorKey = "noir";
+        }
+    }
+    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), disabled: isDisabled, onClick: onClick },
+        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)));
 };
 export default InboxButton;

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

@@ -14,14 +14,86 @@
   cursor: pointer;
 }
 
-.inboxBtn:hover {
-  filter: brightness(0.95);
+.inboxBtn:hover:not(.disabled):not(.qualificationZero):not(
+    .qualificationActive
+  ) {
+  background-color: #fbe8e8;
+}
+
+.qualificationActive:hover {
+  background-color: var(--noir);
+  color: var(--bleu-allaw);
+}
+
+.qualificationActive:hover .icon {
+  color: var(--bleu-allaw);
+}
+
+.qualificationActive:hover .label {
+  color: var(--bleu-allaw);
 }
 
 .disabled {
   cursor: initial;
-  background-color: var(--tag-light-blue);
-  color: var(--tag-blue);
+  background-color: var(--tag-light-blue, #daebfb);
+  color: var(--blue-tag-dark, #1985e8);
+}
+
+.qualificationZero {
+  cursor: initial;
+  background-color: var(--pure-white, #ffffff);
+  color: var(venom-grey-dark, #d1dce8);
+  border: 2px solid #8b8e92;
+}
+
+.qualificationActive {
+  background-color: transparent;
+  color: var(--noir);
+  position: relative;
+  border: 2px solid var(--noir);
+  overflow: hidden;
+}
+
+.qualificationActive::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 0.5rem;
+  background: var(--noir);
+  z-index: -1;
+}
+
+.qualificationActive::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 0.5rem;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    transparent 70deg,
+    rgba(230, 237, 245, 0.8) 85deg,
+    rgba(230, 237, 245, 1) 90deg,
+    rgba(230, 237, 245, 0.8) 95deg,
+    transparent 110deg,
+    transparent 360deg
+  );
+  animation: rotateReflection 4s linear infinite;
+  z-index: -1;
+}
+
+.colorDarkGrey {
+  color: #8b8e92;
+}
+
+.colorNoir {
+  color: var(--noir);
 }
 
 .label {
@@ -53,11 +125,11 @@
 }
 
 .bg-light-red {
-  background-color: var(--red-tag-light);
+  background-color: var(--tag-light-red, #fdf2f2);
 }
 
 .bg-light-blue {
-  background-color: var(--blue-tag-light);
+  background-color: var(--blue-tag-light, #daebfb);
 }
 
 .bg-dark-green {
@@ -81,7 +153,7 @@
 }
 
 .color-red {
-  color: var(--actions-error);
+  color: var(--tag-red, #e15151);
 }
 
 .color-green {
@@ -98,3 +170,12 @@
   display: flex;
   align-items: center;
 }
+
+@keyframes rotateReflection {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -2,90 +2,69 @@ 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 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 parameters {
         namespace docs {
-            export namespace description_8 {
+            namespace description {
                 let component: string;
             }
-            export { description_8 as description };
         }
     }
 }

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

@@ -17,67 +17,44 @@ export default {
     component: InboxButton,
     tags: ["autodocs"],
     argTypes: {
-        itemNumber: {
+        count: {
             control: { type: "number" },
             description: "Nombre d’éléments à traiter",
             defaultValue: 0,
         },
-        labelIfNone: {
+        "labels.none": {
             control: { type: "text" },
-            description: "Texte affiché si itemNumber === 0",
+            description: "Texte affiché si count === 0",
+            table: { category: "labels" },
         },
-        labelIfOne: {
+        "labels.one": {
             control: { type: "text" },
-            description: "Texte affiché si itemNumber === 1",
+            description: "Texte affiché si count === 1",
+            table: { category: "labels" },
         },
-        labelIfMultiple: {
+        "labels.multiple": {
             control: { type: "text" },
-            description: "Texte affiché si itemNumber > 1 (utiliser {{count}} pour injecter la valeur)",
+            description: "Texte affiché si count > 1 (utiliser {{count}})",
+            table: { category: "labels" },
         },
-        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)",
+        scheme: {
+            control: { type: "select", options: ["notification", "qualification"] },
+            description: "Thème de couleur du bouton",
         },
-        startIcon: {
+        iconClassName: {
             control: { type: "text" },
-            description: "Nom de la classe d’icône (ex : allaw-icon-folder)",
+            description: "Classe CSS de l’icône à afficher",
         },
-        startIconName: {
+        iconAriaLabel: {
             control: { type: "text" },
-            description: "Label accessible pour l’icône (aria-label)",
+            description: "Label accessible pour l’icône",
         },
         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.",
+                component: "Bouton affichant un nombre d’éléments avec style conditionnel en fonction du thème.",
             },
         },
     },
@@ -86,45 +63,49 @@ var Template = function (args) { return (React.createElement("div", { style: { p
     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",
+    count: 0,
+    labels: {
+        none: "Aucune demande",
+        one: "1 demande en attente",
+        multiple: "{{count}} demandes en attente",
+    },
+    scheme: "notification",
+    iconClassName: "allaw-icon-inbox",
+    iconAriaLabel: "Inbox",
 };
 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",
+    count: 1,
+    labels: {
+        none: "Aucune demande",
+        one: "1 demande en attente",
+        multiple: "{{count}} demandes en attente",
+    },
+    scheme: "notification",
+    iconClassName: "allaw-icon-inbox",
+    iconAriaLabel: "Inbox",
 };
 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",
+    count: 7,
+    labels: {
+        none: "Aucune demande",
+        one: "1 demande en attente",
+        multiple: "{{count}} demandes en attente",
+    },
+    scheme: "notification",
+    iconClassName: "allaw-icon-inbox",
+    iconAriaLabel: "Inbox",
 };
 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",
+    count: 5,
+    labels: {
+        none: "Aucune demande",
+        one: "1 demande en attente",
+        multiple: "{{count}} demandes en attente",
+    },
+    scheme: "qualification",
+    iconClassName: "allaw-icon-check-circle",
+    iconAriaLabel: "Check",
 };

package/dist/styles/global.css

@@ -3,7 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-@import "~typeface-open-sans/index.css";
+/* @import "~typeface-open-sans/index.css"; */
 @import "./colors.css";
 
 @import "./icons.css";

package/package.json

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