Skip to content

Commit a1501e3

Browse files
DaBadBunnylaruiss
authored andcommitted
docs: 📝 petites retouches sur la démo du composant
1 parent bc3ea19 commit a1501e3

File tree

3 files changed

+25
-25
lines changed

3 files changed

+25
-25
lines changed

.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"eslint.workingDirectories": [{ "mode": "auto"}],
1515
"editor.codeActionsOnSave": {
16-
"source.fixAll": true,
16+
"source.fixAll": "explicit"
1717
},
1818
"files.associations": {
1919
"*.css": "postcss"

src/components/DsfrCard/DsfrCard.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Carte - `DsfrCard`
22

3-
La carte est un aperçu d'une page et un lien vers cette dernière. Elle fait généralement partie d'une liste de contenus similaires.
3+
La carte c'est tout simplement l'indispensable pour agrémenter vos sites et applications d'amuse-bouches esthétiques vers des contenus proposés. Il s'agit d'un composant permettant un aperçu d'une page et un lien vers cette dernière. Elle fait généralement partie d'une liste menant vers des contenus similaires.
44

5-
La carte existe en trois tailles (LG, MD, SM) et deux formats (horizontal et vertical) déclinés sur deux supports (desktop et mobile). Les cartes horizontales sont réservées au desktop (en mobile, une carte horizontale devient verticale).
5+
La carte existe en trois tailles (LG, MD, SM) et deux formats (horizontal et vertical) déclinés sur deux supports (desktop et mobile), vous trouverez forcément votre bonheur ! Les cartes horizontales sont réservées au desktop (en mobile, une carte horizontale devient verticale).
66

77
## Structure
88

9-
Une carte se compose des éléments suivants :
9+
Une carte digne de ce nom se compose des éléments suivants :
1010

1111
- un titre (prop **`title`**, de type `string`), reprenant celui de l’objet visé (page de destination, action, site).
1212
- un lien (prop **`link`**, de type `string`), sur le titre de la carte.
@@ -26,20 +26,20 @@ Autres props :
2626

2727
## Les props
2828

29-
| nom | type | défaut | obligatoire |
30-
| ---------------------- | --------- | --------------- | ----------- |
31-
| `altImg` | *`string`* | | non |
32-
| `buttons` | *`object`* | | non |
33-
| `detail` | *`string`* | | non |
34-
| `description` | *`string`* | | oui |
35-
| `download` | *`boolean`* | | non |
36-
| `horizontal` | *`boolean`* | | non |
37-
| `imgSrc` | *`string`* | | non |
38-
| `link` | *`string`* | | non |
39-
| `linksGroup` | *`object`* | | non |
40-
| `size` | *`string`* | `'md'` | non |
41-
| `title` | *`string`* | | oui |
42-
| `titleTag` | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'") | `'h3'` | non |
29+
| nom | type | défaut | obligatoire |
30+
| ---------------------- | --------- | --------------- | ------------------ |
31+
| `altImg` | *`string`* | `''` | |
32+
| `buttons` | *`object`* | `[]` | |
33+
| `detail` | *`string`* | `''` | |
34+
| `description` | *`string`* | `''` | :white_check_mark: |
35+
| `download` | *`boolean`* | `false` | |
36+
| `horizontal` | *`boolean`* | `false` | |
37+
| `imgSrc` | *`string`* | `''` | |
38+
| `link` | *`string`* | `''` | |
39+
| `linksGroup` | *`object`* | `[]` | |
40+
| `size` | *`string`* | `'md'` | |
41+
| `title` | *`string`* | `''` | :white_check_mark: |
42+
| `titleTag` | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'") | `'h3'` | |
4343

4444
## Un exemple complet
4545

src/components/DsfrCard/docs-demo/DsfrCardDemo.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import { ref } from 'vue'
33
44
import DsfrCard from '../DsfrCard.vue'
55
6-
const link = ref('https://www.systeme-de-design.gouv.fr/')
7-
const description = ref('Description sommaire de la carte')
8-
const detail = ref('Détails sur la carte en question')
9-
const altImg = ref('Un adorable chaton')
6+
const link = ref('https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte')
7+
const description = ref('Description exceptionellement précise')
8+
const detail = ref('Détails absolument essentiels')
9+
const altImg = ref('Un adorable quoique redoutable chaton')
1010
const imgSrc = ref('https://placekitten.com/300/200')
1111
</script>
1212

1313
<template>
1414
<DsfrCard
15-
:imgSrc="imgSrc"
15+
:img-src="imgSrc"
1616
:link="link"
1717
:description="description"
1818
:detail="detail"
19-
:altImg="altImg"
19+
:alt-img="altImg"
2020
/>
21-
</template>
21+
</template>

0 commit comments

Comments
 (0)