qc-trousse-sdg 1.4.7 → 1.4.9

package/src/doc/scss/qc-doc-sdg.scss

@@ -94,53 +94,25 @@ h1,h2,h3,h4,h5,h6 {
 
 a {
 
-  &.pseudo-visited {
-    color: token-value(color,link,visited);
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, visited);
-    }
-  }
   &.pseudo-hover {
     @include hover-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, hover);
-    }
+    --qc-color-link-visited: var(--qc-color-link-hover);
   }
   &.pseudo-active {
     @include active-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, active);
-    }
+    --qc-color-link-visited: var(--qc-color-link-active);
+    --qc-color-link-focus: var(--qc-color-link-active);
+    --qc-color-link-hover: var(--qc-color-link-active );
   }
   &.pseudo-focus {
     @include focus-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, text);
-    }
-  }
-  &.not-visited:visited:not(:hover) {
-    color: token-value(color,link,text);
-    & > .qc-ext-link-text {
-      color: token-value(color,link,text);
-    }
-  }
-}
-
-div.qc-ext-link-img {
-  a.pseudo-visited  & {
-    background: token-value(color link visited)!important;
+    --qc-color-link-visited: var(--qc-color-link-focus);
   }
-  a.pseudo-focus  & {
-    background: token-value(color link hover)!important;
-  }
-  a.pseudo-hover  & {
-    background: token-value(color link hover)!important;
-  }
-  a.pseudo-active  & {
-    background: token-value(color link active)!important;
+  &.pseudo-visited {
+    --qc-color-link-text: var(--qc-color-link-visited);
   }
-  a.not-visited:visited:not(:hover) & {
-    background: token-value(color link text)!important;
+  &.not-visited {
+    --qc-color-link-visited: var(--qc-color-link-text);
   }
 }
 

package/src/sdg/bases/links/_links.html

@@ -1,7 +1,7 @@
 <h2 id="liens">Liens</h2>
 <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
     <dl>
-        <dt>Lien interne</dt>
+        <dt>Lien non visité</dt>
         <dd><a href="#" class="not-visited">Lien interne</a></dd>
         <dd>
             <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>

package/src/sdg/bases/links/_links.scss

@@ -4,10 +4,6 @@
 
 a {
   color: token-value(color, link, text);
-  &:has(.qc-ext-link-text) {
-    white-space: nowrap;
-    text-decoration: none;
-  }
   &:visited {
     color: token-value(color, link, visited);
   }
@@ -23,35 +19,40 @@ a {
   .img-wrap {
     white-space: nowrap;
   }
-}
 
-.qc-external-link {
-  .qc-ext-link-text {
-    white-space: normal;
-    text-decoration: underline;
-  }
 }
+div.qc-ext-link-img {
 
-.qc-ext-link-img {
   @extend .icon-external-link;
   $ratio : math.div(11,16) * 1em;
   height: $ratio;
   width: $ratio;
+  display: inline-block;
   background: token-value(color link text);
   mask-size: $ratio;
-  display: inline-block;
-  mask-repeat: no-repeat;
-
-  a:visited & {
+  margin-left: 4px;
+  a:visited  & {
     background: token-value(color link visited);
   }
-  a:focus & {
+  a:focus  & {
     background: token-value(color link hover);
   }
-  a:hover & {
+  a:hover  & {
     background: token-value(color link hover);
   }
-  a:active & {
+  a:active  & {
     background: token-value(color link active);
   }
+
+
+  .img-wrap + & {
+    display: none;
+  }
+}
+
+.qc-external-link .qc-button {
+  gap: 0;
+  > .img-wrap::before {
+    content: "\a0";
+  }
 }

package/src/sdg/components/Button/_button.scss

@@ -8,6 +8,9 @@
 }
 
 .qc-button {
+  --qc-color-link-focus: var(--qc-color-link-text);
+  --qc-color-link-hover: var(--qc-color-link-text);
+  --qc-color-link-visited: var(--qc-color-link-text);
   font-family: token-value(font family, content);
   font-size: token-value(font size, md);
   font-weight: token-value(font weight, bold);
@@ -15,7 +18,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: rem(8);
+  gap: token-value(spacer, xs);
   box-sizing: border-box;
   min-width: rem(112);
   max-width: rem(360);
@@ -47,6 +50,7 @@
   }
 
   &.qc-primary {
+    --qc-color-link-text: #{token-value(color white)};
     color: token-value(color white);
     background-color: token-value(color blue piv);
     border-color: token-value(color blue piv);
@@ -83,6 +87,7 @@
   }
 
   &.qc-secondary {
+    --qc-color-link-text: #{token-value(color blue, piv)};
     color: token-value(color blue, piv);
     background-color: token-value(color white);
     border-color: token-value(color blue, piv);
@@ -91,7 +96,8 @@
     &:focus:not(:disabled),
     &:active:not(:disabled),
     &.qc-hover, &.qc-focus, &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.16);
+
+      background-color: rgba(var(--qc-color-blue-piv-rgb), 0.16);
     }
 
     &:focus:not(:disabled),
@@ -102,7 +108,7 @@
 
     &:active:not(:disabled),
     &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.08);
+      background-color: rgba(var(--qc-color-blue-piv-rgb), 0.08);
     }
 
     &:disabled,
@@ -114,26 +120,28 @@
   }
 
   &.qc-tertiary {
+    --qc-color-link-text: #{token-value(color blue, piv)};
     color: token-value(color blue, piv);
     background-color: token-value(color white);
     border-color: token-value(color white);
 
     &:hover:not(:disabled),
     &.qc-hover{
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.24);
+
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
       text-decoration: underline;
     }
 
     &:focus:not(:disabled),
     &.qc-focus {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.24);
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
       border-color: token-value(color blue, dark);
       box-shadow: 0 0 0 2px token-value(color blue, light);
     }
 
     &:active:not(:disabled),
     &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.16);
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.16);
     }
 
     &:disabled,

