✨ feat(tile): Ajout icône flèche, état désactivé, icone lien externe,…

… tuile de téléchargement [DS-3243] (#602)

Les tuiles peuvent maintenant être de type téléchargement (comme les cartes)
  - Les tuiles de téléchargement sont par défaut horizontales
  - Le détail de la tuile de téléchargement est obligatoire et il peut être rempli automatiquement en fonction du fichier à télécharger en plaçant à l'attribut "data-fr-assess-file" sur le lien (comme pour carte)

Les tuiles ont maintenant par défaut une icone.
  - arrow-right (par défaut)
  - external-link (en target="_blank")
  - download (avec la classe fr-tile--download)

Les tuiles désactivées (a sans href) ont à présent:
  - la bordure bottom en grise
  - l'icone et le titre en gris
  
Ajout des classes "fr-tile--vertical@md" et  "fr-tile--vertical@lg" pour passer une tuile horizontale, ou download, en vertical à partir des breakpoints md et lg

src/component/card/example/deprecated/index.ejs

@@ -0,0 +1,3 @@
+<%- deprecation(); %>
+
+<%- include('../../deprecated/example/index')  %>

src/component/card/example/download/index.ejs

@@ -19,10 +19,6 @@
       title: 'Contenu',
       path: 'sample-content'
     },
-    {
-      title: 'Carte horizontale',
-      path: 'sample-horizontal'
-    },
   ];
 
   const accordions = [];

src/component/card/example/download/sample/sample-content.ejs

@@ -1,9 +1,9 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {sm: 6}}); %>
+<%- sample('Carte de téléchargement, cas maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {}); %>
 
-<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {sm: 6}}); %>
+<%- sample('Carte de téléchargement, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {}); %>
 
-<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {sm: 6}}); %>
+<%- sample('Carte de téléchargement, avec tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {}); %>
 
-<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true} }}, true, '../../sample/card-layout', {col: {sm: 6}, desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>
+<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true} }}, true, '../../sample/card-layout', {desc: 'L\'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)'}); %>

src/component/card/example/download/sample/sample-img.ejs

@@ -1,9 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
-<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
-<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
-
-<%- sample('Carte de téléchargement horizontale, image 3x4', './card-download', { card : { horizontal: true }}, true, '../../sample/card-layout', {col: {md:6}}); %>
-<%- sample('Carte de téléchargement horizontale, image 4x3', './card-download', { card : { horizontal: true, img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {col: {md:6}}); %>
-<%- sample('Carte de téléchargement horizontale, image 32x9', './card-download', { card : { horizontal: true, img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {col: {sm:6, md: 4}}); %>
+<%- sample('Carte de téléchargement, image 3x4', './card-download', {}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, image 4x3', './card-download', { card : { img: imgData('img/placeholder.4x3.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>
+<%- sample('Carte de téléchargement, image 32x9', './card-download', { card : { img: imgData('img/placeholder.32x9.png', 'unknown') }}, true, '../../sample/card-layout', {}); %>

src/component/card/example/download/sample/sample-no-img.ejs

@@ -1,5 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:6}}); %>
+<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {}); %>
 
-<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {col: {md:6}}); %>
+<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, true, '../../sample/card-layout', {}); %>

src/component/card/example/download/sample/sample-sizes.ejs

