qc-trousse-sdg 1.2.5-dev → 1.3.0-develop.0

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

@@ -0,0 +1,87 @@
+<svelte:options customElement="{{
+    tag: 'qc-search-bar',
+    shadow: 'none',
+    props: {
+        value: {attribute: 'input-value', type:'String'},
+        name: {attribute: 'input-name', type:'String'},
+        pivBackground: {attribute: 'piv-background', type:'Boolean'},
+    }
+}}" />
+
+<script>
+    import {Utils} from "../utils";
+    import SearchInput from "../SearchInput/SearchInput.svelte";
+    import IconButton from "../Button/IconButton.svelte";
+
+    const
+        lang = Utils.getPageLanguage(),
+        inputDefaultPlaceholder = lang === "fr"
+            ? "Rechercher…"
+            : "Search",
+        submitDefaultAriaLabel = lang === "fr"
+            ? "Lancer la recherche"
+            : "Submit search"
+    ;
+    export let
+        value = '',
+        name = 'q',
+        pivBackground = false
+    ;
+
+    let defaultsAttributes = {
+            input: {
+                "placeholder": inputDefaultPlaceholder,
+                "aria-label": inputDefaultPlaceholder
+            },
+            submit: {
+                "aria-label": submitDefaultAriaLabel
+            }
+        },
+        inputProps = {},
+        submitProps = {}
+
+    $: [inputProps, submitProps] = computeFieldsAttributes($$restProps)
+    $: inputProps = {
+        "value": value,
+        "name": name,
+        ...inputProps
+    }
+
+    /**
+     * @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(x => x) // élimine les éléments null
+                        )
+                    }
+                }
+            )
+    }
+
+
+</script>
+<div    class="qc-search-bar"
+        class:piv-background={pivBackground}
+    >
+    <SearchInput {...inputProps}/>
+    {#if true}
+        <IconButton
+                type="submit"
+                iconColor={pivBackground ? 'blue-piv' : 'background'}
+                icon="loupe-piv-fine"
+                iconSize="md"
+                {...submitProps}
+        />
+    {/if}
+</div>

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

@@ -0,0 +1,48 @@
+<svelte:options customElement="{{
+    tag: 'qc-search-input',
+    shadow: 'none',
+    props: {
+        ariaLabel: {attribute:'aria-label'},
+        clearAriaLabel: {attribute: 'clear-aria-label'}
+    }
+}}" />
+<script>
+    import IconButton from "../Button/IconButton.svelte";
+    import {Utils} from "../utils";
+    const
+        lang = Utils.getPageLanguage();
+
+    export let
+        value,
+        ariaLabel = lang === "fr"
+            ? "Rechercher…"
+            : "Search_",
+        clearAriaLabel = lang === "fr"
+            ? "Effacer le texte"
+            : "Clear text"
+    ;
+    let searchInput;
+
+</script>
+<div class="qc-search-input">
+    <input  bind:this={searchInput}
+            bind:value
+            type="search"
+            autocomplete="off"
+            {...(ariaLabel ? {"aria-label": ariaLabel} : {})}
+            {...$$restProps}
+    />
+    {#if value}
+    <IconButton type="button"
+                icon="clear-input"
+                iconColor="blue-piv"
+                iconSize="sm"
+                aria-label={clearAriaLabel}
+                on:click={e => {
+                    e.preventDefault();
+                    value = "";
+                    searchInput.focus();
+                }}
+        />
+    {/if}
+</div>

package/src/sdg/components/alert.svelte

@@ -1,13 +1,25 @@
-<svelte:options customElement="qc-alert"/>
+<svelte:options customElement="{{
+  tag:'qc-alert',
+  props: {
+     type  : {attribute: 'type'},
+     maskable  : {attribute: 'maskable'},
+     fullWidth : {attribute: 'full-width'},
+     content: {attribute: 'content'},
+     hide: {attribute: 'hide'},
+  }
+}}"/>
 
 <script>
     import {Utils} from "./utils";
+    import Icon from "./Icon.svelte";
+    import IconButton from "./Button/IconButton.svelte";
 
     export let
           type = "general"
         , maskable = ""
         , content = ""
         , hide = "false"
+        , fullWidth = 'false'
         ;
 
     let
@@ -17,8 +29,8 @@
                         ? type
                         : 'general'
         , closeLabel = Utils.getPageLanguage() === 'fr'
-                        ? "Fermer"
-                        : "Close"
+                        ? "Fermer l’alerte"
+                        : "Close l’alerte"
         , warningLabel = Utils.getPageLanguage() === 'fr'
                         ? "Information d'importance élevée"
                         : "Information of high importance"
@@ -28,9 +40,12 @@
         , label = type === 'general'
                         ? generalLabel
                         : warningLabel
+        , containerClass
         ;
 
     $: hiddenFlag = hide === 'true'
+    $: containerClass = "qc-container" + (fullWidth === 'true' ? '-fluid' : '');
+
     function hideAlert() {
         hide='true'
         rootElement.dispatchEvent(
@@ -44,28 +59,30 @@
 {#if !hiddenFlag}
     <div bind:this={rootElement}
         class="qc-general-alert {typeClass}"
-        role="alert"
-        aria-label={label}>
-        <div class="qc-container qc-general-alert-elements">
-            <div class="qc-icon qc-{type}-alert-icon"
-                 aria-hidden="true"
-            ></div>
-            <div class="qc-alert-content">
-                {@html content}
-                <slot />
-            </div>
-            {#if maskable === "true"}
-                <div class="qc-alert-close">
-                    <button type="button" class="qc-close" aria-label={closeLabel}
-                            on:click={hideAlert}>
-                        <span aria-hidden="true"
-                              class="qc-icon qc-xclose-blue qc-close-alert-icon"
-                        ></span>
-                    </button>
+        role="alert">
+        <div class={containerClass}>
+            <div class="qc-general-alert-elements">
+                <Icon type={type == 'warning' ? 'warning' : 'information'}
+                      color="{type == 'general' ? 'blue-piv' : 'yellow-dark'}"
+                      size="nm"
+                      label={label}
+                />
+                <div class="qc-alert-content">
+                    {@html content}
+                    <slot />
                 </div>
-            {/if}
+                {#if maskable === "true"}
+                    <IconButton aria-label={closeLabel}
+                                on:click={hideAlert}
+                                size="nm"
+                                icon="clear-input"
+                                iconSize="sm"
+                                iconColor="text-primary"
+                    />
+                {/if}
+            </div>
         </div>
     </div>
 {/if}
 <link rel='stylesheet'
-      href='{Utils.cssRelativePath}{Utils.cssFileName}'>
+      href='{Utils.cssPath}'>

package/src/sdg/components/componentWrapper.js

@@ -2,9 +2,6 @@
     Référence : https://github.com/sveltejs/svelte/issues/3852
 */
 export const customElements = {
-  customFoo: function () {
-    return "bar";
-  },
   define: (tagName, CustomElement) => {
     class CustomElementWrapper extends CustomElement {
       static get observedAttributes() {

package/src/sdg/components/externalLink.svelte

@@ -0,0 +1,92 @@
+<svelte:options customElement="{{
+  tag:'qc-external-link',
+  shadow:'none',
+  props: {
+     externalIconAlt  : {attribute: 'img-alt'}
+  }
+}}"/>
+
+<script>
+import {Utils} from "./utils";
+import {onMount} from "svelte";
+
+export
+  let externalIconAlt = Utils.getPageLanguage() == "fr"
+        ? "Ce lien dirige vers un autre site."
+        : "This link directs to another site."
+;
+let imgElement;
+
+onMount(() => {
+    imgElement.parentElement.querySelectorAll('a').forEach(link => {
+
+        // Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
+        const walker = 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 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 regex = /^(.*\s)?(\S+)\s*$/m;
+        const match = text.match(regex);
+        if (!match) return;
+        const prefix = match[1] || "";
+        const lastWord = match[2];
+
+        // 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}`;
+        span.appendChild(imgElement)
+
+        // 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);
+        }
+    });
+});
+</script>
+<span bind:this={imgElement}
+      role="img"
+      class="qc-ext-link-img"
+      aria-label={externalIconAlt}></span>
+
+
+

package/src/sdg/components/notice.svelte

@@ -2,55 +2,82 @@
 
 <script>
   import { Utils } from "./utils"
-  import { onMount } from "svelte";
+  import Icon from "./Icon.svelte";
 
   const
-      defaultHeader = 'h2'
+      isFr = Utils.getPageLanguage() == 'fr'
+    , defaultHeader = 'h2'
     , defaultType = 'information'
-    , types =
-        [ 'information'
-        , 'warning'
-        , 'success'
-        , 'error'
-        ]
+    , typesDescriptions = {
+          'advice': isFr ? "Avis conseil" : "Advisory notice",
+          'note': isFr ? "Avis explicatif" : "Explanatory notice"
+        , 'information': isFr ? "Avis général" : "General notice"
+        , 'warning': isFr ? "Avis d’avertissement" : "Warning notice"
+        , 'success': isFr ? "Avis de réussite" : "Success notice"
+        , 'error': isFr ? "Avis d’erreur" : "Error notice"
+    }
+    , types = Object.keys(typesDescriptions);
+
+  let noticeElement;
   export let
-          title = ""
-          , type = defaultType
-          , content = ""
-          , header = defaultHeader
-
-  onMount(() => {
-    header = header.match(/h[1-6]/)
-            ? header
-            : defaultHeader
-            ;
-    type = types.includes(type)
-            ? type
-            : defaultType
-            ;
-  })
+        title = ""
+        , type = defaultType
+        , content = ""
+        , header = defaultHeader
+        , icon;
+
+    $: header = header.match(/h[1-6]/)
+        ? header
+        : defaultHeader;
+
+    $: type = types.includes(type)
+        ? type
+        : defaultType;
+
+    $: role = type === "success"
+        ? "status"
+        : (type === "error" ? "alert" : null);
+
+  $: if (role) {
+      if (noticeElement) {
+          const tempNodes = Array.from(noticeElement.childNodes);
+          // console.log("temp: ",tempNodes);
+          noticeElement.innerHTML = "";
+          // Réinsère le contenu pour qu'il soit détecté par le lecteur d'écran.
+          tempNodes.forEach(node => noticeElement.appendChild(node)); }
+  }
+
+    $: shouldUseIcon = type === "advice" || type === "note";
+    // Si le type est "advice" ou "note", on force "neutral" (le gris), sinon on garde le type normal
+    $: computedType = shouldUseIcon ? "neutral" : type;
+    $: iconType = shouldUseIcon ? (icon ?? "note") : type;
+    $: iconLabel = typesDescriptions[type] ?? typesDescriptions['information'];
+
+
 </script>
 
 <!-- TODO Confirmer tabindex. On pense que c'est important de recevoir le focus (notamment dans les formulaires) en fait pour nous c'est très important, sinon en mode formulaire au lecteur écran (nav avec TAB, ce n'est jamais lu). -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div class="qc-component qc-notice qc-{type}"
+<div class="qc-component qc-notice qc-{computedType}"
      tabindex="0">
   <div class="icon-container">
-    <div aria-hidden="true"
-         class="qc-icon qc-{type}">
+    <div class="qc-icon">
+      <Icon type="{iconType}"
+            label={iconLabel}
+            size="nm"
+      />
     </div>
   </div>
   <div class="content-container">
-    <div class="content">
-      <svelte:element this={header}
-                      class="title">
-        {title}
-      </svelte:element>
-      <div class="text">
+    <div class="content" {role} bind:this={noticeElement}>
+        {#if title}
+          <svelte:element this={header}>
+            {@html title}
+          </svelte:element>
+        {/if}
         {@html content}
         <slot />
-      </div>
     </div>
   </div>
 </div>
-<link rel='stylesheet' href='{Utils.cssRelativePath}{Utils.cssFileName}'>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/pivFooter.svelte

@@ -2,11 +2,14 @@
     tag: 'qc-piv-footer'
     , props: {
         logoUrl : {attribute: 'logo-url'}
+        , logoSrc : {attribute: 'logo-src'}
+        , logoSrcDarkTheme: {attribute: 'logo-src-dark-theme'}
         , logoAlt : {attribute: 'logo-alt'}
-        , logoWidth : {attribute: 'logo-width'}
-        , logoHeight : {attribute: 'logo-height'}
-        , copyrightText : {attribute: 'copyrightText'}
+        , logoWidth: {attribute: 'logo-width'}
+        , logoHeight: {attribute: 'logo-height'}
+        , copyrightText : {attribute: 'copyright-text'}
         , copyrightUrl : {attribute: 'copyright-url'}
+
     }}
 }}" />
 
