[Meta] UI Kit consolidation

[maudetes]

Copied from datagouv/udata-front#33 by @gmougeolle.

---

I [...] did a review of all existing styles in order for us to decide what to do with some of them :

• UI Kit consolidation : Primary button #686
• UI Kit consolidation : Secondary button #687
• UI Kit consolidation : Action button #688
• UI Kit consolidation : Dropdown #689
• UI Kit consolidation : Icon size #690
• UI Kit consolidation : Tab-panel #691
• UI Kit consolidation : Tags #692
• UI Kit consolidation : Callouts #693
• UI Kit consolidation : Aileron font #694
• UI Kit consolidation : Colors #695
• UI Kit consolidation : Interaction - Tabs #696
• UI Kit consolidation : Interaction - Clipboard #697
• UI Kit consolidation : Interaction - Accordions #698
• UI Kit consolidation : Interaction - Modals #699

[maudetes]

Après discussion, voici les prochaines actions qui ont été identifiées pour la consolidation de l'UI Kit:

• Supprimer les boutons primaires. Remplacer les quelques boutons primaires restants par des boutons secondaires. Possibilité de changer la couleur pour le différencier d'un bouton secondaire à proximité.
• Renommer les boutons secondaires en boutons primaires
• Enlever les btn-action inutiles sur jinja
• Supprimer les btn-actions quand ils auront été remplacés
• Changer le dropdown dans le footer par celui du DSFR et supprimer le dropdown
• Supprimer les icon size
• Supprimer tab-panel avec le js correspondant si pertinent
• Remplacer les tags par ceux du DSFR (cliquables et non cliquables)
• Supprimer le Callout et au besoin utiliser celui du DSFR

En ce qui concerne les couleurs spécifiquement, l'idée est d'itérer sur les couleurs au fur et à mesure. On peut déjà supprimer les quelques couleurs non utilisées et remplacer les valeurs des variables par les valeurs du DSFR pour résoudre les soucis d’accessibilité, mais attention aux effets de bords.

[gmougeolle]

Thanks 🙏 , deux petites remarques :

• Supprimer tab-panel avec le js correspondant si pertinent

Le JS sert aussi à d'autres endroits (notamment les tabs de la home qui ne sont pas des tabs-panel), pour l'instant il vaut mieux le garder !

• Supprimer le Callout et au besoin utiliser celui du DSFR

Il s'agit de deux points différents : les callouts peuvent être supprimés (c'était les encarts colorés des premières maquettes), et les well peuvent être remplacés par les "mises en avant (callout)" du DSFR

[nicolaskempf57]

Suivi des mises à jours :

• les dropdown sont maintenant des du DSFR les .tabs sont remplacés par un attribut data-tabs les . tab-panel sont remplacés par la présence d'un attribut aria-controls sur les tabs les icon size sont remplacés par l'utilisation des icones du DSFR et par un portage des classes pour fonctionner avec les SVG