Contrib.social

Question about factor some pattern

Open on Drupal.org →
Created on 11 July 2024, 9 months ago

Problem/Motivation

I just saw this pattern:

    <fieldset aria-labelledby="{{ service.attributes.id }}-legend {{ service.attributes.id }}-desc" role="group" class="fr-fieldset fr-fieldset--inline">
    <legend id="{{ service.attributes.id }}-legend" class="fr-consent-service__title">{{ service.title }}</legend>
    <div class="fr-consent-service__radios">
      <div class="fr-radio-group">
        <input type="radio" id="consent-{{ service.attributes.id }}-accept" name="consent-{{ service.attributes.id }}">
        <label class="fr-label" for="consent-{{ service.attributes.id }}-accept">{{ 'Accept'|t }}</label>
      </div>
      <div class="fr-radio-group">
        <input type="radio" id="consent-{{ service.attributes.id }}-refuse" name="consent-{{ service.attributes.id }}">
        <label class="fr-label" for="consent-{{ service.attributes.id }}-refuse">{{ 'Refuse'|t }}</label>
      </div>
    </div>
    {% if service.attributes.title %}
      <p id="{{ service.attributes.id }}-desc" class="fr-consent-service__desc">{{ service.attributes.title }}</p>
    {% endif %}
    {% if service.below %}
      <div class="fr-consent-service__collapse">
        <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="{{ service.attributes.id }}-legend" aria-controls="{{ service.attributes.id }}-collapse">{{ 'See more details'|t }}</button>
      </div>
      <div class="fr-consent-services fr-collapse" id="{{ service.attributes.id }}-collapse">
        {% for sub_service in service.below %}
          {% set sub_id = sub_service.attributes.id|default('') %}
          <div class="fr-consent-service">
            <fieldset class="fr-fieldset fr-fieldset--inline">
              <legend id="{{ service.attributes.id }}-{{ sub_id }}-legend" class="fr-consent-service__title">{{ sub_service.title|default('') }}</legend>
              <div class="fr-consent-service__radios fr-fieldset--inline">
                <div class="fr-radio-group">
                  <input type="radio" id="consent-{{ service.attributes.id }}-{{ sub_id }}-accept" name="consent-{{ service.attributes.id }}-{{ sub_id }}">
                  <label class="fr-label" for="consent-{{ service.attributes.id }}-{{ sub_id }}-accept">{{ 'Accept'|t }}</label>
                </div>
                <div class="fr-radio-group">
                  <input type="radio" id="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse" name="consent-{{ service.attributes.id }}-{{ sub_id }}">
                  <label class="fr-label" for="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse">{{ 'Refuse'|t }}</label>
                </div>
              </div>
            </fieldset>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </fieldset>

(pattern of the consent manager)
We can see that some part can be factor inside sub pattern. Is it an oversight or is it wanted (against the logical philosophy)
we can factor the part of service :

     <div class="fr-radio-group">
                  <input type="radio" id="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse" name="consent-{{ service.attributes.id }}-{{ sub_id }}">
                  <label class="fr-label" for="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse">{{ 'Refuse'|t }}</label>
                </div>
💬 Support request
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France musa.thomas France 🇫🇷

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

Comments & Activities

  • Issue created by @musa.thomas
  • Comment 9 months ago →
    🇫🇷France musa.thomas France 🇫🇷
  • Comment 9 months ago →
    🇫🇷France pdureau Paris

    if you want to extract a component from the markup of a component, it is nice to follow the clues given by the BEM (Block Element Modifier) naming methodology

    So, those can be the roots of the new component:

    • fr-consent-service
    • fr-consent-services
    • fr-fieldset
    • fr-radio-group

    But not those ones:

    • fr-consent-service__collapse
    • fr-consent-service__radios
    • ...
  • Status changed to Postponed: needs info 9 months ago
  • Comment 9 months ago →
    🇫🇷France pdureau Paris
  • Status changed to Closed: won't fix 5 months ago
  • Comment 5 months ago →
    🇫🇷France pdureau Paris
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024