@@ -1,9 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {sm: 6, md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
-
-<%- sample('Carte de téléchargement sm horizontal', './card-download', { card : { size: 'sm', horizontal: true}}, true, '../../sample/card-layout', {col: {sm:6}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement md horizontal', './card-download', { card : { size: 'md', horizontal: true}}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
-<%- sample('Carte de téléchargement lg horizontal', './card-download', { card : { size: 'lg', horizontal: true}}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement sm', './card-download', { card : { size: 'sm' }}, true, '../../sample/card-layout', {col: {md:6}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement md', './card-download', { card : { size: 'md' }}, true, '../../sample/card-layout', {col: {md:8}, desc: 'dans une grille sur 6 à 8 colonnes en version desktop'}); %>
+<%- sample('Carte de téléchargement lg', './card-download', { card : { size: 'lg' }}, true, '../../sample/card-layout', {desc: 'dans une grille sur 8 à 12 colonnes en version desktop'}); %>

src/component/card/example/index.ejs

@@ -1,82 +1,74 @@
 <% const sample = getSample(include); %>
 
 <%
-        const elements = [
-                {
-                    title: 'Tailles',
-                    path: 'sample-sizes'
-                },
-                {
-                    title: 'Lien non élargi',
-                    path: 'sample-enlarge'
-                },
-                {
-                    title: 'Icône',
-                    path: 'sample-icon'
-                },
-                {
-                    title: 'Variations',
-                    path: 'sample-variations'
-                },
-                {
-                    title: 'Sans image',
-                    path: 'sample-no-img'
-                },
-                {
-                    title: 'Image et ratio',
-                    path: 'sample-img'
-                },
-                /*{
-                    title: 'Vidéo et ratios',
-                    path: 'sample-vid'
-                },*/
-                {
-                    title: 'En-tête',
-                    path: 'sample-header'
-                },
-                {
-                    title: 'Contenu',
-                    path: 'sample-content'
-                },
-                {
-                    title: 'Desactivé',
-                    path: 'sample-disabled'
-                },
-                {
-                    title: 'Zone d\'action',
-                    path: 'sample-footer'
-                },
-                {
-                    title: 'Carte horizontale',
-                    path: 'sample-horizontal'
-                },
-                {
-                    title: 'Grille de cartes',
-                    path: 'sample-grid'
-                },
-                {
-                    title: 'Grille de cartes horizontales',
-                    path: 'sample-grid-horizontal'
-                },
-                {
-                    title: 'Deprecated',
-                    path: '../../deprecated/example/index'
-                },
-        ];
+  const elements = [
+    {
+      title: 'Tailles',
+      path: 'sample-sizes'
+    },
+    {
+      title: 'Lien non élargi',
+      path: 'sample-enlarge'
+    },
+    {
+      title: 'Icône',
+      path: 'sample-icon'
+    },
+    {
+      title: 'Variations',
+      path: 'sample-variations'
+    },
+    {
+      title: 'Sans image',
+      path: 'sample-no-img'
+    },
+    {
+      title: 'Image et ratio',
+      path: 'sample-img'
+    },
+    {
+      title: 'En-tête',
+      path: 'sample-header'
+    },
+    {
+      title: 'Contenu',
+      path: 'sample-content'
+    },
+    {
+      title: 'Desactivé',
+      path: 'sample-disabled'
+    },
+    {
+      title: 'Zone d\'action',
+      path: 'sample-footer'
+    },
+    {
+      title: 'Carte horizontale',
+      path: 'sample-horizontal'
+    },
+    {
+      title: 'Grille de cartes',
+      path: 'sample-grid'
+    },
+    {
+      title: 'Grille de cartes horizontales',
+      path: 'sample-grid-horizontal'
+    },
+  ];
 
-        const accordions = [];
+  const accordions = [];
 
-        for (let element of elements) {
-                accordions.push({
-                        label: element.title,
-                        id: uniqueId('card'),
-                        content: include(`./sample/${element.path}`)
-                })
-        }
+  for (let element of elements) {
+    accordions.push({
+      label: element.title,
+      id: uniqueId('card'),
+      content: include(`./sample/${element.path}`)
+    });
+  }
 
-        const data = {
-                accordions: accordions
-        }
+  const data = {
+    accordions: accordions
+  }
  %>
 
 <%- include('../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %>

src/component/card/i18n/fr.yml

@@ -4,4 +4,5 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte
 subdir:
   title: Carte de téléchargement de fichier
   description: Ce composant permet aux utilisateurs de télécharger un fichier.
-  download: Carte de téléchargement
+  download: Carte de téléchargement
+  deprecated: Version dépréciée

src/component/main.js

@@ -11,6 +11,7 @@ import './navigation/main.js';
 import './tab/main.js';
 import './table/main.js';
 import './tag/main.js';
+import './tile/main.js';
 import './header/main.js';
 import './display/main.js';
 export default api;

src/component/tile/.package.yml

@@ -6,5 +6,9 @@ style:
   - core
   - link
   - button
-  - badge
-  - tag
+script:
+  - core
+example:
+  style:
+    - badge
+    - tag

src/component/tile/api.js

@@ -0,0 +1,2 @@
+import api from '../api.js';
+export default api;

src/component/tile/example/download/index.ejs

@@ -0,0 +1,7 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: true} }}, true, '../sample/tile-layout', {col: {md:6}, desc: 'Ajouter un attribut "download" sur le lien permet de forcer le téléchargement et éviter l\'ouverture dans le navigateur. Ajoutez-y une valeur pour renommer le fichier au téléchargement.'}); %>
+
+<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', assess: true, details: 'Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>
+
+<%- sample('Tuile de téléchargement vertical à partir de md', '../sample/tile-default', { tile : { pictogram: true, download: true, content: { href: '../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', vertical: 'md'} }}, true, '../sample/tile-layout', {col: {md:6}}); %>

src/component/tile/example/index.ejs

@@ -14,6 +14,10 @@
       title: 'Contenu',
       path: 'sample-content'
     },
+    {
+      title: 'Icône',
+      path: 'sample-icon'
+    },
     {
       title: 'Tuile horizontale',
       path: 'sample-horizontal'

src/component/tile/example/sample/sample-content.ejs

@@ -1,11 +1,11 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true } }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale avec badge dans le contenu', './tile-default', { tile : { pictogram: true, content: { badge: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>
 
