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

package/src/sdg/bases/Icon/Test/iconTest.html

@@ -0,0 +1,156 @@
+<div>
+    <qc-icon type="arrow-up" size="xs"></qc-icon>
+    <qc-icon type="arrow-up" size="sm"></qc-icon>
+    <qc-icon type="arrow-up" size="md"></qc-icon>
+    <qc-icon type="arrow-up" size="lg"></qc-icon>
+    <qc-icon type="arrow-up" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="checkmark" size="xs"></qc-icon>
+    <qc-icon type="checkmark" size="sm"></qc-icon>
+    <qc-icon type="checkmark" size="md"></qc-icon>
+    <qc-icon type="checkmark" size="lg"></qc-icon>
+    <qc-icon type="checkmark" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="chevron-up-thin" size="xs"></qc-icon>
+    <qc-icon type="chevron-up-thin" size="sm"></qc-icon>
+    <qc-icon type="chevron-up-thin" size="md"></qc-icon>
+    <qc-icon type="chevron-up-thin" size="lg"></qc-icon>
+    <qc-icon type="chevron-up-thin" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="chevron-up" size="xs"></qc-icon>
+    <qc-icon type="chevron-up" size="sm"></qc-icon>
+    <qc-icon type="chevron-up" size="md"></qc-icon>
+    <qc-icon type="chevron-up" size="lg"></qc-icon>
+    <qc-icon type="chevron-up" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="clipboard" size="xs"></qc-icon>
+    <qc-icon type="clipboard" size="sm"></qc-icon>
+    <qc-icon type="clipboard" size="md"></qc-icon>
+    <qc-icon type="clipboard" size="lg"></qc-icon>
+    <qc-icon type="clipboard" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="error" size="xs"></qc-icon>
+    <qc-icon type="error" size="sm"></qc-icon>
+    <qc-icon type="error" size="md"></qc-icon>
+    <qc-icon type="error" size="lg"></qc-icon>
+    <qc-icon type="error" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="exclamation" size="xs"></qc-icon>
+    <qc-icon type="exclamation" size="sm"></qc-icon>
+    <qc-icon type="exclamation" size="md"></qc-icon>
+    <qc-icon type="exclamation" size="lg"></qc-icon>
+    <qc-icon type="exclamation" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="external-link" size="xs"></qc-icon>
+    <qc-icon type="external-link" size="sm"></qc-icon>
+    <qc-icon type="external-link" size="md"></qc-icon>
+    <qc-icon type="external-link" size="lg"></qc-icon>
+    <qc-icon type="external-link" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="information" size="xs"></qc-icon>
+    <qc-icon type="information" size="sm"></qc-icon>
+    <qc-icon type="information" size="md"></qc-icon>
+    <qc-icon type="information" size="lg"></qc-icon>
+    <qc-icon type="information" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="ligth-bulb" size="xs"></qc-icon>
+    <qc-icon type="ligth-bulb" size="sm"></qc-icon>
+    <qc-icon type="ligth-bulb" size="md"></qc-icon>
+    <qc-icon type="ligth-bulb" size="lg"></qc-icon>
+    <qc-icon type="ligth-bulb" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="minus" size="xs"></qc-icon>
+    <qc-icon type="minus" size="sm"></qc-icon>
+    <qc-icon type="minus" size="md"></qc-icon>
+    <qc-icon type="minus" size="lg"></qc-icon>
+    <qc-icon type="minus" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="note" size="xs"></qc-icon>
+    <qc-icon type="note" size="sm"></qc-icon>
+    <qc-icon type="note" size="md"></qc-icon>
+    <qc-icon type="note" size="lg"></qc-icon>
+    <qc-icon type="note" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="plus" size="xs"></qc-icon>
+    <qc-icon type="plus" size="sm"></qc-icon>
+    <qc-icon type="plus" size="md"></qc-icon>
+    <qc-icon type="plus" size="lg"></qc-icon>
+    <qc-icon type="plus" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="question-mark" size="xs"></qc-icon>
+    <qc-icon type="question-mark" size="sm"></qc-icon>
+    <qc-icon type="question-mark" size="md"></qc-icon>
+    <qc-icon type="question-mark" size="lg"></qc-icon>
+    <qc-icon type="question-mark" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="search-thin" size="xs"></qc-icon>
+    <qc-icon type="search-thin" size="sm"></qc-icon>
+    <qc-icon type="search-thin" size="md"></qc-icon>
+    <qc-icon type="search-thin" size="lg"></qc-icon>
+    <qc-icon type="search-thin" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="search" size="xs"></qc-icon>
+    <qc-icon type="search" size="sm"></qc-icon>
+    <qc-icon type="search" size="md"></qc-icon>
+    <qc-icon type="search" size="lg"></qc-icon>
+    <qc-icon type="search" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="success" size="xs"></qc-icon>
+    <qc-icon type="success" size="sm"></qc-icon>
+    <qc-icon type="success" size="md"></qc-icon>
+    <qc-icon type="success" size="lg"></qc-icon>
+    <qc-icon type="success" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="warning" size="xs"></qc-icon>
+    <qc-icon type="warning" size="sm"></qc-icon>
+    <qc-icon type="warning" size="md"></qc-icon>
+    <qc-icon type="warning" size="lg"></qc-icon>
+    <qc-icon type="warning" size="xl"></qc-icon>
+</div>
+
+<div>
+    <qc-icon type="xclose" size="xs"></qc-icon>
+    <qc-icon type="xclose" size="sm"></qc-icon>
+    <qc-icon type="xclose" size="md"></qc-icon>
+    <qc-icon type="xclose" size="lg"></qc-icon>
+    <qc-icon type="xclose" size="xl"></qc-icon>
+</div>
+
+<br>
+
+<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>

