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

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

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("../../createSvgIcon-CcWpa9Le.cjs"),n=require("@mui/material"),t=require("../../Badge-DXl0Da36.cjs"),a=i.createSvgIcon(e.jsx("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"),s={title:"Components/Badge",component:t.Badge,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)"}}},c={render:r=>e.jsx(n.Box,{sx:{display:"flex",gap:2,alignItems:"center"},children:["primary","secondary","error","info","success","warning"].map(o=>e.jsx(t.Badge,{...r,color:o,children:e.jsx(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."}}}},l={args:{badgeContent:0,showZero:!0,color:"primary",variant:"standard",invisible:!1,max:99,overlap:"rectangular",anchorOrigin:{vertical:"top",horizontal:"right"},children:e.jsx(a,{})},parameters:{docs:{description:{story:"Utilise `showZero` pour afficher le badge même lorsque `badgeContent` est à 0."}}}},d={args:{variant:"dot",color:"error",invisible:!1,overlap:"circular",anchorOrigin:{vertical:"top",horizontal:"right"},children:e.jsx(a,{})},parameters:{docs:{description:{story:"Affiche un petit point rouge (`variant='dot'`) sur une icône."}}}},p={render:r=>e.jsxs(n.Box,{sx:{display:"flex",gap:4,alignItems:"center"},children:[e.jsx(t.Badge,{...r,variant:"dot",color:"error"}),e.jsx(t.Badge,{...r,variant:"standard",badgeContent:7,color:"primary"})]}),parameters:{docs:{description:{story:"Affiche `variant='dot'` et `variant='standard'` sans icônes."}}}},g={render:r=>e.jsx(n.Box,{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=>e.jsx(t.Badge,{...r,anchorOrigin:o,children:e.jsx(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."}}}},u={args:{badgeContent:120,max:99,color:"info",variant:"standard",showZero:!1,invisible:!1,overlap:"rectangular",anchorOrigin:{vertical:"top",horizontal:"right"},children:e.jsx(a,{})},parameters:{docs:{description:{story:"Limite l'affichage numérique avec la prop `max` (ex: 99+)."}}}};exports.Colors=c;exports.Dot=d;exports.MaxValue=u;exports.NoIcon=p;exports.Origin=g;exports.ShowZero=l;exports.default=s;