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

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

@@ -1,31 +1,53 @@
 <script>
     import IconButton from "../IconButton/IconButton.svelte";
     import {Utils} from "../utils";
+    import Icon from "../../bases/Icon/Icon.svelte";
 
     const lang = Utils.getPageLanguage();
 
 
     let {
         value = $bindable(''),
-        ariaLabel = lang === "fr" ? "Rechercher…" : "Search_",
+        ariaLabel = lang === "fr" ? "Rechercher..." : "Search...",
         clearAriaLabel = lang === "fr" ? "Effacer le texte" : "Clear text",
+        leftIcon = false,
+        id = `qc-search-input-${Math.random().toString(36).slice(2, 11)}`,
         ...rest
     } = $props();
 
+    leftIcon = leftIcon === true || leftIcon === "true" || leftIcon === "";
+    const isDisabled = rest.disabled === true || rest.disabled === "true" || rest.disabled === "";
+
     let searchInput;
+
+    export function focus() {
+        searchInput?.focus();
+    }
 </script>
 
-<div class="qc-search-input">
+<div class={[
+            "qc-search-input",
+            leftIcon && "qc-search-left-icon",
+            leftIcon && isDisabled && "qc-search-left-icon-disabled"
+        ]} >
+    {#if leftIcon}
+        <Icon type="search-thin"
+              iconColor="grey-regular"
+              class={`qc-icon${isDisabled ? ' is-disabled' : ''}`}
+        />
+    {/if}
     <input  bind:this={searchInput}
-            bind:value={value}
+            bind:value
             type="search"
             autocomplete="off"
             aria-label={ariaLabel}
+            class={isDisabled ? "qc-disabled" : ""}
+            id={id}
             {...rest}
     />
     {#if value}
     <IconButton type="button"
-                icon="clear-input"
+                icon="xclose"
                 iconColor="blue-piv"
                 iconSize="sm"
                 aria-label={clearAriaLabel}

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

@@ -2,8 +2,10 @@
     tag: 'qc-search-input',
     shadow: 'none',
     props: {
+        id: {attribute: 'id'},
         ariaLabel: {attribute:'aria-label'},
-        clearAriaLabel: {attribute: 'clear-aria-label'}
+        clearAriaLabel: {attribute: 'clear-aria-label'},
+        leftIcon: {attribute: 'left-icon'}
     }
 }}" />
 

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

@@ -0,0 +1,85 @@
+<h2 id="search-input">Champ de recherche</h2>
+<h3>Exemples</h3>
+
+<qc-doc-exemple caption="Exemples de champs de recherche">
+    <qc-search-input
+            placeholder="Rechercher un article"
+            aria-label="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            value="Climat"
+            placeholder="Rechercher un sujet"
+            aria-label="Rechercher un sujet"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            placeholder="Recherche désactivée"
+            aria-label="Recherche désactivée"
+            disabled
+            left-icon
+            clear-aria-label="Effacer le texte"
+    ></qc-search-input>
+</qc-doc-exemple>
+
+<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>value</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td>Valeur inscrite par défaut dans le champ de recherche.</td>
+        </tr>
+        <tr>
+            <td>placeholder</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td>Texte indicatif affiché lorsque le champ est vide.</td>
+        </tr>
+        <tr>
+            <td>aria-label</td>
+            <td>Texte</td>
+            <td>"Rechercher..." ou "Search..."</td>
+            <td>Libellé accessible pour les lecteurs d'écrans.</td>
+        </tr>
+        <tr>
+            <td>clear-aria-label</td>
+            <td>Texte</td>
+            <td>"Effacer le texte" ou "Clear text"</td>
+            <td>Libellé accessible du bouton pour effacer le champ.</td>
+        </tr>
+        <tr>
+            <td>disabled</td>
+            <td>na</td>
+            <td>na</td>
+            <td>Désactive le champ.</td>
+        </tr>
+        <tr>
+            <td>name</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

