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

package/src/sdg/components/PivHeader/_pivHeader.html

@@ -0,0 +1,221 @@
+<h2 id="piv-header">Bandeau d’en-tête du PIV (qc-piv-header)</h2>
+
+<h3>Exemples</h3>
+<!-- TODO remplacer les aria-label des qc-doc-exemple par aria-labelby et cibler le titre -->
+<qc-doc-exemple id="pivEnteteExempleLiens"
+                caption="Exemple de bandeau d’en-tête PIV de base"
+>
+  <qc-piv-header alt-logo="Accédez à Québec.ca"
+                 join-us-url="#join-us"
+                 alt-language-url="#fakeEnglish"
+  >
+  </qc-piv-header>
+</qc-doc-exemple>
+<!--            <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
+
+<qc-doc-exemple id="pivEnteteExempleRecherche"
+                caption="Exemple de personnalisation des liens du bandeau d’en-tête PIV"
+>
+  <qc-piv-header
+          title-text="Titre du site ou du service"
+          title-url="https://www.quebec.ca/"
+          alt-logo="Accédez à Québec.ca"
+  >
+    <nav slot="links"
+         aria-label="Navigation PIV">
+      <ul>
+        <li><a href="#fakeEnglish">English</a>
+        </li>
+        <li><a href="javascript:;">Nous joindre</a>
+        </li>
+      </ul>
+    </nav>
+  </qc-piv-header>
+</qc-doc-exemple>
+<!--            <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
+
+<qc-doc-exemple caption="Exemple de bandeau d’en-tête PIV avec recherche personnalisée"
+
+>
+  <div id="pivEnteteExempleRecherchePersonnalisee">
+    <qc-piv-header title-text="Titre du site ou du service"
+                   alt-logo="Accédez à Québec.ca"
+                   enable-search="true"
+                   show-search="true"
+    >
+      <ul slot="links">
+        <li><a href="#fakeEnglish">English</a>
+        </li>
+        <li><a href="javascript:;">Nous joindre</a>
+        </li>
+      </ul>
+
+      <form slot="search-zone"
+            method="get"
+            action="https://www.google.ca/search"
+      >
+        <qc-search-bar name="q" piv-background></qc-search-bar>
+      </form>
+    </qc-piv-header>
+  </div>
+</qc-doc-exemple>
+
+
+<h3>Documentation technique</h3>
+<h4>Attributs</h4>
+<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>title-text</td>
+      <td>Texte</td>
+      <td>Chaîne vide</td>
+      <td>Titre au milieu du bandeau (dans un hyperlien)</td>
+    </tr>
+    <tr>
+      <td>title-url</td>
+
+      <td>Adresse</td>
+      <td>/</td>
+      <td>URL de l’hyperlien du titre</td>
+    </tr>
+    <tr>
+      <td>logo-url</td>
+      <td>Adresse</td>
+      <td>/</td>
+      <td>Adresse du lien du logo</td>
+    </tr>
+    <tr>
+      <td>logo-src</td>
+      <td>Adresse</td>
+      <td>Adresse du logo inclus dans la trousse</td>
+      <td>Adresse du logo</td>
+    </tr>
+    <tr>
+      <td>logo-alt</td>
+      <td>texte</td>
+      <td>Logo du gouvernement du Québec/Logo of government of Québec</td>
+      <td>Attribut « alt » de la balise img du logo</td>
+    </tr>
+    <tr>
+      <td>alt-language-text</td>
+      <td>Texte</td>
+      <td>English/Français</td>
+      <td>Texte du lien de changement de langue</td>
+    </tr>
+    <tr>
+      <td>alt-language-url</td>
+      <td>Adresse</td>
+      <td>vide</td>
+      <td>L’URL de l’autre langue. Si vide, le lien n'apparaît pas.</td>
+    </tr>
+    <tr>
+      <td>join-us-text</td>
+      <td>Texte</td>
+      <td>Nous joindre/Contact us</td>
+      <td>Texte du lien « Nous joindre »</td>
+    </tr>
+    <tr>
+      <td>join-us-url</td>
+      <td>Adresse</td>
+      <td>Vide</td>
+      <td>Adresse du lien « Nous joindre ». Si vide, le lien n'apparaît pas.</td>
+    </tr>
+    <tr>
+      <td>go-to-content</td>
+      <td>"true" ou "false"</td>
+      <td>"true"</td>
+      <td>Afficher ou non le lien pour aller directement au contenu.</td>
+    </tr>
+    <tr>
+      <td>go-to-content-text</td>
+      <td>Texte</td>
+      <td>Passer au contenu/Skip to content</td>
+      <td>Texte du lien pour passer directement au contenu.</td>
+    </tr>
+    <tr>
+      <td>go-to-content-anchor</td>
+      <td>id du 1<sup>er</sup> élément de contenu</td>
+      <td>"main"</td>
+      <td>Cible du lien pour passer directement au contenu.</td>
+    </tr>
+    <tr>
+      <td>full-width</td>
+      <td>"true" ou "false"</td>
+      <td>"false"</td>
+      <td>Affiche le bandeau en pleine largeur (classe de conteneur « qc‑container‑fluid »).</td>
+    </tr>
+    <tr>
+      <td>enable-search</td>
+      <td>"true" ou "false"</td>
+      <td>"false"</td>
+      <td>
+        Active la recherche dans le bandeau PIV :
+        <ul>
+          <li style="margin-bottom: 0">le bouton de recherche en forme de loupe est alors
+            affiché ;
+          </li>
+          <li>au clic, il affiche le formulaire de recherche.</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>show-search</td>
+      <td>"true" ou "false"</td>
+      <td>"false"</td>
+      <td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a
+        pas été pressé).
+      </td>
+    </tr>
+
+    <tr>
+      <td>display-search-text</td>
+      <td>Texte</td>
+      <td>Cliquer pour faire une recherche / Click to search</td>
+      <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d’écran pour afficher la
+        barre de recherche.
+      </td>
+    </tr>
+    <tr>
+      <td>hide-search-text</td>
+      <td>Texte</td>
+      <td>Masquer la barre de recherche / Hide search bar</td>
+      <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d’écran pour masquer la
+        barre de recherche.
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+<h4>Zones d’ajout de contenu HTML</h4>
+
+<p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
+<qc-doc-exemple id="qc-piv-header-slots"
+                caption="Présentation des zones d’ajout de contenu dans le PIV"
+                hide-code
+>
+  <qc-piv-header
+          style="margin-bottom: var(--qc-spacer-content-block-mb);"
+          enable-search="true"
+          show-search="true">
+    <div slot="search-zone"
+         style="border:2px dashed;padding: var(--qc-spacer-xs);">
+      slot="search-zone"
+    </div>
+    <div slot="links"
+         style="border:2px dashed;padding: var(--qc-spacer-xs);"
+    >
+      slot="links"
+    </div>
+  </qc-piv-header>
+</qc-doc-exemple>
+
+<!--            <qc-code target-id="qc-piv-header-slots"></qc-code>-->

