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

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

@@ -0,0 +1,186 @@
+<h2 id="buttons">Boutons</h2>
+<h3>Exemples</h3>
+
+<qc-doc-exemple caption="Exemples des différentes variantes de boutons.">
+    <div class="qc-row">
+        <div class="qc-col-sm-12 qc-col-lg-3">
+            <div>
+                <button class="qc-button qc-primary">Principal</button>
+            </div>
+            <div>
+                <button class="qc-button qc-primary qc-button-rounded">Principal</button>
+            </div>
+            <div>
+                <button class="qc-button qc-primary" disabled>Principal</button>
+            </div>
+            <div>
+                <button class="qc-button qc-primary qc-compact">Principal</button>
+            </div>
+            <div>
+                <button class="qc-button qc-primary qc-compact qc-button-rounded">Principal</button>
+            </div>
+            <div>
+                <button class="qc-button qc-primary qc-compact" disabled>Principal</button>
+            </div>
+        </div>
+
+        <div class="qc-col-sm-12 qc-col-lg-3">
+            <div>
+                <button class="qc-button qc-secondary">Secondaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-secondary qc-button-rounded">Secondaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-secondary" disabled>Secondaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-secondary qc-compact">Secondaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-secondary qc-compact qc-button-rounded">Secondaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-secondary qc-compact" disabled>Secondaire</button>
+            </div>
+        </div>
+
+        <div class="qc-col-sm-12 qc-col-lg-3">
+            <div>
+                <button class="qc-button qc-tertiary">Tertiaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-tertiary qc-button-rounded">Tertiaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-tertiary" disabled>Tertiaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-tertiary qc-compact">Tertiaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-tertiary qc-compact qc-button-rounded">Tertiaire</button>
+            </div>
+            <div>
+                <button class="qc-button qc-tertiary qc-compact" disabled>Tertiaire</button>
+            </div>
+        </div>
+
+        <div class="qc-col-sm-12 qc-col-lg-3">
+            <div>
+                <button class="qc-button qc-danger">Avertissement</button>
+            </div>
+            <div>
+                <button class="qc-button qc-danger qc-button-rounded">Avertissement</button>
+            </div>
+            <div>
+                <button class="qc-button qc-danger" disabled>Avertissement</button>
+            </div>
+            <div>
+                <button class="qc-button qc-danger qc-compact">Avertissement</button>
+            </div>
+            <div>
+                <button class="qc-button qc-danger qc-compact qc-button-rounded">Avertissement</button>
+            </div>
+            <div>
+                <button class="qc-button qc-danger qc-compact" disabled>Avertissement</button>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <button class="qc-button qc-simple">
+            <qc-icon type="information"></qc-icon>
+            Action
+        </button>
+
+        <button class="qc-button qc-simple" disabled>
+            <qc-icon type="plus"></qc-icon>
+            Action
+        </button>
+    </div>
+    <div>
+        <button class="qc-button qc-simple qc-compact">
+            <qc-icon type="information"></qc-icon>
+            Action
+        </button>
+
+        <button class="qc-button qc-simple qc-compact" disabled>
+            <qc-icon type="plus"></qc-icon>
+            Action
+        </button>
+    </div>
+
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemples de boutons avec icône.<br/>NB: voir la section <a href='#icons'>Icônes</a> pour plus de détails concernant le composant <code>qc-icon</code>.">
+    <div>
+        <button class="qc-button qc-primary">
+            <qc-icon type="arrow-up" rotate="-90"></qc-icon>
+            Précédent
+        </button>
+
+        <button class="qc-button qc-primary">
+            Suivant
+            <qc-icon type="arrow-up" rotate="90"></qc-icon>
+        </button>
+    </div>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemples avec un lien et un bouton de soumission.">
+        <a href="javascript:void(0);"
+           class="qc-button qc-primary"
+           role="button"
+        >
+            Action
+        </a>
+        <input type="submit" value="Action" class="qc-button qc-primary" />
+</qc-doc-exemple>
+
+
+<h3>Classes CSS</h3>
+
+<div class="table-overflow">
+    <table class="qc-table qc-striped">
+        <thead>
+        <tr>
+            <th>Classe / Attribut</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td><code>qc‑button</code></td>
+            <td>Classe de base obligatoire pour tous les boutons. Définit la typographie, la taille, les marges, le padding, et le comportement responsive.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑compact</code></td>
+            <td>Variante compacte du bouton avec des dimensions réduites et un padding plus petit.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑button‑rounded</code></td>
+            <td>Ajoute un rayon de bordure pour arrondir les coins du bouton.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑primary</code></td>
+            <td>Bouton principal avec fond bleu et texte blanc.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑secondary</code></td>
+            <td>Bouton secondaire avec fond blanc et texte bleu.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑tertiary</code></td>
+            <td>Bouton tertiaire avec fond blanc et texte bleu.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑danger</code></td>
+            <td>Bouton d’avertissement avec fond rouge et texte blanc.</td>
+        </tr>
+        <tr>
+            <td><code>qc‑simple</code></td>
+            <td>Bouton sans fond ni bordure.</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,202 @@
+@use "qc-sdg-lib" as *;
+@use "sass:map";
+
+.qc-button {
+  font-family: token-value(font family, content);
+  font-size: token-value(font size, md);
+  font-weight: token-value(font weight, bold);
+  line-height: token-value(line height, md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: rem(8);
+  box-sizing: border-box;
+  min-width: rem(112);
+  max-width: rem(360);
+  min-height: rem(56);
+  padding: rem(16) rem(24);
+  vertical-align: middle;
+  border: 2px solid transparent;
+  cursor: pointer;
+  margin-right: rem(32);
+  margin-bottom: token-value(spacer, md);
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.qc-compact {
+    font-weight: token-value(font weight, semi-bold);
+    min-width: rem(80);
+    min-height: rem(40);
+    padding: rem(8) rem(16);
+    border-width: 1px;
+    margin-right: token-value(spacer, md);
+    margin-bottom: token-value(spacer, sm);
+  }
+
+  &.qc-button-rounded {
+    border-radius: rem(4);
+  }
+
+  &.qc-primary {
+    color: token-value(color white);
+    background-color: token-value(color blue piv);
+    border-color: token-value(color blue piv);
+    box-shadow: 0 1px 4px token-value(color box_shadow);
+
+    &:hover:not(:disabled),
+    &.qc-hover {
+      background-color: token-value(color blue, regular);
+      border-color: token-value(color blue, regular);
+    }
+
+    &:focus:not(:disabled),
+    &.qc-focus {
+      background-color: token-value(color blue, regular);
+      border-color: token-value(color blue, dark);
+      box-shadow:
+              0 2px 8px token-value(color box_shadow),
+              0 0 0 2px token-value(color blue, light);
+    }
+
+    &:active:not(:disabled),
+    &.qc-active {
+      background-color: token-value(color blue, regular_light);
+      border-color: token-value(color blue, regular_light);
+    }
+  }
+
+  &.qc-secondary {
+    color: token-value(color blue, piv);
+    background-color: token-value(color white);
+    border-color: token-value(color blue, piv);
+
+    &:hover:not(:disabled),
+    &: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);
+    }
+
+    &:focus:not(:disabled),
+    &.qc-focus {
+      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), blue), piv), 0.08);
+    }
+  }
+
+  &.qc-tertiary {
+    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);
+      text-decoration: underline;
+    }
+
+    &:focus:not(:disabled),
+    &.qc-focus {
+      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 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);
+    }
+  }
+
+  &.qc-danger {
+    color: token-value(color white);
+    background-color: token-value(color red regular);
+    border-color: token-value(color white);
+
+    &:hover:not(:disabled),
+    &.qc-hover {
+      background-color: token-value(color red medium);
+    }
+
+    &:focus:not(:disabled),
+    &.qc-focus {
+      background-color: token-value(color red medium);
+      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: token-value(color red regular_light);
+    }
+  }
+
+  &:disabled,
+  &.qc-disabled {
+    background-color: token-value(color grey, light);
+    border-color: token-value(color grey, light);
+    color: token-value(color white);
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 1;
+  }
+
+  .qc-icon {
+    display: inline-block;
+    width: rem(16);
+    height: rem(16);
+    background-color: currentColor;
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    flex-shrink: 0;
+
+    &.qc-custom-icon {
+      mask:var(--img-src);
+      mask-size: 100% 100%;
+    }
+  }
+
+  &.qc-simple {
+    color: token-value(color blue, piv);
+    background-color: transparent;
+    border-color: transparent;
+    padding: 0;
+    min-width: unset;
+    min-height: unset;
+
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+      text-decoration: underline;
+    }
+
+    &:focus:not(:disabled) {
+      border-color: token-value(color blue, light);
+      box-shadow: 0 0 0 2px token-value(color blue, light);
+    }
+
+    &.qc-compact {
+      font-size: token-value(font size, sm);
+      line-height: token-value(line height, sm);
+    }
+
+    &:disabled,
+    &.qc-disabled {
+      color: token-value(color, grey regular);
+      cursor: not-allowed;
+      box-shadow: none;
+      opacity: 1;
+    }
+  }
+
+  @at-root a#{&}{
+    text-decoration: none;
+  }
+}

