feat: Ajout de composant (#23)
All checks were successful
Release / release (push) Successful in 1m14s
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>
This commit was merged in pull request #23.
This commit is contained in:
148
app/story/button/button.story.vue
Normal file
148
app/story/button/button.story.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<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>
|
||||
242
app/story/button/buttonIcon.story.vue
Normal file
242
app/story/button/buttonIcon.story.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<Story title="Button/Icon">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:bell-outline"
|
||||
aria-label="Notifications"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cog-outline"
|
||||
aria-label="Paramètres"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:format-list-bulleted"
|
||||
aria-label="Liste"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:view-grid-outline"
|
||||
aria-label="Grille"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:folder-outline"
|
||||
aria-label="Dossier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:delete-outline"
|
||||
aria-label="Supprimer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
variant="ghost"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Petit"
|
||||
:icon-size="16"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Normal"
|
||||
:icon-size="24"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Grand"
|
||||
:icon-size="32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioButtonIcon
|
||||
|
||||
Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
|
||||
rapides et compactes (retour, modifier, supprimer, etc.).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: string
|
||||
- Description: Identifiant HTML du bouton.
|
||||
- Comportement: Si non fourni, un id unique est généré automatiquement.
|
||||
|
||||
### icon
|
||||
|
||||
- Type: string
|
||||
- **Requis**
|
||||
- Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).
|
||||
|
||||
### ariaLabel
|
||||
|
||||
- Type: string
|
||||
- **Requis**
|
||||
- Description: Label d'accessibilité du bouton. Obligatoire car le bouton
|
||||
n'a pas de texte visible.
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Défaut: 24
|
||||
- Description: Taille de l'icône en pixels.
|
||||
|
||||
### buttonClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS additionnelles appliquées au bouton.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive le bouton.
|
||||
|
||||
### variant
|
||||
|
||||
- Type: `'filled' | 'ghost'`
|
||||
- Défaut: `filled`
|
||||
- Description: Variante visuelle du bouton.
|
||||
- `filled` : fond coloré, icône blanche.
|
||||
- `ghost` : sans fond, icône colorée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement visuel
|
||||
|
||||
### Variante `filled` (défaut)
|
||||
|
||||
- **Default** : fond `#222783`, icône blanche
|
||||
- **Hover** : fond `#121CDB`
|
||||
- **Active** : fond `#212567`
|
||||
- **Disabled** : fond `#CCCCDF`
|
||||
|
||||
### Variante `ghost`
|
||||
|
||||
- **Default** : icône `#222783`, sans fond
|
||||
- **Hover** : icône `#121CDB`
|
||||
- **Active** : icône `#212567`
|
||||
- **Disabled** : icône `#CCCCDF`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-label` est requis pour décrire l'action du bouton.
|
||||
- `type="button"` pour éviter les soumissions de formulaire accidentelles.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### click
|
||||
|
||||
- Émis au clic sur le bouton.
|
||||
- Non émis si le bouton est `disabled`.
|
||||
- Retourne l'événement `MouseEvent` natif.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user