allaw-ui 3.5.0 → 3.5.2

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

@@ -0,0 +1,25 @@
+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;
+    };
+    /**
+     * 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

@@ -0,0 +1,47 @@
+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, _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

@@ -0,0 +1,181 @@
+@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: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, #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 {
+  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(--tag-light-red, #fdf2f2);
+}
+
+.bg-light-blue {
+  background-color: var(--blue-tag-light, #daebfb);
+}
+
+.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(--tag-red, #e15151);
+}
+
+.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;
+}
+
+@keyframes rotateReflection {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,76 @@
+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 parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+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,111 @@
+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: {
+        count: {
+            control: { type: "number" },
+            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",
+        },
+        iconClassName: {
+            control: { type: "text" },
+            description: "Classe CSS de l’icône à afficher",
+        },
+        iconAriaLabel: {
+            control: { type: "text" },
+            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.",
+            },
+        },
+    },
+};
+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 = {
+    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 = {
+    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 = {
+    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 = {
+    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/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/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";
@@ -24,3 +24,7 @@
   font-weight: 500;
   font-style: normal;
 }
+
+:root {
+  --font-open-sans: "Open Sans", sans-serif;
+}

package/package.json

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