qc-trousse-sdg 1.4.0-develop.0 → 1.4.0

package/src/sdg/components/ChoiceGroup/Test/radiosTest.html

@@ -0,0 +1,185 @@
+
+    <qc-choice-group legend="Boutons de sélection"
+                    selection-button
+                    column-count="2"
+                     name="tile-1"
+    >
+        <label>
+            <input type="radio"
+
+                   value="1"
+                   checked
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+                <span class="qc-tile-description">Ceci est une <b>longue</b> description servant à montrer l'affichage des boutons de sélection.</span>
+            </span>
+        </label>
+
+        <label>
+            <input type="radio"
+                   value="2"
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+        </label>
+        <label>
+            <input type="radio"
+                   value="3"
+                   disabled
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+        </label>
+    </qc-choice-group>
+
+    <qc-choice-group legend="Boutons de sélection inline"
+                    selection-button
+                    inline
+                    column-count="2"
+                     name="tile-2"
+
+    >
+        <label>
+            <input type="radio"
+                   value="1"
+                   checked
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+            </span>
+        </label>
+
+        <label>
+            <input type="radio"
+                   value="2"
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+        </label>
+        <label>
+            <input type="radio"
+                   value="3"
+                   disabled
+            />
+            <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+        </label>
+    </qc-choice-group>
+
+    <div class="qc-row">
+        <div class="qc-col-sm-12 qc-col-lg-6">
+            <qc-choice-group legend="Exemple de base"
+                            name="base-1"
+            >
+                <label>
+                    <input type="radio"
+                           value="1"
+                           checked
+                    />
+                    <span >Option 1</span>
+                </label>
+                <label>
+                    <input type="radio"
+
+                           value="2"
+                    />
+                    <span >Option 2</span>
+                </label>
+                <label>
+                    <input type="radio"
+
+                           value="3"
+                           disabled
+                    />
+                    <span >Option 3 (désactivée)</span>
+                </label>
+            </qc-choice-group>
+
+            <qc-choice-group legend="Invalid"
+                            name="base-2"
+                            invalid
+                            required
+            >
+                <label>
+                    <input type="radio"
+                           value="1"
+                    />
+                    <span >Option 1</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="2"
+                    />
+                    <span >Option 2</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="3"
+                           disabled
+                    />
+                    <span >Option 3 (désactivée)</span>
+                </label>
+            </qc-choice-group>
+        </div>
+        <div class="qc-col-sm-12 qc-col-lg-6">
+            <qc-choice-group legend="Compact"
+                            name="compact-1"
+                            compact
+            >
+                <label>
+                    <input type="radio"
+                           value="1"
+                           checked
+                    />
+                    <span >Option 1</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="2"
+                    />
+                    <span >Option 2</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="3"
+                           disabled
+                    />
+                    <span >Option 3 (désactivée)</span>
+                </label>
+            </qc-choice-group>
+
+            <qc-choice-group legend="Invalid"
+                            name="compact-2"
+                            compact
+                            invalid
+                            required
+            >
+                <label>
+                    <input type="radio"
+                           value="1"
+                    />
+                    <span >Option 1</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="2"
+                    />
+                    <span >Option 2</span>
+                </label>
+                <label>
+                    <input type="radio"
+                           value="3"
+                           disabled
+                    />
+                    <span >Option 3 (désactivée)</span>
+                </label>
+            </qc-choice-group>
+        </div>
+    </div>
+
+

package/src/sdg/components/ChoiceGroup/ToggleSwitchGroupWC.svelte

