fix: fixing typos

.editorconfig

@@ -21,3 +21,6 @@ max_line_length = 100
 indent_style = space
 indent_size = 4
 trim_trailing_whitespace = false
+
+[*.pug]
+trim_trailing_whitespace = false

src/components/page/page-content-component.pug

@@ -5,7 +5,7 @@ mixin PageContentComponent({storybook,ui = true, js = true, ux = true, css = tru
         if ui
           +TabsNavItem({index:0, modifier:'active' , active:true})
             | User Interface
-        if js    
+        if js
           +TabsNavItem({index:1})
             | Interaction
         if ux
@@ -15,13 +15,13 @@ mixin PageContentComponent({storybook,ui = true, js = true, ux = true, css = tru
           +TabsNavItem({index:3})
             | Style
       +TabsContentLayout()
-        +TabsContentItem({index:0, modifier:'active' , active:true})          
+        +TabsContentItem({index:0, modifier:'active' , active:true})
           section#pagecode
             +Title({ level: "h1", modifier: 'page'  })
               | Source Code HTML / SASS
             article(class=`${prefix}-page__intro`)
-              p Vous trouverez ici les démos et le code source statiques du composant. 
-              p On expose les différentes déclinaisons du composant au format HTML et SASS. 
+              p Vous trouverez ici les démos et le code source statique du composant.
+              p On expose les différentes déclinaisons du composant au format HTML et SASS.
               p Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre 
                 a(href=`${storybookBaseUrl}${storybook}` target="_blank" rel="noopener noreferrer") storybook.
                   +Img({img:'storybook.svg', alt:"react storybook", modifier:"icon" })
@@ -31,7 +31,7 @@ mixin PageContentComponent({storybook,ui = true, js = true, ux = true, css = tru
             +Title({ level: "h1", modifier: 'page' })
               | React interactions
             article(class=`${prefix}-page__intro`)
-              p Vous trouverez ici les démos Storybook pour visualiser les interactions du composant. 
+              p Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.
               p Vous avez la possibilité de jouer avec les propriétés du composant React sur notre 
                 a(href=`${storybookBaseUrl}${storybook}` target="_blank" rel="noopener noreferrer") storybook.
                   +Img({img:'storybook.svg', alt:"react storybook", modifier:"icon" })
@@ -41,20 +41,20 @@ mixin PageContentComponent({storybook,ui = true, js = true, ux = true, css = tru
             +Title({ level: "h1", modifier: 'page' })
               | Generales Guidelines
             article(class=`${prefix}-page__intro`)
-              p Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.  
-              p Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
+              p Les guidelines permettent de décrire l'ensemble des règles et des éléments graphiques pour la conception des interfaces.
+              p Elles sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
             block guidelines
         +TabsContentItem({index:3})
           section
             +Title({ level: "h1", modifier: 'page' })
               | Style
             article(class=`${prefix}-page__intro`)
               p Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.
-              p On liste également les codes couleur utilisés,  
-                a(href=`${baseurl}/guidelines/color`) cliquez-ici 
-                | pour voir l'ensemble des couleurs du Design System
+              p On liste également les codes couleur utilisés, 
+                a(href=`${baseurl}/guidelines/color`) cliquez-ici
+                | pour voir l'ensemble des couleurs du Design System.
             block style
-    
-    
-    
+
+
+
 

src/pages/atoms/badge/markdown/guidelines.md

@@ -2,53 +2,57 @@
 
 Un badge indique le statut d’un élément auquel il est rattaché.
 
-<img src="../../assets/images/badge/badge-01.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+<p>
+    <img src="../../assets/images/badge/badge-01.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+</p>
 
 ## 2) Use case
 
--   Un badge peut être utilisé dans des composants tels que des tableaux, des groupes de listes, un bloc de restitution.
-
--   Les badges se déclinent en plusieurs couleurs, sémantiques ou contextuelles. Chaque couleur doit être utilisé en accord avec le sens rattaché:
-
-    -   Vert: succès,
-    -   Orange: avertissement, une action est requise, extérieur ou non,
-    -   Rouge: erreur/échec. L’utilisateur doit agir/recommencer l’action pour changer l’état.
-    -   Bleu AXA: Information AXA
-    -   Turquoise: Information générale / non spécifique
-    -   Univers AXA: rattaché à un univers métier d’AXA, comme assurance auto, maison etc.
+- Un badge peut être utilisé dans des composants tels que des tableaux, des groupes de listes, un bloc de restitution.
+- Les badges se déclinent en plusieurs couleurs, sémantiques ou contextuelles. Chaque couleur doit être utilisé en accord avec le sens rattaché&nbsp;:
+  - Vert&nbsp;: succès,
+  - Orange&nbsp;: avertissement, une action est requise, extérieur ou non,
+  - Rouge&nbsp;: erreur/échec. L’utilisateur doit agir/recommencer l’action pour changer l’état.
+  - Bleu AXA&nbsp;: Information AXA
+  - Turquoise&nbsp;: Information générale / non spécifique
+  - Univers AXA&nbsp;: rattaché à un univers métier d’AXA, comme assurance auto, maison etc.
 
 ## 3) Utilisation
 
-<img src="../../assets/images/badge/badge-02.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+<p>
+    <img src="../../assets/images/badge/badge-02.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+</p>
 
-a) Position
+### a) Position
 
 Un badge doit être positionné sur la même ligne que le contenu qu’il accompagne.
 
-b) Alignement
+### b) Alignement
 
 Le badge doit être aligné verticalement avec le contenu associé et sera ferré à gauche de préférence dans le bloc parent.
 
-c) Contenu
+### c) Contenu
 
 Uniquement le label.
 
-d) Rédaction
+### d) Rédaction
 
--   Un tag doit être clairement défini par son label.
--   Un mot par tag, sauf exception impossible (expression, mot composé, etc.).
+- Un tag doit être clairement défini par son label.
+- Un mot par tag, sauf exception impossible (expression, mot composé, etc.).
 
-e) Pictogrammes
+### e) Pictogrammes
 
 Aucun pictogramme ne doit être utilisé en plus du label.
 
-f) Variations
+### f) Variations
 
--   Vert
--   Orange
--   Rouge
--   Information
--   Bleu Axa
--   Univers Axa
+- Vert
+- Orange
+- Rouge
+- Information
+- Bleu AXA
+- Univers AXA
 
-<img src="../../assets/images/badge/badge-01.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+<p>
+    <img src="../../assets/images/badge/badge-01.jpg" alt="badge" class="tk-markdown__img-fullscreen" />
+</p>

src/pages/atoms/button/markdown/guidelines.md

@@ -4,55 +4,54 @@ Les boutons CTA (Call To Action) ont pour but d’initier une action. Leur texte
 
 ## 2) Use case
 
--   Les boutons sont principalement utilisés pour des actions, comme Ajouter, Supprimer, Valider, Se connecter. Chaque page devrait avoir un seul bouton d’action primaire, tout autre CTA devrait être représenté comme bouton secondaire.
--   Dans le cas de l’utilisation d’un bouton dans un composant — une barre de recherche par exemple — la variation « Small » sera utilisée obligatoirement.
+- Les boutons sont principalement utilisés pour des actions, comme « Ajouter », « Supprimer », « Valider », « Se connecter ». Chaque page devrait avoir un seul bouton d’action primaire, tout autre CTA devrait être représenté comme bouton secondaire.
+- Dans le cas de l’utilisation d’un bouton dans un composant — une barre de recherche par exemple — la variation « Small » sera utilisée obligatoirement.
 
-<img src="../../assets/images/button/button-01.jpg" alt="button" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/button/button-01.jpg" alt="button" class="tk-markdown__img-fullscreen" /></p>
 
 ## 3) DO/DONT
 
 Les boutons ne doivent pas être utilisés comme élément de navigation vers une page spécifique (URL unique). On utilisera à la place un lien, qui amènera l’utilisateur sur la page désirée.
 
-<img src="../../assets/images/button/button-02.jpg" alt="button" class="tk-markdown__img-fullscreen" />
-
-<img src="../../assets/images/button/button-03.jpg" alt="button" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/button/button-02.jpg" alt="button" class="tk-markdown__img-fullscreen" /></p>
+<p><img src="../../assets/images/button/button-03.jpg" alt="button" class="tk-markdown__img-fullscreen" /></p>
 
 ## 4) Avancé
 
--   L’ordre des boutons est du plus important à droite au moins important à gauche.
--   On ne peut utiliser un bouton d’un rang inférieur que si l’on a déjà utilisé un bouton d’un rang supérieur sur la page. On ne peut pas utiliser un bouton secondaire s’il n’y a pas de primaire sur la page, de lien si il n’y a pas de secondaire
+- L’ordre des boutons est du plus important à droite au moins important à gauche.
+- On ne peut utiliser un bouton d’un rang inférieur que si l’on a déjà utilisé un bouton d’un rang supérieur sur la page. On ne peut pas utiliser un bouton secondaire s’il n’y a pas de primaire sur la page, de lien si il n’y a pas de secondaire.
 
 ## 5) Utilisation
 
-a) Position
+### a) Position
 
 Le bouton primaire sera toujours le plus à droite, le bouton secondaire à gauche de celui-ci. Cela permet à l’utilisateur de savoir où se situe l’action principale avant d’avoir lu le label. Le positionnement devra rester cohérent dans l’ensemble de l’interface afin de faciliter le parcours utilisateur.
 
-b) Alignement
+### b) Alignement
 
