qc-trousse-sdg 1.4.4 → 1.4.6

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

@@ -13,7 +13,7 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>
@@ -23,13 +23,14 @@
 
 <div id="pivEnteteExempleRecherchePersonnalisee">
     <qc-piv-header title-text="Titre du site ou du service"
+                   title-url=""
                    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><a href="#">Nous joindre</a>
             </li>
         </ul>
 
@@ -40,4 +41,14 @@
                            piv-background=""></qc-search-bar>
         </form>
     </qc-piv-header>
-</div>
+</div>
+
+<br>
+
+<qc-piv-header
+        id="piv-header-mce"
+        alt-logo="Accédez à Québec.ca"
+        join-us-url="#join-us"
+        alt-language-url="#fakeEnglish"
+>
+</qc-piv-header>

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

@@ -13,7 +13,8 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <!-- svelte-ignore a11y_invalid_attribute -->
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>

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

@@ -0,0 +1,9 @@
+import {Utils} from "../../utils";
+
+export function setMcePivHeaderLogoSrc() {
+    document.getElementById('piv-header-mce')
+        ?.setAttribute(
+            'logo-src',
+            `${Utils.imagesRelativePath}piv-mce-theme-sombre.svg`
+        );
+}

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

@@ -26,7 +26,7 @@
       <ul>
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
     </nav>
@@ -39,6 +39,7 @@
 >
   <div id="pivEnteteExempleRecherchePersonnalisee">
     <qc-piv-header title-text="Titre du site ou du service"
+                   title-url=""
                    alt-logo="Accédez à Québec.ca"
                    enable-search="true"
                    show-search="true"
@@ -46,7 +47,7 @@
       <ul slot="links">
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
 

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

@@ -44,27 +44,48 @@ qc-piv-header {
   }
   .piv-top {
     display: flex;
+    flex-wrap: nowrap;
+    gap: token-value(spacer sm);
     align-items: start;
     min-width: rem(72);
-    .logo {
+
+    .signature-group {
       display: flex;
-      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);
+      flex-grow: 1;
+      flex-wrap: wrap;
+      align-items: start;
+      margin-right: auto;
+      & > * {
         min-height: rem(72);
       }
+
+      .logo {
+        display: flex;
+        align-items: center;
+        flex-basis: rem(264);
+
+        a {
+          display: flex;
+          height: fit-content;
+          width: fit-content;
+          outline-offset: rem(4);
+
+          img {
+            display: flex;
+            flex-basis: min-content;
+            min-width: 150px;
+            width: 100%;
+            height: 100%;
+            max-width: rem(200);
+            min-height: rem(40);
+          }
+        }
+      }
     }
+
     .title {
-      align-items: center;
-      align-self: center;
+      display: block;
+      align-content: center;
     }
     .right-section {
       min-width: fit-content;
@@ -108,19 +129,19 @@ qc-piv-header {
   }
 }
 
+.page-title {
+  display: inline-block;
+}
+
 qc-piv-header,
 .qc-piv-header {
   a {
-    --qc-color-link-focus-outline: #{token-value(color blue pale)};
+    --qc-color-link-focus-outline: #{map.get($colors, blue, pale)};
     --qc-color-link-hover: white;
     --qc-color-link-text: white;
     --qc-color-link-visited: white;
     --qc-color-link-active: white;
 
-    font-family: token-value(font family header);
-    text-decoration: none;
-    font-weight: token-value(font weight regular);
-
     &:hover {
       text-decoration: underline;
     }
@@ -130,6 +151,12 @@ qc-piv-header,
       outline-offset: -2px;
     }
   }
+
+  a, span {
+    font-family: token-value(font family header);
+    text-decoration: none;
+    font-weight: token-value(font weight regular);
+  }
 }
 
 .go-to-content {
@@ -161,10 +188,6 @@ qc-piv-header,
         flex: 1 1 auto;
         margin-right: auto;
         min-width: 0;
-        img {
-          width: 100%;
-          margin-right: rem(16);
-        }
       }
 
       .title {
@@ -191,6 +214,12 @@ qc-piv-header,
   }
 }
 
+.no-link-title {
+  margin: 0;
+  font-weight: token-value(font weight regular);
+  font-size: token-value(font size md);
+}
+
 
 
 

package/src/sdg/components/TextField/Test/textFieldBaselineTest.html