@@ -21,44 +24,42 @@ const
 
 export let
       logoUrl = '/'
-    , logoSrc = `${Utils.imagesRelativePath}logo-quebec-piv-footer.svg`
-    , logoAlt = 'Gouvernement du Québec'
-    , logoWidth = '117'
-    , logoHeight = '35'
+    , 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'
     , copyrightText = '© Gouvernement du Québec, ' + (new Date()).getFullYear()
+    , logoWidth = 139
+    , logoHeight = 50
     , copyrightUrl = lang === 'fr'
                         ? 'https://www.quebec.ca/droit-auteur'
                         : 'https://www.quebec.ca/en/copyright'
     ;
-
 </script>
-
-<div class="qc-piv-footer qc-component">
-    <div class="qc-container">
-        <nav>
-            <slot/>
-        </nav>
-        <div class="logo">
-            <slot name="logo">
-                <a href="{logoUrl}">
-                    <img class="logo-mo"
-                         alt="{logoAlt}"
-                         src="{logoSrc}"
-                         width="{logoWidth}"
-                         height="{logoHeight}">
-                </a>
-            </slot>
-        </div>
-        <span class="copyright">
-            <slot name="copyright">
-                <a href="{copyrightUrl}">
-                    {copyrightText}
-                </a>
-            </slot>
-        </span>
-    </div>
-
+<div class="qc-piv-footer qc-container-fluid">
+    <slot/>
+    <a href="{logoUrl}"
+       class="logo"
+       style:--logo-width={logoWidth}
+       style:--logo-height={logoHeight}
+    >
+        {#each [
+            ['light', logoSrc],
+            ['dark', logoSrcDarkTheme]]
+        as [theme, src]}
+        <img {src}
+             alt="{logoAlt}"
+             class="qc-{theme}-theme-show"/>
+        {/each}
+    </a>
+    <span class="copyright">
+        <slot name="copyright">
+            <a href="{copyrightUrl}">
+                {copyrightText}
+            </a>
+        </slot>
+    </span>
 </div>
