Skip to content

Commit b7684c9

Browse files
laruisslaruiss
authored
Merge pull request #592 from dnum-mi/feat/maj-component-tile
feat: ✨ Mise à jour du composant Tuile
2 parents 9fa8f99 + 78e8025 commit b7684c9

File tree

4 files changed

+123
-40
lines changed

4 files changed

+123
-40
lines changed

‎src/components/DsfrTile/DsfrTile.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('DsfrTile', () => {
3737
const titleEl = getByText(title)
3838
const descriptionEl = getByText(description)
3939

40-
expect(titleEl.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
40+
expect(titleEl.parentElement.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
4141
expect(descriptionEl).toHaveClass('fr-tile__desc')
4242
})
4343

@@ -65,7 +65,7 @@ describe('DsfrTile', () => {
6565
const titleEl = getByText(title)
6666
const descriptionEl = getByText(description)
6767

68-
expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
68+
expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
6969
expect(descriptionEl).toHaveClass('fr-tile__desc')
7070
})
7171
})

‎src/components/DsfrTile/DsfrTile.stories.ts‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,50 @@ export default {
1919
control: 'text',
2020
description: 'Court texte visant à expliquer l’existence de votre tuile',
2121
},
22+
details: {
23+
control: 'text',
24+
description: 'Court texte optionnel si besoin de détails supplémentaire',
25+
},
2226
horizontal: {
2327
control: 'boolean',
2428
description: 'Permet le basculement de la tuile en mode horizontal',
2529
},
30+
verticalAtMd: {
31+
control: 'boolean',
32+
description: 'Permet le basculement de la tuile en mode vertical au point de rupture "md"',
33+
},
34+
verticalAtLg: {
35+
control: 'boolean',
36+
description: 'Permet le basculement de la tuile en mode vertical au point de rupture "lg"',
37+
},
38+
small: {
39+
control: 'boolean',
40+
description: 'Permet d’afficher la tuile dans un plus petit format',
41+
},
2642
disabled: {
2743
control: 'boolean',
2844
description: 'Permet de rendre la tuile désactivée et non-cliquable',
2945
},
46+
download: {
47+
control: 'boolean',
48+
description: 'Variante de tuile indiquant que le lien permet de télécharger un fichier (la tuile de téléchargement est obligatoirement horizontale)',
49+
},
50+
noBorder: {
51+
control: 'boolean',
52+
description: 'Variante de tuile sans bordure',
53+
},
54+
noBackground: {
55+
control: 'boolean',
56+
description: 'Variante de tuile sans arrière-plan',
57+
},
58+
shadow: {
59+
control: 'boolean',
60+
description: 'Variante de tuile avec ombre portée',
61+
},
62+
grey: {
63+
control: 'boolean',
64+
description: 'Variante de tuile plus contrastée avec arrière-plan grisé',
65+
},
3066
to: {
3167
control: 'text',
3268
description: 'Lien vers lequel la tuile pointe. Peut être une string ou objet à donner à `RouterLink` ou un lien externe (`string` commençant par `"http"`)',
@@ -54,8 +90,17 @@ export const TuileSimple = (args) => ({
5490
:title="title"
5591
:imgSrc="imgSrc"
5692
:description="description"
93+
:details="details"
5794
:horizontal="horizontal"
95+
:verticalAtMd="verticalAtMd"
96+
:verticalAtLg="verticalAtLg"
97+
:small="small"
5898
:disabled="false"
99+
:download="download"
100+
:noBorder="noBorder"
101+
:noBackground="noBackground"
102+
:shadow="shadow"
103+
:grey="grey"
59104
:to="to"
60105
:title-tag="titleTag"
61106
/>
@@ -64,10 +109,19 @@ export const TuileSimple = (args) => ({
64109
})
65110
TuileSimple.args = {
66111
title: 'Ma formidable tuile',
67-
imgSrc: 'http://placekitten.com/g/200/200',
112+
imgSrc: 'http://placekitten.com/g/80/80',
68113
description: 'Une tuile absolument formidable',
114+
details: 'Quelques détails',
69115
horizontal: false,
116+
verticalAtMd: false,
117+
verticalAtLg: false,
118+
small: false,
70119
disabled: false,
120+
download: false,
121+
noBorder: false,
122+
noBackground: false,
123+
shadow: false,
124+
grey: false,
71125
to: '#',
72126
titleTag: 'h2',
73127
}

‎src/components/DsfrTile/DsfrTile.vue‎

Lines changed: 62 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,26 @@ export type DsfrTileProps = {
66
title?: string
77
imgSrc?: string
88
description?: string
9+
details?: string
910
disabled?: boolean
1011
horizontal?: boolean
11-
to?: RouteLocationRaw,
12+
verticalAtMd?: boolean
13+
verticalAtLg?: boolean
14+
small?: boolean
15+
download?: boolean
16+
noBorder?: boolean
17+
noBackground?: boolean
18+
shadow?: boolean
19+
grey?: boolean
20+
to?: RouteLocationRaw
1221
titleTag?: string
1322
}
1423
1524
const props = withDefaults(defineProps<DsfrTileProps>(), {
1625
title: 'Titre de la tuile',
1726
imgSrc: undefined,
1827
description: undefined,
28+
details: undefined,
1929
to: '#',
2030
titleTag: 'h3',
2131
})
@@ -29,46 +39,65 @@ const isExternalLink = computed(() => {
2939
<div
3040
class="fr-tile fr-enlarge-link"
3141
:class="{
42+
'fr-tile--vertical@md': verticalAtMd,
43+
'fr-tile--vertical@lg': verticalAtLg,
3244
'fr-tile--horizontal': horizontal,
3345
'fr-tile--disabled': disabled,
46+
'fr-tile--sm': small,
47+
'fr-tile--no-icon': !imgSrc,
48+
'fr-tile--download': download,
49+
'fr-tile--no-border': noBorder,
50+
'fr-tile--no-background': noBackground,
51+
'fr-tile--shadow': shadow,
52+
'fr-tile--grey': grey,
3453
}"
3554
>
3655
<div class="fr-tile__body">
37-
<component
38-
:is="titleTag"
39-
class="fr-tile__title"
40-
>
41-
<a
42-
v-if="isExternalLink"
43-
class="fr-tile__link"
44-
target="_blank"
45-
:href="disabled ? '' : (to as string)"
46-
>{{ title }}</a>
47-
<RouterLink
48-
v-if="!isExternalLink"
49-
class="fr-tile__link so-test"
50-
:to="disabled ? '' : to"
56+
<div class="fr-tile__content">
57+
<component
58+
:is="titleTag"
59+
class="fr-tile__title"
5160
>
52-
{{ title }}
53-
</RouterLink>
54-
</component>
55-
<p
56-
v-if="description"
57-
class="fr-tile__desc"
58-
>
59-
{{ description }}
60-
</p>
61+
<a
62+
v-if="isExternalLink"
63+
target="_blank"
64+
:href="disabled ? '' : (to as string)"
65+
>
66+
{{ title }}
67+
</a>
68+
<RouterLink
69+
v-if="!isExternalLink"
70+
:to="disabled ? '' : to"
71+
>
72+
{{ title }}
73+
</RouterLink>
74+
</component>
75+
<p
76+
v-if="description"
77+
class="fr-tile__desc"
78+
>
79+
{{ description }}
80+
</p>
81+
<p
82+
v-if="details"
83+
class="fr-tile__detail"
84+
>
85+
{{ details }}
86+
</p>
87+
</div>
6188
</div>
62-
<div
63-
v-if="imgSrc"
64-
class="fr-tile__pictogram"
65-
>
66-
<img
67-
:src="imgSrc"
68-
class="fr-responsive-img"
69-
alt=""
89+
<div class="fr-tile__header">
90+
<div
91+
v-if="imgSrc"
92+
class="fr-tile__pictogram"
7093
>
71-
<!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte -->
94+
<img
95+
:src="imgSrc"
96+
alt=""
97+
class="fr-artwork"
98+
>
99+
<!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte -->
100+
</div>
72101
</div>
73102
</div>
74103
</template>

‎src/components/DsfrTile/DsfrTiles.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('DsfrTiles', () => {
6464
const titleEl = getByText(title1)
6565
const descriptionEl = getByText(description1)
6666

67-
expect(titleEl.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
67+
expect(titleEl.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
6868
expect(descriptionEl).toHaveClass('fr-tile__desc')
6969
})
7070

@@ -107,7 +107,7 @@ describe('DsfrTiles', () => {
107107
const titleEl = getByText(title1)
108108
const descriptionEl = getByText(description2)
109109

110-
expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
110+
expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
111111
expect(descriptionEl).toHaveClass('fr-tile__desc')
112112
})
113113
it('should display 1 disabled and 1 enabled tile', async () => {
@@ -147,7 +147,7 @@ describe('DsfrTiles', () => {
147147

148148
const titleEl1 = getByText(title1)
149149
const titleEl2 = getByText(title2)
150-
expect(titleEl1.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
151-
expect(titleEl2.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
150+
expect(titleEl1.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
151+
expect(titleEl2.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
152152
})
153153
})

0 commit comments

Comments
 (0)