--   Bouton primaire seul dans une modale : Ferré à droite et largeur ajustée au label
--   Bouton primaire et secondaire dans une modale : ferré à droite, espace de 8 px entre les boutons.
--   Lors de groupement de boutons, utiliser un espacement de 8px entre les éléments
+- Bouton primaire seul dans une modale : Ferré à droite et largeur ajustée au label
+- Bouton primaire et secondaire dans une modale : ferré à droite, espace de 8px entre les boutons.
+- Lors de groupement de boutons, utiliser un espacement de 8px entre les éléments
 
-<img src="../../assets/images/button/button-04.jpg" alt="button" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/button/button-04.jpg" alt="button" class="tk-markdown__img-fullscreen" /></p>
 
-c) Contenu
+### c) Contenu
 
--   Texte aligné à gauche dans le cas d’un bouton avec pictogramme « flèche » à droite.
--   Texte aligné à droite dans le cas d’un bouton avec pictogramme « flèche » à gauche.
--   Texte centré si label seul
--   Texte aligné à gauche dans le cas d’un bouton avec pictogramme à gauche
+- Texte aligné à gauche dans le cas d’un bouton avec pictogramme «&nbsp;flèche&nbsp;» à droite.
+- Texte aligné à droite dans le cas d’un bouton avec pictogramme «&nbsp;flèche&nbsp;» à gauche.
+- Texte centré si label seul
+- Texte aligné à gauche dans le cas d’un bouton avec pictogramme à gauche
 
