Partage - DsfrShare

🌟 Introduction

Le composant DsfrShare permet d’ajouter une fonctionnalité de partage sur une page, en respectant les standards du Design System de l'État Français (DSFR). Il propose des boutons configurables pour partager via des réseaux sociaux, par email ou en copiant le lien dans le presse-papier.

🏅 La documentation sur le partage le DSFR

La story sur le partage sur le storybook de VueDsfr

📐 Structure

Le composant affiche :

• Un titre pour la section de partage.
• Une liste de boutons pour :
  • Partager sur des réseaux sociaux (paramétrables).
  • Envoyer un email.
  • Copier l'URL courante dans le presse-papier.

Les boutons sont stylisés avec des classes spécifiques et peuvent ouvrir une nouvelle fenêtre pour les réseaux sociaux.

🛠️ Props

Nom	Type	Défaut	Description
title	string	'Partager la page'	Titre affiché au-dessus des boutons de partage.
copyLabel	string	'Copier dans le presse-papier'	Texte du bouton de copie du lien dans le presse-papier.
mail	{ label: string, to: string }	undefined	Configuration du bouton pour partager par email (label pour le texte, to pour l’URL mailto).
networks	{ name: string, label: string, url: string }[]	[]	Liste des réseaux sociaux avec leur nom, leur étiquette et leur URL.

Détails des objets mail et networks

mail

Nom	Type	Description
label	string	Texte affiché sur le bouton email.
to	string	URL mailto pour ouvrir le client email.

networks

Nom	Type	Description
name	string	Nom du réseau (utilisé pour la classe CSS du bouton, ex. facebook).
label	string	Texte affiché sur le bouton du réseau social.
url	string	URL de partage pour le réseau social.

📡Événements

Aucun événement spécifique n'est émis par ce composant.

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrShare
  :networks="[
    { name: 'facebook', label: 'Facebook', url: 'https://facebook.com/share?url=https://example.com' },
    { name: 'twitter', label: 'Twitter', url: 'https://twitter.com/intent/tweet?url=https://example.com' }
  ]"
  :mail="{ label: 'Partager par email', to: 'mailto:?subject=Partage&body=Voici un lien à partager : https://example.com' }"
/>

Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import DsfrShare from '../DsfrShare.vue'

const title = 'Partages'
const copyLabel = 'Copier dans le presse-papier'
const mail = {
  to: 'mailto:user@example.com?subject=Sujet&body=Corps du courriel',
  label: 'Envoyer un mail',
}
const networks = [
  {
    name: 'facebook',
    label: 'Partager sur Facebook',
    url: 'https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]',
  },
  {
    name: 'twitter-x',
    label: 'Partager sur X (anciennement Twitter)',
    url: 'https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]',
  },
  {
    name: 'linkedin',
    label: 'Partager sur LinkedIn',
    url: 'https://www.linkedin.com/shareArticle?url=[À MODIFIER - url de la page]&title=[À MODIFIER - titre ou texte descriptif de la page]',
  },
]
</script>

<template>
  <div class="w-90">
    <DsfrShare
      :title="title"
      :copy-label="copyLabel"
      :networks="networks"
      :mail="mail"
    />
  </div>
</template>

⚙️ Code source du composant

DsfrShare.vue

<script lang="ts" setup>
import type { DsfrShareProps } from './DsfrShare.types'

export type { DsfrShareProps }

withDefaults(defineProps<DsfrShareProps>(), {
  title: 'Partager la page',
  copyLabel: 'Copier dans le presse-papier',
  // @ts-expect-error this is really undefined
  mail: () => undefined,
  networks: () => [],
})

const copyLocationToClipboard = () => {
  const url = window.location.href
  navigator.clipboard.writeText(url)
}
const openWindow = ({ url, label }: { url: string, label: string }) => {
  window.open(
    url,
    label,
    'toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450',
  )
}
</script>

<template>
  <div class="fr-share">
    <p class="fr-share__title">
      {{ title }}
    </p>
    <ul class="fr-btns-group">
      <li
        v-for="(network, i) of networks"
        :key="i"
      >
        <a
          :class="`fr-btn fr-btn--${network.name}`"
          :title="`${network.label} - nouvelle fenêtre`"
          :href="network.url"
          target="_blank"
          rel="noopener noreferrer"
          @click.prevent="openWindow(network)"
        >
          {{ network.label }}
        </a>
      </li>
      <li v-if="mail?.to">
        <a
          class="fr-btn fr-btn--mail"
          :href="mail.to"
          :title="`${mail.label} - nouvelle fenêtre`"
          target="_blank"
          rel="noopener noreferrer"
        >
          {{ mail.label }}
        </a>
      </li>
      <li>
        <button
          class="fr-btn fr-btn--copy"
          :title="copyLabel"
          @click="copyLocationToClipboard()"
        >
          {{ copyLabel }}
        </button>
      </li>
    </ul>
  </div>
</template>

DsfrShare.types.ts

export type DsfrShareProps = {
  title?: string
  copyLabel?: string
  mail?: { label: string, to: string }
  networks?: { name: string, label: string, url: string }[]
}