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

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

@@ -0,0 +1,173 @@
+<script>
+    import { Utils } from "../utils";
+    import Label from "../Label/Label.svelte";
+    import {getContext, onMount} from "svelte";
+    import FormError from "../FormError/FormError.svelte";
+    import {onMountInput} from "./textFieldUtils";
+
+    const lang = Utils.getPageLanguage();
+
+    let {
+        label = '',
+        required = $bindable(false),
+        description,
+        size,
+        maxlength,
+        maxlengthReached = $bindable(false),
+        invalidAtSubmit = $bindable(false),
+        value = $bindable(""),
+        invalid = $bindable(false),
+        invalidText,
+        describedBy = $bindable([]),
+        labelElement = $bindable(),
+        formErrorElement = $bindable(),
+        descriptionElement = $bindable(),
+        maxlengthElement = $bindable(),
+        input,
+        children
+    } = $props();
+
+    const webComponentMode = getContext('webComponentMode');
+
+    let errorId = $state(),
+        charCountText = $state(),
+        rootElement = $state(),
+        textFieldRow = $state(),
+        defaultInvalidText = $derived.by(() => {
+            if (!maxlengthReached) return '';
+            return lang === 'fr'
+                ? `La limite de caractères du champ ${label} est dépassée.`
+                : `The character limit for the ${label} field has been exceeded.`
+        })
+    ;
+
+    onMount(() => {
+        if (webComponentMode) return;
+        if (! input) {
+            input = rootElement.querySelector('input,textarea');
+        }
+        onMountInput(
+            input,
+            textFieldRowParam => textFieldRow = textFieldRowParam,
+            valueParam => value = valueParam,
+            invalidParam => invalid = invalidParam
+        )
+    })
+
+    $effect(() => {
+        invalidAtSubmit = (required && !value) || maxlengthReached;
+    })
+
+    $effect(() => {
+        if (webComponentMode) return;
+        if (invalid && textFieldRow) {
+            textFieldRow.appendChild(formErrorElement);
+        }
+    })
+
+    $effect(() => {
+        if (maxlength && maxlength < 1) {
+            maxlength = 0;
+        }
+    })
+
+
+
+    $effect(() => {
+        charCountText = ''
+        if (!maxlength) return;
+        const currentLength = value?.length || 0;
+        const remaining = maxlength - currentLength;
+        const over = Math.abs(remaining);
+        maxlengthReached = remaining < 0;
+        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`
+
+    });
+
+    // Génération des ID pour le aria-describedby
+    const
+        descriptionId = Utils.generateId('description-'),
+        charCountId = Utils.generateId('charcount-')
+    ;
+
+    $effect(() => {
+        if (!input) return;
+        input.setAttribute(
+            "aria-describedby",
+            [
+                description && descriptionId,
+                invalid && errorId,
+                maxlength && charCountId,
+            ].filter(Boolean)
+            .join(' ')
+        )
+        input.setAttribute('aria-invalid', invalid)
+        input.setAttribute('aria-required', required)
+    })
+
+</script>
+
+{#snippet textfield()}
+
+    {#if label}
+        <Label
+                {required}
+                disabled={input?.disabled}
+                text={label}
+                forId={input?.id}
+                bind:rootElement={labelElement}
+            />
+    {/if}
+
+    {#if description}
+        <div
+            bind:this={descriptionElement}
+            id={descriptionId}
+            class="qc-description">
+            {@html description}
+        </div>
+    {/if}
+
+    {@render children()}
+
+    {#if maxlength !== null}
+        <div
+            bind:this={maxlengthElement}
+            id={charCountId}
+            class={[
+                'qc-textfield-charcount',
+                maxlengthReached && 'qc-max-reached'
+            ]}
+            aria-live="polite"
+        >
+            {@html charCountText}
+        </div>
+    {/if}
+
+    <FormError {invalid}
+               invalidText={invalidText ? invalidText :  defaultInvalidText}
+               label={label ? label : input?.getAttribute("aria-label")}
+               bind:id={errorId}
+               extraClasses={['qc-xs-mt']}
+               bind:rootElement={formErrorElement}
+    />
+{/snippet}
+{#if webComponentMode}
+    {@render textfield()}
+{:else}
+    <div class='qc-textfield'
+         {size}
+         invalid={invalid ? true : undefined}
+         bind:this={rootElement}
+    >
+        {@render textfield()}
+    </div>
+{/if}

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

@@ -0,0 +1,90 @@
+<svelte:options customElement={{
+  tag: 'qc-textfield',
+  props: {
+    label: { attribute: 'label', type: 'String' },
+    required: { attribute: 'required', type: 'Boolean' },
+    description: { attribute: 'description', type: 'String' },
+    size: { attribute: 'size', type: 'String' },
+    maxlength: { attribute: 'max-length', type: 'Number' },
+    invalid: { attribute: 'invalid', type: 'Boolean', reflect: true },
+    invalidText: { attribute: 'invalid-text', type: 'String' },
+  }
+}} />
+
+<script>
+    import TextField from './TextField.svelte';
+    import {onMount, setContext} from "svelte";
+    import {Utils} from '../utils.js';
+    import {onMountInput} from "./textFieldUtils";
+
+    setContext('webComponentMode', true)
+
+    let {
+            invalid = $bindable(false),
+            invalidText,
+            label,
+            description,
+            required,
+            maxlength,
+            maxlengthReached = $bindable(false),
+            invalidAtSubmit = $bindable(false),
+        } = $props();
+    let
+        labelElement = $state(),
+        formErrorElement = $state(),
+        descriptionElement = $state(),
+        maxlengthElement = $state(),
+        value = $state(),
+        input = $state(),
+        textFieldRow = $state()
+    ;
+    onMount(() => {
+        input = $host().querySelector('input,textarea');
+        onMountInput(input,
+            textFieldRowParam => textFieldRow = textFieldRowParam,
+            valueParam => value = valueParam,
+            invalidParam => invalid = invalidParam
+        )
+    })
+    $effect(() => {
+        if (!input) return;
+        if (label) {
+            input.before(labelElement);
+        }
+        if (description) {
+            input.before(descriptionElement);
+        }
+        if (invalid) {
+            if (textFieldRow) {
+                textFieldRow.appendChild(formErrorElement);
+            }
+            else {
+                input.after(formErrorElement);
+            }
+        }
+        if (maxlength) {
+            input.after(maxlengthElement);
+        }
+    })
+</script>
+
+<TextField
+    {label}
+    {description}
+    {input}
+    {required}
+    {maxlength}
+    {value}
+    bind:invalid
+    bind:invalidText
+    bind:maxlengthReached
+    bind:invalidAtSubmit
+    bind:labelElement
+    bind:formErrorElement
+    bind:descriptionElement
+    bind:maxlengthElement
+>
+    <slot></slot>
+</TextField>
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

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

@@ -0,0 +1,218 @@
+<h3 id="textfield">Champ texte</h3>
+<h4>Exemples</h4>
+
+<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
+    >
+      <input type="text"
+             name="code-postal"
+             placeholder="ex : Jean Tremblay"
+      />
+    </qc-textfield>
+
+    <qc-textfield
+            label="Champ désactivé"
+            size="md"
+    >
+      <input type="text"
+             name="disabled-field"
+             placeholder="Ce champ est désactivé"
+             disabled
+      />
+    </qc-textfield>
+
+    <qc-textfield
+            label="Champ de texte multiligne"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            size="lg"
+            max-length="10"
+            required
+    >
+      <textarea name="zone-xxl"></textarea>
+    </qc-textfield>
+
+    <button type="submit" class="qc-button qc-primary qc-compact">Envoyer</button>
+  </form>
+
+  <script>
+    const textfieldForm = document.getElementById("formulaire-champs-textes");
+    textfieldForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+      let isValid = true;
+      textfieldForm
+          .querySelectorAll("qc-textfield[required]")
+          .forEach(formfield => {
+            if (formfield.invalidAtSubmit) {
+              formfield.invalid = true;
+              isValid = false;
+            }
+          })
+      if (isValid) {
+        const formData = new FormData(textfieldForm);
+        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>
+</qc-doc-exemple>
+
+<qc-doc-exemple id="textfield-sizes" caption="Illustration des différentes tailles de champs texte.">
+
+    <qc-textfield
+            label="Taille extra-petite"
+            size="xs"
+    >
+      <input type="text"
+             placeholder="xs"
+      />
+    </qc-textfield>
+
+    <qc-textfield
+            label="Taille petite"
+            size="sm"
+    >
+      <input type="text"
+             placeholder="sm"
+      />
+    </qc-textfield>
+
+  <qc-textfield
+          label="Taille moyenne"
+          size="md"
+  >
+    <input type="text"
+           placeholder="md"
+    />
+  </qc-textfield>
+  <qc-textfield
+          label="Taille large"
+          size="lg"
+  >
+    <input type="text"
+           placeholder="lg"
+    />
+  </qc-textfield>
+  <qc-textfield
+          label="Taille extra-large"
+          size="xl"
+  >
+    <input type="text"
+           placeholder="xl"
+    />
+  </qc-textfield>
+
+</qc-doc-exemple>
+
+
+<h4>Documentation technique</h4>
+
+<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>label</td>
+      <td>Texte</td>
+      <td>""</td>
+      <td>Texte du libellé du champ</td>
+    </tr>
+    <tr>
+      <td>size</td>
+      <td>"xs", "sm", "md", "lg", "xl"</td>
+      <td>lg pour les champs simple (<code>input</code>) <br>
+        xl pour les champs multilignes (<code>textarea</code>),
+      </td>
+      <td>Largeur du champ</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Marque le champ comme obligatoire</td>
+    </tr>
+    <tr>
+      <td>description</td>
+      <td>Texte</td>
+      <td>""</td>
+      <td>Texte descriptif affiché sous l'étiquette</td>
+    </tr>
+    <tr>
+      <td>max-length</td>
+      <td>Nombre</td>
+      <td>null</td>
+      <td>Indique la limite de caractères pour le champ</td>
+    </tr>
+    <tr>
+      <td>invalid</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Indique que le champ est invalide en affichant un message selon l'erreur.
+      <dl>
+        <dt>Français</dt>
+        <dd>Le champ XXX est obligatoire.</dd>
+        <dd>La limite de caractères du champ XXX est dépassée.</dd>
+        <dt>Anglais</dt>
+        <dd>XXX field is required.</dd>
+        <dd>The character limit for the ${label} field has been exceeded.</dd>
+      </dl>
+      </td>
+    </tr>
+    <tr>
+      <td>invalid-text</td>
+      <td>Texte</td>
+      <td>aucune</td>
+      <td>Message d'erreur personnalisé affiché lorsque le champ est invalide</td>
+    </tr>
+    </tbody>
+  </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">
+    <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Valeur</th>
+      <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>invalidAtSubmit</td>
+        <td>Booléen</td>
+        <td>Indique si le champ serait invalide s'il était soumis. La vérification porte sur <code>required</code> et <code>max-length</code></td>
+      </tr>
+      <tr>
+      <tr>
+        <td>maxlengthReached</td>
+        <td>Booléen</td>
+        <td>Indique si la limite de caractère est dépassée.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h5>Zone d’ajout de contenu HTML</h5>
+
+<p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>

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

@@ -0,0 +1,110 @@
+@use "qc-sdg-lib" as *;
+@use "../Label/label" as *;
+@use "sass:map";
+
+qc-textfield,
+.qc-textfield {
+  display: block;
+  margin-bottom: rem(32);
+
+  .qc-description {
+    @include content-font(sm);
+    color: token-value(color blue dark);
+    &:has(~ :disabled) {
+      color: token-value(color, grey, regular);
+    }
+  }
+  label {
+    @extend .qc-label
+  }
+}
+
+input,
+textarea {
+  .qc-textfield &,
+  qc-textfield & {
+    display: block;
+    width: 100%;
+    position: relative;
+    color: token-value(color text primary);
+    background-color: token-value(color background);
+    padding: rem(8);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-top: rem(4);
+    border: 1px solid token-value(color formfield border);
+
+    &::placeholder {
+      color: token-value(color grey medium);
+      font-weight: normal;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: 2px solid token-value(color formfield focus outline);
+      border: 2px solid token-value(color formfield focus border);
+      padding: rem(7);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: token-value(color grey pale);
+      border: 1px solid token-value(color, grey, regular);
+    }
+  }
+
+  [invalid] > & {
+    border-color: token-value(color, red, regular);
+    border-width: 2px;
+    padding: rem(7);
+  }
+
+}
+
+$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);
+  }
+}
+
+input,
+textarea,
+ {
+  &,
+  & + .qc-textfield-charcount {
+    @each $size, $width in $sizes {
+      [size="#{$size}"] & {
+        max-width: $width;
+      }
+    }
+  }
+}
+
+textarea {
+  .qc-textfield &,
+  qc-textfield & {
+    min-height: token-value(size textarea min-height);
+    resize: vertical;
+  }
+}
+
+.qc-textfield-charcount {
+  @include content-font(sm);
+  text-align: right;
+  margin-top: rem(4);
+  color: token-value(color blue dark);
+  &.qc-max-reached {
+    color: token-value(color, red, regular);
+    font-weight: token-value(font weight content bold);
+  }
+}

package/src/sdg/components/TextField/textFieldUtils.js

@@ -0,0 +1,19 @@
+import {Utils} from "../utils";
+
+export function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
+    if (!input) return;
+    if (!input.autocomplete) {
+        input.autocomplete = "off"
+    }
+    if (!input.id) {
+        input.id =  Utils.generateId(input.type);
+    }
+    setValue(input.value)
+    input.addEventListener(
+        'input',
+        () => {
+            setValue(input.value);
+            setInvalid(false);
+    })
+    setTextFieldRow(input.closest('.qc-formfield-row'))
+}

package/src/sdg/components/ToTop/ToTop.svelte

@@ -1,6 +1,6 @@
 <script>
    import { Utils } from "../utils";
-   import Icon from "../Icon/Icon.svelte";
+   import Icon from "../../bases/Icon/Icon.svelte";
    import {setContext} from "svelte";
 
    const lang = Utils.getPageLanguage();
@@ -15,8 +15,6 @@
    let minimumScrollHeight = 0;
    let toTopElement;
 
-   const src = `${Utils.imagesRelativePath}arrow-up-white.svg`;
-
    function handleScrollUpButton() {
       if (Utils.isTruthy(demo)) {
          return;
@@ -75,6 +73,6 @@
    tabindex={visible ? 0 : -1}
    {demo}
 >
-   <Icon type="arrow-up-white" color="background"/>
+   <Icon type="arrow-up" color="background"/>
    <span>{text}</span>
 </a>

package/src/sdg/components/ToTop/_toTop.html

@@ -0,0 +1,45 @@
+<h2 id="toTop">Haut de page</h2>
+<p>
+  Le composant <i>haut de page</i> est la flèche qui permet à l’utilisateur de revenir en haut de la
+  page. Il s'affiche quand l’utilisateur commence à défiler vers le haut.
+  Il disparaît quand l’utilisateur commence à défiler vers le bas.
+</p>
+<h4>Exemple</h4>
+<qc-doc-exemple caption="Présentation du composant retour en haut de page"
+                code-target-id="to-top-exemple"
+>
+  <qc-to-top demo="true"/>
+</qc-doc-exemple>
+<div id="to-top-exemple">
+  <qc-to-top></qc-to-top>
+</div>
+
+<h3>Documentation technique</h3>
+
+<h4>Attributs</h4>
+<div class="table-overflow">
+  <table class="qc-table qc-striped">
+    <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Valeur attendue</th>
+      <th>Valeur par défaut</th>
+      <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>text</td>
+      <td>Texte</td>
+      <td>Retour en haut / Back to top</td>
+      <td>la valeur de l’attribut "text" de l’élément.</td>
+    </tr>
+    <tr>
+      <td>demo</td>
+      <td>"true" ou "false"</td>
+      <td>false</td>
+      <td>Pour utiliser le composant en démonstration uniquement.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>

package/src/sdg/{scss/components → components/ToTop}/_toTop.scss

@@ -1,5 +1,5 @@
-@use "qc-sdg-lib" as *;
-@use "base/shadings" as *;
+@use "../../scss/qc-sdg-lib" as *;
+@use "../../bases/shadings/shadings" as *;
 
 .qc-to-top {
   &[demo="false"] {