@@ -35,7 +35,6 @@
            name="text-lg"
     />
 </qc-textfield>
-
 <qc-textfield
         label="Très large"
         size="xl"
@@ -47,11 +46,23 @@
            disabled
     />
 </qc-textfield>
+<div style="width: 500px; max-width: 100%;padding: 10px; border: 1px solid #ccc;">
+    <qc-textfield
+            label="Très large"
+            size="xl"
 
+    >
+        <input type="text"
+               placeholder="Long placeholder lorem ipsum dolor sit amet"
+               name="text-xl"
+               disabled
+        />
+    </qc-textfield>
+</div>
 <div class="qc-formfield-row">
     <qc-textfield
-            label="Combiné 1"
-            size="sm"
+            label="Combiné 1 Long placeholder lorem ipsum dolor sit amet"
+            size="lg"
     >
         <input type="text"
                placeholder="Long placeholder lorem ipsum dolor sit amet"
@@ -60,7 +71,7 @@
     </qc-textfield>
 
     <qc-textfield
-            label="Combiné 2"
+            label="Combiné 2 Long placeholder lorem ipsum dolor sit amet"
             size="xs"
     >
         <input type="text"
@@ -92,12 +103,20 @@
 </div>
 
 <qc-textfield label="Commentaires"
-              size="lg"
               description="Vous pouvez entrer des commentaires dans la zone de texte ci-dessous."
 >
     <textarea name="zone-lg" id="zone-lg"></textarea>
 </qc-textfield>
 
+<qc-textfield label="Commentaires"
+              description="Vous pouvez entrer des commentaires dans la zone de texte ci-dessous."
+>
+        <input type="text"
+               name="zone-lg-input"
+               placeholder="Long placeholder lorem ipsum dolor sit amet"
+        />
+</qc-textfield>
+
 <qc-textfield
         label="Suggestions"
         description="Vous pouvez entrer des suggestions dans la zone de texte ci-dessous."

package/src/sdg/components/TextField/TextField.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Utils } from "../utils";
+    import {Utils} from "../utils";
     import Label from "../Label/Label.svelte";
     import {getContext, onMount} from "svelte";
     import FormError from "../FormError/FormError.svelte";
@@ -11,7 +11,7 @@
         label = '',
         required = $bindable(false),
         description,
-        size,
+        size = $bindable(),
         maxlength,
         maxlengthReached = $bindable(false),
         invalidAtSubmit = $bindable(false),
@@ -43,7 +43,7 @@
 
     onMount(() => {
         if (webComponentMode) return;
-        if (! input) {
+        if (!input) {
             input = rootElement.querySelector('input,textarea');
         }
         onMountInput(
@@ -54,6 +54,12 @@
         )
     })
 
+    $effect(() => {
+        if (size) return;
+        if (!input) return;
+        size = input.tagName === 'INPUT' ? 'md' : 'lg';
+    })
+
     $effect(() => {
         invalidAtSubmit = (required && !value) || maxlengthReached;
     })
@@ -72,7 +78,6 @@
     })
 
 
-
     $effect(() => {
         charCountText = ''
         if (!maxlength) return;
@@ -83,12 +88,12 @@
         const s = over > 1 ? 's' : '';
         charCountText =
             remaining >= 0
-            ? lang === 'fr'
-                ? `${remaining} caractère${s} restant${s}`
-                : `${remaining} character${s} remaining`
-            : lang === 'fr'
-                ? `${over} caractère${s} en trop`
-                : `${over} character${s} over the limit`
+                ? lang === 'fr'
+                    ? `${remaining} caractère${s} restant${s}`
+                    : `${remaining} character${s} remaining`
+                : lang === 'fr'
+                    ? `${over} caractère${s} en trop`
+                    : `${over} character${s} over the limit`
 
     });
 
@@ -107,7 +112,7 @@
                 invalid && errorId,
                 maxlength && charCountId,
             ].filter(Boolean)
-            .join(' ')
+                .join(' ')
         )
         input.setAttribute('aria-invalid', invalid)
         input.setAttribute('aria-required', required)
