Réseaux Sociaux - DsfrSocialNetworks

🌟 Introduction

Le composant DsfrSocialNetworks est conçu pour afficher une liste de boutons vers des réseaux sociaux, avec un style conforme au Design System de l'État Français (DSFR). Il permet d'encourager les utilisateurs à suivre votre organisation sur les plateformes sociales.

🏅 La documentation sur Réseaux Sociaux sur le DSFR

La story sur Réseaux Sociaux sur le storybook de VueDsfr

📐 Structure

Le composant affiche :

• un titre (dont la balise peut être configurée avec la prop titleTag) ;
• une liste de boutons pour chaque réseau social fourni dans les props.

Chaque bouton :

• utilise une classe CSS correspondant au type de réseau (par exemple, fr-btn--facebook) ;
• affiche le nom du réseau ;
• redirige vers l'URL spécifiée en ouvrant un nouvel onglet.

🛠️ Props

Nom	Type	Défaut	Description
networks	DsfrSocialNetwork[]	[]	Liste des réseaux sociaux à afficher, avec leurs détails (type, name, href).
titleTag	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h3'	Tag HTML utilisé pour le titre du composant.

Format de DsfrSocialNetwork

Chaque réseau est un objet de type :

Nom	Type	Description
type	`'facebook'	'twitter-x'
name	string	Nom affiché pour le réseau social.
href	string	URL vers le profil ou la page sociale.

📡 Événements

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

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrSocialNetworks
  :networks="[
    { type: 'facebook', name: 'Facebook', href: 'https://facebook.com' },
    { type: 'twitter-x', name: 'Twitter', href: 'https://twitter.com' },
    { type: 'linkedin', name: 'LinkedIn', href: 'https://linkedin.com' }
  ]"
/>

Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import type { DsfrSocialNetwork } from '../DsfrFollow.types'
import DsfrSocialNetworks from '../DsfrSocialNetworks.vue'

const titleTag = 'h2'

const networks: DsfrSocialNetwork[] = [
  {
    name: 'Facebook',
    type: 'facebook',
    href: 'https://www.facebook.com',
  },
  {
    name: 'X (anciennement Twitter)',
    type: 'twitter-x',
    href: 'https://www.x.com',
  },
  {
    name: 'Youtube',
    type: 'youtube',
    href: 'https://www.youtube.com',
  },
  {
    name: 'Linkedin',
    type: 'linkedin',
    href: 'https://www.linkedin.com',
  },
  {
    name: 'Instagram',
    type: 'instagram',
    href: 'https://www.instagram.com',
  },
]
</script>

<template>
  <DsfrFollow>
    <!-- Important, car ce div est dans un div.fr-grid-row -->
    <div class="fr-col-12">
      <DsfrSocialNetworks
        :is="titleTag"
        :networks="networks"
      />
    </div>
  </DsfrFollow>
</template>

⚙️ Code source du composant

DsfrSocialNetworks.vue

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

export type { DsfrSocialNetworksProps }
export type { DsfrSocialNetwork, DsfrSocialNetworkName } from './DsfrFollow.types'

withDefaults(defineProps<DsfrSocialNetworksProps>(), {
  titleTag: 'h3',
})
</script>

<template>
  <div class="fr-follow__social">
    <component
      :is="titleTag"
      class="fr-h5 fr-mb-3v fr-mb-3v"
    >
      Suivez-nous
      <br> sur les réseaux sociaux
    </component>
    <ul
      v-if="networks.length"
      class="fr-btns-group fr-btns-group--lg"
    >
      <li
        v-for="(network, idx) in networks"
        :key="idx"
      >
        <a
          class="fr-btn"
          :class="`fr-btn--${network.type}`"
          :title="network.name"
          :href="network.href"
          target="_blank"
          rel="noopener noreferrer"
        >
          {{ network.name }}
        </a>
      </li>
    </ul>
  </div>
</template>

DsfrFollow.types.ts

export type DsfrSocialNetworkName = 'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'
export type DsfrSocialNetwork = {
  type: DsfrSocialNetworkName
  name: string
  href: string
}

export type DsfrSocialNetworksProps = {
  networks: DsfrSocialNetwork[]
  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

export type DsfrNewsLetterProps = {
  title?: string
  description?: string
  email?: string
  error?: string
  labelEmail?: string
  placeholder?: string
  hintText?: string
  inputTitle?: string
  buttonText?: string
  buttonTitle?: string
  buttonAction?: ($event: MouseEvent) => void
  onlyCallout?: boolean
}

export type DsfrFollowProps = {
  newsletterData: DsfrNewsLetterProps
  networks: DsfrSocialNetwork[]
}