Clean variant logic in templates

Many components have variants:

• alert
• badge
• button
• button_group
• card
• content_media
• footer_menu
• france_connect
• highlight
• link
• modal
• notice
• side_menu
• tab_panel
• tab
• tag
• tile
• translate

Remove useless |lower filters

Maybe there was a time in the early UI Patterns 1.x when lowering the variant name was useful, but it is not anymore:

$ grep -r variant.*lower components/*/*.twig
components/alert/alert.twig:{% if variant and variant|lower != 'default' %}
components/alert/alert.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-alert--' ~ v})|replace({_: '-'})) %}
components/badge/badge.twig:{% if variant and variant|lower != 'default' %}
components/badge/badge.twig:  {% set attributes = attributes.addClass('fr-badge--' ~ variant|lower|replace({_: '-'})) %}
components/button/button.twig:{% if variant and variant|lower != 'default' %}
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btn--' ~ v})|replace({_: '-'})) %}
components/button_group/button_group.twig:{% if variant and variant|lower != 'default' %}
components/button_group/button_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btns-group--' ~ v})|replace({_: '-'})) %}
components/card/card.twig:{% if variant and variant|lower != 'default' %}
components/card/card.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-card--' ~ v})|replace({_: '-'})) %}
components/content_media/content_media.twig:{% if variant and variant|lower != 'default' %}
components/content_media/content_media.twig:  {% set attributes = attributes.addClass('fr-content-media--' ~ variant|lower|replace({_: '-'})) %}
components/france_connect/france_connect.twig:{% if variant and variant|lower != 'default' %}
components/france_connect/france_connect.twig:  {% set attributes = attributes.addClass('fr-connect--' ~ variant|lower|replace({_: '-'})) %}
components/highlight/highlight.twig:{% if variant and variant|lower != 'default' %}
components/highlight/highlight.twig:  {% set text_attributes = text_attributes.addClass('fr-text--' ~ variant|lower) %}
components/link/link.twig:{% if variant and variant|lower != 'default' and not external %}
components/link/link.twig:  {% set attributes = attributes.addClass('fr-link--' ~ variant|lower|replace({_: '-'})) %}
components/modal/modal.twig:{% if not variant or variant|lower == 'default' %}
components/modal/modal.twig:{% if variant|lower == 'sm' %}
components/modal/modal.twig:{% if variant|lower == 'lg' %}
components/side_menu/side_menu.twig:{% if variant and variant|lower != 'default' %}
components/side_menu/side_menu.twig:  {% set attributes = attributes.addClass('fr-sidemenu--' ~ variant|lower|replace({_: '-'})) %}
components/tab_panel/tab_panel.twig:{% if variant|lower == 'selected' %}
components/tab/tab.twig:{% if variant|lower == 'selected' %}
components/tag/tag.twig:{% if variant and variant|lower != 'default' %}
components/tag/tag.twig:  {% set attributes = attributes.addClass('fr-tag--' ~ variant|lower|replace({_: '-'})) %}
components/tile/tile.twig:{% if variant and variant|lower != 'default' %}
components/tile/tile.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-tile--' ~ v})|replace({_: '-'})) %}
components/translate/translate.twig:      <button class="fr-translate__btn fr-btn fr-btn--tertiary{% if variant|lower == 'no-outline' %}-no-outline{% endif %}" aria-controls="{{ translate_id }}" aria-expanded="false" title="{{ 'Select a language'|t }}" type="button">

Remove the filter.

Useless "__" (double underscore) logic and split filter

5 components with variants with "__" (dropdown removed):

$ grep -lr __ components/*/*.component.yml
components/alert/alert.component.yml
components/button/button.component.yml
components/button_group/button_group.component.yml
components/card/card.component.yml
components/tile/tile.component.yml

5 are manipulating it in templates (once consent_banner excluded):

$ grep -r variant.*__ components/*/*.twig
components/alert/alert.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-alert--' ~ v})|replace({_: '-'})) %}
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btn--' ~ v})|replace({_: '-'})) %}
components/button_group/button_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btns-group--' ~ v})|replace({_: '-'})) %}
components/card/card.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-card--' ~ v})|replace({_: '-'})) %}
components/tile/tile.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-tile--' ~ v})|replace({_: '-'})) %}

So nothing to do here.

Useless "_" (simple underscore) logic and replace filter

$ grep -r variant.*replace components/*/*.twig
components/alert/alert.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-alert--' ~ v})|replace({_: '-'})) %}
components/badge/badge.twig:  {% set attributes = attributes.addClass('fr-badge--' ~ variant|lower|replace({_: '-'})) %}
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btn--' ~ v})|replace({_: '-'})) %}
components/button_group/button_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-btns-group--' ~ v})|replace({_: '-'})) %}
components/card/card.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-card--' ~ v})|replace({_: '-'})) %}
components/content_media/content_media.twig:  {% set attributes = attributes.addClass('fr-content-media--' ~ variant|lower|replace({_: '-'})) %}
components/france_connect/france_connect.twig:  {% set attributes = attributes.addClass('fr-connect--' ~ variant|lower|replace({_: '-'})) %}
components/link/link.twig:  {% set attributes = attributes.addClass('fr-link--' ~ variant|lower|replace({_: '-'})) %}
components/side_menu/side_menu.twig:  {% set attributes = attributes.addClass('fr-sidemenu--' ~ variant|lower|replace({_: '-'})) %}
components/tag/tag.twig:  {% set attributes = attributes.addClass('fr-tag--' ~ variant|lower|replace({_: '-'})) %}
components/tile/tile.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'fr-tile--' ~ v})|replace({_: '-'})) %}

But some components may not have "_" (single underscore) in variant ID. If so, remove |replace() filter.