@@ -116,7 +121,6 @@
 </script>
 
 {#snippet textfield()}
-
     {#if label}
         <Label
                 {required}
@@ -124,29 +128,29 @@
                 text={label}
                 forId={input?.id}
                 bind:rootElement={labelElement}
-            />
+        />
     {/if}
 
     {#if description}
         <div
-            bind:this={descriptionElement}
-            id={descriptionId}
-            class="qc-description">
-            {@html description}
+                bind:this={descriptionElement}
+                id={descriptionId}
+                class="qc-description">
+                {@html description}
         </div>
     {/if}
 
     {@render children()}
 
-    {#if maxlength !== null}
+    {#if maxlength && maxlength !== null}
         <div
-            bind:this={maxlengthElement}
-            id={charCountId}
-            class={[
-                'qc-textfield-charcount',
-                maxlengthReached && 'qc-max-reached'
-            ]}
-            aria-live="polite"
+                bind:this={maxlengthElement}
+                id={charCountId}
+                class={[
+                    'qc-textfield-charcount',
+                    maxlengthReached && 'qc-max-reached'
+                ]}
+                aria-live="polite"
         >
             {@html charCountText}
         </div>

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -26,6 +26,7 @@
             description,
             required,
             maxlength,
+            size,
             maxlengthReached = $bindable(false),
             invalidAtSubmit = $bindable(false),
         } = $props();
@@ -46,6 +47,12 @@
             invalidParam => invalid = invalidParam
         )
     })
+
+    $effect(() => {
+        if (!size) return;
+        $host().setAttribute('size', size);
+    })
+
     $effect(() => {
         if (!input) return;
         if (label) {
@@ -54,18 +61,20 @@
         if (description) {
             input.before(descriptionElement);
         }
-        if (invalid) {
-            if (textFieldRow) {
-                textFieldRow.appendChild(formErrorElement);
-            }
-            else {
-                input.after(formErrorElement);
-            }
-        }
         if (maxlength) {
             input.after(maxlengthElement);
         }
     })
+
+    $effect(() => {
+        if (!formErrorElement) return;
+        if (textFieldRow) {
+            textFieldRow.appendChild(formErrorElement);
+        }
+        else {
+            input.after(formErrorElement);
+        }
+    })
 </script>
 
 <TextField
@@ -75,6 +84,7 @@
     {required}
     {maxlength}
     {value}
+    bind:size
     bind:invalid
     bind:invalidText
     bind:maxlengthReached

package/src/sdg/components/TextField/_textField.html

@@ -182,11 +182,6 @@
   </table>
 </div>
 
-<h4>Champs alignés horizontalement (classe <code>qc-textfield-row</code>)</h4>
-
-<p>Les champs regroupés sur une ligne peuvent être placés dans un div avec la classe <code>qc-textfield-row</code>. De cette façon, les messages d'erreur ne provoquent pas de décalage. <br/>
-    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.</p>
-
 <h4>Propriété js</h4>
 <div class="table-overflow">
   <table class="qc-table qc-striped component-attributes-description">

package/src/sdg/components/TextField/_textField.scss

@@ -62,18 +62,10 @@ textarea {
 }
 
 $sizes: map.get($lg-tokens, size, max-width);
-input ,
-input + .qc-textfield-charcount {
-  .qc-textfield &,
-  qc-textfield & {
-    max-width: token-value(size input max-width);
-  }
-}
-textarea,
-textarea + .qc-textfield-charcount {
-  .qc-textfield &,
-  qc-textfield & {
-    max-width: token-value(size textarea max-width);
+
+@each $size, $width in $sizes {
+  [size="#{$size}"] {
+    max-width: 100%;
   }
 }
 
@@ -84,7 +76,8 @@ textarea,
   & + .qc-textfield-charcount {
     @each $size, $width in $sizes {
       [size="#{$size}"] & {
-        max-width: $width;
+        max-width: 100%;
+        width: $width;
       }
     }
   }

package/src/sdg/components/utils.js

@@ -16,15 +16,14 @@ export class Utils {
         `${this.assetsBasePath}/img/`
             .replace('//','/')
     static cssFileName =
-        document
-            .currentScript
-            .getAttribute('sdg-css-filename')
-        || 'qc-sdg.min.css'
+        getCssFileName(document.currentScript.getAttribute('sdg-css-filename'), document.currentScript.src);
     static cssPath =
-        document
-            .currentScript
-            .getAttribute('sdg-css-path')
-        || this.cssRelativePath + this.cssFileName
+        getCssPath(
+            document.currentScript.getAttribute('sdg-css-path'),
+            document.currentScript.src,
+            this.cssRelativePath,
+            this.cssFileName
+        );
     static sharedTexts =
         { openInNewTab :
             { fr: 'Ce lien s’ouvrira dans un nouvel onglet.'
@@ -33,8 +32,8 @@ export class Utils {
         }
 
     /**
-     * Get current page language based on html lang attribute
-     * @returns {string} language code  (fr/en).
+     * Get current page language based on HTML lang attribute
+     * @returns {string} language code (fr/en).
      */
     static getPageLanguage() {
         return document.getElementsByTagName("html")[0].getAttribute("lang") || "fr";
@@ -56,12 +55,12 @@ export class Utils {
     /**
      * extract and clean prefixed attributes
      * example:
-     *  computeFieldsAttributes("radio" , {"radio-class":"my-radio", "radio-data-foo":"foo", "other":"other value"})
+     *  computeFieldsAttributes("radio", {"radio-class": "my-radio", "radio-data-foo": "foo", "other": "other value"})
      *  return {"class":"my-radio", "data-foo":"foo"}
      *
      </div>
      * @param {(string|string[])} prefix - Une chaîne de caractères ou un tableau de chaînes.
-     * @param restProps - ojbect of attributes
+     * @param restProps - object of attributes
      * @returns {*} - object of attributes
      */
     static computeFieldsAttributes(prefix , restProps) {
@@ -125,8 +124,8 @@ export class Utils {
         word = replaceAccents(word, /[ùûü]/gi, 'u');
         word = replaceAccents(word, /[ïî]/gi, 'i');
         word = replaceAccents(word, /[ôö]/gi, 'i');
-        word = replaceAccents(word, /[œ]/gi, 'oe');
-        word = replaceAccents(word, /[æ]/gi, 'ae');
+        word = replaceAccents(word, /œ/gi, 'oe');
+        word = replaceAccents(word, /æ/gi, 'ae');
 
         // Remplace les caractères spéciaux par des espaces.
         word = word.replaceAll(/[-_—–]/gi, ' ');
@@ -136,3 +135,45 @@ export class Utils {
         return word.toLowerCase();
     }
 }
+
+function getCacheBustingParam(cssPath, currentScriptSrc) {
+    const pattern = /\?.*$/;
+
+    const cssCacheBustingParam = cssPath?.match(pattern);
+    if (cssCacheBustingParam && cssCacheBustingParam.length > 0) {
+        return '';
+    }
+
+    const scriptCacheBustingParam = currentScriptSrc?.match(pattern);
+    if (scriptCacheBustingParam && scriptCacheBustingParam.length > 0) {
+        return scriptCacheBustingParam[0];
+    }
+
+    return '';
+}
+
+function getCssFileName(sdgCssFilename, src) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssFilename)) {
+        return 'qc-sdg.min.css' + getCacheBustingParam(
+            'qc-sdg.min.css', src
+        );
+    } else {
+        return sdgCssFilename + getCacheBustingParam(
+            sdgCssFilename, src
+        );
+    }
+}
+
+function getCssPath(sdgCssPath, src, cssRelativePath, cssFileName) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssPath)) {
+        return cssRelativePath + cssFileName;
+    } else {
+        return sdgCssPath + getCacheBustingParam(
+            sdgCssPath, src
+        );
+    }
+}

package/src/sdg/qc-sdg-test.js

@@ -1,3 +1,7 @@
+import {setMcePivHeaderLogoSrc} from "./components/PivHeader/Test/pivHeaderTest";
+
+setMcePivHeaderLogoSrc();
+
 export * from './bases/Icon/Test/IconEmbeddedTest.svelte';
 export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
 export * from "./components/DropdownList/Test/DropdownListSvelteTest.svelte";

package/src/sdg/scss/settings/_tokens.scss

@@ -216,11 +216,7 @@ $lg-tokens: (
           lg: rem(528),
           xl: rem(825)
       ),
-      input: (
-        max-width: token-value(size max-width md),
-      ),
       textarea: (
-        max-width: token-value(size max-width lg),
         min-height: rem(108)
       ),
       search-bar: (

package/tests/buildSvelteTestsIgnore.json

@@ -1,4 +1,5 @@
 [
   "**/button-baseline.spec.ts",
-  "**/dropdown-list-baseline.spec.ts"
+  "**/dropdown-list-baseline.spec.ts",
+  "**/piv-header-baseline.spec.ts"
 ]