🐛 fix(card, tile): ajout version sans liens, target blank, et mise à jour des exemples [DS-3359, DS-3330, DS-3387, DS-3362, DS-3358]

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

@@ -19,6 +19,14 @@
       title: 'Contenu',
       path: 'sample-content'
     },
+    {
+      title: 'Remplissage automatique des détails',
+      path: 'sample-assess-file'
+    },
+    {
+      title: 'Fichier en langue étrangère',
+      path: 'sample-lang'
+    },
   ];
 
   const accordions = [];

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

@@ -1,13 +1,15 @@
 <%
 
 const card = locals.card || {}
+const content = card.content || {}
 const data = {
   img: imgData('img/placeholder.A4.png', 'unknown'),
   title: "Télécharger le/la [Typologie de document] « [Nom du document] »",
   href: '/example/img/placeholder.3x4.png',
   download: true,
   content: {
-    description: "Texte de description (facultatif)"
+    description: "Texte de description (facultatif)",
+    ...content,
   },
   ...card
 } %>

src/component/card/example/download/sample/sample-assess-file.ejs

@@ -0,0 +1,7 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Carte de téléchargement, avec remplissage automatique des détails', './card-download', { card : { content: { assess: true, details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}]} }}, 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)', col: {md:8, lg:6}}); %>
+
+<div lang="en">
+  <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, './card-download', { card: {title:'Download the french document lorem ipsum', description: false, content: { details: [{ label: contentPlaceholder('Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide'), position: 'end'}], assess: 'bytes' } } }, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
+</div>

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

@@ -1,9 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- 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 maximum', './card-download', { card : { content: { details: ['icon'], badges: true } } }, true, '../../sample/card-layout', {col: {md:8, lg: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, cas minimum', './card-download', { card : { img: false, content: { description: false } } }, true, '../../sample/card-layout', {col: {md:8, lg: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', {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 tags', './card-download', { card : { content: { tags: true} }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>

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

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

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

@@ -0,0 +1,4 @@
+<% const sample = getSample(include); %>
+
+<%- section('Fichier d\'une autre langue', 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', 0) %>
+<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}) %>

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', {}); %>
+<%- sample('Carte de téléchargement, sans image', './card-download', {card: {img: false}}, true, '../../sample/card-layout', {col: {md:8, lg:6}}); %>
 
-<%- sample('Carte de téléchargement horizontale, sans image', './card-download', { card : { img: false, horizontal: true }}, 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:8, lg:6}}); %>

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

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

src/component/card/example/index.ejs

@@ -35,7 +35,11 @@
       path: 'sample-content'
     },
     {
-      title: 'Desactivé',
+      title: 'Sans lien',
+      path: 'sample-no-link'
+    },
+    {
+      title: 'Desactivée',
       path: 'sample-disabled'
     },
     {

src/component/card/example/sample/card-default.ejs

@@ -8,7 +8,7 @@ const data = {
   },
   id: card.id || uniqueId('card'),
   size: card.size,
-  enlarge: card.enlarge !== false && card.footer === undefined,
+  enlarge: card.enlarge !== false && card.footer === undefined && !card.noLink,
   icon: card.icon,
   variations: card.variations
 }
