qc-trousse-sdg 1.4.3 → 1.4.5

package/src/sdg/components/DropdownList/_dropdownList.scss

@@ -6,18 +6,11 @@
 $min-height: 40;
 $border: 1;
 
-.qc-dropdown-list-margin {
+.qc-select {
+  display: block;
   margin-bottom: rem(32);
-}
-
-.qc-dropdown-list-root {
-  width: 100%;
 
-  &-xs { max-width: token-value(size, max-width, xs); }
-  &-sm { max-width: token-value(size, max-width, sm); }
-  &-md { max-width: token-value(size, max-width, md); }
-  &-lg { max-width: token-value(size, max-width, lg); }
-  &-xl { max-width: token-value(size, max-width, xl); }
+  max-width: 100%;
 }
 
 .qc-dropdown-list-container {
@@ -26,12 +19,6 @@ $border: 1;
   .qc-label {
     margin-bottom: rem(4);
   }
-
-  &-xs { max-width: token-value(size, max-width, xs); }
-  &-sm { max-width: token-value(size, max-width, sm); }
-  &-md { max-width: token-value(size, max-width, md); }
-  &-lg { max-width: token-value(size, max-width, lg); }
-  &-xl { max-width: token-value(size, max-width, xl); }
 }
 
 .qc-dropdown-list {
@@ -40,6 +27,8 @@ $border: 1;
   border: rem($border) solid token-value(color, grey, medium);
   min-height: rem($min-height);
   background-color: token-value(color, background);
+  max-width: 100%;
+  min-width: 0;
 
   &.qc-dropdown-list-invalid {
     border: rem(2) solid token-value(color, red, regular) !important;
@@ -48,6 +37,12 @@ $border: 1;
       height: rem(36);
     }
   }
+
+  &-xs { width: token-value(size, max-width, xs); }
+  &-sm { width: token-value(size, max-width, sm); }
+  &-md { width: token-value(size, max-width, md); }
+  &-lg { width: token-value(size, max-width, lg); }
+  &-xl { width: token-value(size, max-width, xl); }
 }
 
 .qc-dropdown-list-search {

package/src/sdg/components/DropdownList/_select.html

@@ -75,6 +75,15 @@
             <option value="2">Option 2</option>
         </select>
     </qc-select>
+
+    <qc-select id="qc-select-multiple-choices-sm" width="sm">
+        <label for="select-multiple-choices-sm">Débordement</label>
+        <select id="select-multiple-choices-sm" multiple>
+            <option value="1">Option 1 + texte de remplissage</option>
+            <option value="2">Option 2 + texte de remplissage</option>
+            <option value="3">Option 3 + texte de remplissage</option>
+        </select>
+    </qc-select>
 </qc-doc-exemple>
 
 <h4>Documentation technique</h4>

package/src/sdg/components/Fieldset/_fieldset.scss

@@ -1,4 +1,5 @@
 @use "qc-sdg-lib" as *;
+@use "sass:map";
 
 .qc-fieldset {
   border: none;
@@ -76,7 +77,8 @@ $invalid-border-width: 2px;
   gap: 0 rem(32);
   flex-wrap: wrap;
   margin-bottom: rem(32);
-  margin-top: rem(-8);
+  $mb : token-value(spacer, xs);
+  margin-top: calc(-1 * $mb);
 
   > .qc-form-error {
     width: 100%;
@@ -84,12 +86,23 @@ $invalid-border-width: 2px;
   qc-textfield,
   .qc-textfield {
     margin-top: token-value(spacer, xs);
-    display: block;
-    width: auto;
     margin-bottom: 0;
+    min-width: 0;
+
+    $sizes: map.get($lg-tokens, size, max-width);
+    @each $size, $width in $sizes {
+      [size="#{$size}"] {
+        input {
+          width: $width;
+          max-width: $width;
+        }
+      }
+    }
   }
-  .qc-dropdown-list-root {
+
+  .qc-select {
     margin-top: token-value(spacer, xs);
     margin-bottom: 0;
+    width: fit-content;
   }
 }

package/src/sdg/components/Label/_label.scss

@@ -3,6 +3,7 @@
 .qc-label {
   font-weight: token-value(font weight content bold);
   display: block;
+  width: fit-content;
 
   &.qc-compact {
     font-size: token-value(font size sm);

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

@@ -4,8 +4,8 @@
 
     let {
         logoUrl = '/',
-        logoSrc = Utils.imagesRelativePath + '/QUEBEC_couleur.svg',
-        logoSrcDarkTheme = Utils.imagesRelativePath + '/QUEBEC_blanc.svg',
+        logoSrc = Utils.imagesRelativePath + 'QUEBEC_couleur.svg',
+        logoSrcDarkTheme = Utils.imagesRelativePath + 'QUEBEC_blanc.svg',
         logoAlt = lang === 'fr' ? 'Logo du gouvernement du Québec' : 'Logo of the Quebec government',
         logoWidth = 139,
         logoHeight = 50,

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

@@ -1,6 +1,6 @@
 <script>
-    import { onMount, tick } from "svelte";
-    import { Utils } from "../utils"
+    import {onMount, tick} from "svelte";
+    import {Utils} from "../utils"
 
     const lang = Utils.getPageLanguage();
 
@@ -46,93 +46,98 @@
     }
 
     onMount(() => {
-      containerClass += fullWidth === 'true' ? '-fluid' : '';
-      if (showSearch === 'true') {
-        enableSearch = 'true'
-        displaySearchForm = true;
-      }
+        containerClass += fullWidth === 'true' ? '-fluid' : '';
+        if (showSearch === 'true') {
+            enableSearch = 'true'
+            displaySearchForm = true;
+        }
     });
 </script>
 
 <div role="banner"
      class="qc-piv-header qc-component"
-     style="--logo-src:url({logoSrc})"
 >
-  <div class="{containerClass}">
-    {#if goToContent === 'true'}
-      <div class="go-to-content">
-        <a href="{goToContentAnchor}">
-          {goToContentText}
-        </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="{containerClass}">
+        {#if goToContent === 'true'}
+            <div class="go-to-content">
+                <a href="{goToContentAnchor}">
+                    {goToContentText}
+                </a>
+            </div>
+        {/if}
+        {#snippet title()}
+            {#if titleText}
+                <div class="title">
+                    {#if titleUrl && titleUrl.length > 0}
+                        <a class="page-title" href="{titleUrl}">{titleText}</a>
+                    {:else}
+                        <span class="page-title" role="heading" aria-level="1">{titleText}</span>
+                    {/if}
+                </div>
+            {/if}
+        {/snippet}
+        <div class="piv-top">
+            <div class="signature-group">
+                <div class="logo">
+                    <a
+                            href="{logoUrl}"
+                            rel="noreferrer"
+                    >
+                        <img src="{logoSrc}" alt="{logoAlt}" />
+                    </a>
+                </div>
 
-        <a href="{logoUrl}"
-           class="logo"
-               rel="noreferrer"
-               aria-label="{logoAlt}"
-            >
-                <div role="img"></div>
-        </a>
+                {@render title()}
+            </div>
 
-        {@render title()}
-      <div class="right-section">
-        {#if Utils.isTruthy(enableSearch)}
-          <a  class="qc-search"
-              href="/"
-              role="button"
-              onclick = {(evt) => {
+            <div class="right-section">
+                {#if Utils.isTruthy(enableSearch)}
+                    <a class="qc-search"
+                       href="/"
+                       role="button"
+                       onclick={(evt) => {
                   evt.preventDefault();
                   displaySearchForm = !displaySearchForm;
                   tick().then(() => {
                             focusOnSearchInput()
                     });
-              }}
-          >
-            <span>{displaySearchForm ? hideSearchText : displaySearchText}</span>
-          </a>
-        {/if}
-        <div class="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}
-                {#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>
+                }}
+                    >
+                        <span class="no-link-title" role="heading"
+                              aria-level="1">{displaySearchForm ? hideSearchText : displaySearchText}</span>
+                    </a>
                 {/if}
+                <div class="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}
+                        {#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">
+            {#if displaySearchForm}
+                <div class="search-zone" bind:this={searchZone}>
+                    {#if searchZoneSlot}
+                        {@render searchZoneSlot()}
+                    {/if}
+                </div>
             {/if}
         </div>
-      </div>
     </div>
-      {@render title()}
-
-      <div class="piv-bottom">
-      {#if displaySearchForm}
-          <div class="search-zone" bind:this={searchZone}>
-              {#if searchZoneSlot}
-                {@render searchZoneSlot()}
-              {/if}
-          </div>
-      {/if}
-  </div>
-  </div>
 </div>

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

@@ -23,6 +23,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">
@@ -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/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

@@ -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"

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,10 +129,14 @@ 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;
@@ -161,10 +186,6 @@ qc-piv-header,
         flex: 1 1 auto;
         margin-right: auto;
         min-width: 0;
-        img {
-          width: 100%;
-          margin-right: rem(16);
-        }
       }
 
       .title {
@@ -191,6 +212,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) {
@@ -75,6 +82,7 @@
     {required}
     {maxlength}
     {value}
+    bind:size
     bind:invalid
     bind:invalidText
     bind:maxlengthReached