feat: ✨ Nouvelle implémentation du composant DsfrTile

BREAKING CHANGE: Les props 'verticalAtMd' et 'verticalAtLg' n'existent plus

Author: ShallowRed

src/components/DsfrTile/DsfrTile.spec.ts

@@ -68,4 +68,28 @@ describe('DsfrTile', () => {
     expect(titleEl.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--horizontal')
     expect(descriptionEl).toHaveClass('fr-tile__desc')
   })
+
+  it('should display a tile with a download link', async () => {
+    const title = 'Titre de la tuile'
+    const imgSrc = 'https://placekitten.com/80/80'
+    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+    const download = true
+    const { getByText } = render(DsfrTile, {
+      global: {
+        plugins: [router],
+      },
+      props: {
+        title,
+        imgSrc,
+        description,
+        download,
+        to: 'https://placekitten.com/80/80',
+      },
+    })
+
+    await router.isReady()
+
+    const titleEl = getByText(title)
+    expect(titleEl).toHaveAttribute('download', 'true')
+  })
 })

src/components/DsfrTile/DsfrTile.stories.ts

@@ -27,49 +27,52 @@ export default {
       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"',
+    vertical: {
+      options: ['md', 'lg'],
+      control: {
+        type: 'select',
+      },
+      description: 'Permet le basculement de la tuile en mode vertical, selon le point de rupture "md" ou "lg" spécifié',
     },
-    verticalAtLg: {
+    disabled: {
       control: 'boolean',
-      description: 'Permet le basculement de la tuile en mode vertical au point de rupture "lg"',
+      description: 'Permet de rendre la tuile désactivée et non-cliquable',
     },
-    small: {
+    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"`)',
+    },
+    titleTag: {
+      control: 'text',
+      description: 'Permet de choisir la balise contenant le titre de la tuile (h3 par défaut)',
+    },
+    download: {
       control: 'boolean',
-      description: 'Permet d’afficher la tuile dans un plus petit format',
+      description: 'Permet de passer la tuile en mode téléchargement',
     },
-    disabled: {
+    small: {
       control: 'boolean',
-      description: 'Permet de rendre la tuile désactivée et non-cliquable',
+      description: 'Permet de basculer la tuile en petit format',
     },
-    download: {
+    icon: {
       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)',
+      description: 'Permet de désactiver l\'icone associée au lien',
     },
     noBorder: {
       control: 'boolean',
-      description: 'Variante de tuile sans bordure',
+      description: 'Permet de désactiver la bordure de la tuile',
     },
-    noBackground: {
+    shadow: {
       control: 'boolean',
-      description: 'Variante de tuile sans arrière-plan',
+      description: 'Permet d\'ajouter une ombre portée à la tuile',
     },
-    shadow: {
+    noBackground: {
       control: 'boolean',
-      description: 'Variante de tuile avec ombre portée',
+      description: 'Permet de désactiver la couleur de fond de la tuile',
     },
     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"`)',
-    },
-    titleTag: {
-      control: 'text',
-      description: 'Permet de choisir la balise contenant le titre de la tuile (h3 par défaut)',
+      description: 'Permet de passer le fond de la tuile en gris',
     },
   },
 }
@@ -92,36 +95,34 @@ export const TuileSimple = (args) => ({
       :description="description"
       :details="details"
       :horizontal="horizontal"
-      :verticalAtMd="verticalAtMd"
-      :verticalAtLg="verticalAtLg"
-      :small="small"
+      :vertical="vertical"
       :disabled="false"
+      :to="to"
+      :title-tag="titleTag"
       :download="download"
-      :noBorder="noBorder"
-      :noBackground="noBackground"
+      :small="small"
+      :icon="icon"
+      :no-border="noBorder"
       :shadow="shadow"
+      :no-background="noBackground"
       :grey="grey"
-      :to="to"
-      :title-tag="titleTag"
     />
   `,
 
 })
 TuileSimple.args = {
   title: 'Ma formidable tuile',
-  imgSrc: 'http://placekitten.com/g/80/80',
+  imgSrc: 'http://placekitten.com/g/200/200',
   description: 'Une tuile absolument formidable',
-  details: 'Quelques détails',
   horizontal: false,
-  verticalAtMd: false,
-  verticalAtLg: false,
-  small: false,
   disabled: false,
+  to: '#',
+  titleTag: 'h2',
   download: false,
+  small: false,
+  icon: false,
   noBorder: false,
-  noBackground: false,
   shadow: false,
+  noBackground: false,
   grey: false,
-  to: '#',
-  titleTag: 'h2',
 }

src/components/DsfrTile/DsfrTile.vue

@@ -9,25 +9,28 @@ export type DsfrTileProps = {
   details?: string
   disabled?: boolean
   horizontal?: boolean
-  verticalAtMd?: boolean
-  verticalAtLg?: boolean
-  small?: boolean
+  vertical?: 'md' | 'lg'
+  to?: RouteLocationRaw,
+  titleTag?: string
   download?: boolean
+  small?: boolean
+  icon?: boolean
   noBorder?: boolean
-  noBackground?: boolean
   shadow?: boolean
+  noBackground?: boolean
   grey?: boolean
-  to?: RouteLocationRaw
-  titleTag?: string
 }
 
 const props = withDefaults(defineProps<DsfrTileProps>(), {
   title: 'Titre de la tuile',
   imgSrc: undefined,
   description: undefined,
   details: undefined,
+  horizontal: false,
+  vertical: undefined,
   to: '#',
   titleTag: 'h3',
+  icon: true,
 })
 
 const isExternalLink = computed(() => {
@@ -38,19 +41,20 @@ const isExternalLink = computed(() => {
 <template>
   <div
     class="fr-tile fr-enlarge-link"
-    :class="{
-      'fr-tile--vertical@md': verticalAtMd,
-      'fr-tile--vertical@lg': verticalAtLg,
-      'fr-tile--horizontal': horizontal,
+    :class="[{
       'fr-tile--disabled': disabled,
-      'fr-tile--sm': small,
-      'fr-tile--no-icon': !imgSrc,
+      'fr-tile--sm': small === true,
+      'fr-tile--horizontal': horizontal === true,
+      'fr-tile--vertical': horizontal === false || vertical === 'md' || vertical === 'lg',
+      'fr-tile--vertical@md': vertical === 'md',
+      'fr-tile--vertical@lg': vertical === 'lg',
       'fr-tile--download': download,
+      'fr-tile--no-icon': icon === false,
       'fr-tile--no-border': noBorder,
       'fr-tile--no-background': noBackground,
       'fr-tile--shadow': shadow,
       'fr-tile--grey': grey,
-    }"
+    },]"
   >
     <div class="fr-tile__body">
       <div class="fr-tile__content">
@@ -60,13 +64,15 @@ const isExternalLink = computed(() => {
         >
           <a
             v-if="isExternalLink"
+            class="fr-tile__link"
             target="_blank"
+            :download="download"
             :href="disabled ? '' : (to as string)"
-          >
-            {{ title }}
-          </a>
+          >{{ title }}</a>
           <RouterLink
             v-if="!isExternalLink"
+            :download="download"
+            class="fr-tile__link so-test"
             :to="disabled ? '' : to"
           >
             {{ title }}
@@ -93,8 +99,8 @@ const isExternalLink = computed(() => {
       >
         <img
           :src="imgSrc"
-          alt=""
           class="fr-artwork"
+          alt=""
         >
       <!-- 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>

src/components/DsfrTile/DsfrTiles.spec.ts

@@ -150,4 +150,42 @@ describe('DsfrTiles', () => {
     expect(titleEl1.parentNode.parentNode.parentNode.parentNode).toHaveClass('fr-tile--disabled')
     expect(titleEl2.parentNode.parentNode.parentNode.parentNode).not.toHaveClass('fr-tile--disabled')
   })
+
+  it('should display a tile with a download link and one without', async () => {
+    const title1 = 'Titre de la tuile 1'
+    const title2 = 'Titre de la tuile 2'
+    const imgSrc = 'https://placekitten.com/80/80'
+
+    const tiles = [
+      {
+        title: title1,
+        imgSrc,
+        disabled: true,
+        to: '/one',
+        download: true,
+      },
+      {
+        title: title2,
+        imgSrc,
+        to: '/two',
+        download: false,
+      },
+    ]
+
+    const { getByText } = render(DsfrTiles, {
+      global: {
+        plugins: [router],
+      },
+      props: {
+        tiles,
+      },
+    })
+
+    await router.isReady()
+
+    const titleEl1 = getByText(title1)
+    const titleEl2 = getByText(title2)
+    expect(titleEl1).toHaveAttribute('download', 'true')
+    expect(titleEl2).toHaveAttribute('download', 'false')
+  })
 })