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

package/src/sdg/components/Alert/Alert.svelte

@@ -1,6 +1,6 @@
 <script>
     import {Utils} from "../utils";
-    import Icon from "../Icon/Icon.svelte";
+    import Icon from "../../bases/Icon/Icon.svelte";
     import IconButton from "../IconButton/IconButton.svelte";
 
     let {
@@ -55,7 +55,7 @@
                     <IconButton aria-label={closeLabel}
                                 onclick={hideAlert}
                                 size="nm"
-                                icon="clear-input"
+                                icon="xclose"
                                 iconSize="sm"
                                 iconColor="text-primary"
                     />
@@ -64,6 +64,3 @@
         </div>
     </div>
 {/if}
-
-<link rel='stylesheet'
-      href='{Utils.cssPath}'>

package/src/sdg/components/Alert/AlertWC.svelte

@@ -11,8 +11,8 @@
 }}"/>
 
 <script>
-
     import Alert from "./Alert.svelte";
+    import {Utils} from "../utils";
 
     const props = $props();
 
@@ -21,4 +21,5 @@
  <Alert
     {...props}
     slotContent = {`<slot />`}
- />
+ />
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Alert/_alert.html

@@ -0,0 +1,110 @@
+<h2 id="alert">Alerte générale (qc-alert)</h2>
+<h3>Exemples</h3>
+<h4>Alerte jaune</h4>
+<p>
+  <a href="javascript:;"
+     id="show-qc-alert"
+     hidden
+  >
+    Réafficher l’alerte
+  </a>
+</p>
+
+<qc-doc-exemple id="alert-warning"
+                caption="Exemple d’alerte jaune">
+  <qc-alert id="alerte-masquable"
+            type="warning"
+            maskable="true"
+            content="Alerte jaune d’importance élevée"
+  >
+  </qc-alert>
+</qc-doc-exemple>
+<!--            <qc-code target-id="alert-warning"></qc-code>-->
+
+<h4>Alerte bleue</h4>
+<qc-doc-exemple id="alert-general"
+                caption="Exemple d’alerte générale">
+  <qc-alert type="general"
+            maskable="false">
+    <p>Alerte bleue d’importance modérée <a href="javascript:;">avec un lien textuel</a></p>
+  </qc-alert>
+</qc-doc-exemple>
+
+<!--            <qc-code target-id="alert-general"></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>
+    <tr>
+      <td>type</td>
+      <td>"general" ou "warning"</td>
+      <td>"general"</td>
+      <td>Type de l’alerte : s'il s'agit d’une alerte bleue ou jaune</td>
+    </tr>
+    <tr>
+      <td>maskable</td>
+      <td>"true" ou "false"</td>
+      <td>"true"</td>
+      <td>Afficher le bouton de fermeture de l’alerte</td>
+    </tr>
+    <tr>
+      <td>content</td>
+      <td>Texte</td>
+      <td>Chaine vide</td>
+      <td>Afficher le contenu de l’alerte</td>
+    </tr>
+    <tr>
+      <td>hide</td>
+      <td>"true" ou "false"</td>
+      <td>"false"</td>
+      <td>Masque ou affiche l’alerte</td>
+    </tr>
+    <tr>
+      <td>full-width</td>
+      <td>"true" ou "false"</td>
+      <td>"false"</td>
+      <td>Affiche le contenu de l’alerte dans un conteneur pleine-largeur (classe css
+        qc-container-fluid)
+      </td>
+    </tr>
+  </table>
+</div>
+
+<h4>Événement JS</h4>
+
+<p>Un événement JS <code class="qc-bg-color-grey-pale">qc.alert.hide</code> est émis à la fermeture de
+  l’alerte</p>
+<script id="qc-alert-event-exemple">
+  /* Fermer l’alerte jaune pour voir un message dans la console de votre navigateur */
+  document.addEventListener(
+          'qc.alert.hide',
+          (e) => {
+            console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
+          }
+  )
+</script>
+<qc-code target-id="qc-alert-event-exemple"
+         language="javascript"></qc-code>
+
+<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 caption="Présentation des zone d’ajout de contenu"
+                hide-code
+>
+  <qc-alert id="qc-alert-slots">
+    <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
+      Contenu par défaut
+    </div>
+  </qc-alert>
+</qc-doc-exemple>

