Nouveau design system

[johangirod]

Mon-entreprise design system

Checklist avant release :

• Ouvrir les liens externe dans une nouvelle fenêtre
• Réparer modale "générer un lien de partage" sur mobile
• Réparer formulaire demande mobilité
  • UI
  • Test
• Réparer modale dans iframe (elle s'affiche au milieu de la page, s'inspirer de ce qui marchait pour l'ancienne overlay)
• Réparer les inputs nombre (cf commentaire de maxime sur cette PR)
• Réparer les inputs nombre : non actualisation des résultat lors du changement de page / lors du clique sur une suggestion
• Réparer la recherche 1 : les règles n'aparraissent plus @bobylito
• Réparer la recherche 1bis : Mettre à jour le style des résultats de règles
• Réparer la recherche 2 : la modale change de position en fonction du nombre de résultats
• Réparer la recherche 3 : le texte "Search is stalling" apparraît lorsque la recherche est en cours @bobylito
• Réparer la recherche 4 : la croix de recherche apparaît sur chrome @bobylito
• Réparer la recherche 4bis : faire que la croix impacte la recherche @bobylito
• Réparer la recherche 5 : surligner les match textuels @bobylito
• Réparer la recherche 6 : utiliser la charte pour les résultats sur les règles @bobylito
• Réparer les montants de la section "à quoi servent mes cotisations" @bobylito
• Les items des listes doivent avoir un léger margin bottom
• Résoudre le bug des pages qui crashent
• Réparer la page stat
• Réparer les tests E2E (cypress)
• Réparer la page nouveauté @bobylito

Moins urgent

• Fiche de paie un peu brouillon: tout bleu, des trucs cliquables d'autres non... un peu fouilli
• Réparer le site publi.codes
• Lien visité d'une couleur différente
• animation et combobox (commune et pays eu) @bobylito

Encore un peu moins urgent (mais c'est l'occasion de le faire)

• Documenter le design system (styleguidist?)

Structure d'un composant du design system

Il s'agit d'un composant sans logique métier implémenté avec styled components. Dans le cas où le composant proposerait de l'interactivité, on utilisera react-aria pour implémenter un comportement qui respecte les règles d'accessibilité.

Liste des composants graphiques

• composants typographiques
  • H1
  • H2
  • H3
  • Intro
  • Body
  • SmallBody
• layout
  • Container – layout global responsive
  • Columns – implémente les grilles << pas sur de ce qu'on veut sur ça
  • Footer
• List
• Button
• Link
• Input
• Card
• Modal (Popover)
• Help Button (Aide / Info)
• InputText
• InputRadio
• InputCheckbox
• ToggleButton

Valeurs du styleguide / thème

Le thème contient toutes les valeurs du design system (voir styleguide).

Le thème est distribué aux composants via le context en utilisant le système proposé dans le repo de la CDTN.

Classes CSS utilitaires (à conserver ou à creer)

• print-display-none
• sr-only

[github-actions]

🚀 La branche est déployée !

• mon-entreprise : https://1788--mon-entreprise.netlify.app
• mycompanyinfrance : https://1788-en--mon-entreprise.netlify.app