-d) Rédaction
+### d) Rédaction
 
--   Le label d’un bouton doit clairement indiquer l’action qu’il opère avec une forme verbale ; comme « Sauvegarder » ou « Annuler ». Les labels « OK » ou « Oui » devront être remplacé par des formes verbales équivalentes.
--   Dans le cas de l’utilisation d’un pictogramme pour compléter le label, celui-ci doit être universel, suffisamment pour être compris sans contexte, comme un checkmark ou un plus par exemple.
+- Le label d’un bouton doit clairement indiquer l’action qu’il opère avec une forme verbale ; comme «&nbsp;Sauvegarder&nbsp;» ou «&nbsp;Annuler&nbsp;». Les labels «&nbsp;OK&nbsp;» ou «&nbsp;Oui&nbsp;» devront être remplacé par des formes verbales équivalentes.
+- Dans le cas de l’utilisation d’un pictogramme pour compléter le label, celui-ci doit être universel, suffisamment pour être compris sans contexte, comme un checkmark ou un plus par exemple.
 
-e) Pictogrammes
+### e) Pictogrammes
 
--   Taille 16\*16 px
--   Uniquement de la <a href="https://axaguildev.github.io/design-system/guidelines/icones" title="icon design system Axa" >liste des pictogrammes du Design System</a>
--   Espacement avec le label de 16px
--   Centré dans la hauteur du bouton
+- Taille 16\*16px
+- Uniquement de la <a href="https://axaguildev.github.io/design-system/guidelines/icones" title="icon design system AXA" >liste des pictogrammes du Design System</a>
+- Espacement avec le label de 16px
+- Centré dans la hauteur du bouton
 
