Merge pull request #594 from dnum-mi/feat/maj-component-FileDownload

feat: ✨ Mise à jour du composant Téléchargement de fichier

Author: laruiss

src/components/DsfrFileDownload/DsfrFileDownload.spec.ts

@@ -3,14 +3,12 @@ import { render } from '@testing-library/vue'
 import DsfrFileDownload from './DsfrFileDownload.vue'
 
 describe('DsfrFileDownload', () => {
-  it('should render a download link block', async () => {
+  it('should render a download link', async () => {
     const title = 'Téléchargement du fichier 1'
     const format = 'JPEG'
     const size = '205 Ko'
     const href = '#'
     const download = 'document.txt'
-    const block = true
-    const description = 'Une chouette description'
 
     const { getByText } = render(DsfrFileDownload, {
       props: {
@@ -19,13 +17,11 @@ describe('DsfrFileDownload', () => {
         size,
         href,
         download,
-        block,
-        description,
       },
     })
 
     const downloadTitle = getByText(title)
 
-    expect((downloadTitle).parentNode.parentNode).toHaveClass('fr-download--card')
+    expect((downloadTitle)).toHaveClass('fr-link--download')
   })
 })

src/components/DsfrFileDownload/DsfrFileDownload.stories.ts

@@ -27,18 +27,10 @@ export default {
       control: 'text',
       description: 'Nom de la ressource à télécharger',
     },
-    block: {
-      control: 'boolean',
-      description: 'Permet de basculer le lien de téléchargement en mode block',
-    },
-    description: {
-      control: 'text',
-      description: 'Une description associée au lien disponible en mode block',
-    },
   },
 }
 
-export const TelechargementDeFichier = (args) => ({
+export const LienDeTelechargement = (args) => ({
   components: {
     DsfrFileDownload,
   },
@@ -53,51 +45,15 @@ export const TelechargementDeFichier = (args) => ({
       :size="size"
       :href="href"
       :download="download"
-      :block="block"
-      :description="description"
       :title="title"
     />
   `,
 
 })
-TelechargementDeFichier.args = {
+LienDeTelechargement.args = {
   format: 'PDF',
   size: '250 Go',
   href: 'src/assets/icone-marianne-seule.png',
   download: 'marianne.png',
-  block: false,
-  description: 'Description du téléchargement',
-  title: 'Titre du téléchargement',
-}
-
-export const BlocDeTelechargement = (args) => ({
-  components: {
-    DsfrFileDownload,
-  },
-  data () {
-    return {
-      ...args,
-    }
-  },
-  template: `
-    <DsfrFileDownload
-      :format="format"
-      :size="size"
-      :href="href"
-      :download="download"
-      :block="block"
-      :description="description"
-      :title="title"
-    />
-  `,
-
-})
-BlocDeTelechargement.args = {
-  format: 'JPEG',
-  size: '1.2 To',
-  href: 'src/assets/icone-marianne-seule.png',
-  download: 'marianne.png',
-  description: 'Description du téléchargement',
   title: 'Titre du téléchargement',
-  block: true,
 }

src/components/DsfrFileDownload/DsfrFileDownload.vue

@@ -5,8 +5,6 @@ export type DsfrFileDownloadProps = {
   size?: string
   href?: string
   download?: string
-  description?: string
-  block?: boolean
 }
 
 withDefaults(defineProps<DsfrFileDownloadProps>(), {
@@ -15,31 +13,17 @@ withDefaults(defineProps<DsfrFileDownloadProps>(), {
   size: '250 Ko',
   href: '#',
   download: '',
-  description: '',
 })
 </script>
 
 <template>
-  <div
-    class="fr-download"
-    :class="{ 'fr-enlarge-link fr-download--card': block }"
-  >
-    <p>
-      <a
-        :href="href"
-        :download="download"
-        class="fr-download__link"
-      > {{ title }}
-        <span class="fr-download__detail">
-          {{ format }} – {{ size }}
-        </span>
-      </a>
-    </p>
-    <p
-      v-if="block"
-      class="fr-download__desc"
-    >
-      {{ description }}
-    </p>
-  </div>
+  <a
+    :href="href"
+    :download="download"
+    class="fr-link  fr-link--download"
+  > {{ title }}
+    <span class="fr-link__detail">
+      {{ format }} – {{ size }}
+    </span>
+  </a>
 </template>