package/src/sdg/bases/Icon/_icon.html

@@ -0,0 +1,254 @@
+
+<h2 id="icons">Iconographie (qc-icon)</h2>
+
+<p> Le composant <code>qc-icon</code> permet d’afficher une icône avec la bonne couleur quel que soit le thème.</p>
+
+<h3>Exemples</h3>
+<qc-doc-exemple caption="Exemples d'utilisation d'icônes avec différentes propriétés."
+                id="icons-exemple">
+    <div>
+        <qc-icon type="success" color="pink-regular" size="xs"></qc-icon>
+        <qc-icon type="success" color="blue-piv" size="sm"></qc-icon>
+        <qc-icon type="success" color="grey-dark" size="md"></qc-icon>
+        <qc-icon type="success" color="blue-regular" size="lg"></qc-icon>
+        <qc-icon type="success" color="success" size="xl"></qc-icon>
+    </div>
+    <div>
+        <qc-icon type="arrow-up"  size="lg" rotate="-90"></qc-icon>
+        <qc-icon type="arrow-up"  size="lg" rotate="90"></qc-icon>
+        <qc-icon type="arrow-up"  size="lg" rotate="180"></qc-icon>
+        <qc-icon type="arrow-up"  size="lg"></qc-icon>
+    </div>
+
+
+</qc-doc-exemple>
+<style>
+    #icons-exemple  {
+        div:has(> qc-icon) {
+            margin-bottom: var(--qc-spacer-content-block-mb);
+        }
+        qc-icon {
+            margin-right: var(--qc-spacer-sm);
+        }
+    }
+</style>
+
+<qc-doc-exemple caption="Exemple d'icône personnalisée en base64.">
+        <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-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>type</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td>Nom de l’icône à afficher, à prendre dans la liste ci-dessous.</td>
+        </tr>
+        <tr>
+            <td>label</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
+        </tr>
+        <tr>
+            <td>rotate</td>
+            <td>Nombre</td>
+            <td>na</td>
+            <td>Rotation de l'image en degrés dans le sens horaire.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>xs, sm, md, lg ou xl</td>
+            <td>md</td>
+            <td>Taille de l’icône.</td>
+        </tr>
+        <tr>
+            <td>color</td>
+            <td>Toute valeur correspondant à un jeton de couleur une fois précédée de <code>‑‑qc‑color‑</code>. Par exemple, "text-primary" donne la couleur de <code>--qc-color-text-primary</code></td>
+            <td>text-primary</td>
+            <td>Couleur de l'icône.</td>
+        </tr>
+        <tr>
+            <td>width</td>
+            <td>Toute valeur acceptée par la directive css <code>width</code></td>
+            <td>auto</td>
+            <td>Largeur personnalisée de l’icône.</td>
+        </tr>
+        <tr>
+            <td>height</td>
+            <td>Toute valeur acceptée par la directive css <code>height</code></td>
+            <td>auto</td>
+            <td>Hauteur personnalisée de l’icône.</td>
+        </tr>
+        <tr>
+            <td>src</td>
+            <td>Toute valeur acceptée par la fonction css <code>url()</code></td>
+            <td>na</td>
+            <td>Chemin pour afficher une icône personnalisée.</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<h4>Liste des icônes</h4>
+
+<div class="table-overflow">
+    <table class="qc-table qc-striped component-attributes-description">
+        <thead>
+        <tr>
+            <th>Nom</th>
+            <th>Aperçu</th>
+        </tr>
+        </thead>
+        <tbody>
+        
+            <tr>
+                <td>adresse</td>
+                <td><qc-icon type="adresse" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>arrow-up</td>
+                <td><qc-icon type="arrow-up" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>calendar</td>
+                <td><qc-icon type="calendar" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>checkmark</td>
+                <td><qc-icon type="checkmark" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>chevron-up-thin</td>
+                <td><qc-icon type="chevron-up-thin" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>chevron-up</td>
+                <td><qc-icon type="chevron-up" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>clipboard</td>
+                <td><qc-icon type="clipboard" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>clock</td>
+                <td><qc-icon type="clock" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>email</td>
+                <td><qc-icon type="email" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>error</td>
+                <td><qc-icon type="error" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>exclamation</td>
+                <td><qc-icon type="exclamation" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>external-link</td>
+                <td><qc-icon type="external-link" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>information</td>
+                <td><qc-icon type="information" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>ligth-bulb</td>
+                <td><qc-icon type="ligth-bulb" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>minus</td>
+                <td><qc-icon type="minus" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>note</td>
+                <td><qc-icon type="note" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>phone</td>
+                <td><qc-icon type="phone" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>plus</td>
+                <td><qc-icon type="plus" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>question-mark</td>
+                <td><qc-icon type="question-mark" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>search-thin</td>
+                <td><qc-icon type="search-thin" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>search</td>
+                <td><qc-icon type="search" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>success</td>
+                <td><qc-icon type="success" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>user</td>
+                <td><qc-icon type="user" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>warning</td>
+                <td><qc-icon type="warning" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>website</td>
+                <td><qc-icon type="website" size="lg" /></td>
+            </tr>
+        
+            <tr>
+                <td>xclose</td>
+                <td><qc-icon type="xclose" size="lg" /></td>
+            </tr>
+        
+        </tbody>
+    </table>
+</div>
+
+

