feat(Modal): adjust styling, adds width flexibility and header is now bold

[hebernardEquisoft]

DS-1196

Description

Ici on vient;

1. Ajuster le styling aux maquettes de modales.
2. Ajouter une propriété width permettant de modifier de la modale
3. Rendre le titre de la modale en gras (bold)

Tests fonctionnels

• Valider le bon fonctionnement de la composante de modale
• Valider le styling avec les maquettes design
• Valider le styling en mobile

[github-actions]

Storybook for this build: https://ds.equisoft.io/pr-984/

[github-actions]

Webapp for this build: https://ds.equisoft.io/pr-984/webapp/

[LarryMatte]

Petit commentaire à valider.
Sinon en ce qui concerne la tâche, c'est good pour moi. Je laisse les devs faire le tour pour les modifications au code.

[LarryMatte]

Une autre passe.
Quelques commentaires/suggestions, à toi de voir.

[LarryMatte]

Je me demande de la pertinence du bout de code où nous venons spécifier s'il y a un header et un footer.

Si nous enlevons le padding du <header> <main> et <footer> et l'ajoutons seulement sur le container de la modal, je crois que nous n'aurions pas besoin de tout ça et nous sauverions quelques lignes de CSS.
Le padding de la modal va empêcher l'élément <main> d'être collé sur le haut et le bas de la modal s'il n'y a pas de header et footer.
Pour l'espacement entre le header le main et le footer,
Il peut y avoir un margin-bottom sur le heading (h2) et un margin-top sur le footer.

• Le margin-bottom du heading reste celui spécifier sur les headings du DS et il va permettre de pousser le main. S'il n'y a pas de header, le main va être collé au padding top de la modal.
• Même principe pour le footer, nous pouvons lui ajouter un margin-top qui va créer l'espace avec le main. S'il n'y a pas de footer, le main va être collé au padding du bas de la modal.

Ça va p-e simplifier aussi le no-padding car il va seulement être sur le container et non sur tous les éléments (header, main, footer)

Nous n'aurions pas besoin non plus du gap dans la section <main>. Les éléments de textes vont garder le même espacement que dans le reste de l'app sans avoir à overwrite leurs styles.

J'ai fait un exemple sur codepen. Peut-être que j'oublie certaines choses, mais j'ai l'impression que ca simplifie pas mal et nous pourrions seulement utiliser du CSS au lieu d'ajouter des conditions selon la présence ou non d'un header/footer.

[LarryMatte]

ah nvm, je croyais que c'était un improvement que tu avais fait. Je viens de voir que c'était déjà comme ça. Stress pas pour ça, nous y reviendrons plus tard.

[LarryMatte]

Je laisse les devs juger du code mais en ce qui me concerne, c'est good.