UI: add rich radio button component

www/index.html

@@ -17,9 +17,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     <!-- load Roboto font -->
     <link href="fonts/Roboto/font.css" rel="stylesheet" />
-    <link media="screen" rel="stylesheet" type="text/css" href="https://forge.grandlyon.com/pocs/design-system/-/package_files/4144/download" />
+    <link media="screen" rel="stylesheet" type="text/css" href="https://forge.grandlyon.com/systemes-dinformation/design-system/design-system-library/-/package_files/4473/download" />
     <!-- WHEN DEVELOPPING DS-ML LIBRARY ONLY -->
-    <!-- <link media="screen" rel="stylesheet" type="text/css" href="../../ds-ml-css/css/ds-ml.css" /> -->
+    <!-- <link media="screen" rel="stylesheet" type="text/css" href="../../design-system-library/ds-ml-css/css/ds-ml.css" /> -->
 
     <!-- load DS internal ressources -->
     <link href="css/main.css" rel="stylesheet" />

www/pages/radios/index.js

 let pages_radios = html`
   <h2>Boutons radio - Radio buttons</h2>
-  <p>Les boutons radio permettent à l’utilisateur de sélectionner une seule option dans une liste.</p>
   <p>
-    Le bouton radio ne peut être utilisé seul : il fait toujours partie d’une liste car il nécéssite au minimum 2 options. Il est préférable de ne pas
-    sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
+    Les boutons radio permettent à l’utilisateur de sélectionner une seule
+    option dans une liste.
   </p>
   <p>
-    Les boutons radio existent sous forme de liste verticale ou horizontale; Cependant, il faut privilégier les listes verticales, plus facile à lire
-    pour l’utilisateur. Les listes horizontales sont uniquement à utiliser lorsqu'il n’y a que 2 options ou que les libellés sont courts.
+    Le bouton radio ne peut être utilisé seul : il fait toujours partie d’une
+    liste car il nécéssite au minimum 2 options. Il est préférable de ne pas
+    sélectionner d’option par défaut pour que le choix de l’utilisateur soit
+    conscient (en particulier si le choix est obligatoire).
+  </p>
+  <p>
+    Les boutons radio existent sous forme de liste verticale ou horizontale;
+    Cependant, il faut privilégier les listes verticales, plus facile à lire
+    pour l’utilisateur. Les listes horizontales sont uniquement à utiliser
+    lorsqu'il n’y a que 2 options ou que les libellés sont courts.
   </p>
 
   <h3>Structure</h3>
@@ -17,7 +24,7 @@ let pages_radios = html`
     <li>Un texte de description additionnel - optionnel.</li>
   </ul>
 
-  <h3>Radio boutons standard</h3>
+  <h3>Bouton radio standard</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group">
@@ -31,7 +38,12 @@ let pages_radios = html`
 
         <label for="fip" class="radio-button">
           FIP
-          <input id="fip" name="radio1-exemple" type="radio" checked="checked" />
+          <input
+            id="fip"
+            name="radio1-exemple"
+            type="radio"
+            checked="checked"
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
         </label>
       </div>
@@ -58,7 +70,7 @@ let pages_radios = html`
 </fieldset>    
   </ml-code>
 
-  <h3>Petit radio boutons (small)</h3>
+  <h3>Petit Bouton radio (small)</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group">
@@ -72,7 +84,12 @@ let pages_radios = html`
 
         <label for="europe1" class="radio-button radio-button-small">
           Europe 1
-          <input id="europe1" name="radio2-exemple" type="radio" checked="checked" />
+          <input
+            id="europe1"
+            name="radio2-exemple"
+            type="radio"
+            checked="checked"
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
         </label>
       </div>
@@ -99,7 +116,7 @@ let pages_radios = html`
 </fieldset>
   </ml-code>
 
-  <h3>Liste horizontale</h3>
+  <h3>Liste de bouton radio horizontale</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group">
@@ -140,7 +157,7 @@ let pages_radios = html`
 </fieldset>
   </ml-code>
 
-  <h3>Radio boutons désactivés</h3>
+  <h3>Bouton radio désactivé</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group">
@@ -154,7 +171,13 @@ let pages_radios = html`
 
         <label for="skyrock" class="radio-button">
           Skyrock (désactivé et cochée)
-          <input id="skyrock" name="radio4-exemple" type="radio" checked="checked" disabled />
+          <input
+            id="skyrock"
+            name="radio4-exemple"
+            type="radio"
+            checked="checked"
+            disabled
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
         </label>
       </div>
@@ -197,7 +220,12 @@ let pages_radios = html`
 
         <label for="fip2" class="radio-button">
           FIP
-          <input id="fip2" name="radio5-exemple" type="radio" checked="checked" />
+          <input
+            id="fip2"
+            name="radio5-exemple"
+            type="radio"
+            checked="checked"
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
           <span class="radio-add-text"> La radio clip</span>
         </label>
@@ -228,7 +256,7 @@ let pages_radios = html`
 </fieldset>
   </ml-code>
 
