Liste de partenaires de pied de page - DsfrFooterPartners

🌟 Introduction

Le composant DsfrFooterPartners est conçu pour afficher une liste de partenaires dans le pied de page d'un site web. Il permet d'ajouter un partenaire principal et une série de sous-partenaires avec leurs logos et liens. C'est un composant utile pour valoriser les collaborations et apporter une visibilité supplémentaire aux partenaires d'une organisation ou d'un projet.

📐 Structure

• <DsfrFooterPartners> : Le composant principal.
  • Affiche le titre du bloc partenaires, s'il est fourni.
  • Montre un partenaire principal distinctement, s'il est défini.
  • Liste les sous-partenaires dans un format compact.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
mainPartner	DsfrFooterPartner	Objet représentant le partenaire principal avec lien, logo, et nom.	undefined
subPartners	DsfrFooterPartner[]	Tableau d'objets représentant les sous-partenaires.	[]
title	string	Titre de la section des partenaires.	''

📡 Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

Aucun slot n'est prévu dans ce composant. Le contenu est entièrement basé sur les props.

📝 Exemples

Ce composant est utilisé en interne dans DsfrHeader. Il n’y a pas de raison de l’utiliser en dehors.

⚙️ Code source du composant

DsfrFooterPartners.vue

<script lang="ts" setup>
export type DsfrFooterPartner = {
  href: string
  logo: string
  name: string
}

export type DsfrFooterPartnersProps = {
  mainPartner?: DsfrFooterPartner
  subPartners?: DsfrFooterPartner[]
  title?: string
}

withDefaults(defineProps<DsfrFooterPartnersProps>(), {
  mainPartner: undefined,
  subPartners: () => [],
  title: '',
})
</script>

<template>
  <div class="fr-footer__partners">
    <h4
      v-if="title"
      class="fr-footer__partners-title"
    >
      {{ title }}
    </h4>
    <div class="fr-footer__partners-logos">
      <div
        v-if="mainPartner"
        class="fr-footer__partners-main"
      >
        <a
          class="fr-footer__partners-link"
          :href="mainPartner.href"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            class="fr-footer__logo"
            :src="mainPartner.logo"
            :alt="mainPartner.name"
          >
        </a>
      </div>
      <div class="fr-footer__partners-sub">
        <ul>
          <li
            v-for="(partner, idx) in subPartners"
            :key="idx"
          >
            <a
              class="fr-footer__partners-link"
              :href="partner.href"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img
                class="fr-footer__logo"
                :src="partner.logo"
                :alt="partner.name"
              >
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

DsfrFooter.types.ts

import type { HTMLAttributes, StyleValue } from 'vue'
import type { RouteLocationRaw } from 'vue-router'

import type VIcon from '../VIcon/VIcon.vue'

export type DsfrFooterPartner = {
  href: string
  logo: string
  name: string
}

export type DsfrFooterPartnersProps = {
  mainPartner?: DsfrFooterPartner
  subPartners?: DsfrFooterPartner[]
  title?: string
}

export type DsfrFooterLinkProps = {
  button?: boolean
  icon?: string | InstanceType<typeof VIcon>['$props']
  iconAttrs?: InstanceType<typeof VIcon>['$props'] & HTMLAttributes
  iconRight?: boolean
  label?: string
  target?: string
  onClick?: ($event: MouseEvent) => void
  to?: RouteLocationRaw
  href?: string
  title?: string
}

export type DsfrFooterLinkListProps = {
  categoryName: string
  links: DsfrFooterLinkProps[]
}

export type DsfrFooterProps = {
  a11yCompliance?: string
  a11yComplianceLink?: RouteLocationRaw
  legalLink?: string
  homeLink?: RouteLocationRaw
  homeTitle?: string
  partners?: DsfrFooterPartnersProps
  personalDataLink?: string
  cookiesLink?: string
  logoText?: string | string[]
  descText?: string
  beforeMandatoryLinks?: DsfrFooterLinkProps[]
  afterMandatoryLinks?: DsfrFooterLinkProps[]
  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined, title?: string }[]
  ecosystemLinks?: { label: string, href: string, title: string, [key: string]: string }[]
  operatorLinkText?: string
  operatorTo?: RouteLocationRaw | undefined
  operatorImgStyle?: StyleValue
  operatorImgSrc?: string
  operatorImgAlt?: string
  licenceTo?: string
  licenceLinkProps?: ({ href: string } | { to: RouteLocationRaw | undefined }) & Record<string, string>
  licenceText?: string
  licenceName?: string
}