qc-trousse-sdg 1.4.0-develop.1 → 1.4.1

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

@@ -67,7 +67,7 @@ onMount(() => {
         }
 
         const prefix = match[1] || "";
-        const lastWord = match[2];
+        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');

package/src/sdg/components/Fieldset/Fieldset.svelte

@@ -0,0 +1,73 @@
+<script>
+    import FormError from '../FormError/FormError.svelte';
+    import { onMount } from 'svelte';
+    import {Utils} from "../utils";
+    import LabelText from "../Label/LabelText.svelte";
+
+    let {
+        legend,
+        name,
+        selectionButton = false,
+        inline = false,
+        columnCount = 1,
+        compact,
+        required = false,
+        disabled,
+        invalid = $bindable(false),
+        invalidText,
+        onchange = () => {},
+        elementsGap = "sm",
+        maxWidth = "fit-content",
+        children,
+        rootElement = $bindable(),
+    } = $props();
+
+    let groupSelection = $state(),
+        legendId = name
+            ? "id_" + name
+            : Utils.generateId("legend");
+</script>
+{#snippet fieldset()}
+<fieldset bind:this={rootElement}
+            class={[
+            "qc-choice-group",
+            "qc-fieldset",
+            compact && "qc-compact",
+            disabled && "qc-disabled"]}
+          aria-describedby={legendId}
+          {onchange}
+          selection-button={selectionButton ? selectionButton : undefined}
+          inline={inline ? inline : undefined}
+>
+  {#if legend}
+    <legend id={legendId}>
+        <LabelText text={legend} {required} />
+    </legend>
+  {/if}
+    <div
+        class={[
+            selectionButton && !inline && "qc-field-elements-selection-button",
+            selectionButton && inline && "qc-field-elements-selection-button-flex-row",
+            !selectionButton && "qc-field-elements-flex",
+            !selectionButton && `qc-field-elements-flex-${elementsGap}`,
+        ]}
+        style="
+        --column-count: {columnCount};
+        --fieldset-width: {maxWidth};
+        "
+        bind:this={groupSelection}
+    >
+        {@render children?.()}
+    </div>
+    <FormError {invalid} {invalidText} label={legend} />
+
+</fieldset>
+{/snippet}
+
+{#if !invalid}
+    {@render fieldset()}
+{:else}
+    <div class="qc-fieldset-invalid">
+        {@render fieldset()}
+    </div>
+{/if}

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

@@ -0,0 +1,95 @@
+@use "qc-sdg-lib" as *;
+
+.qc-fieldset {
+  border: none;
+  padding: 0;
+  margin: 0 0 rem(32);
+  justify-items: start;
+  legend {
+    font-weight: token-value(font weight content bold);
+    display: inline-block;
+    margin-bottom: token-value(spacer, md);
+  }
+  &.qc-compact {
+    margin-bottom: token-value(spacer, sm);
+    legend {
+      margin-bottom: token-value(spacer, sm);
+    }
+  }
+}
+
+$invalid-offset: token-value(spacer, xs);
+$invalid-border-width: 2px;
+.qc-fieldset-invalid {
+  border-left: $invalid-border-width solid token-value(color, red, regular);
+  padding-left: $invalid-offset;
+}
+
+%selection-button-gap {
+  gap: token-value(spacer, xs);
+}
+
+.qc-field-elements-selection-button-flex-row {
+  @extend %selection-button-gap;
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .qc-check-row-parent {
+    flex-grow: 0;
+  }
+}
+
+.qc-field-elements-selection-button {
+  @extend %selection-button-gap;
+  display: inline-grid;
+  grid-template-columns: repeat(var(--column-count), 1fr);
+
+  @include media-mobile() {
+    grid-template-columns: 1fr;
+  }
+
+  & > .qc-selection-button {
+    width: 100%
+  }
+}
+
+.qc-field-elements-flex {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--fieldset-width);
+
+  .qc-switch-label {
+    flex-grow: 1;
+  }
+}
+
+.qc-field-elements-flex-sm {
+  gap: token-value(spacer, sm);
+}
+
+.qc-field-elements-flex-md {
+  gap: token-value(spacer, md);
+}
+
+.qc-formfield-row {
+  display: flex;
+  gap: 0 rem(32);
+  flex-wrap: wrap;
+  margin-bottom: rem(32);
+  margin-top: rem(-8);
+
+  > .qc-form-error {
+    width: 100%;
+  }
+  qc-textfield,
+  .qc-textfield {
+    margin-top: token-value(spacer, xs);
+    display: block;
+    width: auto;
+    margin-bottom: 0;
+  }
+  .qc-dropdown-list-root {
+    margin-top: token-value(spacer, xs);
+    margin-bottom: 0;
+  }
+}

package/src/sdg/components/FormError/FormError.svelte

@@ -0,0 +1,51 @@
+<script>
+import Icon from "../../bases/Icon/Icon.svelte";
+import {onMount, tick} from "svelte";
+import {Utils} from "../utils";
+
+const lang = Utils.getPageLanguage();
+
+let {invalid ,
+    label = '',
+    invalidText,
+    id = $bindable(),
+    extraClasses = [],
+    rootElement = $bindable(),
+} = $props();
+
+let cleanLabel = $derived(label.replace(/:\s*$/, '')),
+    defaultInvalidText = $derived(
+        label
+            ? lang === 'fr'
+                ? `Le champ ${cleanLabel} est obligatoire.`
+                : `${cleanLabel} field is required.`
+            : lang === 'fr'
+                ? `Ce champ est obligatoire.`
+                : `This field is required.`
+    )
+;
+
+onMount(() => {
+    if (id) return;
+    id = Utils.generateId('qc-form-error')
+})
+
+</script>
+{#if invalid}
+<div {id}
+     bind:this={rootElement}
+     class={['qc-form-error', ...extraClasses]}
+     role="alert">
+    {#await tick()}
+    <!-- svelte-ignore block_empty -->
+    {:then _}
+        <Icon
+                type="warning"
+                color="red-regular"
+                width="var(--error-icon-width)"
+                height="var(--error-icon-height)"
+        />
+        <span>{@html invalidText ? invalidText : defaultInvalidText}</span>
+    {/await}
+</div>
+{/if}

package/src/sdg/components/FormError/_formError.scss

@@ -0,0 +1,21 @@
+@use "../../scss/qc-sdg-lib" as *;
+
+.qc-form-error {
+  display: flex;
+  color: token-value(color, red, regular);
+  align-items: start;
+  font-weight: token-value(font weight content medium);
+  margin-top: token-value(spacer, sm);
+  .qc-icon {
+      display: flex;
+      align-items: center;
+      margin-right: token-value(spacer, xs);
+      --error-icon-width: #{rem(24)}!important;
+      --error-icon-height: #{rem(21)}!important;
+  }
+  &.qc-xs-mt {
+    margin-top: token-value(spacer, xs);
+  }
+}
+
+

package/src/sdg/components/FormfieldRow/_formfieldRow.html

@@ -0,0 +1,108 @@
+<h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑textfield‑row</code>)</h3>
+
+<p>Les champs regroupés sur une ligne doivent être placés dans un div avec la classe <code>qc-textfield-row</code> pour correctement afficher les messages d’erreur en cas de soumission invalide.</p>
+
+<h4>Exemple</h4>
+<qc-doc-exemple caption="Exemple de champs sur une seule ligne">
+    <form id="formulaire-champ-alignes">
+        <div class="qc-formfield-row">
+            <qc-textfield
+                    label="Téléphone"
+                    size="sm"
+                    required
+            ><input type="text"
+                    name="telephone"
+                    placeholder="(123) 456-7890"
+            /></qc-textfield>
+
+            <qc-textfield
+                    label="Poste"
+                    size="xs"
+                    required
+            >
+                <input type="text"
+                       name="poste"
+                />
+            </qc-textfield>
+        </div>
+        <div class="qc-formfield-row">
+            <qc-select
+                    id="dropdown-list-restaurants"
+                    placeholder="Type de restaurant"
+                    enable-search
+                    search-placeholder="Rechercher un type de restaurant"
+                    required
+                    invalid-text="Veuillez choisir un type de restaurant."
+            >
+                <label for="dropdown-list-restaurants-select">Type de restaurant</label>
+                <select id="dropdown-list-restaurants-select"
+                        name="restaurants">
+                    <option value="">Veuillez faire un choix</option>
+                    <option value="Pizzeria">Pizzeria</option>
+                    <option value="Pâtisserie">Pâtisserie</option>
+                    <option value="Steakhouse">Steakhouse</option>
+                    <option value="Bar">Bar</option>
+                    <option value="Casse-croûte">Casse-croûte</option>
+                    <option value="Boîte à pâtes">Boîte à pâtes</option>
+                    <option value="Restaurant à burgers">Restaurant à burgers</option>
+                </select>
+            </qc-select>
+
+            <qc-select
+                    id="dropdown-list-regions"
+                    placeholder="Sélectionner une région"
+                    enable-search
+                    required
+                    search-placeholder="Rechercher les régions"
+            >
+                <label for="dropdown-list-regions-select">Régions desservies</label>
+                <select id="dropdown-list-regions-select" multiple name="regions">
+                    <option value="Capitale-nationale">Capitale-nationale</option>
+                    <option value="Centre-du-Québec" >Centre-du-Québec</option>
+                    <option value="Montérégie" >Montérégie</option>
+                    <option value="Outaouais">Outaouais</option>
+                    <option value="Saguenay-Lac-Saint-Jean">Saguenay-Lac-Saint-Jean</option>
+                    <option value="Gaspésie-Îles-de-la-Madeleine">Gaspésie-Îles-de-la-Madeleine</option>
+                    <option value="Nord-du-Québec">Nord-du-Québec</option>
+                    <option value="Bas-Saint-Laurent">Bas-Saint-Laurent</option>
+                </select>
+            </qc-select>
+        </div>
+        <button type="submit" class="qc-button qc-primary qc-compact">Envoyer</button>
+    </form>
+
+
+</qc-doc-exemple>
+<script>
+    const formfieldRowForm = document.getElementById("formulaire-champ-alignes");
+    formfieldRowForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        let isValid = true;
+        formfieldRowForm
+            .querySelectorAll("qc-textfield[required], [required] select")
+            .forEach(formfield => {
+                console.log(formfield, formfield.value ?? "no value")
+                if ((formfield.invalidAtSubmit ?? false)) { // textfield
+                    formfield.invalid = true;
+                    isValid = false;
+                }
+                if ((formfield.value === "")) { // select
+                    formfield.closest("qc-select").invalid = true;
+                    isValid = false;
+                }
+            })
+        if (isValid) {
+            const formData = new FormData(formfieldRowForm);
+            let alertParts = ["Formulaire soumis avec les données suivantes :"];
+            for (const [key, val] of formData.entries()) {
+                alertParts.push(`${key} : ${val}`);
+            }
+            alert(alertParts.join("\n"));
+        }
+    });
+</script>
+
+<h4>Documentation technique</h4>
+<p>Placer les champs à regrouper sur une seule ligne dans un div avec la classe <code>qc-formfield-row</code></p>
+
+

package/src/sdg/components/IconButton/IconButton.svelte

@@ -1,5 +1,5 @@
 <script>
-import Icon from "../Icon/Icon.svelte";
+import Icon from "../../bases/Icon/Icon.svelte";
 
 const {
     size = 'xl',

package/src/sdg/components/IconButton/_iconButton.scss

@@ -0,0 +1,14 @@
+@use "qc-sdg-lib" as *;
+
+.qc-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  @each $size-type, $size in ( sm: 16, md: 20, nm: 24, lg: 32, xl: 40) {
+    &[data-button-size=#{$size-type}] {
+      height: rem($size);
+      width: rem($size);
+    }
+  }
+}

package/src/sdg/components/Label/Label.svelte

@@ -0,0 +1,28 @@
+<script>
+    import LabelText from "./LabelText.svelte";
+
+    let {
+        forId,
+        text,
+        required = false,
+        compact = false,
+        bold = false,
+        disabled = false,
+        rootElement = $bindable(),
+        ...rest
+    } = $props();
+</script>
+
+<label
+    bind:this={rootElement}
+    for={forId}
+    class={[
+        "qc-label",
+        compact && "qc-compact",
+        bold && "qc-bold",
+        disabled && "qc-disabled"
+    ]}
+    {...rest}
+>
+    <LabelText {text} {required} />
+</label>

package/src/sdg/components/Label/LabelText.svelte

@@ -0,0 +1,4 @@
+<script>
+    let {text, required} = $props()
+</script>
+{@html text}{#if required}<span class="qc-required" aria-hidden="true">*</span>{/if}

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

@@ -0,0 +1,19 @@
+@use "qc-sdg-lib" as *;
+
+.qc-label {
+  font-weight: token-value(font weight content medium);
+  display: block;
+
+  &.qc-compact {
+    font-size: token-value(font size sm);
+  }
+
+  &.qc-bold {
+    font-weight: token-value(font weight content bold);
+  }
+
+  &:has(~ :disabled) {
+    color: token-value(color, grey, regular);
+    cursor: not-allowed;
+  }
+}

package/src/sdg/components/Notice/Notice.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Utils } from "../utils"
-  import Icon from "../Icon/Icon.svelte";
+  import Icon from "../../bases/Icon/Icon.svelte";
 
   const isFr = Utils.getPageLanguage() === 'fr';
   const defaultHeader = 'h2';
@@ -80,4 +80,3 @@ le denaturaliser.-->
     </div>
   </div>
 </div>
-<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Notice/NoticeWC.svelte

@@ -11,6 +11,7 @@
 
 <script>
     import Notice from './Notice.svelte';
+    import { Utils } from "../utils"
 
     const props = $props();
 </script>
@@ -23,3 +24,5 @@
         <slot />
     {/snippet}
 </Notice>
+<link rel='stylesheet' href='{Utils.cssPath}'>
+

package/src/sdg/components/Notice/_notice.html

@@ -0,0 +1,141 @@
+<h2 id="notice">Avis (qc-notice)</h2>
+<h3>Exemples</h3>
+
+<qc-doc-exemple id="exemple-avis-neutre"
+                caption="Exemple d’avis complémentaires"
+>
+  <qc-notice type="advice"
+             icon="ligth-bulb"
+             title="Nouvelle règlementation"
+             content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
+  </qc-notice>
+  <qc-notice type="note"
+             icon="note"
+             title="Nouvelle règlementation"
+             content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
+  </qc-notice>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemple d’information">
+  <qc-notice type="information"
+             title="Nouvelle règlementation"
+             content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
+  </qc-notice>
+</qc-doc-exemple>
+<!--            <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
+
+
+<qc-doc-exemple id="exemple-avis-avertissement"
+                caption="Exemple d’avertissement (avec et sans <i><code>slot</code></i>)"
+>
+  <qc-notice type="warning"
+             title="Migration des contenus"
+             content="Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20 avril.">
+  </qc-notice>
+
+  <qc-notice type="warning">
+    <h2>Migration des contenus</h2>
+    <p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20
+      avril.</p>
+  </qc-notice>
+</qc-doc-exemple>
+
+<!--            <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
+
+
+<qc-doc-exemple id="exemple-avis-succes"
+                caption="Exemple d’avis de succès"
+>
+  <qc-notice type="success"
+             title="Votre demande d’inscription a été reçue"
+             content="Votre code de confirmation sera envoyé par courriel.">
+  </qc-notice>
+</qc-doc-exemple>
+<!--            <qc-code target-id="exemple-avis-succes" ></qc-code>-->
+
+
+<qc-doc-exemple id="exemple-avis-erreur"
+                caption="Exemple d’avis d’erreur"
+>
+  <qc-notice type="error"
+             title="Des erreurs sont présentes dans le formulaire :">
+    <ul>
+      <li>
+        <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
+      </li>
+      <li>
+        <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
+      </li>
+      <li>
+        <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
+      </li>
+    </ul>
+  </qc-notice>
+</qc-doc-exemple>
+
+<!--            <qc-code target-id="exemple-avis-erreur" ></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>title</td>
+      <td>Texte</td>
+      <td>Chaine vide</td>
+      <td>Titre de l’avis</td>
+    </tr>
+    <tr>
+      <td>type</td>
+      <td>information, warning, success, error, advice, note</td>
+      <td>information (si absence de type)</td>
+      <td>Le type d’avis</td>
+    </tr>
+    <tr>
+      <td>content</td>
+      <td>Texte</td>
+      <td>Chaîne vide</td>
+      <td>Le contenu de l’avis, il doit contenir du texte structuré avec des balises sémantiques.</td>
+    </tr>
+    <tr>
+      <td>header</td>
+      <td>h1,h3,h2,h3,h4,h5,h6</td>
+      <td>h2</td>
+      <td>La balise du niveau de titre de l’avis</td>
+    </tr>
+    <tr>
+      <td>icon</td>
+      <td>Toute clé de la map $images dans settings/_base.scss</td>
+      <td>information
+        <qc-icon icon="information" aria-hidden="true" size="nm"></qc-icon>
+        (si absence de type)
+      </td>
+      <td>Défini l’icône pour les avis neutres</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+<h4>Zone d’ajout de contenu HTML</h4>
+
+<p>Ci-dessous, la zone d’ajout de contenu HTML (balise &lt;slot&gt;) délimitée en pointillé.</p>
+
+<qc-doc-exemple id="presentation-slots-avis"
+                caption="Présentation des emplacements disponibles dans les avis."
+                hide-code
+>
+  <qc-notice id="qc-notice-slots">
+    <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
+      Contenu par défaut
+    </div>
+  </qc-notice>
+</qc-doc-exemple>

package/src/sdg/{scss/components → components/Notice}/_notice.scss

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

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

@@ -1,6 +1,5 @@
 <script>
     import { Utils } from "../utils"
-    import DefaultCopyright from "./_defaultCopyright.svelte";
     const lang = Utils.getPageLanguage();
 
     let {
@@ -8,12 +7,13 @@
         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,
         logoWidth = 139,
         logoHeight = 50,
-        copyrightUrl,
+        copyrightUrl = lang === 'fr' ? 'https://www.quebec.ca/droit-auteur' : 'https://www.quebec.ca/en/copyright',
+        copyrightText =  '© Gouvernement du Québec, ' + (new Date()).getFullYear(),
         mainSlot,
-        copyrightSlot
+        copyrightSlot,
+        slots = {}
     } = $props();
 </script>
 
@@ -39,13 +39,12 @@
     </a>
 
     <span class="copyright">
-        {#if copyrightSlot}
+        {#if (!slots && copyrightSlot) || slots.copyright}
             {@render copyrightSlot()}
         {:else}
-            <DefaultCopyright {copyrightText} {copyrightUrl} />
+            <a href="{copyrightUrl}">
+                {copyrightText}
+            </a>
         {/if}
     </span>
 </div>
-
-<link rel='stylesheet' href='{Utils.cssPath}'>
-