@cgi-learning-hub/ui/dist/components/stories/Badge.stories.es.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { c as s } from "../../createSvgIcon-DFIM5PqN.js";
import { Box as n } from "@mui/material";
import { B as t } from "../../Badge-2Kgbx-Cs.js";
const a = s(/* @__PURE__ */ r("path", {
  d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"
}), "Mail"), m = {
  title: "Components/Badge",
  component: t,
  parameters: {
    docs: {
      description: {
        component: "Badge permet d'afficher des notifications peu invasives sur un élément parent."
      }
    }
  },
  argTypes: {
    color: {
      control: { type: "select" },
      options: ["primary", "secondary", "error", "info", "success", "warning"],
      description: "Couleur du badge"
    },
    variant: {
      control: { type: "select" },
      options: ["standard", "dot"],
      description: "Type de badge : standard ou dot"
    },
    showZero: {
      control: "boolean",
      description: "Affiche le badge même si badgeContent = 0"
    },
    invisible: {
      control: "boolean",
      description: "Masque complètement le badge"
    },
    max: {
      control: { type: "number", min: 1 },
      description: "Valeur maximale avant d'afficher max+"
    },
    overlap: {
      control: { type: "select" },
      options: ["rectangular", "circular"],
      description: "Forme de l'élément parent"
    },
    anchorOrigin: {
      control: { type: "object" },
      defaultValue: { vertical: "top", horizontal: "right" },
      description: "Position du badge par rapport à l'élément parent"
    },
    badgeContent: {
      control: { type: "number", min: 0 },
      description: "Contenu numérique du badge (indiqué si variant=standard)"
    }
  }
}, g = {
  render: (e) => /* @__PURE__ */ r(n, { sx: { display: "flex", gap: 2, alignItems: "center" }, children: ["primary", "secondary", "error", "info", "success", "warning"].map(
    (o) => /* @__PURE__ */ r(t, { ...e, color: o, children: /* @__PURE__ */ r(a, {}) }, o)
  ) }),
  args: {
    badgeContent: 5,
    variant: "standard",
    showZero: !1,
    invisible: !1,
    max: 99,
    overlap: "rectangular",
    anchorOrigin: { vertical: "top", horizontal: "right" }
  },
  parameters: {
    docs: {
      description: {
        story: "Montre toutes les couleurs prédéfinies de MUI Badge."
      }
    }
  }
}, h = {
  args: {
    badgeContent: 0,
    showZero: !0,
    color: "primary",
    variant: "standard",
    invisible: !1,
    max: 99,
    overlap: "rectangular",
    anchorOrigin: { vertical: "top", horizontal: "right" },
    children: /* @__PURE__ */ r(a, {})
  },
  parameters: {
    docs: {
      description: {
        story: "Utilise `showZero` pour afficher le badge même lorsque `badgeContent` est à 0."
      }
    }
  }
}, u = {
  args: {
    variant: "dot",
    color: "error",
    invisible: !1,
    overlap: "circular",
    anchorOrigin: { vertical: "top", horizontal: "right" },
    children: /* @__PURE__ */ r(a, {})
  },
  parameters: {
    docs: {
      description: {
        story: "Affiche un petit point rouge (`variant='dot'`) sur une icône."
      }
    }
  }
}, v = {
  render: (e) => /* @__PURE__ */ i(n, { sx: { display: "flex", gap: 4, alignItems: "center" }, children: [
    /* @__PURE__ */ r(t, { ...e, variant: "dot", color: "error" }),
    /* @__PURE__ */ r(
      t,
      {
        ...e,
        variant: "standard",
        badgeContent: 7,
        color: "primary"
      }
    )
  ] }),
  parameters: {
    docs: {
      description: {
        story: "Affiche `variant='dot'` et `variant='standard'` sans icônes."
      }
    }
  }
}, f = {
  render: (e) => /* @__PURE__ */ r(n, { sx: { display: "flex", gap: 4, alignItems: "center" }, children: [
    { vertical: "top", horizontal: "left" },
    { vertical: "top", horizontal: "right" },
    { vertical: "bottom", horizontal: "left" },
    { vertical: "bottom", horizontal: "right" }
  ].map((o) => /* @__PURE__ */ r(
    t,
    {
      ...e,
      anchorOrigin: o,
      children: /* @__PURE__ */ r(a, {})
    },
    `${o.vertical}-${o.horizontal}`
  )) }),
  args: {
    badgeContent: 10,
    color: "secondary",
    variant: "standard",
    invisible: !1,
    overlap: "rectangular",
    anchorOrigin: { vertical: "top", horizontal: "right" }
  },
  parameters: {
    docs: {
      description: {
        story: "Positionne le badge sur les quatre coins possibles."
      }
    }
  }
}, b = {
  args: {
    badgeContent: 120,
    max: 99,
    color: "info",
    variant: "standard",
    showZero: !1,
    invisible: !1,
    overlap: "rectangular",
    anchorOrigin: { vertical: "top", horizontal: "right" },
    children: /* @__PURE__ */ r(a, {})
  },
  parameters: {
    docs: {
      description: {
        story: "Limite l'affichage numérique avec la prop `max` (ex: 99+)."
      }
    }
  }
};
export {
  g as Colors,
  u as Dot,
  b as MaxValue,
  v as NoIcon,
  f as Origin,
  h as ShowZero,
  m as default
};