@@ -51,6 +51,7 @@ if (card.content) {
   if (card.content.assess) data.content.assess = card.content.assess;
   if (card.content.disabled) data.content.disabled = card.content.disabled;
   if (card.content.blank) data.content.blank = card.content.blank;
+  if (card.content.lang) data.content.lang = card.content.lang;
 
   if (card.content.description !== false) data.content.description = card.content.description || lorem('', 160);
 
@@ -70,6 +71,10 @@ if (card.content) {
       if (typeof detail === 'string') {
         if (detail.indexOf('icon') > -1) d.icon = 'warning-fill';
         if (detail.indexOf('end') > -1) d.position = 'end';
+      } else if (typeof detail === 'object') {
+        d.label = detail.label || d.label;
+        d.icon = detail.icon || undefined;
+        d.position = detail.position || 'end';
       }
       data.content.details.push(d);
     }
@@ -78,8 +83,13 @@ if (card.content) {
 
 if (card.download) {
   data.download = true;
-  if (!data.content.details) data.content.details = [];
-  data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  if (!data.content.details) {
+    data.content.details = [];
+    data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  } else {
+    const hasEnd = data.content.details.find(detail => detail.position === 'end');
+    if (!hasEnd) data.content.details.push({ label: 'PNG - 1,1 ko', position: 'end'});
+  }
 }
 
 if (card.footer) {

src/component/card/example/sample/sample-enlarge.ejs

@@ -1,3 +1,9 @@
 <% const sample = getSample(include); %>
 
 <%- sample('Carte verticale sans lien étendu à la carte', './card-default', { card : { img: true, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale SM sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { size: 'sm', img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>
+
+<%- sample('Carte verticale LG sans lien étendu et ouverture dans une nouvelle fenêtre', './card-default', { card : { size: 'lg', img: true, content: {blank:true}, enlarge: false }}, true, './card-layout', {col: {md:4}}); %>

src/component/card/example/sample/sample-no-link.ejs

@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Carte sans lien', './card-default', { card : { title: 'Intitulé de la carte', img: true, noLink:true }}, true, './card-layout', {col: {md:4}}); %>

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

@@ -1,7 +1,7 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Carte verticale md, taille par défaut', './card-default', { card : { img: true }}, true, './card-layout', {col: {md:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
+<%- sample('Carte verticale md, taille par défaut', './card-default', { card : { img: true }}, true, './card-layout', {col: {md:6, lg:4}, desc: 'dans une grille sur 4 à 6 colonnes en version desktop'}); %>
 
-<%- sample('Carte taille sm', './card-default', { card: { img: true, size: 'sm' }}, true, './card-layout', {col: {md:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
+<%- sample('Carte taille sm', './card-default', { card: { img: true, size: 'sm' }}, true, './card-layout', {col: {md:4, lg:3}, desc: 'dans une grille sur 3 à 4 colonnes en version desktop'}); %>
 
-<%- sample('Carte taille lg', './card-default', { card: { img: true, size: 'lg' } }, true, './card-layout', {col: {md:6}, desc: 'dans une grille sur 6 à 12 colonnes en version desktop'}); %>
+<%- sample('Carte taille lg', './card-default', { card: { img: true, size: 'lg' } }, true, './card-layout', {col: {md:8, lg:6}, desc: 'dans une grille sur 6 à 12 colonnes en version desktop'}); %>

src/component/card/style/_legacy.scss

@@ -20,7 +20,7 @@
 
     &__title {
       @include target-blank {
-        @include icon-size-legacy(lg, after);
+        @include icon-size-legacy(md, after);
       }
     }
 

src/component/card/style/_scheme.scss

@@ -42,7 +42,11 @@
     }
 
     &__title {
-      @include color.text(action-high blue-france, (legacy:$legacy));
+      @include color.text(default grey, (legacy:$legacy));
+
+      a[href] {
+        @include color.text(action-high blue-france, (legacy:$legacy));
+      }
 
       @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true, background: true));
     }

src/component/card/style/module/_content.scss

@@ -18,8 +18,12 @@
     @include font-weight(bold);
     @include margin-bottom(0);
 
+    a {
+      @include icon(arrow-right-line, sm, after);
+    }
+
     @include target-blank {
-      @include icon-size(md, after);
+      @include icon(external-link-line, sm, after);
     }
   }
 

src/component/card/style/module/_default.scss

@@ -7,16 +7,15 @@
   @include display-flex(column);
   @include relative();
 
-  &__title {
-    a {
-      @include icon(arrow-right-line, md, after) {
-        @include absolute(null, 8v, 8v);
+
+  &#{ns(enlarge-link)} {
+    #{ns(card)}__title {
+      a {
+        @include icon-size(md, after) {
+          @include absolute(null, 8v, 8v);
+        }
       }
     }
-
-    a[target=_blank] {
-      @include icon(external-link-line, md, after);
-    }
   }
 
   &:not(&--no-border):not(&--shadow) {
@@ -27,9 +26,11 @@
   }
 
   &--no-icon,
-  &:not(#{ns(enlarge-link)}) {
+  &:not(#{ns(enlarge-link)}):not(#{ns(card--download)}) {
     #{ns(card__title a)} {
-      @include after(none);
+      &:not([target="_blank"]) {
+        @include after(none);
+      }
     }
   }
 

src/component/card/style/module/_download.scss

@@ -40,11 +40,11 @@
     }
   }
 
-  &#{ns(enlarge-link)} {
-    #{ns(card__title a)} {
-      @include icon(download-line, null, after);
-    }
+  #{ns(card__title a)} {
+    @include icon(download-line, null, after);
+  }
 
+  &#{ns(enlarge-link)} {
     @include hover-media-query {
       &:hover {
         #{ns(card__header)} {

src/component/card/style/module/_lg.scss

@@ -11,6 +11,10 @@
 
   &--lg &__title {
     @include title-style(h4);
+
+    a {
+      @include icon-size(md, after);
+    }
   }
 
   &--lg &__desc {

src/component/card/style/module/_sm.scss

@@ -15,6 +15,10 @@
 
   &--sm &__title {
     @include title-style(h6);
+
+    a {
+      @include icon-size(sm, after);
+    }
   }
 
   &--sm &__desc {

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

@@ -1,7 +1,47 @@
+
 <% 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.'}); %>
+<%
+  const elements = [
+    {
+      title: 'Contenu',
+      path: 'sample-content'
+    },
+    {
+      title: 'Tailles',
+      path: 'sample-sizes'
+    },
+    {
+      title: 'Sans image',
+      path: 'sample-no-img'
+    },
+    {
+      title: 'Vertical',
+      path: 'sample-vertical'
+    },
+    {
+      title: 'Remplissage automatique des détails',
+      path: 'sample-assess-file'
+    },
+    {
+      title: 'Fichier en langue étrangère',
+      path: 'sample-lang'
+    },
+  ];
+
+  const accordions = [];
+
+  for (let element of elements) {
+    accordions.push({
+      label: element.title,
+      id: uniqueId('tile-download'),
+      content: include(`./sample/${element.path}`)
+    })
+  }
 
-<%- 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}}); %>
+  const data = {
+    accordions: accordions
+  }
+ %>
 
-<%- 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}}); %>
+<%- include('../../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %>

src/component/tile/example/download/sample/sample-assess-file.ejs

@@ -0,0 +1,7 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement avec détail renseigné automatiquement', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('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}}); %>
+
+<div lang="en">
+    <%- sample({title: 'Remplissage automatique des détails en Bytes', subtitle: 'Sur une page en anglais, ou toute autre langue utilisant l\'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l\'attribut : data-fr-assess-file="bytes".'}, '../../sample/tile-default', { tile: {pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', downloadable: true, title:'Download the french document lorem ipsum', details: ' ', hreflang: 'fr', assess: 'bytes' }} }, true, '../../sample/tile-layout', {col: {md:6}}); %>
+</div>

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

@@ -0,0 +1,5 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement, cas max', '../../sample/tile-default', { tile : { pictogram: 'document-download', download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, 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, contenu minimum', '../../sample/tile-default', { tile : { download: true, content: { title: 'Télécharger le document XX', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, true, '../../sample/tile-layout', {col: {md: 6}}); %>

src/component/tile/example/download/sample/sample-lang.ejs

@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement avec fichier en langue étrangère ', '../../sample/tile-default', { tile : {  pictogram: 'document-download', download: true, content: { href: '../../../img/image.jpg', lang: 'en', downloadable: true, title: 'Télécharger le document XX', description: 'Description (optionnelle)', assess: true, details: contentPlaceholder('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}}); %>

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

@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample('Tuile de téléchargement', '../../sample/tile-default', { tile : {download: true, content: { title: 'Télécharger le document XX', description: 'Description (optionnelle)', downloadable: true, details: 'Détail obligatoire (Extension - Poids - Langue)'} }}, 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.'}); %>