✨ feat(share, follow, utility): icone personalisée, et ajout twitter-…

…x et threads [DS-3530] (#752)

- ajoute la possibilité de mettre une icone de réseau social personalisée dans "follow"
- ajouts d'exemples d'icone personalisée dans "share" et "follow"
- ajouts des icones dans utility : 
  - twitter-x-fill
  - twitter-x-line
  - threads-fill
  - threads-line

src/component/follow/style/_setting.scss

@@ -4,17 +4,19 @@
 ////
 
 $follow-icons: (
-  facebook: facebook-circle-fill,
-  twitter: twitter-fill,
-  linkedin: linkedin-box-fill,
-  youtube: youtube-fill,
   dailymotion: dailymotion-fill,
-  instagram: instagram-fill,
+  facebook: facebook-circle-fill,
   github: github-fill,
-  tiktok: tiktok-fill,
+  instagram: instagram-fill,
+  linkedin: linkedin-box-fill,
+  mastodon: mastodon-fill,
   snapchat: snapchat-fill,
   telegram: telegram-fill,
+  threads: threads-fill,
+  tiktok: tiktok-fill,
   twitch: twitch-fill,
+  twitter: twitter-fill,
+  twitter-x: twitter-x-fill,
   vimeo: vimeo-fill,
-  mastodon: mastodon-fill
+  youtube: youtube-fill,
 );

src/component/follow/template/ejs/socials.ejs

@@ -21,8 +21,12 @@ const mapSocialButton = (data) => {
       href: data.url,
       id: data.id || uniqueId('social-button'),
       blank: true,
-      classes: [`${prefix}-btn--${data.type}`]
+      classes: []
   }
+  if (data.classes) button.classes = data.classes;
+  if (data.type) button.classes.push(`${prefix}-btn--${data.type}`);
+  if (data.attributes) button.attributes = data.attributes;
+
   return button;
 };
 

src/component/link/style/tool/_build.scss

@@ -86,7 +86,7 @@
 
         @if map_get($settings, blank) {
           @include target-blank(true) {
-            @include _build-link-icon($size-settings, right, $size);
+            @include _build-link-icon($size-settings, right, $size, false);
           }
         }
       }

src/component/share/example/data/meta.json.ejs

@@ -0,0 +1,56 @@
+<%
+const metaTag = [
+  {
+    // Format de la card twitter de partage (large ou résumé)
+    name: 'twitter:card',
+    content: 'summary_large_image' // ou 'summary' si non défini
+  },
+  {
+    // Nom du compte twitter lié à la page partagée ('@username')
+    name: 'twitter:site',
+    content: contentPlaceholder('@usernameTwitter')
+  },
+  {
+    // titre de la page partagée
+    property: 'og:title',
+    content: contentPlaceholder('Système de Design de l\'État')
+  },
+  {
+    // Description du contenu de la page / de l'article
+    property: 'og:description',
+    content: contentPlaceholder('Développer vos sites et applications en utilisant des composants prêts à l\'emploi, accessibles et ergonomiques')
+  },
+  {
+    // url d'une image pour illustrer le contenu de la page
+    property: 'og:image',
+    content: contentPlaceholder('https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg')
+  },
+  {
+    // Type de contenu (généralement 'website', éventuellement 'article')
+    property: 'og:type',
+    content: 'website'
+  },
+  {
+    // Adresse url du site
+    property: 'og:url',
+    content: contentPlaceholder('https://systeme-de-design.gouv.fr/')
+  },
+  {
+    // Nom complet du site
+    property: 'og:site_name',
+    content: contentPlaceholder('Site officiel du Système de Design de l\'État')
+  },
+  {
+    // texte alternatif de l'image
+    property: 'og:image:alt',
+    content: contentPlaceholder('République Française - Système de Design de l\'État')
+  },
+  {
+    // texte alternatif de l'image pour twitter
+    name: 'twitter:image:alt',
+    content: contentPlaceholder('République Française - Système de Design de l\'État')
+  }
+];
+%>
+
+<%- JSON.stringify(metaTag); %>

src/component/share/example/data/share.json.ejs