+<link rel='stylesheet' href='{Utils.cssPath}'>
 
-<link rel='stylesheet'
-      href='{Utils.cssRelativePath}{Utils.cssFileName}'>

package/src/sdg/components/toTop.svelte

@@ -1,12 +1,20 @@
-<svelte:options customElement="qc-to-top" />
+<svelte:options customElement="{{
+    tag: 'qc-to-top',
+    shadow: 'none',
+   props: {
+      text: {attribute: 'text', type:'String'},
+  }
+}}" />
+
 
 <script>
    import { Utils } from "./utils";
+   import Icon from "./Icon.svelte";
 
    const
         lang = Utils.getPageLanguage();
    export let
-        alt = lang === 'fr'
+        text = lang === 'fr'
              ? "Retour en haut"
              : "Back to top"
       , demo =  'false'
@@ -65,17 +73,15 @@
 
 <svelte:window on:scroll = {handleScrollUpButton} />
 
-<a href=" "
+<a href="javascript:;"
    bind:this={toTopElement}
-   class="qc-to-top qc-icon qc-arrow-up-white"
-   tabindex="0"
+   class="qc-to-top"
    class:visible
    on:click|preventDefault={scrollToTop}
    on:keydown={handleEnterAndSpace}
+   tabindex={visible ? 0 : -1}
    {demo}
 >