-  <h3>Radio boutons en erreur</h3>
+  <h3>Bouton radio en erreur</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group error">
@@ -242,7 +270,12 @@ let pages_radios = html`
 
         <label for="rirechansson" class="radio-button">
           Rire & Chansson
-          <input id="rirechansson" name="radio6-exemple" type="radio" checked="checked" />
+          <input
+            id="rirechansson"
+            name="radio6-exemple"
+            type="radio"
+            checked="checked"
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
         </label>
       </div>
@@ -283,7 +316,7 @@ let pages_radios = html`
 </fieldset>
   </ml-code>
 
-  <h3>Radio boutons en succès</h3>
+  <h3>Bouton radio en succès</h3>
 
   <ml-sample>
     <fieldset class="radio-button-group success">
@@ -297,7 +330,12 @@ let pages_radios = html`
 
         <label for="tonicradio" class="radio-button">
           Tonic Radio
-          <input id="tonicradio" name="radio7-exemple" type="radio" checked="checked" />
+          <input
+            id="tonicradio"
+            name="radio7-exemple"
+            type="radio"
+            checked="checked"
+          />
           <span class="radio-wrapper"><span class="radiomark"></span></span>
         </label>
       </div>

www/pages/radios_riches/index.js

 let pages_radios_riches = html`
   <h2>Boutons radio riches - Rich radio buttons</h2>