@@ -0,0 +1,51 @@
+<%
+let share = locals.share || {};
+let data = {};
+
+data.share = {
+  id: uniqueId('share'),
+  title: 'Partager la page',
+  text: 'Veuillez <a href=' + contentPlaceholder("url page autorisation cookies") + '>autoriser le dépôt de cookies</a> pour partager sur Facebook, Twitter et LinkedIn.',
+  disabled: share.disabled === true,
+  buttons: [
+    {
+      id: uniqueId('share'),
+      type: 'facebook',
+      label: 'Partager sur Facebook',
+      url: `https://www.facebook.com/sharer.php?u=${contentPlaceholder('url de la page')}`,
+      width: 600,
+      height: 450
+    },
+    {
+      id: uniqueId('share'),
+      type: 'twitter',
+      label: 'Partager sur Twitter',
+      url: `https://twitter.com/intent/tweet?url=${contentPlaceholder('url de la page')}&text=${contentPlaceholder('titre ou texte descriptif de la page')}&via=${contentPlaceholder('via')}&hashtags=${contentPlaceholder('hashtags')}`,
+      width: 600,
+      height: 420,
+      comments: !share.disabled ? 'Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js)': undefined
+    },
+    {
+      id: uniqueId('share'),
+      type: 'linkedin',
+      label: 'Partager sur LinkedIn',
+      url: `https://www.linkedin.com/shareArticle?url=${contentPlaceholder('url de la page')}&title=${contentPlaceholder('titre ou texte descriptif de la page')}`,
+      width: 550,
+      height: 550
+    },
+    {
+      id: uniqueId('share'),
+      type: 'mail',
+      label: 'Partager par email',
+      url: `mailto:?subject=${contentPlaceholder('objet du mail')}&body=${contentPlaceholder('titre ou texte descriptif de la page')} ${contentPlaceholder('url de la page')}`
+    },
+    {
+      id: uniqueId('share'),
+      type: 'copy',
+      label: 'Copier dans le presse-papier',
+      onclick: `navigator.clipboard.writeText(window.location).then(function() {alert('Adresse copiée dans le presse papier.')});` // @TODO: ajouter un polyfill pour IE11
+    }
+  ]
+} %>
+
+<%- JSON.stringify(data); %>

src/component/share/example/index.ejs

@@ -1,6 +1,8 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Méta données', './sample/meta-share', {}, true); %>
+<%- section('Méta données', 'Données à insérer dans la partie <code>< head ></code> de la page, pour fournir un aperçu de la page aux applications tierces lors du partage.', 0); %>
+
+<%- sample('', './sample/meta-share', {}, true); %>
 
 <%- section('Boutons de partage par défaut', 'Les icones réseaux sociaux disponibles pour ce composant sont définies dans :', 0); %>
 