package/src/sdg/components/CharCount/_charCount.html

@@ -0,0 +1,7 @@
+<h2>Compteur de caractères</h2>
+<div>
+  <qc-doc-exemple>
+    <textarea id="mon-textarea" rows="5" cols="50"></textarea>
+    <qc-char-count target-id="mon-textarea"></qc-char-count>
+  </qc-doc-exemple>
+</div>

package/src/sdg/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,77 @@
+<script>
+    import { Utils } from "../utils";
+    import FormError from "../FormError/FormError.svelte";
+    import {getContext, onMount} from "svelte";
+    import {updateInput, onChange} from "./updateInput.svelte";
+
+    const lang = Utils.getPageLanguage(),
+        qcCheckoxContext = getContext("qc-checkbox");
+
+    let {
+        id,
+        name,
+        value,
+        description,
+        required = $bindable(false),
+        disabled,
+        compact = false,
+        checked = $bindable(false),
+        invalid = $bindable(false),
+        invalidText,
+        children,
+        labelElement,
+        requiredSpan = $bindable(),
+        input,
+        ...rest
+    } = $props();
+
+    let label = $state(rest.label),
+        rootElement = $state()
+    ;
+
+    onMount(() => {
+        if (qcCheckoxContext) return;
+        labelElement = rootElement?.querySelector('label')
+        input = rootElement?.querySelector('input')
+        onChange(input, _invalid => invalid = _invalid)
+    })
+
+    $effect(() => {
+        if (labelElement) {
+            label = labelElement.querySelector('span')?.textContent;
+        }
+    })
+
+    $effect(_ => updateInput(input, required, invalid, compact, false, false))
+
+    $effect(() => {
+        if (!required) return;
+        if (!labelElement) return;
+        labelElement.appendChild(requiredSpan);
+    })
+</script>
+
+{#snippet requiredSpanSnippet()}
+    {#if required}
+    <span class="qc-required"
+          aria-hidden="true"
+          bind:this={requiredSpan}
+    >*</span>
+    {/if}
+{/snippet}
+
+
+    <div class={[
+        "qc-checkbox-single",
+        invalid && "qc-checkbox-single-invalid"
+    ]}
+         {compact}
+         bind:this={rootElement}
+    >
+        {@render requiredSpanSnippet()}
+        {@render children?.()}
+        <FormError {invalid}
+                   {invalidText}
+                   {label}
+        />
+    </div>

package/src/sdg/components/Checkbox/CheckboxWC.svelte

@@ -0,0 +1,49 @@
+<svelte:options customElement={{
+    tag: 'qc-checkbox',
+    props: {
+        required: { attribute: 'required', type: 'Boolean' },
+        compact: { attribute: 'compact', type: 'Boolean' },
+        invalid: { attribute: 'invalid', type: 'Boolean' },
+        invalidText: { attribute: 'invalid-text', type: 'String' }
+    }
+}} />
+
+<script>
+    import Checkbox from "./Checkbox.svelte";
+    import {onMount, setContext} from "svelte";
+    import {Utils} from "../utils";
+    import {onChange} from "./updateInput.svelte";
+
+    setContext('qc-checkbox', true);
+
+    let {
+        required = $bindable(false),
+        compact,
+        invalid = $bindable(false),
+        invalidText
+    } = $props();
+    let requiredSpan = $state(null),
+        labelElement = $state(),
+        input = $state()
+    ;
+
+    onMount(() => {
+        labelElement = $host()
+            .querySelector('label')
+        input = $host().querySelector('input')
+        onChange(input, _invalid => invalid = _invalid)
+    })
+
+</script>
+<Checkbox
+    bind:invalid
+    {compact}
+    {required}
+    {invalidText}
+    {labelElement}
+    {input}
+    bind:requiredSpan
+    >
+    <slot />
+</Checkbox>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Checkbox/_checkbox.html

@@ -0,0 +1,86 @@
+
+
+<h4 id="checkbox">Case à cocher unique (qc-checkbox)</h4>
+
+<qc-doc-exemple caption="Exemple d’une case à cocher obligatoire.">
+  <form id="exemple-tos-form">
+    <qc-checkbox required >
+      <label>
+        <input type="checkbox"
+               name="consentement"
+               value="oui"
+               id="consentement"
+        />
+        <span >J’accepte les conditions d’utilisation</span>
+      </label>
+    </qc-checkbox>
+
+    <button class="qc-button qc-primary qc-compact"
+            type="submit">
+      S'inscrire
+    </button>
+  </form>
+
+  <script>
+    const tosForm = document.getElementById("exemple-tos-form");
+    const consentement = document.getElementById("consentement");
+    tosForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+      if(consentement.checked) {
+        const formData = new FormData(event.target);
+        let alertParts = ["Formulaire soumis avec les données suivantes :"];
+        for (const [key, value] of formData.entries()) {
+          alertParts.push(`${key} : ${value}`);
+        }
+        alert(alertParts.join("\n"));
+      } else {
+        consentement.closest('qc-checkbox').invalid = true;
+      }
+    })
+  </script>
+</qc-doc-exemple>
+
+
+<h4>Attributs de qc-checkbox</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>compact</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Affiche la case à cocher au format compact</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>na</td>
+      <td>na</td>
+      <td>Ajoute un astérisque pour indiquer que la sélection est obligatoire.</td>
+    </tr>
+    <tr>
+      <td>invalid</td>
+      <td>na</td>
+      <td>na</td>
+      <td>
+          Affiche le message d’erreur (voir l’exemple de case à cocher obligatoire).
+        <br/>NB : `invalid` prend automatiquement la valeur `false` dès que la case est cochée.
+      </td>
+    </tr>
+    <tr>
+      <td>invalid-text</td>
+      <td>Texte</td>
+      <td>"Le champ {nom du champ} est obligatoire" ou "{field name} field is required"</td>
+      <td>Message d’erreur à afficher lorsque la case est invalide.</td>
+    </tr>
+    </tbody>
+  </table>
+</div>
+