package/src/sdg/bases/Icon/_icons.scss

@@ -0,0 +1,47 @@
+@use "../../scss/qc-sdg-lib" as *;
+
+
+qc-icon {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+// TODO retirer une fois toutes les icônes remplacées par Icon dans les composants
+.qc-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--img-width);
+  height: var(--img-height);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  background-color: var(--img-color);
+  transform: rotate(var(--img-rotate));
+  // TODO questionner une échelle [0 - 10 ou 100]
+  @each $size-type, $size in (xs: 12, sm: 16, md: 20, nm: 24, lg: 28, xl: 32) {
+    &[data-img-size=#{$size-type}] {
+      height: rem($size);
+      width: rem($size);
+    }
+  }
+  @each $name, $url in $images {
+    // classes pour les icônes
+      @at-root .icon-#{$name} {
+        mask-image: getImageUrl($name);
+      }
+    &[data-img-type=#{$name}] {
+      @extend .icon-#{$name};
+    }
+
+
+  }
+  &.qc-icon-custom {
+    mask-image: var(--img-src);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: token-value(color grey regular);
+  }
+}
+
+

package/src/sdg/{scss/base → bases/accessibility}/_accessibility.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 .qc-sr-only {
   @include sr-only();
 }

package/src/sdg/bases/colors/_colors.html