package/src/sdg/{scss/components → components/PivHeader}/_pivHeader.scss

@@ -37,71 +37,42 @@ qc-piv-header {
 
 .qc-piv-header {
   color: map.get($colors, white);
+  container-type: normal;
+  container-name: piv-header;
   .go-to-content {
     position: relative;
   }
   .piv-top {
     display: flex;
-    flex-wrap: wrap;
-    //justify-content: space-between;
     align-items: start;
-    > * {
-      min-height: rem(72);
-    }
-    .signature-group {
+    min-width: rem(72);
+    .logo {
       display: flex;
-      flex-grow: 1;
-      flex-wrap: wrap;
-      align-items: start;
-      margin-right: auto;
-      * {
+      flex-basis: rem(256);
+      margin-right: 0;
+      [role=img] {
+        background-image: var(--logo-src);
+        background-repeat: no-repeat;
+        background-size: 100%;
+        background-position: center;
+        margin-right: 16px;
+        min-width: 150px;
+        width: 100%;
+        max-width: rem(200);
         min-height: rem(72);
       }
-      .logo {
-        display: flex;
-        flex-basis: rem(256);
-        //margin-right: rem(64);
-        [role=img] {
-          background-image: var(--logo-src);
-          background-repeat: no-repeat;
-          background-size: 100%;
-          background-position: center;
-          margin-right: 16px;
-          min-width: 150px;
-          //object-fit: fill;
-          width: 100%;
-          max-width: rem(200);
-          min-height: rem(72);
-        }
-      }
-      .title {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        @include content-font(100);
-        flex-basis: fit-content;
-        //margin-top: auto;
-        //margin-bottom: auto;
-        //margin-right: auto;
-        //padding-right: 40px;
-        > * {
-          //display: -webkit-box;
-          //-webkit-line-clamp: 2;
-          //-webkit-box-orient: vertical;
-          //overflow: hidden;
-          //max-height: rem(72);
-        }
-      }
     }
-
-
-
-
+    .title {
+      align-items: center;
+      align-self: center;
+    }
     .right-section {
       min-width: fit-content;
       display: flex;
+      align-self: center;
       align-items: center;
       flex-basis: fit-content;
+      margin-left: auto;
       .links ul {
         @extend %piv-links;
       }
@@ -109,24 +80,27 @@ qc-piv-header {
       @include media-mobile() {
         min-width: auto;
       }
-    }
 
-    .qc-search {
-      background-image: getImageUrl(loupe-piv-droite);
-      background-repeat: no-repeat;
-      min-width: rem(24);
-      height: rem(24);
-      margin-right: token-value(spacer md);;
-      @include media-mobile() {
-        margin-right: token-value(spacer sm);
-      }
+      .qc-search {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Mi42NyA1Mi4yMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5GaWNoaWVyIDE8L3RpdGxlPjxnIGlkPSJDYWxxdWVfMiIgZGF0YS1uYW1lPSJDYWxxdWUgMiI+PGcgaWQ9IkNhbHF1ZV8xLTIiIGRhdGEtbmFtZT0iQ2FscXVlIDEiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUyLjY3LDQ3LjgxbC0xNS0xNWEyMC43NywyMC43NywwLDEsMC00LjMyLDQuNDZMNDguMjgsNTIuMjFaTTIwLjc4LDM1LjM2QTE0LjQxLDE0LjQxLDAsMSwxLDM1LjE5LDIxaDBBMTQuNDMsMTQuNDMsMCwwLDEsMjAuNzgsMzUuMzZaIi8+PC9nPjwvZz48L3N2Zz4=');
+        background-repeat: no-repeat;
+        min-width: rem(24);
+        height: rem(24);
+        margin-right: token-value(spacer md);;
+        @include media-mobile() {
+          margin-right: token-value(spacer sm);
+        }
 
-      span {
-        @include sr-only();
+        span {
+          @include sr-only();
+        }
       }
     }
-  }
+    & + .title {
+      display: none;
+    }
 
+  }
   .piv-bottom {
     .search-zone {
       padding-bottom: token-value(spacer md);
@@ -182,9 +156,9 @@ qc-piv-header,
 @include media-mobile(){
   .qc-piv-header {
     .piv-top {
-      flex-wrap: wrap;
+      //flex-wrap: wrap;
       .logo {
-        flex-shrink: 1;
+        flex: 1 1 auto;
         margin-right: auto;
         min-width: 0;
         img {
@@ -194,27 +168,31 @@ qc-piv-header,
       }
 
       .title {
-        min-width: 100%;
-        padding: 0;
-        //height: auto;
-        height: fit-content;
-        max-height: fit-content;
-        order: 2;
-        margin-left: 0;
-        margin-right: 0;
-        display: flex;
-        align-items: center;
+        display: none;
       }
-
       .right-section {
+        flex: 0 1 fit-content;
         min-width: 0;
         margin-right: 0;
-        margin-left: 0;
+        margin-left: auto;
+      }
+
+      & + .title {
+        display: block;
+        padding: 0 0 rem(16)
       }
     }
+
+  }
+}
+@media (max-width: 400px) {
+  .piv-top {
+    flex-wrap: wrap;
   }
 }
 
 
 
 
+
+

package/src/sdg/components/RadioButton/_radioButton.html

@@ -0,0 +1,24 @@
+<h2 id="radio-button">Boutons radio</h2>
+<p>Les boutons radio sont aussi disponibles au format de <a href="#selection-button">boutons de sélection</a>.</p>
+<h3>Exemples</h3>
+
+
+  <qc-radio-group id="exemple-radio-md"
+                  legend="Choisissez une option :"
+                  name="ex-md"
+                  selection-button
+  >
+    <label>
+      <input type="radio"
+             name="ma-radio"
+             value="option1">
+      <span>Option 1</span>
+    </label>
+    <label>
+      <input type="radio"
+             name="ma-radio"
+             value="option2">
+      <span>Option 2</span>
+    </label>
+  </qc-radio-group>
+

package/src/sdg/components/RadioButton/_radioButton.scss

@@ -0,0 +1,29 @@
+@use "qc-sdg-lib" as *;
+@use "../ChoiceGroup/choiceGroup" as *;
+
+input[type=radio].qc-choicefield {
+  border-radius: 100%;
+
+  &::before {
+    border-radius: 100%;
+    background-color: token-value(color, blue, regular);
+  }
+
+  &:checked {
+    &::before {
+      opacity: 1;
+    }
+
+    &::before {
+      width: rem(14);
+      height: rem(14);
+    }
+    &.qc-compact {
+      &::before {
+        width: rem(10);
+        height: rem(10);
+      }
+    }
+
+  }
+}

package/src/sdg/components/SearchBar/SearchBar.svelte

@@ -22,45 +22,25 @@
             "aria-label": lang === "fr" ? "Lancer la recherche" : "Submit search"
         }
     };
-
-    let inputProps = $state({});
-    let submitProps = $state({});
-
-
-    $effect(() => {
-        const [inputAttrs, submitAttrs] = computeFieldsAttributes(rest);
-        inputProps = {
-            ...inputAttrs,
+    let inputProps = $derived({
+            ...defaultsAttributes.input,
+            ...Utils.computeFieldsAttributes("input", rest),
             name,
-        };
-        submitProps = submitAttrs;
-    });
-
-    /**
-     * @param {{[p: string]: T}} restProps
-     */
-    function computeFieldsAttributes(restProps) {
-        return ["input","submit"].map(control => {
-            const prefix = `${control}-`;
-            return {
-                ...defaultsAttributes[control],
-                ...Object.fromEntries(
-                    Object.entries(restProps)
-                        .map(([k,v]) => k.startsWith(prefix) ? [k.replace(prefix, ''),v] : null)
-                        .filter(Boolean) // élimine les éléments null
-                )
-            };
+        }),
+        submitProps = $derived({
+            ...defaultsAttributes.input,
+            ...Utils.computeFieldsAttributes("submit", rest)
         });
-    }
-
-
+    ;
 </script>
+
 <div class="qc-search-bar" class:piv-background={pivBackground}>
-    <SearchInput bind:value {...inputProps}/>
+    <SearchInput bind:value
+                 {...inputProps}/>
         <IconButton
                 type="submit"
                 iconColor={pivBackground ? 'blue-piv' : 'background'}
-                icon="loupe-piv-fine"
+                icon="search-thin"
                 iconSize="md"
                 {...submitProps}
         />

package/src/sdg/components/SearchBar/_searchBar.html

@@ -0,0 +1,125 @@
+<h2 id="search-bar">Barre de recherche</h2>
+<h3>Exemples</h3>
+<qc-doc-exemple caption="Exemple de barre de recherche">
+  <form action="http://www.quebec.ca/resultats-de-recherche">
+    <qc-search-bar name="tx_solr[q]"></qc-search-bar>
+  </form>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemple de barre de recherche sur fond blanc et bleu PIV">
+
+  <qc-search-bar></qc-search-bar>
+
+  <div style="margin: var(--qc-spacer-content-block-mb) 0 0;
+                            padding: var(--qc-spacer-md);
+                            background-color: var(--qc-color-blue-piv);">
+    <qc-search-bar piv-background></qc-search-bar>
+  </div>
+
+</qc-doc-exemple>
+
+<h3>Saisie semi-automatique (<i>autocomplete</i>)</h3>
+
+<p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte.
+  Cependant il vous est possible d’utiliser votre propre bibliothèque javascript. Voici un exemple avec
+  jQuery UI.</p>
+
+<qc-doc-exemple caption="Exemple de barre de recherche avec saisie semi-automatique basée sur jQuery UI">
+
+  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
+
+  <qc-search-bar class="autocomplete-search-bar"
+                 input-placeholder="Tapez 'aaa' pour faire apparaître de nombreuses suggestions…"
+                 style="margin-bottom: var(--qc-spacer-content-block-mb)"
+  ></qc-search-bar>
+
+  <script>
+    $(function () {
+      $.widget("ui.autocomplete", $.ui.autocomplete, {
+        _resizeMenu: function () {
+          // pour donner au panneau des suggestions la largeur de la barre de recherche
+          let component = this.element.closest("qc-search-bar");
+          this.menu.element.outerWidth(component.outerWidth());
+        },
+      });
+      // personnalisation des messages jquery ui pour le lecteur d’écran en français
+      $.extend($.ui.autocomplete.prototype.options.messages, {
+        noResults: "Aucun résultat trouvé.",
+        results: function (count) {
+          let s = count > 1 ? "s" : ''
+          return `${count} résultat${s} disponible${s}, utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.`;
+        }
+      });
+
+      $(".autocomplete-search-bar input[type=search]").autocomplete({
+        source: [...Array(1000)].map((v, k) => "aaaa - " + k)
+      });
+    })
+
+
+  </script>
+
+</qc-doc-exemple>
+
+
+<h3>Attributs</h3>
+<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>name</td>
+      <td>Texte</td>
+      <td>q</td>
+      <td>Nom du champ dans le formulaire</td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>Texte</td>
+      <td>Chaîne vide</td>
+      <td>Valeur du champ dans le formulaire</td>
+    </tr>
+    <tr>
+      <td>input-*</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant.
+      </td>
+    </tr>
+    <tr>
+      <td>submit-aria-label</td>
+      <td>Texte</td>
+      <td>Lancer la recherche/Submit search</td>
+      <td>Valeur de l’attribut aria-label du bouton</td>
+    </tr>
+    <tr>
+      <td>submit-*</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Tout attribut commençant par <code>submit-</code> sera ajouté au bouton du composant. Utile
+        par exemple pour lui donner un nom et une valeur.
+      </td>
+    </tr>
+    <tr>
+      <td>piv-background</td>
+      <td>Aucune (simplement ajouter l’attribut)</td>
+      <td>False</td>
+      <td>Indique que la barre de recherche est sur fond bleu PIV</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3>Zone d’ajout de contenu HTML</h3>
+<p>Aucune zone d’ajout de contenu n'est définie pour ce composant.</p>
+
+<h3>Précision concernant le DOM d’ombre (Shadow DOM)</h3>
+<p>Ce composant ne contient pas de DOM d’ombre.</p>

package/src/sdg/{scss/components → components/SearchBar}/_searchBar.scss

@@ -1,5 +1,5 @@
-@use "qc-sdg-lib" as *;
-@use "searchInput" as *;
+@use "../../scss/qc-sdg-lib" as *;
+@use "../SearchInput/searchInput" as *;
 
 qc-search-bar {
   position: relative;
@@ -7,7 +7,7 @@ qc-search-bar {
 }
 .qc-search-bar {
   @extend %qc-search-wrapper;
-  max-width: rem(640);
+  max-width: token-value(size search-bar max-width);
   width: 100%;
   border: 0;
   &:has(input:focus) {