Contrib.social

Question about factor some pattern

Open on Drupal.org →
Created on 11 July 2024, 10 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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024