Add footer partners

Created on 12 February 2023, about 2 years ago

Problem/Motivation

Following 🐛 [beta1]⚠️ Avoid manually injected HTML in footer component Fixed , we need to add the partners which are still missing from the footer pattern.

Example of markup:

<div class="fr-footer__partners">
  <h4 class="fr-footer__partners-title">Nos partenaires</h4>
  <div class="fr-footer__partners-logos">
      <div class="fr-footer__partners-main">
          <a class="fr-footer__partners-link" href="#">
              <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
          </a>
      </div>
      <div class="fr-footer__partners-sub">
          <ul>
              <li>
                  <a class="fr-footer__partners-link" href="#">
                      <img class="fr-footer__logo" style="height: 5.625rem" src="/example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                  </a>
              </li>
              <li>
                  <a class="fr-footer__partners-link" href="#">
                      <img class="fr-footer__logo" style="height: 5.625rem" src="/example/img/placeholder.1x1.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                  </a>
              </li>
          </ul>
      </div>
  </div>
</div>

Proposed resolution

We are proposing to add this as its own pattern:

footer_partners:
  label: (Footer partners)
  description: "To be embedded in the footer pattern. https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pied-de-page/"
  fields:
    title:
      label: Title
      type: text
      preview: Nos partenaires
    main:
      label: Main partner
      type: render
    sub:
      label: Other partners
      type: render

So, in footer.ui_patterns.yml we can call the preview:

    partners:
      type: render
      label: Partners
      description: "A partner pattern."
      preview:
        type: pattern_preview
        id: footer_partners

Remaining tasks

The nesting of links and image may be tricky.

Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024