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

package/src/sdg/components/PivFooter/PivFooterWC.svelte

@@ -24,29 +24,21 @@
 }}" />
 
 <script>
-    import { Utils } from "../utils";
     import PivFooter from "./PivFooter.svelte";
-    import DefaultCopyright from "./_defaultCopyright.svelte";
-
-    const lang = Utils.getPageLanguage();
+    import { Utils } from "../utils"
 
     let {
-        copyrightText,
-        copyrightUrl,
        self,
-       slots,
-       defaultSlot,
        ...props
     } = $props();
-    $inspect(self,slots,defaultSlot);
+
 </script>
-<PivFooter {...props} >
+<PivFooter {...props} slots={$$slots}>
     {#snippet mainSlot()}
         <slot />
     {/snippet}
     {#snippet copyrightSlot()}
-        <slot name="copyright">
-            <DefaultCopyright {copyrightText} {copyrightUrl} />
-        </slot>
+        <slot name="copyright" />
     {/snippet}
-</PivFooter>
+</PivFooter>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/PivFooter/_pivFooter.html

@@ -0,0 +1,153 @@
+<h2 id="piv-footer">Pied de page du PIV (qc-piv-footer)</h2>
+
+<h3>Exemples</h3>
+
+
+<qc-doc-exemple id="piv-footer-1"
+                caption="Exemple de pied de page du PIV de base">
+  <qc-piv-footer>
+    <nav aria-label="Navigation du pied de page">
+      <ul>
+        <li><a href="/">Accessibilité</a></li>
+        <li><a href="/">Plan du site</a></li>
+        <li><a href="/">Accès à l’information</a></li>
+        <li><a href="/">Politique de confidentialité</a></li>
+        <li><a href="/">Conditions d’utilisation</a></li>
+        <li><a href="/">À propos de Québec.ca</a></li>
+      </ul>
+    </nav>
+  </qc-piv-footer>
+</qc-doc-exemple>
+<!--            <qc-code target-id="piv-footer-1"></qc-code>-->
+
+<qc-doc-exemple id="piv-footer-ex-2"
+                caption="Exemple de pied de page du PIV personnalisé."
+>
+  <qc-piv-footer
+          logo-src="img/piv-MCE-theme-clair.svg"
+          logo-src-dark-theme="img/piv-MCE-theme-sombre.svg"
+  >
+    <nav aria-label="Navigation du pied de page">
+      <ul>
+        <li><a href="/">Accès à l’information</a></li>
+        <li><a href="/">Politique de confidentialité</a></li>
+      </ul>
+    </nav>
+    <qc-external-link slot="copyright">
+      <a
+              target="_blank"
+              rel="noopener"
+              href="https://www.quebec.ca/droit-auteur">
+        © Gouvernement du Québec, 2023
+      </a>
+    </qc-external-link>
+  </qc-piv-footer>
+</qc-doc-exemple>
+<!--            <qc-code target-id="piv-footer-ex-2"></qc-code>-->
+
+<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>logo-url</td>
+      <td>Adresse du lien au clic sur l’image</td>
+      <td>/</td>
+      <td>Cible du lien contenant le logo</td>
+    </tr>
+    <tr>
+      <td>logo-src</td>
+      <td>Le chemin de l’image en thème clair.</td>
+      <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
+      <td>Adresse de l’image du pied de page en thème clair (fond transparent, texte et drapeaux en
+        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+      </td>
+    </tr>
+    <tr>
+      <td>logo-src-dark-theme</td>
+      <td>Le chemin de l’image en thème sombre.</td>
+      <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
+      <td>Adresse de l’image du pied de page en thème sombre (fond transparent, texte et drapeaux en
+        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+      </td>
+    </tr>
+    <tr>
+      <td>logo-alt</td>
+      <td>Texte</td>
+      <td>
+        <dl>
+          <dt>Français</dt>
+          <dd>Logo du gouvernement du Québec</dd>
+          <dt>Anglais</dt>
+          <dd>Logo of government of Québec</dd>
+        </dl>
+      </td>
+      <td>Texte alternatif du logo pour les lecteurs d’écran</td>
+    </tr>
+    <tr>
+      <td>logo-width</td>
+      <td>Nombre</td>
+      <td>139</td>
+      <td>Largeur de l’image en px</td>
+    </tr>
+    <tr>
+      <td>logo-height</td>
+      <td>Nombre</td>
+      <td>35</td>
+      <td>Hauteur de l’image en px</td>
+    </tr>
+    <tr>
+      <td>copyright-text</td>
+      <td>Texte</td>
+      <td>© Gouvernement du Québec, &lt;année en cours AAAA&gt;</td>
+      <td>Texte du lien de droit d'auteur affiché dans le pied de page.</td>
+    </tr>
+    <tr>
+      <td>copyright-url</td>
+      <td>Adresse</td>
+      <td>
+        <dl>
+          <dt>Français</dt>
+          <dd>https://www.quebec.ca/droit-auteur</dd>
+          <dt>Anglais</dt>
+          <dd>https://www.quebec.ca/en/copyright</dd>
+        </dl>
+      </td>
+      <td>L’adresse de la page du droit d’auteur sur quebec.ca</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+
+<qc-notice type="information">Les images du pied de page PIV doivent respecter
+  <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
+    normes graphiques du système d’identification visuelle.</a>. Nous vous invitons à privilégier le format
+    SVG, qui permet de conserver la lisibilité de l’image en cas de zoom.
+  </qc-external-link>
+</qc-notice>
+
+<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-footer-slots"
+                caption="Présentation des zones d’ajout de contenu du pied de page PIV">
+  <qc-piv-footer>
+    <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
+      Contenu par défaut
+    </div>
+    <div slot="copyright"
+         style="border:2px dashed;padding: var(--qc-spacer-xs);">
+      slot="copyright"
+    </div>
+  </qc-piv-footer>
+</qc-doc-exemple>

package/src/sdg/{scss/components → components/PivFooter}/_pivFooter.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 @use "sass:math";
 
 @mixin pivLinks() {

package/src/sdg/components/PivHeader/PivHeader.svelte

@@ -1,23 +1,22 @@
 <script>
     import { onMount, tick } from "svelte";
     import { Utils } from "../utils"
-    import DefaultLinks from "./_defaultLinks.svelte"
 
     const lang = Utils.getPageLanguage();
 
     let {
-        self,
+        customElementParent,
         logoUrl = '/',
         fullWidth = 'false',
         logoSrc = Utils.imagesRelativePath + 'QUEBEC_blanc.svg',
         logoAlt = lang === 'fr' ? 'Logo du gouvernement du Québec' : 'Logo of government of Québec',
         titleUrl = '/',
         titleText = '',
-        linksLabel,
-        altLanguageText,
-        altLanguageUrl,
-        joinUsText,
-        joinUsUrl,
+        joinUsText = lang === 'fr' ? 'Nous joindre' : 'Contact us',
+        joinUsUrl = '',
+        altLanguageText = lang === 'fr' ? 'English' : 'Français',
+        altLanguageUrl = '',
+        linksLabel = lang === 'fr' ? 'Navigation PIV' : 'PIV navigation',
         goToContent = 'true',
         goToContentAnchor = '#main',
         goToContentText = lang === 'fr' ? 'Passer au contenu' : 'Skip to content',
@@ -25,36 +24,24 @@
         hideSearchText = lang === 'fr' ? 'Masquer la barre de recherche' : 'Hide search bar',
         enableSearch = 'false',
         showSearch = 'false',
-        links,
-        search
+        linksSlot,
+        searchZoneSlot,
+        slots = false
     } = $props()
-    console.log('PivHeader self', self);
+
     let containerClass = $state('qc-container')
         , searchZone = $state(null)
-        , displaySearchForm = $state(false);
-
-    // $effect(_ => {
-    //     if (displaySearchForm) {
-    //         let input = self
-    //             ? self.querySelector('[slot="search-zone"] input')
-    //             : searchZone.querySelector('input')
-    //         ;
-    //         input?.focus();
-    //     }
-    // })
-    $inspect(self)
+        , displaySearchForm = $state(false)
+    ;
 
     function focusOnSearchInput() {
 
         if (displaySearchForm) {
-
-            let input = self
-                ? self.querySelector('[slot="search-zone"] input')
+            let input = customElementParent
+                ? customElementParent.querySelector('[slot="search-zone"] input')
                 : searchZone.querySelector('input')
             ;
-            console.log('focusOnSearchInput', self, searchZone, input );
             input?.focus();
-
         }
     }
 
@@ -79,28 +66,26 @@
         </a>
       </div>
     {/if}
+      {#snippet title()}
+          {#if titleUrl && titleText}
+          <div class="title">
+              <a href="{titleUrl}">
+                  {titleText}
+              </a>
+          </div>
+          {/if}
+      {/snippet}
+      <div class="piv-top">
 
-    <div class="piv-top">
-        <div class="signature-group">
-            <a href="{logoUrl}"
-               class="logo"
+        <a href="{logoUrl}"
+           class="logo"
                rel="noreferrer"
                aria-label="{logoAlt}"
             >
                 <div role="img"></div>
-            </a>
-
-            {#if titleText}
-                <div class="title">
-                    <a href="{titleUrl}"
-                       class="title">
-                        {titleText}
-                    </a>
-                </div>
-
-            {/if}
-        </div>
+        </a>
 
+        {@render title()}
       <div class="right-section">
         {#if Utils.isTruthy(enableSearch)}
           <a  class="qc-search"
@@ -118,27 +103,36 @@
           </a>
         {/if}
         <div class="links">
-            {#if links}
-                {@render links()}
+            {#if (!slots || slots['links']) && linksSlot }
+                {@render linksSlot()}
 <!--            Le bloc else est present uniquement pour le cas ou PivHeader est utilise sans le wrapper PivHeaderWC.svelte -->
             {:else}
-                <DefaultLinks {joinUsUrl}
-                              {joinUsText}
-                              {altLanguageUrl}
-                              {altLanguageText}
-                              {linksLabel}/>
+                {#if joinUsUrl || altLanguageUrl}
+                    <nav aria-label="{linksLabel}">
+                        <ul>
+                            {#if altLanguageUrl}
+                                <li><a href="{altLanguageUrl}">{altLanguageText}</a></li>
+                            {/if}
+                            {#if joinUsUrl}
+                                <li><a href="{joinUsUrl}">{joinUsText}</a></li>
+                            {/if}
+                        </ul>
+                    </nav>
+                {/if}
             {/if}
         </div>
       </div>
     </div>
+      {@render title()}
 
-    <div class="piv-bottom">
+      <div class="piv-bottom">
       {#if displaySearchForm}
           <div class="search-zone" bind:this={searchZone}>
-              {@render search?.()}
+              {#if searchZoneSlot}
+                {@render searchZoneSlot()}
+              {/if}
           </div>
       {/if}
   </div>
   </div>
 </div>
-<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/PivHeader/PivHeaderWC.svelte

@@ -33,36 +33,25 @@
 }}" />
 
 <script>
-    import { Utils } from "../utils";
     import PivHeader from "./PivHeader.svelte";
-    import DefaultLinks  from "./_defaultLinks.svelte";
-
-    const lang = Utils.getPageLanguage();
+    import { Utils } from "../utils"
 
     let {
         self,
-        joinUsText,
-        joinUsUrl,
-        altLanguageText,
-        altLanguageUrl,
-        linksLabel,
         ...props
     } = $props()
 
 </script>
 
-<PivHeader {self} {...props}>
-    {#snippet links()}
-        <slot name="links">
-            <DefaultLinks {joinUsUrl}
-                          {joinUsText}
-                          {altLanguageUrl}
-                          {altLanguageText}
-                          {linksLabel}/>
-        </slot>
+<PivHeader customElementParent={self}
+           {...props}
+           slots={$$slots} >
+    {#snippet linksSlot()}
+        <slot name="links" />
     {/snippet}
-
-    {#snippet search()}
+    {#snippet searchZoneSlot()}
         <slot name="search-zone" />
     {/snippet}
 </PivHeader>
+<link rel='stylesheet' href='{Utils.cssPath}'>
+

package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.html

@@ -0,0 +1 @@
+<qc-piv-header-embedded-test></qc-piv-header-embedded-test>

package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte

@@ -0,0 +1,28 @@
+<svelte:options customElement={{
+  tag: 'qc-piv-header-embedded-test',
+  shadow: "none",
+}}/>
+
+<script>
+    import PivHeader from "../PivHeader.svelte";
+    import { Utils } from '../../utils.js';
+</script>
+
+{#snippet linksSlot()}
+    <nav aria-label="Navigation PIV">
+        <ul>
+            <li><a href="#fakeEnglish">English</a>
+            </li>
+            <li><a href="javascript:;">Nous joindre</a>
+            </li>
+        </ul>
+    </nav>
+{/snippet}
+
+<PivHeader logoAlt="Accédez à Québec.ca" joinUsUrl="#join-us" altLanguageUrl="#fakeEnglish" {linksSlot}></PivHeader>
+
+<br>
+
+<PivHeader titleText="Titre du site ou du service" titleUrl="https://www.quebec.ca/" logoAlt="Accédez à Québec.ca" {linksSlot}></PivHeader>
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/PivHeader/Test/pivHeaderTest.html

@@ -0,0 +1,43 @@
+<qc-piv-header alt-logo="Accédez à Québec.ca"
+               join-us-url="#join-us"
+               alt-language-url="#fakeEnglish">
+</qc-piv-header>
+
+<br>
+
+<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>
+
+<br>
+
+<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>