package/src/sdg/{scss/components → components/Alert}/_alert.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 
 .qc-general-alert {
   padding: token-value(spacer, md) 0;

package/src/sdg/components/Button/Button.svelte

@@ -0,0 +1,50 @@
+<script>
+    import Icon from "../../bases/Icon/Icon.svelte";
+
+    let {
+        variant = "primary",
+        disabled = false,
+        compact = false,
+        rounded = false,
+        label = "",
+        icon = "",
+        iconPosition = "left",
+        iconSrc = "",
+        ...rest
+    } = $props();
+
+    let className = $state();
+
+    $effect(() => {
+        className = [
+            "qc-button",
+            `qc-${variant}`,
+            compact && "qc-compact",
+            rounded && "qc-button-rounded"
+        ].filter(Boolean).join(" ");
+    });
+</script>
+
+<button
+        class={className}
+        disabled={disabled}
+        {...rest}
+>
+    {#if iconPosition === "left"}
+        {#if iconSrc}
+            <Icon src={iconSrc} />
+        {:else if icon}
+            <Icon type={icon} />
+        {/if}
+    {/if}
+
+    {label}
+
+    {#if icon && iconPosition === "right"}
+        {#if iconSrc}
+            <Icon src={iconSrc} />
+        {:else if icon}
+            <Icon type={icon} />
+        {/if}
+    {/if}
+</button>

package/src/sdg/components/Button/ButtonWC.svelte

@@ -0,0 +1,36 @@
+<svelte:options customElement={{
+  tag: 'qc-button',
+  shadow: 'none',
+  props: {
+    variant: { attribute: 'variant', type: 'String' },
+    disabled: { attribute: 'disabled', type: 'Boolean' },
+    compact: { attribute: 'compact', type: 'Boolean' },
+    rounded: { attribute: 'rounded', type: 'Boolean' },
+    label: { attribute: 'label', type: 'String' },
+    icon: { attribute: 'icon', type: 'String' },
+    iconPosition: { attribute: 'icon-position', type: 'String' },
+    iconSrc: { attribute: 'icon-src', type: 'String' }
+  }
+}} />
+
+<script>
+    import Button from './Button.svelte';
+
+    let {
+        variant = "primary",
+        disabled = false,
+        compact = false,
+        rounded = false,
+        label = "",
+        ...rest
+    } = $props();
+</script>
+
+<Button
+        {variant}
+        {disabled}
+        {compact}
+        {rounded}
+        {label}
+        {...rest}
+/>

package/src/sdg/components/Button/Test/buttonTest.html

@@ -0,0 +1,349 @@
+<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-hover">Principal hover</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-active">Principal active</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-focus">Principal focus</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-disabled">Principal désactivé</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-hover">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-active">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-focus">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-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-hover">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-active">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-focus">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-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-hover">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-active">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-focus">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-disabled">Avertissement</button>
+        </div>
+    </div>
+</div>
+
+<br>
+<br>
+
+<div class="qc-row">
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-primary qc-button-rounded">Principal</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-hover qc-button-rounded">Principal hover</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-active qc-button-rounded">Principal active</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-focus qc-button-rounded">Principal focus</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-disabled qc-button-rounded">Principal désactivé</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-secondary qc-button-rounded">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-hover qc-button-rounded">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-active qc-button-rounded">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-focus qc-button-rounded">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-disabled qc-button-rounded">Secondaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-tertiary qc-button-rounded">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-hover qc-button-rounded">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-active qc-button-rounded">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-focus qc-button-rounded">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-disabled qc-button-rounded">Tertiaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-danger qc-button-rounded">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-hover qc-button-rounded">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-active qc-button-rounded">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-focus qc-button-rounded">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-disabled qc-button-rounded">Avertissement</button>
+        </div>
+    </div>
+</div>
+
+<br>
+<br>
+
+<div class="qc-row">
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-primary qc-compact">Principal</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-hover qc-compact">Principal hover</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-active qc-compact">Principal active</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-focus qc-compact">Principal focus</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-disabled qc-compact">Principal désactivé</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-secondary qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-hover qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-active qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-focus qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-disabled qc-compact">Secondaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-tertiary qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-hover qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-active qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-focus qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-disabled qc-compact">Tertiaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-danger qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-hover qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-active qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-focus qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-disabled qc-compact">Avertissement</button>
+        </div>
+    </div>
+</div>
+
+<br>
+<br>
+
+<div class="qc-row">
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-primary qc-button-rounded qc-compact">Principal</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-hover qc-button-rounded qc-compact">Principal hover</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-active qc-button-rounded qc-compact">Principal active</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-focus qc-button-rounded qc-compact">Principal focus</button>
+        </div>
+        <div>
+            <button class="qc-button qc-primary qc-disabled qc-button-rounded qc-compact">Principal désactivé</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-secondary qc-button-rounded qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-hover qc-button-rounded qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-active qc-button-rounded qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-focus qc-button-rounded qc-compact">Secondaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-secondary qc-disabled qc-button-rounded qc-compact">Secondaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-tertiary qc-button-rounded qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-hover qc-button-rounded qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-active qc-button-rounded qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-focus qc-button-rounded qc-compact">Tertiaire</button>
+        </div>
+        <div>
+            <button class="qc-button qc-tertiary qc-disabled qc-button-rounded qc-compact">Tertiaire</button>
+        </div>
+    </div>
+
+    <div class="qc-col-sm-12 qc-col-lg-3">
+        <div>
+            <button class="qc-button qc-danger qc-button-rounded qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-hover qc-button-rounded qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-active qc-button-rounded qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-focus qc-button-rounded qc-compact">Avertissement</button>
+        </div>
+        <div>
+            <button class="qc-button qc-danger qc-disabled qc-button-rounded qc-compact">Avertissement</button>
+        </div>
+    </div>
+</div>
+
+<br>
+<br>
+
+<div>
+    <button class="qc-button qc-primary">
+        <qc-icon type="plus"></qc-icon>
+        Ajouter
+    </button>
+
+    <button class="qc-button qc-primary">
+        Information
+        <qc-icon type="information"></qc-icon>
+    </button>
+</div>
+
+<button class="qc-button qc-primary">
+    <qc-icon src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOTczLjFweCIgaGVpZ2h0PSI5NzMuMXB4IiB2aWV3Qm94PSIwIDAgOTczLjEgOTczLjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDk3My4xIDk3My4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKCT4KPGc+Cgk8cGF0aCBkPSJNNTAyLjI5LDc4OC4xOTloLTQ3Yy0zMy4xLDAtNjAsMjYuOS02MCw2MHY2NC45YzAsMzMuMSwyNi45LDYwLDYwLDYwaDQ3YzMzLjEwMSwwLDYwLTI2LjksNjAtNjB2LTY0LjkKCQlDNTYyLjI5LDgxNSw1MzUuMzkxLDc4OC4xOTksNTAyLjI5LDc4OC4xOTl6IiBmaWxsPSIjZmZmIi8+Cgk8cGF0aCBkPSJNMTcwLjg5LDI4NS44bDg2LjcsMTAuOGMyNy41LDMuNCw1My42LTEyLjQsNjMuNS0zOC4zYzEyLjUtMzIuNywyOS45LTU4LjUsNTIuMi03Ny4zYzMxLjYwMS0yNi42LDcwLjktNDAsMTE3LjktNDAKCQljNDguNywwLDg3LjUsMTIuOCwxMTYuMywzOC4zYzI4LjgsMjUuNiw0My4xLDU2LjIsNDMuMSw5Mi4xYzAsMjUuOC04LjEsNDkuNC0yNC4zLDcwLjhjLTEwLjUsMTMuNi00Mi44LDQyLjItOTYuNyw4NS45CgkJYy01NCw0My43LTg5Ljg5OSw4My4wOTktMTA3Ljg5OSwxMTguMDk5Yy0xOC40LDM1LjgwMS0yNC44LDc1LjUtMjYuNCwxMTUuMzAxYy0xLjM5OSwzNC4xLDI1LjgsNjIuNSw2MCw2Mi41aDQ5CgkJYzMxLjIsMCw1Ny0yMy45LDU5LjgtNTQuOWMyLTIyLjI5OSw1LjctMzkuMTk5LDExLjMwMS01MC42OTljOS4zOTktMTkuNzAxLDMzLjY5OS00NS43MDEsNzIuNjk5LTc4LjEKCQlDNzIzLjU5LDQ3Ny44LDc3Mi43OSw0MjguNCw3OTUuODkxLDM5MmMyMy0zNi4zLDM0LjYtNzQuOCwzNC42LTExNS41YzAtNzMuNS0zMS4zLTEzOC05NC0xOTMuNGMtNjIuNi01NS40LTE0Ny04My4xLTI1My04My4xCgkJYy0xMDAuOCwwLTE4Mi4xLDI3LjMtMjQ0LjEsODJjLTUyLjgsNDYuNi04NC45LDEwMS44LTk2LjIsMTY1LjVDMTM5LjY5LDI2Ni4xLDE1Mi4zOSwyODMuNSwxNzAuODksMjg1Ljh6IiBmaWxsPSIjZmZmIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg=="
+    ></qc-icon>
+    Questions
+</button>
+
+<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>