package/src/sdg/components/Checkbox/_checkbox.scss

@@ -0,0 +1,70 @@
+@use "qc-sdg-lib" as *;
+@use "../Fieldset/fieldset" as *;
+@use "../../bases/Icon/icons" as *;
+
+
+input[type="checkbox"].qc-choicefield {
+  &:checked {
+
+    background-color: token-value(color blue regular)!important;
+
+    &::before {
+      width: rem(12);
+      height: rem(7);
+      border: rem(3) solid token-value(color, blue, regular);
+      border-top: 0;
+      border-right: 0;
+      transform: rotate(-45deg);
+      top: rem(2);
+    }
+
+    &::after {
+      @extend .icon-checkmark;
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      background-color: token-value(color, white);
+      width: token-value(spacer, md);
+      height: rem(18);
+
+    }
+  }
+  &.qc-compact {
+    &:checked {
+      &::before {
+        width: rem(8);
+        height: rem(5);
+        border: rem(2) solid token-value(color, blue, regular);
+        border-top: 0;
+        border-right: 0;
+        transform: rotate(-45deg);
+        top: rem(1);
+      }
+
+      &::after {
+        width: token-value(spacer, sm);
+        height: rem(12);
+      }
+    }
+  }
+}
+
+.qc-checkbox-single {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: token-value(spacer content-block mb);
+  width: fit-content;
+
+  label {
+    flex-grow: 0;
+  }
+
+  &.qc-checkbox-single-invalid {
+    @extend .qc-fieldset-invalid;
+  }
+}