@@ -14,8 +16,6 @@ const accordion = {
 <div class="<%= prefix %>-mb-4v" >
     <%- include(root + 'src/component/accordion/template/ejs/accordion', {accordion: accordion}); %>
 </div>
-
-
 <%- section(null, 'Il est aussi possible d\'appliquer une classe utilitaire sur un bouton pour utiliser une icone du dsfr (ex: "fr-icon-rss-line")', 0); %>
 
 <%- sample('', './sample/share-default', {}, true); %>

src/component/share/example/sample/meta-share.ejs

@@ -1,56 +1,6 @@
 <%
-const metaTag = [
-  {
-    // Format de la card twitter de partage (large ou résumé)
-    name: 'twitter:card',
-    content: 'summary_large_image' // ou 'summary' si non défini
-  },
-  {
-    // Nom du compte twitter lié à la page partagée ('@username')
-    name: 'twitter:site',
-    content: contentPlaceholder('@usernameTwitter')
-  },
-  {
-    // titre de la page partagée
-    property: 'og:title',
-    content: contentPlaceholder('Système de Design de l\'État')
-  },
-  {
-    // Description du contenu de la page / de l'article
-    property: 'og:description',
-    content: contentPlaceholder('Développer vos sites et applications en utilisant des composants prêts à l\'emploi, accessibles et ergonomiques')
-  },
-  {
-    // url d'une image pour illustrer le contenu de la page
-    property: 'og:image',
-    content: contentPlaceholder('https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg')
-  },
-  {
-    // Type de contenu (généralement 'website', éventuellement 'article')
-    property: 'og:type',
-    content: 'website'
-  },
-  {
-    // Adresse url du site
-    property: 'og:url',
-    content: contentPlaceholder('https://systeme-de-design.gouv.fr/')
-  },
-  {
-    // Nom complet du site
-    property: 'og:site_name',
-    content: contentPlaceholder('Site officiel du Système de Design de l\'État')
-  },
-  {
-    // texte alternatif de l'image
-    property: 'og:image:alt',
-    content: contentPlaceholder('République Française - Système de Design de l\'État')
-  },
-  {
-    // texte alternatif de l'image pour twitter
-    name: 'twitter:image:alt',
-    content: contentPlaceholder('République Française - Système de Design de l\'État')
-  }
-];
+let metaTag = [];
+metaTag = JSON.parse(include('../data/meta.json.ejs'));
 %>
 
 <%- include('../../template/ejs/share-meta', { meta: metaTag }); %>

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

@@ -1,53 +1,9 @@
 
-<%
-let share = locals.share || {};
-let data = {};
 
-data.share = {
-  id: uniqueId('share'),
-  title: 'Partager la page',
-  text: 'Veuillez <a href=' + contentPlaceholder("url page autorisation cookies") + '>autoriser le dépôt de cookies</a> pour partager sur Facebook, Twitter et LinkedIn.',
-  disabled: share.disabled === true,
-  buttons: [
-    {
-      id: uniqueId('share'),
-      type: 'facebook',
-      label: 'Partager sur Facebook',
-      url: `https://www.facebook.com/sharer.php?u=${contentPlaceholder('url de la page')}`,
-      width: 600,
-      height: 450
-    },
-    {
-      id: uniqueId('share'),
-      type: 'twitter',
-      label: 'Partager sur Twitter',
-      url: `https://twitter.com/intent/tweet?url=${contentPlaceholder('url de la page')}&text=${contentPlaceholder('titre ou texte descriptif de la page')}&via=${contentPlaceholder('via')}&hashtags=${contentPlaceholder('hashtags')}`,
-      width: 600,
-      height: 420,
-      comments: !share.disabled ? 'Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js)': undefined
-    },
-    {
-      id: uniqueId('share'),
-      type: 'linkedin',
-      label: 'Partager sur LinkedIn',
-      url: `https://www.linkedin.com/shareArticle?url=${contentPlaceholder('url de la page')}&title=${contentPlaceholder('titre ou texte descriptif de la page')}`,
-      width: 550,
-      height: 550
-    },
-    {
-      id: uniqueId('share'),
-      type: 'mail',
-      label: 'Partager par email',
-      url: `mailto:?subject=${contentPlaceholder('objet du mail')}&body=${contentPlaceholder('titre ou texte descriptif de la page')} ${contentPlaceholder('url de la page')}`
-    },
-    {
-      id: uniqueId('share'),
-      type: 'copy',
-      label: 'Copier dans le presse-papier',
-      onclick: `navigator.clipboard.writeText(window.location).then(function() {alert('Adresse copiée dans le presse papier.')});` // @TODO: ajouter un polyfill pour IE11
-    }
-  ]
-} %>
 
+<%
+let data = {};
+data = JSON.parse(include('../data/share.json.ejs'));
+%>
 
 <%- include('../../template/ejs/share', data); %>

src/component/share/style/_setting.scss

@@ -5,7 +5,9 @@
 
 $share-icons: (
   facebook: facebook-circle-line,
-  twitter: twitter-line,
   linkedin: linkedin-box-line,
-  mastodon: mastodon-line
+  mastodon: mastodon-line,
+  threads: threads-line,
+  twitter: twitter-line,
+  twitter-x: twitter-x-line
 );

src/component/share/template/ejs/share.ejs

@@ -22,12 +22,14 @@ if (share.id) shareAttrs.id = share.id;
 
 const mapShareButton = (data) => {
   const button = {
-    classes: [`${prefix}-btn--${data.type}`],
     label: data.label,
     title: data.title,
     attributes: data.attributes,
     tooltip: data.tooltip,
+    classes: [],
   }
+  if (data.classes) button.classes = data.classes;
+  if (data.type) button.classes.push(`${prefix}-btn--${data.type}`);
 
   if (data.comments) button.comments = data.comments;
   if (data.onclick) button.onclick = data.onclick;
@@ -36,6 +38,8 @@ const mapShareButton = (data) => {
   switch (data.type) {
     case 'facebook':
     case 'twitter':
+    case 'twitter-x':
+    case 'threads':
     case 'linkedin':
       button.disabled = share.disabled;
       button.markup = 'a';