@@ -0,0 +1,56 @@
+<svelte:options customElement={{
+    tag: 'qc-toggle-switch-group',
+    shadow: 'none',
+    props: {
+        legend: {attribute:'legend', type: 'String'},
+        disabled: {attribute:'disabled', type: 'Boolean'},
+        justified: {attribute:'justified', type: 'Boolean'},
+        textAlign: {attribute:'text-align', type: 'String'},
+        maxWidth: {attribute:'max-width', type: 'String'},
+    }
+}} />
+
+<script>
+    import ToggleSwitch from "../ToggleSwitch/ToggleSwitch.svelte";
+    import ChoiceGroup from "./ChoiceGroup.svelte";
+
+    let {
+        disabled = $bindable(false),
+        items = $bindable([]),
+        justified = false,
+        textAlign,
+        maxWidth = "fit-content",
+        ...rest
+    } = $props();
+
+    let usedWidth = $derived.by(() => {
+        if (
+            maxWidth.match(/^\d+px$/)
+            || maxWidth.match(/^\d*\.?\d*rem$/)
+            || maxWidth.match(/^\d*\.?\d*em$/)
+            || maxWidth.match(/^\d*\.?\d*%$/)
+        ) {
+            return maxWidth;
+        } else {
+            return "fit-content";
+        }
+    });
+</script>
+
+<ChoiceGroup
+    elementsGap="md"
+    maxWidth={usedWidth}
+    {...rest}
+>
+    {#each items as item}
+        <ToggleSwitch
+            id={item.id}
+            label={item.label}
+            bind:checked={item.checked}
+            disabled={item.disabled ?? disabled}
+            justified={justified ?? item.justified}
+            textAlign={textAlign ?? item.textAlign}
+        />
+    {/each}
+</ChoiceGroup>
+

package/src/sdg/components/ChoiceGroup/_choiceGroup.html

@@ -0,0 +1,285 @@
+<h4 id="choice-group">Groupe de boutons radio et de cases à cocher (qc-choice-group)</h4>
+
+<h5>Exemples</h5>
+<p>
+  Les groupes d'éléments de choix sont également disponibles sous forme de <a href="#selection-button">boutons de sélection</a>.
+</p>
+
+<qc-doc-exemple caption="Exemple de groupes de boutons radio et de cases à cocher avec différents états">
+  <qc-choice-group legend="Sélectionnez vos options"
+                   name="options-multiples"
+  >
+    <label>
+      <input type="checkbox"
+             value="1"
+             checked
+      />
+      <span >Option 1</span>
+    </label>
+    <label>
+      <input type="checkbox"
+             value="2"
+      />
+      <span >Option 2</span>
+    </label>
+    <label>
+      <input type="checkbox"
+             value="3"
+             disabled
+      />
+      <span >Option 3 (désactivée)</span>
+    </label>
+  </qc-choice-group>
+
+  <qc-choice-group legend="Sélectionnez une option"
+                   name="choix-unique"
+  >
+    <label>
+      <input type="radio"
+             value="1"
+             checked
+      />
+      <span >Option 1</span>
+    </label>
+    <label>
+      <input type="radio"
+             value="2"
+      />
+      <span >Option 2</span>
+    </label>
+    <label>
+      <input type="radio"
+             value="3"
+             disabled
+      />
+      <span >Option 3 (désactivée)</span>
+    </label>
+  </qc-choice-group>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemple d’un groupe au petit format">
+  <qc-choice-group legend="Sélectionnez vos options"
+                   name="options-multiples"
+                   compact
+  >
+    <label>
+      <input type="checkbox"
+             value="1"
+             checked
+      />
+      <span >Option 1</span>
+    </label>
+    <label>
+      <input type="checkbox"
+             value="2"
+      />
+      <span >Option 2</span>
+    </label>
+    <label>
+      <input type="checkbox"
+             value="3"
+             disabled
+      />
+      <span >Option 3 (désactivée)</span>
+    </label>
+  </qc-choice-group>
+
+  <qc-choice-group legend="Sélectionnez une option"
+                   name="choix-unique"
+                   compact
+  >
+    <label>
+      <input type="radio"
+             value="1"
+             checked
+      />
+      <span >Option 1</span>
+    </label>
+    <label>
+      <input type="radio"
+             value="2"
+      />
+      <span >Option 2</span>
+    </label>
+    <label>
+      <input type="radio"
+             value="3"
+             disabled
+      />
+      <span >Option 3 (désactivée)</span>
+    </label>
+  </qc-choice-group>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemple de validation de formulaire avec des groupes de choix">
+  <form id="checkbox-form">
+    <qc-choice-group
+            legend="Sur quelle plateforme consultez-vous www.quebec.ca ?"
+            name="plateforme"
+            required
+            invalid-text="Veuillez sélectionner une plateforme."
+    >
+      <label>
+        <input type="checkbox"
+               value="ordinateur"
+        />
+        <span>Ordinateur</span>
+      </label>
+      <label>
+        <input type="checkbox"
+               value="tablette"
+        />
+        <span>Tablette</span>
+      </label>
+      <label>
+        <input type="checkbox"
+               value="telephone_intelligent"
+        />
+        <span>Téléphone intelligent</span>
+      </label>
+    </qc-choice-group>
+
+    <qc-choice-group
+            legend="Quel thème préférez-vous ?"
+            name="theme"
+            required
+            invalid-text="Veuillez sélectionner un thème."
+    >
+      <label>
+        <input type="radio"
+               value="clair"
+        />
+        <span>Le thème clair</span>
+      </label>
+      <label>
+        <input type="radio"
+               value="sombre"
+        />
+        <span>Le thème sombre</span>
+      </label>
+
+    </qc-choice-group>
+
+    <button class="qc-button qc-primary qc-compact" type="submit">
+      Soumettre
+    </button>
+  </form>
+
+  <script>
+
+    document
+            .getElementById("checkbox-form")
+            .addEventListener("submit", (event) => {
+              event.preventDefault();
+              let doSubmit = true;
+              event
+                      .target
+                      .querySelectorAll("qc-choice-group[required]")
+                      .forEach(group => {
+                        let valid = false;
+                        group.querySelectorAll("input")
+                                .forEach(checkbox => {
+                                  if (checkbox.checked) {
+                                    valid = true;
+                                  }
+                                })
+                        if (!valid) {
+                          group.invalid = true;
+                          doSubmit = false;
+                        }
+                      })
+              if(doSubmit) {
+                const formData = new FormData(event.target);
+                let alertParts = ["Formulaire soumis avec les données suivantes :"];
+                for (const [key, value] of formData.entries()) {
+                  alertParts.push(`${key} : ${value}`);
+                }
+                alert(alertParts.join("\n"));
+              }
+            })
+  </script>
+</qc-doc-exemple>
+
+
+<h5 id="choice-group-doc">Attributs de qc-choice-group</h5>
+
+<div class="table-overflow">
+  <table class="qc-table qc-striped component-attributes-description">
+    <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Valeur attendue</th>
+      <th>Valeur par défaut</th>
+      <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>legend</td>
+      <td>Texte</td>
+      <td>""</td>
+      <td>Légende du groupe</td>
+    </tr>
+    <tr>
+      <td>name</td>
+      <td>Texte</td>
+      <td>""</td>
+      <td>Nom commun à tous les champs du groupe</td>
+    </tr>
+    <tr>
+      <td>compact</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Affiche les champs au format compact</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Indique que la sélection est obligatoire en ajoutant un astérisque dans la légende.</td>
+    </tr>
+    <tr>
+      <td>invalid</td>
+      <td>na</td>
+      <td>na</td>
+      <td>
+        Affiche le message d'erreur. Voir l'exemple de validation de formulaire avec des groupes de choix.
+        <br/>NB : `invalid` prend automatiquement la valeur `false` dès qu’un champ est coché.
+      </td>
+    </tr>
+    <tr>
+      <td>invalid-text</td>
+      <td>Texte</td>
+      <td>"Le champ {nom du champ} est obligatoire" ou "{field name} field is required"</td>
+      <td>Message d’erreur à afficher lorsque le groupe est invalide.</td>
+    </tr>
+    <tr>
+      <td>selection-button</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Affiche les champs au format de boutons de sélection dans une grille.</td>
+    </tr>
+    <tr>
+      <td>column-count</td>
+      <td>Nombre</td>
+      <td>1</td>
+      <td><b>Boutons de sélection uniquement </b>: nombre de colonnes de la grille de boutons de sélection.
+        <br/> Si la fenêtre est au format mobile (<code>--qc-breakpoint-sm</code>), la grille passe automatiquement à une colonne.
+      </td>
+    </tr>
+    <tr>
+      <td>inline</td>
+      <td>na</td>
+      <td>na</td>
+      <td><b>Boutons de sélection uniquement</b> : affiche les boutons de sélection sur une rangée.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+<p>Pour les autres attributs, voir la rubrique de <a href="#selection-button-attributes">boutons de sélection</a>.</p>
+
+<h5>Zone d’ajout de contenu HTML</h5>
+
+<p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>
+

package/src/sdg/components/ChoiceGroup/_choiceGroup.scss

@@ -0,0 +1,32 @@
+@use "qc-sdg-lib" as *;
+@use "selectionButton" as *;
+
+label.qc-choicefield-label {
+  @extend %check-row;
+}
+
+input.qc-choicefield {
+
+  cursor: pointer;
+
+  min-width: token-value(spacer, md);
+  min-height: token-value(spacer, md);
+  max-width: token-value(spacer, md);
+  max-height: token-value(spacer, md);
+  border-width: rem(2);
+
+  flex-grow: 0;
+
+  &:focus {
+    outline: 2px solid token-value(color, blue, light);
+    outline-offset: 0;
+    border-color: token-value(color, blue, dark) !important;
+  }
+
+  &:checked {
+    border-color: token-value(color blue regular);
+  }
+}
+
+
+

package/src/sdg/components/ChoiceGroup/_selectionButton.scss

@@ -0,0 +1,53 @@
+@use "qc-sdg-lib" as *;
+
+label.qc-selection-button {
+  @include qc-formcontrol-box();
+  padding: token-value(spacer, sm);
+  min-width: 100%;
+
+  &::before {
+    border-style: solid;
+    border-width: rem(1);
+    border-color: token-value(color, grey, light);
+  }
+
+  &:hover::before {
+    border-color: token-value(color, blue, light);
+  }
+
+  &:has(input:checked)::before {
+    background-color: token-value(color, blue, pale);
+  }
+
+  &:has(input:disabled)::before {
+    background-color: token-value(color, grey, pale);
+    border-color: token-value(color, grey, light);
+  }
+}
+
+label.qc-selection-button-inline {
+  min-width: auto;
+}
+
+input.qc-selection-button {
+  &:focus {
+    outline: none;
+  }
+}
+
+.qc-tile {
+  display: flex;
+  flex-direction: column;
+  gap: token-value(spacer, xs);
+  min-height: token-value(spacer, md);
+}
+
+.qc-tile-text {
+  font-weight: token-value(font weight semi-bold);
+  min-height: token-value(spacer, md);
+}
+
+.qc-tile-description {
+  @include content-font(sm);
+  display: block;
+}