Problem/Motivation

Following #3341066: [beta1]⚠️ Avoid manually injected HTML in footer component, 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.

Issue fork ui_suite_dsfr-3341122

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pdureau created an issue. See original summary.

spryah made their first commit to this issue’s fork.

pdureau’s picture

pdureau commented
Version: » 1.0.x-dev

You may need the new Links settings type introduced by https://www.drupal.org/project/ui_patterns_settings/releases/8.x-2.1

spryah’s picture

spryah commented

We put this issue on hold because the DSFR maintainers have yet to release a fix that will allow developers to define a list of (sub) partners without having to define a main partner (it shouldn't be long now)

pdureau’s picture

pdureau commented
Status: Active » Postponed

OK :)

pdureau’s picture

pdureau commented
Title: Add footer partners » [beta7] Add footer partners
Status: Postponed » Active

Links type is now available.

pdureau’s picture

pdureau commented

We put this issue on hold because the DSFR maintainers have yet to release a fix that will allow developers to define a list of (sub) partners without having to define a main partner (it shouldn't be long now)

3 month later, it seems it is not done yet upstream: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pi...

Logo du partenaire principal, ferré à gauche - obligatoire
Logos des partenaires additionnels, ferrés à droite - optionnels.

pdureau’s picture

pdureau commented

Some thoughts...

1. Do we still do a separate component considering #3417519: [beta6] ⚠️ Merge footer_top into footer component ?

2. It will not be easy to convert main & sub slots to "links" props because of the images.

3. So, instead or aside of footer_partners component, we may need a new partner_link component with one url prop and one "image" slot:

{{ set attributes = url ? attributes.setAttribute("href", url) : attributes }}
<a{{ attributes.addClass("fr-footer__partners-link") }}>
  {{ image|add_class(""fr-footer__logo")|set_attribute("style", "height: 5.625rem")
</a>
pdureau’s picture

pdureau commented
Title: [beta7] Add footer partners » [1.1.0] Add footer partners
musa.thomas’s picture

musa.thomas
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » musa.thomas

Musa.thomas opened merge request !98

musa.thomas’s picture

musa.thomas
Primary language French
Location France 🇫🇷
commented
Assigned: musa.thomas » Unassigned
Status: Active » Needs review
musa.thomas’s picture

musa.thomas
Primary language French
Location France 🇫🇷
commented
Version: 1.0.x-dev » 1.0.0
Priority: Normal » Critical
pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
pdureau’s picture

pdureau commented
Assigned: pdureau » Unassigned
Status: Needs review » Postponed

Why footer_partner_link is a component? Can we achieve this witout introducing this unexpected component?

musa.thomas’s picture

musa.thomas
Primary language French
Location France 🇫🇷
commented

@pdureau sorry for the late answer,
"Why footer_partner_link is a component? Can we achieve this witout introducing this unexpected component?"
but th #8 u said :
"3. So, instead or aside of footer_partners component, we may need a new partner_link component with one url prop and one "image" slot:

{{ set attributes = url ? attributes.setAttribute("href", url) : attributes }}

{{ image|add_class(""fr-footer__logo")|set_attribute("style", "height: 5.625rem")
"
Did I misunderstood something ?

pdureau’s picture

pdureau commented
Version: 1.0.0 » 1.1.x-dev
just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Assigned: Unassigned » just_like_good_vibes
Status: Postponed » Needs work

we need to finish this for 1.1.0

pdureau’s picture

pdureau commented

One year later, I am not that sure this must be it's own component instead of just an addition to the footer component.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented

last issue before 1.1.0-RC-1 tag.
i will post code to this one soon, unless someone wants to do it?

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Title: [1.1.0] Add footer partners » [1.1.x] Add footer partners
Status: Needs work » Postponed

we postpone this one, some notes :

- we won't make a new component, but we will upgrade the footer component
- still not sure about how to model the input.
- in the docs the style prop is not a good news.
- probably we will model the input with arrays, the first element(s) of array(s) would be the main partner. we won't separate main and sub partners in input
- footer related classes have to be injected into a and img tags, so we won't allow slots, rather a prop-based solution