tristan
82c4cfaa90
All checks were successful
Release / release (push) Successful in 1m14s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr> Reviewed-on: #23 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
149 lines
7.9 KiB
Vue
149 lines
7.9 KiB
Vue
<template>
|
|
<Story title="Button/Button">
|
|
<Variant title="Primary">
|
|
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
|
<p class="text-xs font-semibold text-m-muted">Default</p>
|
|
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
|
<MalioButton label="Valider" />
|
|
<MalioButton label="Valider" icon-name="mdi:check" />
|
|
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
|
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
|
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
|
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
|
|
<p class="text-xs font-semibold text-m-muted">Active</p>
|
|
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
|
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
|
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
|
|
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
|
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
|
<MalioButton label="Valider" disabled />
|
|
<MalioButton label="Valider" disabled icon-name="mdi:check" />
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Secondary">
|
|
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
|
<p class="text-xs font-semibold text-m-muted">Default</p>
|
|
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
|
<MalioButton label="Modifier" variant="secondary" />
|
|
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
|
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
|
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
|
|
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Active</p>
|
|
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
|
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
|
|
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
|
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
|
<MalioButton label="Modifier" variant="secondary" disabled />
|
|
<MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Tertiary">
|
|
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
|
<p class="text-xs font-semibold text-m-muted">Default</p>
|
|
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
|
<MalioButton label="Voir plus" variant="tertiary" />
|
|
<MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
|
|
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
|
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
|
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
|
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
|
|
<p class="text-xs font-semibold text-m-muted">Active</p>
|
|
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
|
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
|
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
|
|
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
|
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
|
<MalioButton label="Voir plus" variant="tertiary" disabled />
|
|
<MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Danger">
|
|
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
|
<p class="text-xs font-semibold text-m-muted">Default</p>
|
|
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
|
<MalioButton label="Supprimer" variant="danger" />
|
|
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
|
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
|
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
|
|
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Active</p>
|
|
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
|
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
|
|
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" icon-position="left" />
|
|
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
|
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
|
<MalioButton label="Supprimer" variant="danger" disabled />
|
|
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Largeur personnalisée">
|
|
<div class="flex flex-col items-start gap-3 p-4">
|
|
<MalioButton label="Pleine largeur" button-class="w-full" />
|
|
<MalioButton label="Compact" button-class="w-auto px-6" />
|
|
</div>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|
|
|
|
<docs lang="md">
|
|
# MalioButton
|
|
|
|
Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle.
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Défaut | Description |
|
|
|------|------|--------|-------------|
|
|
| `id` | `string` | auto-généré | Identifiant HTML du bouton |
|
|
| `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) |
|
|
| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
|
|
| `disabled` | `boolean` | `false` | Désactive le bouton |
|
|
| `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) |
|
|
| `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) |
|
|
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte |
|
|
| `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels |
|
|
|
|
## Variantes
|
|
|
|
- **Primary** : Fond `m-btn-primary`, texte blanc — action principale
|
|
- **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire
|
|
- **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire
|
|
- **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice
|
|
|
|
## États
|
|
|
|
Chaque variante a 4 états visuels : Default, Hover, Active, Disabled.
|
|
|
|
## Dimensions par défaut
|
|
|
|
- Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass`
|
|
- Hauteur : 40px (`h-[40px]`)
|
|
- Police : 16px bold, line-height 150%
|
|
|
|
## Accessibilité
|
|
|
|
- `type="button"` évite la soumission de formulaire involontaire
|
|
- Support `disabled` natif
|
|
- Focus visible avec `focus-visible:ring-2`
|
|
|
|
## Events
|
|
|
|
| Event | Payload | Description |
|
|
|-------|---------|-------------|
|
|
| `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |
|
|
</docs>
|
|
|
|
<script setup lang="ts">
|
|
import MalioButton from '../../components/malio/button/Button.vue'
|
|
|
|
defineOptions({ name: 'ButtonStory' })
|
|
</script>
|