feat: ✨ add download props for DsfrFileDownload

Author: clairenollet

src/components/DsfrFileDownload/DsfrFileDownload.spec.js

@@ -8,6 +8,7 @@ describe('DsfrFileDownload', () => {
     const format = 'JPEG'
     const size = '205 Ko'
     const href = '#'
+    const download = 'document.txt'
     const block = true
     const description = 'Une chouette description'
 
@@ -17,6 +18,7 @@ describe('DsfrFileDownload', () => {
         format,
         size,
         href,
+        download,
         block,
         description,
       },

src/components/DsfrFileDownload/DsfrFileDownload.stories.js

@@ -23,6 +23,10 @@ export default {
       control: 'text',
       description: 'Chemin vers la ressource à télécharger',
     },
+    download: {
+      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',
@@ -48,6 +52,7 @@ export const TelechargementDeFichier = (args) => ({
       :format="format"
       :size="size"
       :href="href"
+      :download="download"
       :block="block"
       :description="description"
       :title="title"
@@ -59,6 +64,7 @@ TelechargementDeFichier.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',
@@ -78,6 +84,7 @@ export const BlocDeTelechargement = (args) => ({
       :format="format"
       :size="size"
       :href="href"
+      :download="download"
       :block="block"
       :description="description"
       :title="title"
@@ -89,6 +96,7 @@ 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

@@ -21,6 +21,10 @@ export default defineComponent({
       type: String,
       default: '#',
     },
+    download: {
+      type: String,
+      default: '',
+    },
     description: {
       type: String,
       default: '',
@@ -38,7 +42,7 @@ export default defineComponent({
     <p>
       <a
         :href="href"
-        download
+        :download="download"
         class="fr-download__link"
       > {{ title }}
         <span class="fr-download__detail">

src/components/DsfrFileDownload/DsfrFileDownloadList.spec.js

@@ -11,18 +11,21 @@ describe('DsfrFileDownloadList', () => {
         format: 'PNG',
         size: '250 Mo',
         href: '#',
+        download: 'document1.md',
       },
       {
         title: 'Télécharger document 2',
         format: 'GIF',
         size: '107 Ko',
         href: '#',
+        download: 'document2.md',
       },
       {
         title: 'Télécharger document 3',
         format: 'ZIP',
         size: '1,5 Go',
         href: '#',
+        download: 'document3.md',
       },
     ]
 

src/components/DsfrFileDownload/DsfrFileDownloadList.stories.js

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     files: {
       control: 'object',
-      description: 'Tableau d\'objets contenant les propriétés "title", "format", "size" et "href" propres au composant DsfrFileDownload',
+      description: 'Tableau d\'objets contenant les propriétés "title", "format", "size", "href" et "download" propres au composant DsfrFileDownload',
     },
     title: {
       control: 'string',
@@ -42,18 +42,21 @@ ListeDeTelechargements.args = {
       format: 'PNG',
       size: '250 Mo',
       href: '#',
+      download: 'document1.md',
     },
     {
       title: 'Télécharger document 2',
       format: 'GIF',
       size: '107 Ko',
       href: '#',
+      download: 'document2.md',
     },
     {
       title: 'Télécharger document 3',
       format: 'ZIP',
       size: '1,5 Go',
       href: '#',
+      download: 'document3.md',
     },
   ],
   title: 'Titre facultatif',

src/components/DsfrFileDownload/DsfrFileDownloadList.vue

@@ -39,6 +39,7 @@ export default defineComponent({
           :format="element.format"
           :size="element.size"
           :href="element.href"
+          :download="element.download"
         />
       </li>
     </ul>