@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
2 lines (1 loc) • 3.85 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("@mui/material"),i=require("../ActionBar/ActionBar.cjs.js"),g={title:"Components/ActionBar",component:i,tags:["autodocs"],argTypes:{leftActions:{description:"Liste de boutons à afficher à gauche de la barre",control:"object"},rightActions:{description:"Liste de boutons à afficher à droite de la barre",control:"object"},slotProps:{description:"Props supplémentaires",control:"object"}}},e=t=>()=>alert(t),u={args:{leftActions:[{label:"Retour",action:e("Retour")}],rightActions:[{label:"Valider",action:e("Valider")},{label:"Annuler",action:e("Annuler")}]},render:()=>{var t,o;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=u.args)==null?void 0:t.leftActions)??[],rightActions:((o=u.args)==null?void 0:o.rightActions)??[]})})},parameters:{docs:{description:{story:"Affiche une `ActionBar` classique avec des boutons à gauche et à droite."}}}},p={args:{leftActions:[{label:"Précédent",action:e("Précédent")},{label:"Fermer",action:e("Fermer")}],rightActions:[]},render:()=>{var t,o;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=p.args)==null?void 0:t.leftActions)??[],rightActions:((o=p.args)==null?void 0:o.rightActions)??[]})})},parameters:{docs:{description:{story:"Affiche uniquement les boutons à gauche. Utile pour les étapes intermédiaires ou navigation simple."}}}},d={args:{leftActions:[],rightActions:[{label:"Sauvegarder",action:e("Sauvegarder")}]},render:()=>{var t,o;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=d.args)==null?void 0:t.leftActions)??[],rightActions:((o=d.args)==null?void 0:o.rightActions)??[]})})},parameters:{docs:{description:{story:"Affiche uniquement des boutons à droite. Fréquent pour les actions finales."}}}},c={args:{leftActions:[{label:"Aide",action:e("Aide")}],rightActions:[{label:"Envoyer",action:e("Envoyer")}],slotProps:{leftActions:{color:"secondary",variant:"outlined"},rightActions:{color:"success",variant:"contained"}}},render:()=>{var t,o,r;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=c.args)==null?void 0:t.leftActions)??[],rightActions:((o=c.args)==null?void 0:o.rightActions)??[],slotProps:(r=c.args)==null?void 0:r.slotProps})})},parameters:{docs:{description:{story:"Personnalisation des boutons via `buttonLeftProps` et `buttonRightProps`."}}}},a={args:{leftActions:[{label:"Infos",action:e("Infos")}],rightActions:[{label:"Suivant",action:e("Suivant")}],slotProps:{leftActionsContainer:{sx:{backgroundColor:"lightgray",p:1}},rightActionsContainer:{sx:{backgroundColor:"whitesmoke",p:1}}}},render:()=>{var t,o,r;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=a.args)==null?void 0:t.leftActions)??[],rightActions:((o=a.args)==null?void 0:o.rightActions)??[],slotProps:(r=a.args)==null?void 0:r.slotProps})})},parameters:{docs:{description:{story:"Ajoute du style aux conteneurs de gauche et de droite via `boxLeftWrapperProps` et `boxRightWrapperProps`."}}}},l={args:{leftActions:[{label:"Mobile",action:e("Mobile")}],rightActions:[{label:"Continue",action:e("Continue")}],slotProps:{root:{direction:"column",spacing:1,sx:[{"@media (min-width: 600px)":{flexDirection:"row",justifyContent:"space-between"}}]}}},render:()=>{var t,o,r;return s.jsx(n.Box,{sx:{p:4},children:s.jsx(i,{leftActions:((t=l.args)==null?void 0:t.leftActions)??[],rightActions:((o=l.args)==null?void 0:o.rightActions)??[],slotProps:(r=l.args)==null?void 0:r.slotProps})})},parameters:{docs:{description:{story:"Démontre l’adaptabilité de la barre via une prop `sx` responsive."}}}};exports.Default=u;exports.OnlyLeftActions=p;exports.OnlyRightActions=d;exports.ResponsiveExample=l;exports.WithBoxCustomProps=a;exports.WithCustomButtonProps=c;exports.default=g;