Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ✨ Mise à jour du composant Tuile #592

Merged
merged 1 commit into from
Aug 31, 2023
Merged

feat: ✨ Mise à jour du composant Tuile #592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/DsfrTile/DsfrTile.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('DsfrTile', () => {
const titleEl = getByText(title)
const descriptionEl = getByText(description)

expect(titleEl.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
expect(titleEl.parentElement.parentElement.parentElement.parentElement).not.toHaveClass('fr-tile--horizontal')
expect(descriptionEl).toHaveClass('fr-tile__desc')
})

Expand Down Expand Up @@ -65,7 +65,7 @@ describe('DsfrTile', () => {
const titleEl = getByText(title)
const descriptionEl = getByText(description)

expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
expect(descriptionEl).toHaveClass('fr-tile__desc')
})
})
56 changes: 55 additions & 1 deletion src/components/DsfrTile/DsfrTile.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,50 @@ export default {
control: 'text',
description: 'Court texte visant à expliquer l’existence de votre tuile',
},
details: {
control: 'text',
description: 'Court texte optionnel si besoin de détails supplémentaire',
},
horizontal: {
control: 'boolean',
description: 'Permet le basculement de la tuile en mode horizontal',
},
verticalAtMd: {
control: 'boolean',
description: 'Permet le basculement de la tuile en mode vertical au point de rupture "md"',
},
verticalAtLg: {
control: 'boolean',
description: 'Permet le basculement de la tuile en mode vertical au point de rupture "lg"',
},
small: {
control: 'boolean',
description: 'Permet d’afficher la tuile dans un plus petit format',
},
disabled: {
control: 'boolean',
description: 'Permet de rendre la tuile désactivée et non-cliquable',
},
download: {
control: 'boolean',
description: 'Variante de tuile indiquant que le lien permet de télécharger un fichier (la tuile de téléchargement est obligatoirement horizontale)',
},
noBorder: {
control: 'boolean',
description: 'Variante de tuile sans bordure',
},
noBackground: {
control: 'boolean',
description: 'Variante de tuile sans arrière-plan',
},
shadow: {
control: 'boolean',
description: 'Variante de tuile avec ombre portée',
},
grey: {
control: 'boolean',
description: 'Variante de tuile plus contrastée avec arrière-plan grisé',
},
to: {
control: 'text',
description: 'Lien vers lequel la tuile pointe. Peut être une string ou objet à donner à `RouterLink` ou un lien externe (`string` commençant par `"http"`)',
Expand Down Expand Up @@ -54,8 +90,17 @@ export const TuileSimple = (args) => ({
:title="title"
:imgSrc="imgSrc"
:description="description"
:details="details"
:horizontal="horizontal"
:verticalAtMd="verticalAtMd"
:verticalAtLg="verticalAtLg"
:small="small"
:disabled="false"
:download="download"
:noBorder="noBorder"
:noBackground="noBackground"
:shadow="shadow"
:grey="grey"
:to="to"
:title-tag="titleTag"
/>
Expand All @@ -64,10 +109,19 @@ export const TuileSimple = (args) => ({
})
TuileSimple.args = {
title: 'Ma formidable tuile',
imgSrc: 'http://placekitten.com/g/200/200',
imgSrc: 'http://placekitten.com/g/80/80',
description: 'Une tuile absolument formidable',
details: 'Quelques détails',
horizontal: false,
verticalAtMd: false,
verticalAtLg: false,
small: false,
disabled: false,
download: false,
noBorder: false,
noBackground: false,
shadow: false,
grey: false,
to: '#',
titleTag: 'h2',
}
95 changes: 62 additions & 33 deletions src/components/DsfrTile/DsfrTile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,26 @@ export type DsfrTileProps = {
title?: string
imgSrc?: string
description?: string
details?: string
disabled?: boolean
horizontal?: boolean
to?: RouteLocationRaw,
verticalAtMd?: boolean
verticalAtLg?: boolean
small?: boolean
download?: boolean
noBorder?: boolean
noBackground?: boolean
shadow?: boolean
grey?: boolean
to?: RouteLocationRaw
titleTag?: string
}

const props = withDefaults(defineProps<DsfrTileProps>(), {
title: 'Titre de la tuile',
imgSrc: undefined,
description: undefined,
details: undefined,
to: '#',
titleTag: 'h3',
})
Expand All @@ -29,46 +39,65 @@ const isExternalLink = computed(() => {
<div
class="fr-tile fr-enlarge-link"
:class="{
'fr-tile--vertical@md': verticalAtMd,
'fr-tile--vertical@lg': verticalAtLg,
'fr-tile--horizontal': horizontal,
'fr-tile--disabled': disabled,
'fr-tile--sm': small,
'fr-tile--no-icon': !imgSrc,
'fr-tile--download': download,
'fr-tile--no-border': noBorder,
'fr-tile--no-background': noBackground,
'fr-tile--shadow': shadow,
'fr-tile--grey': grey,
}"
>
<div class="fr-tile__body">
<component
:is="titleTag"
class="fr-tile__title"
>
<a
v-if="isExternalLink"
class="fr-tile__link"
target="_blank"
:href="disabled ? '' : (to as string)"
>{{ title }}</a>
<RouterLink
v-if="!isExternalLink"
class="fr-tile__link so-test"
:to="disabled ? '' : to"
<div class="fr-tile__content">
<component
:is="titleTag"
class="fr-tile__title"
>
{{ title }}
</RouterLink>
</component>
<p
v-if="description"
class="fr-tile__desc"
>
{{ description }}
</p>
<a
v-if="isExternalLink"
target="_blank"
:href="disabled ? '' : (to as string)"
>
{{ title }}
</a>
<RouterLink
v-if="!isExternalLink"
:to="disabled ? '' : to"
>
{{ title }}
</RouterLink>
</component>
<p
v-if="description"
class="fr-tile__desc"
>
{{ description }}
</p>
<p
v-if="details"
class="fr-tile__detail"
>
{{ details }}
</p>
</div>
</div>
<div
v-if="imgSrc"
class="fr-tile__pictogram"
>
<img
:src="imgSrc"
class="fr-responsive-img"
alt=""
<div class="fr-tile__header">
<div
v-if="imgSrc"
class="fr-tile__pictogram"
>
<!-- 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 -->
<img
:src="imgSrc"
alt=""
class="fr-artwork"
>
<!-- 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 -->
</div>
</div>
</div>
</template>
Expand Down
8 changes: 4 additions & 4 deletions src/components/DsfrTile/DsfrTiles.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('DsfrTiles', () => {
const titleEl = getByText(title1)
const descriptionEl = getByText(description1)

expect(titleEl.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
expect(titleEl.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--horizontal')
expect(descriptionEl).toHaveClass('fr-tile__desc')
})

Expand Down Expand Up @@ -107,7 +107,7 @@ describe('DsfrTiles', () => {
const titleEl = getByText(title1)
const descriptionEl = getByText(description2)

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

const titleEl1 = getByText(title1)
const titleEl2 = getByText(title2)
expect(titleEl1.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
expect(titleEl2.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
expect(titleEl1.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
expect(titleEl2.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
})
})
Loading