Skip to content

Commit 8722c4a

Browse files
laruisslaruiss
committed
docs: 📝 ajoute la doc de DsfrButton
1 parent 495479b commit 8722c4a

File tree

5 files changed

+264
-6
lines changed

5 files changed

+264
-6
lines changed

‎.vitepress/theme/icons.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
export {
22
GiChocolateBar,
3-
RiCloseLine,
43
RiArrowDropDownLine,
54
RiArrowDropUpLine,
5+
RiCloseLine,
6+
RiMoonLine,
7+
RiRefreshLine,
68
SiDiscord,
79
SiGithub,
810
SiNpm,

‎.vitepress/theme/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@
171171
display: flex;
172172
}
173173

174+
.flex-col {
175+
flex-direction: column;
176+
}
177+
174178
.justify-between {
175179
justify-content: space-between;
176180
}

‎src/components/DsfrButton/DsfrButton.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# DsfrButton
2+
3+
🌟 **Introduction**
4+
5+
Le `DsfrButton` est un composant Vue élégant et réutilisable, conçu pour simplifier la création de boutons personnalisés. Il intègre des tailles ajustables, des icônes optionnelles et un gestionnaire de clics, tout en respectant le style de `DSFR`. Son utilisation est simple, avec une grande flexibilité pour s'adapter à différents contextes.
6+
7+
## 🛠️ Les props
8+
9+
| Nom | Type | Défaut | Obligatoire | Description |
10+
|-------------|----------------------------|------------|:-----------:|-------------------------------------------------------|
11+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | | Taille du bouton. Peut être 'sm', 'md', ou 'lg'. |
12+
| `icon` | `string \| object` | `undefined`| | Icône à afficher dans le bouton. Peut être un nom ou une configuration d'icône. |
13+
| `label` | `string` | `undefined`| | Étiquette textuelle du bouton. |
14+
| `onClick` | `Function` | `() => {}` | | Fonction appelée lors du clic sur le bouton. |
15+
16+
## 📡 Les événements
17+
18+
- `click` : Émis lorsque le bouton est cliqué.
19+
20+
## 🧩 Les slots
21+
22+
- `default` : Emplacement pour le contenu personnalisé du bouton. Inséré dans `<button class="fr-btn"><span">`.
23+
24+
## 📝 Des exemples
25+
26+
```vue
27+
<DsfrButton
28+
size="lg"
29+
icon="fr-icon-home-4-fill"
30+
label="Accueil"
31+
@click="handleClick()"
32+
/>
33+
34+
Un bouton large avec une icône 'maison' et le texte 'Accueil'. L'événement de clic est géré par la méthode `handleClick()`.
35+
36+
```vue
37+
<DsfrButton
38+
size="sm"
39+
label="Petit Bouton"
40+
@click="handleClick()"
41+
>
42+
Contenu supplémentaire
43+
</DsfrButton>
44+
```
45+
46+
Un petit bouton avec le texte 'Petit Bouton' et du contenu supplémentaire dans le slot par défaut. L'événement de clic est géré par la méthode `handleClick()`.
47+
48+
## 📝 (Presque) toutes les variantes 🌈 de boutons
49+
50+
::: code-group
51+
52+
<Story data-title="Démo" min-h="1200px">
53+
<DsfrButtonDemo />
54+
</Story>
55+
56+
<<< docs-demo/DsfrButtonExample.vue [Code de la démo]
57+
58+
<<< DsfrButton.vue
59+
:::
60+
61+
Et voilà ! Notre DsfrButton est prêt à illuminer votre interface avec style et fonctionnalité. N'oubliez pas d'appuyer sur ces boutons avec panache ! 🚀
62+
63+
<script setup lang="ts">
64+
import DsfrButtonDemo from './docs-demo/DsfrButtonExample.vue'
65+
</script>

‎src/components/DsfrButton/DsfrButton.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ const focus = () => {
2323
}
2424
defineExpose({ focus })
2525
26-
const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon } : props.icon)
26+
const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
27+
const defaultScale = computed(() => props.iconOnly ? 1.25 : 0.8325)
28+
const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon, scale: defaultScale.value } : { scale: defaultScale.value, ...props.icon })
2729
</script>
2830

2931
<template>
@@ -37,17 +39,21 @@ const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.
3739
'fr-btn--sm': sm,
3840
'fr-btn--md': md,
3941
'fr-btn--lg': lg,
40-
'inline-flex': true,
41-
'reverse': iconRight,
42-
'justify-center': iconOnly,
42+
'fr-btn--icon-right': !iconOnly && dsfrIcon && iconRight,
43+
'fr-btn--icon-left': !iconOnly && dsfrIcon && !iconRight,
44+
'inline-flex': !dsfrIcon,
45+
'reverse': iconRight && !dsfrIcon,
46+
'justify-center': !dsfrIcon && iconOnly,
47+
[icon]: dsfrIcon,
4348
}"
4449
:title="iconOnly ? label : undefined"
4550
:disabled="disabled"
4651
:aria-disabled="disabled"
52+
:style="(!dsfr && iconOnly) ? { 'padding-inline': '0.5rem' } : {}"
4753
@click="onClick ? onClick($event) : () => {}"
4854
>
4955
<VIcon
50-
v-if="icon"
56+
v-if="icon && !dsfrIcon"
5157
v-bind="iconProps"
5258
/>
5359
<span v-if="!iconOnly">

‎src/components/DsfrButton/docs-demo/DsfrButtonExample.vue‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<script lang="ts" setup>
2+
import DsfrButton from '../DsfrButton.vue'
3+
</script>
4+
5+
<template>
6+
<div class="flex gap-4 flex-end w-full">
7+
<div class="flex flex-col gap-4 flex-end w-full">
8+
<DsfrButton
9+
label="Bouton primaire"
10+
primary
11+
/>
12+
<DsfrButton
13+
label="Bouton secondaire"
14+
secondary
15+
/>
16+
<DsfrButton
17+
label="Bouton tertiaire"
18+
tertiary
19+
/>
20+
<DsfrButton
21+
label="Bouton tertiaire sans bordure"
22+
tertiary
23+
no-outline
24+
/>
25+
</div>
26+
<div class="flex flex-col gap-4 flex-end w-full">
27+
<DsfrButton
28+
label="Petit bouton primaire"
29+
size="sm"
30+
primary
31+
/>
32+
<DsfrButton
33+
label="Petit bouton secondaire"
34+
size="sm"
35+
secondary
36+
/>
37+
<DsfrButton
38+
label="Petit bouton tertiaire"
39+
size="sm"
40+
tertiary
41+
/>
42+
<DsfrButton
43+
label="Petit bouton tertiaire sans bordure"
44+
size="sm"
45+
tertiary
46+
no-outline
47+
/>
48+
</div>
49+
</div>
50+
<div class="flex flex-col gap-4 flex-end w-full">
51+
<DsfrButton
52+
label="Gros bouton primaire"
53+
size="lg"
54+
primary
55+
/>
56+
<DsfrButton
57+
label="Gros bouton secondaire"
58+
size="lg"
59+
secondary
60+
/>
61+
<DsfrButton
62+
label="Gros bouton tertiaire"
63+
size="lg"
64+
tertiary
65+
/>
66+
<DsfrButton
67+
label="Gros bouton tertiaire sans bordure"
68+
size="lg"
69+
tertiary
70+
no-outline
71+
/>
72+
<div class="flex flex-col gap-4 flex-end w-full">
73+
<DsfrButton
74+
label="Bouton primaire avec icône DSFR"
75+
icon="fr-icon-moon-line"
76+
77+
primary
78+
/>
79+
<DsfrButton
80+
label="Bouton secondaire avec icône DSFR"
81+
icon="fr-icon-moon-line"
82+
secondary
83+
/>
84+
<DsfrButton
85+
label="Bouton tertiaire avec icône DSFR"
86+
icon="fr-icon-moon-line"
87+
tertiary
88+
/>
89+
<DsfrButton
90+
label="Bouton tertiaire sans bordure avec icône DSFR"
91+
icon="fr-icon-moon-line"
92+
tertiary
93+
no-outline
94+
/>
95+
</div>
96+
<div class="flex flex-col gap-4 flex-end w-full">
97+
<DsfrButton
98+
label="Bouton primaire avec icône oh-vue-icon"
99+
icon="ri-moon-line"
100+
101+
primary
102+
/>
103+
<DsfrButton
104+
label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
105+
:icon="{name: 'ri-refresh-line', animation: 'spin'}"
106+
secondary
107+
/>
108+
<DsfrButton
109+
label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
110+
:icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
111+
tertiary
112+
/>
113+
<DsfrButton
114+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
115+
title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
116+
:icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
117+
tertiary
118+
no-outline
119+
/>
120+
</div>
121+
<div class="flex gap-4 flex-end w-full">
122+
<div class="flex flex-col gap-4 flex-end w-full">
123+
<DsfrButton
124+
label="Bouton primaire icône seulement avec icône DSFR"
125+
icon="fr-icon-moon-line"
126+
icon-only
127+
primary
128+
/>
129+
<DsfrButton
130+
label="Bouton secondaire avec icône DSFR"
131+
icon="fr-icon-moon-line"
132+
icon-only
133+
secondary
134+
/>
135+
<DsfrButton
136+
label="Bouton tertiaire avec icône DSFR animée"
137+
icon="fr-icon-moon-line"
138+
icon-only
139+
tertiary
140+
/>
141+
<DsfrButton
142+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
143+
title="Bouton tertiaire sans bordure avec icône DSFR colorée avec une couleur du DSFR"
144+
icon="fr-icon-moon-line"
145+
icon-only
146+
tertiary
147+
no-outline
148+
/>
149+
</div>
150+
<div class="flex flex-col gap-4 flex-end w-full">
151+
<DsfrButton
152+
label="Bouton primaire icône seulement avec icône oh-vue-icon"
153+
icon="ri-moon-line"
154+
icon-only
155+
156+
primary
157+
/>
158+
<DsfrButton
159+
label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
160+
:icon="{name: 'ri-refresh-line', animation: 'spin'}"
161+
icon-only
162+
secondary
163+
/>
164+
<DsfrButton
165+
label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
166+
:icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
167+
icon-only
168+
tertiary
169+
/>
170+
<DsfrButton
171+
label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
172+
title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
173+
:icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
174+
icon-only
175+
tertiary
176+
no-outline
177+
/>
178+
</div>
179+
</div>
180+
</div>
181+
</template>

0 commit comments

Comments
 (0)