-<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true } }}, true, './tile-layout', {col: {md:4}}); %>
+<%- sample('Tuile verticale avec tag dans le contenu', './tile-default', { tile : { pictogram: true, content: { tag: true, description: true } }}, true, './tile-layout', {col: {md:4}}); %>
 
 <%- sample('Tuile verticale avec détail', './tile-default', { tile : { pictogram: true, content: { details: true } }}, true, './tile-layout', {col: {md:4}}); %>
 
-<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true } }}, true, './tile-layout', {col: {md:3}}); %>
+<%- sample('Tuile verticale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', content: { badge: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>
 
-<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true } }}, true, './tile-layout', {col: {md:3}}); %>
+<%- sample('Tuile verticale sm avec détails et tag', './tile-default', { tile : { pictogram: true, size: 'sm', content: { tag: true, details: true, description: true } }}, true, './tile-layout', {col: {md:3}}); %>

src/component/tile/example/sample/sample-grid-horizontal.ejs

@@ -4,19 +4,19 @@
 const tileH = { pictogram: true, horizontal: true, col: {md:'6', lg:'4'}};
 %>
 <%- sample('Grilles de tuiles horizontales', './tiles-grid', { tiles : [
-        { ...tileH, content: { tag: true }},
-        { ...tileH, content: { badge: true }},
-        { ...tileH, content: { details: true }},
-        { ...tileH, content: { details: true, tag: true }},
+        { ...tileH, content: { tag: true, description: true, details: true }},
+        { ...tileH, content: { badge: true, description: true }},
+        { ...tileH, content: { details: true}},
+        { ...tileH, content: { }},
     ]}, true, './tiles-layout'); %>
 
 <%
 const tileHSm = { pictogram: true, horizontal: true, size:'sm', col: { sm:'6', md:'4', lg:'3'}};
 %>
 <%- sample('Grilles de tuiles horizontales sm', './tiles-grid', { tiles : [
-        { ...tileHSm, content: { tag: true }},
-        { ...tileHSm, content: { badge: true }},
+        { ...tileHSm, content: { tag: true, description: true, details: true }},
+        { ...tileHSm, content: { badge: true, description: true }},
         { ...tileHSm, content: { details: true }},
-        { ...tileHSm, content: { details: true, tag: true }},
+        { ...tileHSm, content: { }},
     ]}, true, './tiles-layout'); %>
 

src/component/tile/example/sample/sample-grid.ejs

@@ -4,18 +4,18 @@
  const tile = { pictogram: true, col: {md:'6', lg:'4'}};
  %>
 <%- sample('Grilles de tuiles verticales', './tiles-grid', { tiles : [
-        { ...tile, content: { tag: true }},
-        { ...tile, content: { badge: true }},
+        { ...tile, content: { tag: true, description: true, details: true }},
+        { ...tile, content: { badge: true, description: true }},
         { ...tile, content: { details: true }},
-        { ...tile, content: { details: true, tag: true }},
+        { ...tile, content: { }},
     ]}, true, './tiles-layout'); %>
 
 <%
 const tileSm = { pictogram: true, size:'sm', col: {sm:'6', md:'4', lg:'3'}};
 %>
 <%- sample('Grilles de tuiles verticales sm', './tiles-grid', { tiles : [
-        { ...tileSm, content: { tag: true }},
-        { ...tileSm, content: { badge: true }},
+        { ...tileSm, content: { tag: true, description: true, details: true }},
+        { ...tileSm, content: { badge: true, description: true }},
         { ...tileSm, content: { details: true }},
-        { ...tileSm, content: { details: true, tag: true }},
+        { ...tileSm, content: { }},
     ]}, true, './tiles-layout'); %>

src/component/tile/example/sample/sample-horizontal.ejs

@@ -2,4 +2,12 @@
 
 <%- sample('Tuile horizontale avec détails et tag', './tile-default', { tile : { pictogram: true, horizontal: true, content: { tag: true, details: true } }}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Tuile horizontale sm avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: { sm:'6', md:'4', lg:'3'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+<%- sample('Tuile sm horizontale avec détails et badge', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, content: { badge: true, details: true }}}, true, './tile-layout', {col: {md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+
+<%- sample('Tuile horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+
+<%- sample('Tuile sm horizontale puis vertical en md', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'md', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+
+<%- sample('Tuile horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>
+
+<%- sample('Tuile sm horizontale puis vertical en lg', './tile-default', { tile : { pictogram: true, size: 'sm', horizontal: true, vertical: 'lg', content: { details: true }}}, true, './tile-layout', {col: { md:'6', lg:'4'}, desc: 'dans une grille sur 3 à 6 colonnes en version desktop'}); %>

src/component/tile/example/sample/sample-icon.ejs

@@ -0,0 +1,5 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile sans icone', './tile-default', { tile : { pictogram: true, icon: false }}, true, './tile-layout', {col: {md:6}}); %>
+
+<%- sample('Tuile avec icone lien externe', './tile-default', { tile : { pictogram: true, content: { blank: true } }}, true, './tile-layout', {col: {md:6}}); %>