updated anatomy images (#463)

* updated anatomy images

* fixed fr image for card example

* Update src/fr/composants/details/design.md

---------

Co-authored-by: Amy Morris <75379836+SmartMouthWords@users.noreply.github.com>

src/en/components/button/design.md

@@ -10,8 +10,7 @@ date: 'git Last Modified'
 
 <ol class="anatomy-list">
   <li>The <strong>container</strong> gives the button its visually prominent appearance.</li>
-  <li>The <strong>label</strong> states the action that will follow when someone interacts with the button. Label text is left aligned, with any icon at the right-most point. Text is in sentence case (only the initial letter is capitalized).</li>
-  <li>The <strong>icon</strong> is optional and can be a helpful visual aid when used sparingly and predictably. When there's an icon, align button text to the left.  Avoid using an icon without text.</li>
+  <li>The <strong>label</strong> states the action that will follow when someone interacts with the button. Text is in sentence case (only the initial letter is capitalized).</li>
 </ol>
 
 <img class="b-sm b-default p-300" src="/images/en/components/anatomy/gcds-button-anatomy.svg" alt="Button anatomy showing the Button label branching to the container and arrow icon." />

src/en/components/details/design.md

@@ -12,7 +12,7 @@ This is an anatomy of the open details component. By default, the content is col
 
 <ol class="anatomy-list">
   <li>The <strong>details title</strong> summarizes the details content. Label text is in sentence case (only the initial letter is capitalized).</li>
-  <li>The <strong>icon</strong> and the <strong>details title</strong> toggle the content display. The icon indicates if the component is currently open or closed. When it's open, revealing the details text, the icon points to details content.</li>
+  <li>The <strong>caret</strong> and the <strong>details title</strong> toggle the content display. The caret indicates if the component is currently open or closed. When it's open, revealing the details text, the caret points to details content.</li>
   <li>The <strong>content</strong> displays any text and images that the reader can choose to expand or collapse.</li>
 </ol>
 

src/en/components/grid/design.md

@@ -11,6 +11,7 @@ date: 'git Last Modified'
 <ol class="anatomy-list">
   <li>The <strong>container</strong> holds all elements within the grid and spans their combined width. The container is  responsive and can be centred.</li>
   <li>The <strong>column</strong>, also called grid item, sets a boundary around its contents to contain it within the width set for that column.</li>
+  <li>The <strong>gap</strong>, sometimes called the gutter, defines the width of the space between the columns.</li>
 </ol>
 
 <img class="b-sm b-default p-300" src="/images/en/components/anatomy/gcds-grid-anatomy.svg" alt="Image showing the grid anatomy with four separate rectangles representing the columns of a grid" />

src/en/components/side-navigation/design.md

@@ -13,7 +13,7 @@ date: 'git Last Modified'
   <li>The <strong>nav link</strong> is a link to a page or section on the product site.</li>
   <li>The <strong>nav group</strong> is a collection of nav links related to the nav group name. It can be collapsed and expanded.</li>
   <li>The <strong>nav group label</strong> identifies the nav group and acts as a button to expand and collapse the nav group.</li>
-  <li>The <strong>nav group chevron icon</strong> points up when the nav group is collapsed and down when it’s expanded.</li>
+  <li>The <strong>nav group chevron icon</strong> points down when the nav group is collapsed and up when it’s expanded.</li>
   <li>The <strong>nav link with active indicator</strong> gives visual prominence to the current page.</li>
 </ol>
 

src/fr/composants/barre-de-navigation-laterale/design.md

@@ -13,7 +13,7 @@ date: 'git Last Modified'
   <li>Le <strong>lien de navigation</strong> est un lien qui mène vers une page ou une section du site de produit.</li>
   <li>Le <strong>groupe de navigation</strong> est une collection de liens de navigation liés au nom du groupe de navigation. Il peut être développé et réduit.</li>
   <li>Le <strong>libellé du groupe de navigation</strong> identifie le groupe de navigation et agit à titre de bouton pour développer et réduire le groupe de navigation en question.</li>
-  <li>L’<strong>icône de chevron du groupe de navigation</strong> pointe vers le haut lorsque la liste est réduite et vers le bas lorsqu’elle est développée.</li>
+  <li>L’<strong>icône de chevron du groupe de navigation</strong> pointe vers le bas lorsque la liste est réduite et vers le haut lorsqu’elle est développée.</li>
   <li>Le <strong>lien de navigation avec indicateur de page active</strong> met en évidence la page actuelle.</li>
 </ol>
 

src/fr/composants/bouton/design.md

@@ -10,8 +10,7 @@ date: 'git Last Modified'
 
 <ol class="anatomy-list">
   <li>La <strong>boîte</strong> met le bouton en évidence sur le plan visuel.</li>
-  <li>Le <strong>libellé</strong> indique l'action qui s'effectuera si quelqu'un interagit avec le bouton. Le texte des étiquettes s'aligne à gauche avec toute icône au point le plus à droite. En français, le texte est en minuscules (il n'y a que la lettre initiale qui est en majuscule).</li>
-  <li>L'<strong>icône</strong> est facultative et peut être utile comme support visuel lorsqu'elle utilisée de manière uniforme et modérée. Lorsqu'il y a une icône, alignez le texte du bouton à la gauche.  Évitez d'utiliser une icône sans texte.</li>
+  <li>Le <strong>libellé</strong> indique l'action qui s'effectuera si quelqu'un interagit avec le bouton. En français, le texte est en minuscules (il n'y a que la lettre initiale qui est en majuscule).</li>
 </ol>
 
 <img class="b-sm b-default p-300" src="/images/fr/components/anatomy/gcds-button-anatomy.svg" alt="L'anatomie d'un bouton identifiant l'étiquette, le conteneur et l'icone qui forme le composant." />

src/fr/composants/details/design.md

@@ -12,7 +12,7 @@ Voici la structure du composant Détails ouvert. Le contenu est réduit par déf
 
 <ol class="anatomy-list">
   <li>Le <strong>titre du composant Détail</strong> résume le contenu correspondant. Le texte du libellé est en minuscules (il n'y a que la lettre initiale qui est en majuscule).</li>
-  <li>L'<strong>icône</strong> et le <strong>titre du composant Détails</strong> permettent d'activer l'affichage du contenu. L'icône indique si le composant est actuellement ouvert ou fermé. Lorsque le composant est ouvert, affichant ainsi le texte correspondant, l'icône est dirigée vers le contenu en question.</li>
+  <li>Le <strong>curseur</strong> et le <strong>titre du composant Détails</strong> permettent d'activer l'affichage du contenu. Le curseur indique si le composant est actuellement ouvert ou fermé. Lorsque le composant est ouvert, affichant ainsi le texte correspondant, le curseur est dirigé vers le contenu en question.</li>
   <li>Le <strong>contenu</strong> comprend tout texte ou image que la personne peut choisir d'afficher ou de dissimuler.</li>
 </ol>
 

src/fr/composants/grille/design.md

@@ -11,6 +11,7 @@ date: 'git Last Modified'
 <ol class="anatomy-list">
   <li>La <strong>boîte</strong> contient tous les éléments de la grille et s'étend sur leur largeur combinée. Elle est réactive et peut être centrée.</li>
   <li>La <strong>colonne</strong> , également appelée élément de grille, définit une limite autour de son contenu pour le maintenir dans la largeur définie pour cette colonne.</li>
+  <li>L’<strong>espace</strong>, parfois appelé gouttière, définit la largeur de l’espace entre les colonnes.</li>
 </ol>
 
 <img class="b-sm b-default p-300" src="/images/fr/components/anatomy/gcds-grid-anatomy.svg" alt="Image montrant la structure d'une grille avec quatre rectangles distincts représentant les colonnes d'une grille." />

src/fr/composants/selection/design.md

@@ -9,7 +9,7 @@ date: 'git Last Modified'
 ## Structure de la sélection
 
 <ol class="anatomy-list">
-  <li>Le <strong>libellé</strong> indique le choix que représente la sélection.</li>
+  <li>L'<strong>étiquette</strong> indique le choix que représente la sélection.</li>
   <li>Le <strong>texte explicatif</strong> fournit un contexte supplémentaire ou des exigences sur la question et la réponse attendue.</li>
   <li>La <strong>valeur par défaut</strong> peut être utilisée comme un espace réservé pour la sélection.</li>
   <li>L'<strong>icône</strong> est utilisée comme aide visuelle pour indiquer que le champ peut être agrandi.</li>