@@ -0,0 +1,112 @@
+<section id="couleurs">
+    <h2 >Couleurs</h2>
+
+    <h3>Couleurs d’arrière-plan</h3>
+
+    <qc-color-doc token="white"
+                  title="Blanc"
+                  border="true"
+    ></qc-color-doc>
+
+
+    <h3>Couleur du texte</h3>
+
+    <qc-color-doc token="text-primary"
+                  title="Bleu foncé"
+    >
+    </qc-color-doc>
+
+    <h3>Couleurs principales</h3>
+
+    <qc-color-doc token="blue-pale"
+                  title="Bleu pale"
+    ></qc-color-doc>
+
+    <qc-color-doc token="blue-light"
+                  title="Bleu clair"
+    ></qc-color-doc>
+    <qc-color-doc token="blue-regular"
+                  title="Bleu"
+    ></qc-color-doc>
+    <qc-color-doc token="blue-piv"
+                  title="Bleu PIV"
+    ></qc-color-doc>
+    <qc-color-doc token="blue-medium"
+                  title="Bleu moyen"
+    ></qc-color-doc>
+    <qc-color-doc token="blue-dark"
+                  title="Bleu foncé"
+    ></qc-color-doc>
+
+    <h3>Couleur d’accent</h3>
+
+    <qc-color-doc token="accent"
+                  title="Rose"
+    ></qc-color-doc>
+
+    <h3>Niveaux de gris</h3>
+
+    <qc-color-doc token="grey-pale"
+                  title="Gris pale"
+    ></qc-color-doc>
+
+    <qc-color-doc token="grey-light"
+                  title="Gris clair"
+    ></qc-color-doc>
+    <qc-color-doc token="grey-regular"
+                  title="Gris"
+    ></qc-color-doc>
+    <qc-color-doc token="grey-medium"
+                  title="Gris moyen"
+    ></qc-color-doc>
+    <qc-color-doc token="grey-dark"
+                  title="Gris foncé"
+    ></qc-color-doc>
+
+    <h3>Couleurs fonctionnelles</h3>
+
+    <h4>Rouges</h4>
+
+    <qc-color-doc token="pink-pale"
+                  title="Rose pâle"
+    ></qc-color-doc>
+    <qc-color-doc token="pink-regular"
+                  title="Rose"
+    ></qc-color-doc>
+    <qc-color-doc token="red-regular"
+                  title="Rouge"
+    ></qc-color-doc>
+    <qc-color-doc token="red-dark"
+                  title="Rouge foncé"
+    ></qc-color-doc>
+
+    <h4>Verts</h4>
+
+    <qc-color-doc token="green-pale"
+                  title="Vert pâle"
+    ></qc-color-doc>
+    <qc-color-doc token="green-regular"
+                  title="Vert"
+    ></qc-color-doc>
+    <qc-color-doc token="green-dark"
+                  title="Vert foncé"
+    ></qc-color-doc>
+
+    <h4>Jaunes</h4>
+
+    <qc-color-doc token="yellow-pale"
+                  title="Jaune pâle"
+    ></qc-color-doc>
+    <qc-color-doc token="yellow-regular"
+                  title="Jaune"
+    ></qc-color-doc>
+    <qc-color-doc token="yellow-dark"
+                  title="Jaune foncé"
+    ></qc-color-doc>
+
+    <h4>Violet</h4>
+
+    <qc-color-doc token="purple"
+                  title="Violet"
+    ></qc-color-doc>
+</section>

package/src/sdg/bases/figures/_figure.html

@@ -0,0 +1,16 @@
+<h2 id="images">Images</h2>
+<p>Les figures servent en général pour l’affichage des images.</p>
+<qc-doc-exemple id="exemple-figure"
+                caption="Exemple d’affichage d’une image"
+>
+  <figure>
+    <img src="img/figure-sample.png"
+         alt="Image avec légende">
+    <figcaption>
+      <p>La légende de l’image <br>
+        <em>La source de l’image</em>
+      </p>
+    </figcaption>
+  </figure>
+</qc-doc-exemple>
+<!--            <qc-code target-id="exemple-figure"></qc-code>-->

package/src/sdg/{scss/base → bases/form}/_form.scss

@@ -1,4 +1,4 @@
-@use "qc-sdg-lib" as *;
+@use "../../scss/qc-sdg-lib" as *;
 // Inherit fonts for inputs and buttons
 input,
 button,
@@ -10,5 +10,12 @@ select {
 label {
   @include content-font('md', 'bold');
   display: inline-block;
-  margin-bottom: rem(4);
-}
+}
+
+legend {
+  padding: 0;
+}
+
+qc-select select {
+  appearance: none;
+}