-<img src="../../assets/images/button/button-05.jpg" alt="button" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/button/button-05.jpg" alt="button" class="tk-markdown__img-fullscreen" /></p>

src/pages/atoms/list/markdown/guidelines.md

@@ -1,3 +1,3 @@
 ## 1) Définition
 
-Pourquoi créons-nous des listes? Parce qu'ils constituent un moyen naturel d'optimiser la scannabilité et de résumer le contenu. Les listes sont un moyen de se souvenir, de résumer et de faire avancer les choses. Et dans la conception de l'interface utilisateur, ce n'est pas différent
+Pourquoi créons-nous des listes ? Parce qu'ils constituent un moyen naturel d'optimiser la scannabilité et de résumer le contenu. Les listes sont un moyen de se souvenir, de résumer et de faire avancer les choses. Et dans la conception de l'interface utilisateur, ce n'est pas différent.

src/pages/atoms/loader/markdown/guidelines.md

@@ -4,36 +4,36 @@ Le spinner est un composant animé faisant patienter l’utilisateur lors de tâ
 
 ## 2) Use case
 
--   Le spinner doit être mis en place lorsque l’action liée prend constamment plus de 3 secondes pour s’effectuer.
--   Le spinner peut être utilisé lors d’un upload de fichier.
+- Le spinner doit être mis en place lorsque l’action liée prend constamment plus de 3 secondes pour s’effectuer.
+- Le spinner peut être utilisé lors d’un upload de fichier.
 
-<img src="../../assets/images/loader/loader-01.jpg" alt="loader" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/loader/loader-01.jpg" alt="loader" class="tk-markdown__img-fullscreen" /></p>
 
 ## 3) DO/DONT
 
--   Le spinner ne doit pas être utilisé si l’on peut afficher une barre de chargement quantifiée (XX%).
--   Le spinner ne doit pas être utilisé si le résultat de l’action de s’affiche pas dans un laps de temps raisonnable (1 minute). Par exemple, si une action nécessite l’action d’un admin pour que le processus avance d’une étape, on préfèrera utiliser un message indiquant le délai moyen de traitement.
+- Le spinner ne doit pas être utilisé si l’on peut afficher une barre de chargement quantifiée (XX%).
+- Le spinner ne doit pas être utilisé si le résultat de l’action ne s’affiche pas dans un laps de temps raisonnable (< 1 minute). Par exemple, si une action nécessite l’action d’un admin pour que le processus avance d’une étape, on préfèrera utiliser un message indiquant le délai moyen de traitement.
 
-<img src="../../assets/images/loader/loader-02.jpg" alt="loader" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/loader/loader-02.jpg" alt="loader" class="tk-markdown__img-fullscreen" /></p>
 
 ## 4) Utilisation
 
-a) Position
+### a) Position
 
 Le spinner doit être dans la page ou le bloc en cours de chargement.
 