package/src/sdg/components/DropdownList/DropdownList.svelte

@@ -255,6 +255,14 @@
         }
     });
 
+    $effect(() => {
+        if (value) {
+            items.forEach((item) => {
+                item.checked = value.includes(item.value);
+            });
+        }
+    });
+
     $effect(() => {
         items.forEach((item) => {
             if (!item.id) {

package/src/sdg/components/ExternalLink/ExternalLink.svelte

@@ -13,20 +13,76 @@ let {
 } = $props();
 
 let imgElement = $state();
-let processedLinks = new Set();
 
-function addExternalLinkIcon(links) {
-    links.forEach(link => {
-        if (processedLinks.has(link.innerHTML)) {
-            return;
+function createVisibleNodesTreeWalker(link) {
+    return document.createTreeWalker(
+        link,
+        NodeFilter.SHOW_ALL,
+        {
+            acceptNode: node => {
+                if (node instanceof Element) {
+                    if (node.hasAttribute('hidden')) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    const style = window.getComputedStyle(node);
+                    // Si l'élément est masqué par CSS (display ou visibility), on l'ignore
+                    if (style.display === 'none'
+                        || style.visibility === 'hidden'
+                        || style.position === 'absolute') {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                }
+                if (!node instanceof Text) {
+                    return NodeFilter.FILTER_SKIP;
+                }
+
+                // Ignore les nœuds vides
+                if (!/\S/.test(node.textContent)) {
+                    return NodeFilter.FILTER_SKIP;
+                }
+
+                return NodeFilter.FILTER_ACCEPT;
+            }
         }
+    );
+}
 
-        let linkContent = link.innerHTML;
-        linkContent = `<span class="qc-ext-link-text">${linkContent}</span>&nbsp;${imgElement.outerHTML}`;
+function addExternalLinkIcon(link) {
+    // Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
+    const walker = createVisibleNodesTreeWalker(link);
 
-        link.innerHTML = linkContent;
-        processedLinks.add(linkContent);
-    });
+    let lastTextNode = null;
+    while (walker.nextNode()) {
+        lastTextNode = walker.currentNode;
+    }
+    // S'il n'y a pas de nœud texte visible, on ne fait rien
+    if (!lastTextNode) {
+        return;
+    }
+
+    // Séparer le contenu du dernier nœud texte en deux parties :
+    // le préfixe (éventuel) et le dernier mot
+    const text = lastTextNode.textContent;
+    const match = text.match(/^([\s\S]*\s)?(\S+)\s*$/m);
+    if (!match) {
+        return;
+    }
+
+    const prefix = match[1] || "";
+    const lastWord = match[2].replace(/([\/\-\u2013\u2014])/g, "$1<wbr>");
+
+    // Crée un span avec white-space: nowrap pour empêcher le saut de ligne de l'image de lien externe
+    const span = document.createElement('span');
+    span.classList.add('img-wrap')
+    span.innerHTML = `${lastWord}${imgElement.outerHTML}`;
+
+    // Met à jour le nœud texte : on garde le préfixe et on insère le span après
+    if (prefix) {
+        lastTextNode.textContent = prefix;
+        lastTextNode.parentNode.insertBefore(span, lastTextNode.nextSibling);
+    } else {
+        lastTextNode.parentNode.replaceChild(span, lastTextNode);
+    }
 }
 
 $effect(() => {
@@ -37,7 +93,11 @@ $effect(() => {
     isUpdating = true;
 
     tick().then(() => {
-        addExternalLinkIcon(links);
+        links.forEach(link => {
+            if (!link.querySelector('.qc-ext-link-img')) {
+                addExternalLinkIcon(link);
+            }
+        });
         return tick();
     }).then(() => {
         isUpdating = false;
@@ -51,8 +111,7 @@ $effect(() => {
             alt={externalIconAlt}
             bind:rootElement={imgElement}
             class="qc-ext-link-img"
+            color="link-text"
     />
 </div>
 
-
-

package/src/sdg/components/ExternalLink/ExternalLinkWC.svelte

@@ -8,17 +8,16 @@
 
 <script>
     import ExternalLink from "./ExternalLink.svelte";
-    import {onDestroy, onMount, tick} from "svelte";
     import {Utils} from "../utils";
+    import {onDestroy, onMount, tick} from "svelte";
 
     const props = $props();
-    const nestedExternalLinks = $host().querySelector('qc-external-link');
-
-    let links = $state([]);
-    const observer = Utils.createMutationObserver($host(), refreshLinks);
+    let links = $state(queryLinks());
     let isUpdating = $state(false);
     let pendingUpdate = false;
+    const nestedExternalLinks = $host().querySelector('qc-external-link');
 
+    const observer = Utils.createMutationObserver($host(), refreshLinks);
     function queryLinks() {
         return Array.from($host().querySelectorAll('a'));
     }
@@ -41,7 +40,6 @@
 
     onMount(() => {
         $host().classList.add('qc-external-link');
-        links = queryLinks();
 
         observer?.observe($host(), {
             childList: true,
@@ -50,9 +48,7 @@
         });
     });
 
-    onDestroy(() => {
-        observer?.disconnect();
-    });
+    onDestroy(() => observer?.disconnect());
 </script>
 
-<ExternalLink {links} bind:isUpdating {nestedExternalLinks} {...props} />
+<ExternalLink bind:links bind:isUpdating {nestedExternalLinks} {...props} />

package/src/sdg/components/SearchInput/SearchInput.svelte

@@ -2,12 +2,15 @@
     import IconButton from "../IconButton/IconButton.svelte";
     import {Utils} from "../utils";
     import Icon from "../../bases/Icon/Icon.svelte";
+    import Label from "../Label/Label.svelte";
 
     const lang = Utils.getPageLanguage();
 
 
     let {
         value = $bindable(''),
+        label = '',
+        size = '',
         ariaLabel = lang === "fr" ? "Rechercher..." : "Search...",
         clearAriaLabel = lang === "fr" ? "Effacer le texte" : "Clear text",
         leftIcon = false,
@@ -25,11 +28,20 @@
     }
 </script>
 
+{#if label}
+    <Label
+        disabled={isDisabled}
+        text={label}
+        forId={id}
+    />
+{/if}
 <div class={[
             "qc-search-input",
             leftIcon && "qc-search-left-icon",
             leftIcon && isDisabled && "qc-search-left-icon-disabled"
-        ]} >
+        ]}
+     size={size}>
+
     {#if leftIcon}
         <Icon type="search-thin"
               iconColor="grey-regular"
@@ -40,7 +52,7 @@
             bind:value
             type="search"
             autocomplete="off"
-            aria-label={ariaLabel}
+            aria-label={label ? undefined : ariaLabel}
             class={isDisabled ? "qc-disabled" : ""}
             id={id}
             {...rest}

package/src/sdg/components/SearchInput/SearchInputWC.svelte

@@ -5,6 +5,8 @@
         id: {attribute: 'id'},
         ariaLabel: {attribute:'aria-label'},
         clearAriaLabel: {attribute: 'clear-aria-label'},
+        label: {attribute: 'label'},
+        size: {attribute: 'size'},
         leftIcon: {attribute: 'left-icon'}
     }
 }}" />

package/src/sdg/components/SearchInput/_searchInput.html

@@ -28,6 +28,16 @@
             left-icon
             clear-aria-label="Effacer le texte"
     ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            label="Nom de l'article"
+            size="md"
+            placeholder="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
 </qc-doc-exemple>
 
 <h3>Documentation technique</h3>
@@ -75,10 +85,16 @@
             <td>Désactive le champ.</td>
         </tr>
         <tr>
-            <td>name</td>
+            <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+            <td>Texte du libellé du champ. Remplace automatiquement l'aria-label lorsqu'il est défini.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>""</td>
+            <td>Largeur du champ</td>
         </tr>
         </tbody>
     </table>

package/src/sdg/components/SearchInput/_searchInput.scss

@@ -1,10 +1,19 @@
-@use "../../scss/qc-sdg-lib" as *;
+@use "qc-sdg-lib" as *;
+@use "sass:map";
 
 qc-search-input {
   display: block;
   width: 100%;
   // TODO mettre un token
   max-width: rem(548);
+
+    $sizes: map.get($lg-tokens, size, max-width);
+    @each $size, $width in $sizes {
+      &[size="#{$size}"] {
+        max-width: 100%;
+        width: $width;
+      }
+    }
 }
 
 %qc-search-wrapper {

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

@@ -66,6 +66,9 @@
 
     $effect(() => {
         if (!input) return;
+        if (labelElement) {
+            input.before(labelElement);
+        }
         if (description) {
             input.before(descriptionElement);
         }

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

@@ -4,10 +4,10 @@
 <qc-doc-exemple caption="Exemples 1 - différents champs de texte. Soumettre le formulaire pour voir les messages d'erreur.">
   <form id="formulaire-champs-textes">
     <qc-textfield
-            label="Nom complet"
             size="md"
             required
     >
+      <label>Nom complet</label>
       <input type="text"
              name="code-postal"
              placeholder="ex : Jean Tremblay"

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

@@ -63,12 +63,6 @@ textarea {
 
 $sizes: map.get($lg-tokens, size, max-width);
 
-@each $size, $width in $sizes {
-  [size="#{$size}"] {
-    max-width: 100%;
-  }
-}
-
 input,
 textarea,
  {

package/tests/dropdown-list-baseline.spec.ts

@@ -461,6 +461,23 @@ test.describe('choix multiples', () => {
         await expect(page.locator('#qc-select-multiple-choices-input')).toContainText('Option 3, Option 4');
     });
 
+    test('manipulation externe de la valeur', {
+        tag: ['@multiple', '@dropdownlist'],
+        annotation: {
+            type: 'description',
+            description: 'Soit la liste déroulante Choix multiples, en changeant value à 1, alors option 1 est cochée.'
+        }
+    }, async ({page}) => {
+        // On ne manipule pas value directement sur l'élément select en slot en raison de limitations avec
+        // les éléments select multiple.
+        await page.locator('#qc-select-multiple-choices').evaluate((qcSelect: HTMLElement) => {
+            // @ts-ignore
+            qcSelect.value = ["1"];
+        });
+
+        await expect(page.locator('#select-multiple-choices > option[value="1"]')).toHaveAttribute("selected");
+    });
+
     test('choix multiples 2 clics par option', {
         tag: ['@multiple', '@dropdownlist'],
         annotation: {