-  <p>To do 🍐</p>
+  <p>
+    Les boutons radio riches permettent de sélectionner un choix parmi une liste
+    d’options illustrées. À la différence du bouton radio simple, l’image permet
+    d’illustrer et d’accompagner l’utilisateur dans son choix.
+  </p>
+  <p>
+    Le bouton radio riche ne peut être utilisé seul : il fait toujours partie
+    d’une liste car il nécéssite au minimum 2 options. Il est préférable de ne
+    pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit
+    conscient (en particulier si le choix est obligatoire).
+  </p>
+  <p>
+    Les boutons radio riche existent sous forme de liste verticale ou
+    horizontale; Cependant, il faut privilégier les listes verticales, plus
+    facile à lire pour l’utilisateur. Les listes horizontales sont uniquement à
+    utiliser lorsqu'il n’y a que 2 options ou que les libellés sont courts.
+  </p>
+
+  <h3>Structure</h3>
+  <p>Chaque bouton est composé de :</p>
+  <ul>
+    <li>Un label - obligatoire.</li>
+    <li>Un texte de description additionnel - optionnel.</li>
+    <li>Une image.</li>
+  </ul>
+
+  <h3>Bouton radio standard</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <div class="rich-radio-button-list">
+        <label for="tsf-jazz" class="rich-radio-button">
+          <p>TSF Jazz</p>
+          <input id="tsf-jazz" name="radio1-exemple" type="radio" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="fip" class="rich-radio-button">
+          <p>FIP</p>
+          <input
+            id="fip"
+            name="radio1-exemple"
+            type="radio"
+            checked="checked"
+          />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <div class="rich-radio-button-list">
+    <label for="tsf-jazz" class="rich-radio-button">
+      <p>TSF Jazz</p>
+      <input id="tsf-jazz" name="radio1-exemple" type="radio" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="fip" class="rich-radio-button">
+      <p>FIP</p>
+      <input
+        id="fip"
+        name="radio1-exemple"
+        type="radio"
+        checked="checked"
+      />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+</fieldset>
+  </ml-code>
+
+  <h3>Liste de bouton radio riche horizontale</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <div class="rich-radio-button-list-horizontal">
+        <label for="yes" class="rich-radio-button">
+          <p>Oui</p>
+          <input id="yes" name="radio3-exemple" type="radio" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="no" class="rich-radio-button">
+          <p>Non</p>
+          <input id="no" name="radio3-exemple" type="radio" checked="checked" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <div class="rich-radio-button-list-horizontal">
+    <label for="yes" class="rich-radio-button">
+      <p>Oui</p>
+      <input id="yes" name="radio3-exemple" type="radio" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="no" class="rich-radio-button">
+      <p>Non</p>
+      <input id="no" name="radio3-exemple" type="radio" checked="checked" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+</fieldset>
+  </ml-code>
+
+  <h3>Bouton radio riche désactivé</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <div class="rich-radio-button-list">
+        <label for="nrj" class="rich-radio-button">
+          <p>NRJ (désactivée)</p>
+          <input id="nrj" name="radio4-exemple" type="radio" disabled />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="skyrock" class="rich-radio-button">
+          <p>Skyrock (désactivé et cochée)</p>
+          <input
+            id="skyrock"
+            name="radio4-exemple"
+            type="radio"
+            checked="checked"
+            disabled
+          />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <div class="rich-radio-button-list">
+    <label for="nrj" class="rich-radio-button">
+      <p>NRJ (désactivée)</p>
+      <input id="nrj" name="radio4-exemple" type="radio" disabled />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="skyrock" class="rich-radio-button">
+      <p>Skyrock (désactivé et cochée)</p>
+      <input
+        id="skyrock"
+        name="radio4-exemple"
+        type="radio"
+        checked="checked"
+        disabled
+      />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+</fieldset>
+  </ml-code>
+
+  <h3>Description additionnelle</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <p class="additionnal-description">Texte de description additionelle</p>
+      <div class="rich-radio-button-list">
+        <label for="tsf-jazz2" class="rich-radio-button">
+          <p>TSF Jazz</p>
+          <input id="tsf-jazz2" name="radio5-exemple" type="radio" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <span class="radio-add-text">La radio clazz</span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="fip2" class="rich-radio-button">
+          <p>FIP</p>
+          <input
+            id="fip2"
+            name="radio5-exemple"
+            type="radio"
+            checked="checked"
+          />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <span class="radio-add-text"> La radio clip</span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <p class="additionnal-description">Texte de description additionelle</p>
+  <div class="rich-radio-button-list">
+    <label for="tsf-jazz2" class="rich-radio-button">
+      <p>TSF Jazz</p>
+      <input id="tsf-jazz2" name="radio5-exemple" type="radio" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <span class="radio-add-text">La radio clazz</span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="fip2" class="rich-radio-button">
+      <p>FIP</p>
+      <input
+        id="fip2"
+        name="radio5-exemple"
+        type="radio"
+        checked="checked"
+      />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <span class="radio-add-text"> La radio clip</span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+</fieldset>
+  </ml-code>
+
+  <h3>Bouton radio riche en erreur</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group error">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <div class="rich-radio-button-list">
+        <label for="nostalgie" class="rich-radio-button">
+          <p>Nostalgie</p>
+          <input id="nostalgie" name="radio6-exemple" type="radio" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="rirechansson" class="rich-radio-button">
+          <p>Rire & Chansson</p>
+          <input
+            id="rirechansson"
+            name="radio6-exemple"
+            type="radio"
+            checked="checked"
+          />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+
+      <div class="status">
+        <div class="icon">
+          <span class="material-symbols-rounded"> error </span>
+        </div>
+        <span>Texte d'erreur</span>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group error">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <div class="rich-radio-button-list">
+    <label for="nostalgie" class="rich-radio-button">
+      <p>Nostalgie</p>
+      <input id="nostalgie" name="radio6-exemple" type="radio" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="rirechansson" class="rich-radio-button">
+      <p>Rire & Chansson</p>
+      <input
+        id="rirechansson"
+        name="radio6-exemple"
+        type="radio"
+        checked="checked"
+      />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+
+  <div class="status">
+    <div class="icon">
+      <span class="material-symbols-rounded"> error </span>
+    </div>
+    <span>Texte d'erreur</span>
+  </div>
+</fieldset>
+  </ml-code>
+
+  <h3>Bouton raido riche en succès</h3>
+
+  <ml-sample>
+    <fieldset class="rich-radio-button-group success">
+      <legend>Sélectionnez votre radio préférée:</legend>
+      <div class="rich-radio-button-list">
+        <label for="franceinter" class="rich-radio-button">
+          <p>France Inter</p>
+          <input id="franceinter" name="radio7-exemple" type="radio" />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+
+        <label for="tonicradio" class="rich-radio-button">
+          <p>Tonic Radio</p>
+          <input
+            id="tonicradio"
+            name="radio7-exemple"
+            type="radio"
+            checked="checked"
+          />
+          <span class="radio-wrapper"><span class="radiomark"></span></span>
+          <img src="img/favicon.svg" />
+        </label>
+      </div>
+
+      <div class="status">
+        <div class="icon">
+          <span class="material-symbols-rounded"> error </span>
+        </div>
+        <span>Texte de succés</span>
+      </div>
+    </fieldset>
+  </ml-sample>
+
+  <!-- prettier-ignore -->
+  <ml-code language="html">
+<fieldset class="rich-radio-button-group success">
+  <legend>Sélectionnez votre radio préférée:</legend>
+  <div class="rich-radio-button-list">
+    <label for="franceinter" class="rich-radio-button">
+      <p>France Inter</p>
+      <input id="franceinter" name="radio7-exemple" type="radio" />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+
+    <label for="tonicradio" class="rich-radio-button">
+      <p>Tonic Radio</p>
+      <input
+        id="tonicradio"
+        name="radio7-exemple"
+        type="radio"
+        checked="checked"
+      />
+      <span class="radio-wrapper"><span class="radiomark"></span></span>
+      <img src="img/favicon.svg" />
+    </label>
+  </div>
+
+  <div class="status">
+    <div class="icon">
+      <span class="material-symbols-rounded"> error </span>
+    </div>
+    <span>Texte de succés</span>
+  </div>
+</fieldset>
+  </ml-code>
 `;