-b) Alignement
+### b) Alignement
 
 Le spinner doit être centré horizontalement et verticalement dans la page ou le bloc en cours de chargement.
 
-c) Contenu
+### c) Contenu
 
-Le spinner peut être accompagné d’un label, par exemple « Chargement en cours » ou « Veuillez patienter quelques instants »
+Le spinner peut être accompagné d’un label, par exemple «&nbsp;Chargement en cours&nbsp;» ou «&nbsp;Veuillez patienter quelques instants&nbsp;»
 
-d) Rédaction
+### d) Rédaction
 
 Le label du spinner doit être le plus clair et concis que possible, tout en restant courtois car les chargements créent de la frustration.
 
-e) Pictogrammes
+### e) Pictogrammes
 
 Aucun pictogramme ne doit être utilisé en plus du label.

src/pages/atoms/popover/markdown/guidelines.md

@@ -2,45 +2,45 @@
 
 Une infobulle offre un commentaire textuel à un objet auquel elle est rattachée.
 
-<img src="../../assets/images/infobulle/infobulle-01.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/infobulle/infobulle-01.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" /></p>
 
 ## 2) Use case
 
--   Une infobulle doit être utilisée si le composant associé n’est pas compréhensible hors contexte.
--   Une infobulle doit être utilisée si une donnée spécifique est requise.
--   Une infobulle doit être utilisée si l’utilisateur a besoin d’une explication spécifique pour agir.
+- Une infobulle doit être utilisée si le composant associé n’est pas compréhensible hors contexte.
+- Une infobulle doit être utilisée si une donnée spécifique est requise.
+- Une infobulle doit être utilisée si l’utilisateur a besoin d’une explication spécifique pour agir.
 
 ## 3) DO/DONT
 
 Une infobulle ne doit jamais cacher un composant avec lequel l’utilisateur peut agir directement : [x], bouton CTA, checkbox, radio, onglet, etc.
 
-<img src="../../assets/images/infobulle/infobulle-02.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/infobulle/infobulle-02.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" /></p>
 
-<img src="../../assets/images/infobulle/infobulle-03.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/infobulle/infobulle-03.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" /></p>
 
 ## 4) Utilisation
 
-a) Position
+### a) Position
 
--   Une infobulle peut être rattachée à un bouton d’information. Dans ce cas, l’infobulle sera positionnée à droite du bouton, centré sur la hauteur.
--   Sinon, l’infobulle pourra être rattaché à son composant dans toutes les directions : au-dessus, dessous, droite ou gauche, tout en restant centré dans la hauteur ou la largeur.
+- Une infobulle peut être rattachée à un bouton d’information. Dans ce cas, l’infobulle sera positionnée à droite du bouton, centré sur la hauteur.
+- Sinon, l’infobulle pourra être rattachée à son composant dans toutes les directions : au-dessus, dessous, droite ou gauche, tout en restant centrée dans la hauteur ou la largeur.
 
-b) Alignement
+### b) Alignement
 
-<img src="../../assets/images/infobulle/infobulle-04.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" />
+<p><img src="../../assets/images/infobulle/infobulle-04.jpg" alt="infobulle" class="tk-markdown__img-fullscreen" /></p>
 
-c) Contenu
+### c) Contenu
 
 Une infobulle ne doit contenir que du texte de labeur ferré à gauche.
 
-d) Rédaction
+### d) Rédaction
 
 Le texte de l’infobulle doit être le plus clair et concis que possible, tout en étant suffisamment précis pour donner suffisamment de contexte à l’utilisateur.
 
-e) Pictogrammes
+### e) Pictogrammes
 
 Aucun pictogramme ne doit être utilisé en plus du label.
 
-f) Action
+### f) Action
 
 L’infobulle d’un composant s’affiche quand l’utilisateur clique dessus ou passe sa souris dessus (hover).