package/src/sdg/{scss/components → components/SearchInput}/_searchInput.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 
 qc-search-input {
   display: block;
@@ -10,7 +10,7 @@ qc-search-input {
 %qc-search-wrapper {
   @extend %qc-formcontrol-box;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   &::before {
     border: 1px solid token-value(color formfield border);
   }
@@ -24,6 +24,12 @@ qc-search-input {
   }
 }
 
+%qc-search-disabled {
+  background-color: token-value(color grey pale);
+  border: 1px solid token-value(color, grey, regular);
+  cursor: not-allowed;
+}
+
 .qc-search-input {
   @extend %qc-search-wrapper;
   input[type=search] {
@@ -44,14 +50,23 @@ qc-search-input {
       display: none;
     }
     &::placeholder {
+      width: 100%;
       color: token-value(color grey medium);
       font-weight: normal;
+      overflow: hidden;
+    }
+    &:placeholder-shown {
+      text-overflow: ellipsis;
     }
     &:focus,&:focus-visible {
       outline: none;
     }
   }
 
+  &.qc-search-left-icon {
+    padding-left: token-value(spacer, xs);
+  }
+
   button {
     @extend %qc-formcontrol-box;
     &::before {
@@ -59,6 +74,16 @@ qc-search-input {
     }
     cursor: pointer;
   }
+
+  &.qc-search-left-icon-disabled {
+    &::before {
+      @extend %qc-search-disabled;
+    }
+
+    qc-icon {
+      @extend %qc-search-disabled;
+    }
+  }
 }
 
 

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

@@ -0,0 +1,143 @@
+<svelte:options customElement={{
+  tag: 'qc-textfield-demo',
+  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 {Utils} from "../../utils";
+import Checkbox from "../../Checkbox/Checkbox.svelte";
+import DropdownList from "../../DropdownList/DropdownList.svelte";
+import ChoiceGroup from "../../ChoiceGroup/ChoiceGroup.svelte";
+let {
+    invalid,
+    invalidText,
+    label = "Démo",
+    description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    required,
+    maxlength = 10,
+    value,
+    placeholder,
+    size,
+    maxlengthReached = $bindable(false),
+    invalidAtSubmit = $bindable(false),
+} = $props();
+let inputTag = $state("input"),
+    inputType = $state("text"),
+    multiligne = $state(false)
+;
+$inspect(multiligne, inputTag, inputType)
+$effect(() => {
+    console.log(multiligne, inputTag, inputType)
+    if (multiligne) {
+        inputTag = "textarea";
+        inputType = undefined;
+    } else {
+        inputTag = "input";
+        inputType = "text";
+    }
+})
+</script>
+<TextField
+        {label}
+        {invalid}
+        {invalidText}
+        {size}
+        {required}
+        description={multiligne ? description : undefined}
+        maxlength={multiligne ? maxlength : undefined}
+    >
+    <svelte:element
+            this={inputTag}
+            {inputType}
+            {value}
+            name="textfield-demo"
+            {placeholder}
+    >
+
+    </svelte:element>
+</TextField>
+<div class="attributes">
+    <Checkbox compact>
+        <label>
+            <input type="checkbox"
+                   bind:checked={multiligne}>
+            Multiligne
+        </label>
+    </Checkbox>
+    <ChoiceGroup legend="Size" selectionButton inline>
+        {#each ['xs','sm','md','lg','xl'] as _size}
+            <label>
+                <input type="radio"
+                       name="size"
+                       bind:group={size}
+                       value="{_size}"
+                />
+                {_size}
+            </label>
+        {/each}
+    </ChoiceGroup>
+    <Checkbox compact>
+        <label>
+            <input type="checkbox"
+                   bind:checked={required}>
+            Required
+        </label>
+    </Checkbox>
+    <Checkbox compact>
+        <label>
+            <input type="checkbox"
+                   bind:checked={invalid}>
+            Invalid
+        </label>
+    </Checkbox>
+    <TextField label="placeholder">
+        <input type="text"
+               bind:value={placeholder} />
+    </TextField>
+    <TextField label="Libellé du champ">
+        <input type="text"
+               bind:value={label}
+        />
+    </TextField>
+    <TextField label="Message d'erreur">
+        <input type="text"
+               bind:value={invalidText}
+        />
+    </TextField>
+    {#if multiligne}
+        <TextField label="Description"
+                   size="lg"
+            >
+            <input type="text"
+                   bind:value={description}
+            />
+        </TextField>
+        <TextField label="Maxlength"
+                   size="xs"
+            >
+            <input type="number"
+                   bind:value={maxlength} />
+        </TextField>
+    {/if}
+</div>
+<style>
+    .attributes {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 0 24px;
+        max-height: 352px;
+    }
+</style>
+
+<link rel='stylesheet' href='{Utils.cssPath.replace("qc-doc","qc")}' >
+

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

@@ -0,0 +1,129 @@
+<svelte:options customElement={{
+  tag: 'qc-textfield-embedded-test'
+}}/>
+<script>
+    import TextField from "../TextField.svelte";
+    import {Utils} from '../../utils.js';
+</script>
+<TextField label="Très petit"
+           size="xs">
+    <input type="text"
+           name="text-xs"
+           placeholder="25"
+    />
+</TextField>
+
+<TextField size="sm">
+    <label for="text-sm">Petit</label>
+    <input type="text"
+           id="text-sm"
+           name="text-sm"
+           placeholder="25"
+    />
+</TextField>
+
+<TextField label="Moyen"
+           size="md"
+           invalid
+>
+    <input type="text"
+           name="text-md"
+           placeholder="Long placeholder lorem ipsum dolor sit amet"
+    />
+</TextField>
+
+<TextField name="text-lg"
+           label="Large"
+           size="lg"
+           placeholder="Long placeholder lorem ipsum dolor sit amet"
+           required>
+    <input type="text"
+           name="text-lg"
+    />
+</TextField>
+
+<TextField
+        label="Très large"
+        size="xl"
+
+>
+    <input type="text"
+           placeholder="Long placeholder lorem ipsum dolor sit amet"
+           name="text-xl"
+           disabled
+    />
+</TextField>
+
+<div class="qc-formfield-row">
+    <TextField
+            label="Combiné 1"
+            size="sm"
+    >
+        <input type="text"
+               placeholder="Long placeholder lorem ipsum dolor sit amet"
+               name="combo-1"
+        />
+    </TextField>
+
+    <TextField
+            label="Combiné 2"
+            size="xs"
+    >
+        <input type="text"
+               name="combo-2"
+        />
+    </TextField>
+</div>
+<div class="qc-formfield-row">
+    <TextField
+            label="Combiné 1 invalide"
+            size="sm"
+            invalid
+    >
+        <input type="text"
+               name="invalid-combo-1"
+        />
+    </TextField>
+
+    <TextField
+            label="Combiné 2"
+            size="xs"
+            invalid
+    >
+        <input type="text"
+               name="invalid-combo-2"
+        />
+    </TextField>
+
+</div>
+
+<TextField
+        label="Commentaires"
+        size="lg"
+        description="Vous pouvez entrer des commentaires dans la zone de texte ci-dessous."
+>
+    <textarea name="zone-lg" id="zone-lg"></textarea>
+</TextField>
+
+<TextField
+        label="Suggestions"
+        description="Vous pouvez entrer des suggestions dans la zone de texte ci-dessous."
+        size="xl"
+        maxlength="10"
+        required
+>
+    <textarea name="zone-xl"></textarea>
+</TextField>
+
+<TextField label="Suggestions"
+           description="Vous pouvez entrer des suggestions dans la zone de texte ci-dessous."
+           size="xl"
+           maxlength="10"
+           required
+           invalid
+>
+    <textarea name="zone-xl-invalid"
+              id="zone-xl-invalid"
+    >Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea>
+</TextField>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/TextField/Test/textFieldEmbeddedTest.html

@@ -0,0 +1 @@
+<qc-textfield-embedded-test></qc-textfield-embedded-test>

package/src/sdg/components/TextField/Test/textFieldTest.html

@@ -0,0 +1,121 @@
+<qc-textfield label="Très petit"
+              size="xs">
+    <input type="text"
+           name="text-xs"
+           placeholder="25"
+    />
+</qc-textfield>
+
+<qc-textfield size="sm"
+>
+    <label for="text-sm">Petit</label>
+    <input type="text"
+           id="text-sm"
+           name="text-sm"
+           placeholder="25"
+    />
+</qc-textfield>
+
+<qc-textfield label="Moyen"
+              size="md"
+              invalid
+>
+    <input type="text"
+           name="text-md"
+           placeholder="Long placeholder lorem ipsum dolor sit amet"
+    />
+</qc-textfield>
+
+<qc-textfield name="text-lg"
+              label="Large"
+              size="lg"
+              placeholder="Long placeholder lorem ipsum dolor sit amet"
+              required>
+    <input type="text"
+           name="text-lg"
+    />
+</qc-textfield>
+
+<qc-textfield
+        label="Très large"
+        size="xl"
+
+>
+    <input type="text"
+           placeholder="Long placeholder lorem ipsum dolor sit amet"
+           name="text-xl"
+           disabled
+    />
+</qc-textfield>
+
+<div class="qc-formfield-row">
+    <qc-textfield
+            label="Combiné 1"
+            size="sm"
+    >
+        <input type="text"
+               placeholder="Long placeholder lorem ipsum dolor sit amet"
+               name="combo-1"
+        />
+    </qc-textfield>
+
+    <qc-textfield
+            label="Combiné 2"
+            size="xs"
+    >
+        <input type="text"
+               name="combo-2"
+        />
+    </qc-textfield>
+</div>
+<div class="qc-formfield-row">
+    <qc-textfield
+            label="Combiné 1 invalide"
+            size="sm"
+            invalid
+    >
+        <input type="text"
+               name="invalid-combo-1"
+        />
+    </qc-textfield>
+
+    <qc-textfield
+            label="Combiné 2"
+            size="xs"
+            invalid
+    >
+        <input type="text"
+               name="invalid-combo-2"
+        />
+    </qc-textfield>
+
+</div>
+
+<qc-textfield label="Commentaires"
+              size="lg"
+              description="Vous pouvez entrer des commentaires dans la zone de texte ci-dessous."
+>
+    <textarea name="zone-lg" id="zone-lg"></textarea>
+</qc-textfield>
+
+<qc-textfield
+        label="Suggestions"
+        description="Vous pouvez entrer des suggestions dans la zone de texte ci-dessous."
+        size="xl"
+        max-length="10"
+        required
+>
+    <textarea name="zone-xl"></textarea>
+</qc-textfield>
+
+<qc-textfield label="Suggestions"
+              description="Vous pouvez entrer des suggestions dans la zone de texte ci-dessous."
+              size="xl"
+              max-length="10"
+              required
+              invalid
+>
+    <textarea name="zone-xl-invalid"
+              id="zone-xl-invalid"
+    >Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea>
+</qc-textfield>