-   <span>{alt}</span>
-</a>
-
-<link rel='stylesheet'
-      href='{Utils.cssRelativePath}{Utils.cssFileName}'>
+   <Icon type="arrow-up-white" color="background"/>
+   <span>{text}</span>
+</a>

package/src/sdg/components/utils.js

@@ -1,10 +1,13 @@
 export class Utils {
 
     static assetsBasePath =
-        new URL(document.currentScript.src).pathname
-            .split('/')
-            .slice(0, -2)
-            .join('/')
+        document
+            .currentScript
+            .getAttribute('sdg-assets-base-path')
+        || new URL(document.currentScript.src).pathname
+                    .split('/')
+                    .slice(0, -2)
+                    .join('/')
         || '.'
     static cssRelativePath =
         `${this.assetsBasePath}/css/`
@@ -17,6 +20,11 @@ export class Utils {
             .currentScript
             .getAttribute('sdg-css-filename')
         || 'qc-sdg.min.css'
+    static cssPath =
+        document
+            .currentScript
+            .getAttribute('sdg-css-path')
+        || this.cssRelativePath + this.cssFileName
     static sharedTexts =
         { openInNewTab :
             { fr: 'Ce lien s’ouvrira dans un nouvel onglet.'
@@ -31,4 +39,20 @@ export class Utils {
     static getPageLanguage() {
         return document.getElementsByTagName("html")[0].getAttribute("lang") || "fr";
     }
+
+    static isTruthy(value) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return value.toLowerCase() === 'true' || !!parseInt(value); // Vérifie si la chaîne est "true" (insensible à la casse)
+        }
+        if (typeof value === 'number') {
+            return !!value; // Vérifie si le nombre est égal à 1
+        }
+        return false;
+    }
+
+
+
 }

package/src/sdg/qc-sdg.js

@@ -1,7 +1,15 @@
 export * from './components/notice.svelte'
-export * from './components/pivHeader.svelte'
+export * from './components/PivHeader/pivHeader.svelte'
 export * from './components/pivFooter.svelte'
 export * from './components/alert.svelte'
 export * from './components/toTop.svelte'
-// export * from './doc/components/code.svelte'
-import './scss/qc-sdg.scss';
+export * from './components/externalLink.svelte'
+export * from './components/SearchBar/searchBar.svelte'
+export * from './components/SearchInput/SearchInput.svelte'
+export * from './components/Icon.svelte'
+import './scss/qc-sdg.scss' ;
+
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+if (isDarkMode) {
+    document.documentElement.classList.add('qc-dark-theme')
+}

package/src/sdg/scss/_qc-sdg-lib.scss

@@ -0,0 +1,3 @@
+// @use this file to access every variables, function, mixin or %class from Qc SDG
+@forward "lib/gridless-lib";
+@forward "lib/mixins";