qc-trousse-sdg 1.4.1 → 1.4.3

package/rollup.config.js

@@ -13,6 +13,7 @@ import fs from "fs";
 import buildHtmlDoc from './plugins/buildHtmlDoc.js';
 import buildDevDoc from "./plugins/buildDevDoc"; // adapte le chemin si besoin
 import buildTestFixtures from "./plugins/buildTestFixtures";
+import buildSvelteTests from "./plugins/buildSvelteTests";
 
 
 const
@@ -221,6 +222,10 @@ if (!build_process) {
             buildTestFixtures({
                 input: 'src/doc/_test.html'
             }),
+            buildSvelteTests({
+                input: 'tests',
+                ignorePathsFile: 'buildSvelteTestsIgnore.json'
+            }),
             svelte(svelteOptions),
             resolve({
                 browser: true,

package/src/doc/components/TopNav.svelte

@@ -30,10 +30,10 @@
     position: sticky;
     z-index: 100;
     top: 0;
-    background-color: token-value(color blue medium);
-    color: token-value(color grey pale);
+    background-color: token-value(color background);
     min-height: rem(72);
     height: rem(72);
+    border-bottom: solid rem(1) token-value(color grey light);
   }
   .top-nav {
     position: absolute;

package/src/sdg/bases/Icon/Icon.svelte

@@ -29,5 +29,6 @@
      data-img-type={type}
      {...attributes}
      {...rest}
+     aria-hidden={label ? undefined : true}
     >
 </div>

package/src/sdg/bases/Icon/IconDoc.ejs

@@ -63,7 +63,7 @@
             <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
+            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran. Si absent, l'icône sera masquée au lecteur d'écran (via l'attribut <code>aria-hidden</code></td>
         </tr>
         <tr>
             <td>rotate</td>

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

@@ -63,7 +63,7 @@
             <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
+            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran. Si absent, l'icône sera masquée au lecteur d'écran (via l'attribut <code>aria-hidden</code></td>
         </tr>
         <tr>
             <td>rotate</td>

package/src/sdg/components/Button/Test/{buttonTest.html → buttonBaselineTest.html}

@@ -306,7 +306,7 @@
 <br>
 <br>
 
-<div>
+<div class="qc-button-group">
     <button class="qc-button qc-primary">
         <qc-icon type="plus"></qc-icon>
         Ajouter
@@ -324,7 +324,7 @@
     Questions
 </button>
 
-<div>
+<div class="qc-button-group">
     <button class="qc-button qc-simple">
         <qc-icon type="information"></qc-icon>
         Action
@@ -336,7 +336,7 @@
     </button>
 </div>
 
-<div>
+<div class="qc-button-group qc-compact">
     <button class="qc-button qc-simple qc-compact">
         <qc-icon type="information"></qc-icon>
         Action

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

@@ -88,7 +88,7 @@
         </div>
     </div>
 
-    <div>
+    <div class="qc-button-group">
         <button class="qc-button qc-simple">
             <qc-icon type="information"></qc-icon>
             Action
@@ -99,7 +99,7 @@
             Action
         </button>
     </div>
-    <div>
+    <div class="qc-button-group qc-compact">
         <button class="qc-button qc-simple qc-compact">
             <qc-icon type="information"></qc-icon>
             Action
@@ -114,7 +114,7 @@
 </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>
+    <div class="qc-button-group">
         <button class="qc-button qc-primary">
             <qc-icon type="arrow-up" rotate="-90"></qc-icon>
             Précédent
@@ -128,6 +128,7 @@
 </qc-doc-exemple>
 
 <qc-doc-exemple caption="Exemples avec un lien et un bouton de soumission.">
+    <div class="qc-button-group">
         <a href="javascript:void(0);"
            class="qc-button qc-primary"
            role="button"
@@ -135,11 +136,13 @@
             Action
         </a>
         <input type="submit" value="Action" class="qc-button qc-primary" />
+    </div>
 </qc-doc-exemple>
 
 
 <h3>Classes CSS</h3>
 
+<h4>Classes de boutons</h4>
 <div class="table-overflow">
     <table class="qc-table qc-striped">
         <thead>
@@ -184,3 +187,25 @@
         </tbody>
     </table>
 </div>
+
+<h4>Classes pour le contenant parent d'un groupe de boutons</h4>
+<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-group</code></td>
+            <td>Gère les espacements horizontaux entre les boutons en groupe</td>
+        </tr>
+        <tr>
+            <td><code>qc‑compact</code></td>
+            <td>Espacements au format compact des boutons en groupe</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -14,11 +14,11 @@
   min-width: rem(112);
   max-width: rem(360);
   min-height: rem(56);
-  padding: rem(16) rem(24);
+  // Compensation pour la bordure en retirant 2px de padding de chaque côté
+  padding: rem(14) rem(22);
   vertical-align: middle;
-  border: 2px solid transparent;
+  border: rem(2) solid transparent;
   cursor: pointer;
-  margin-right: rem(32);
   margin-bottom: token-value(spacer, md);
 
   &:focus,
@@ -30,9 +30,9 @@
     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);
+    // Compensation pour la bordure en retirant 1px de padding de chaque côté
+    padding: rem(7) rem(15);
+    border-width: rem(1);
     margin-bottom: token-value(spacer, sm);
   }
 
@@ -200,3 +200,13 @@
     text-decoration: none;
   }
 }
+
+.qc-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: rem(4 * $base-spacer);
+
+  &.qc-compact {
+    column-gap: token-value(spacer, md);
+  }
+}

package/src/sdg/components/ChoiceGroup/_selectionButton.scss

@@ -17,6 +17,11 @@ label.qc-selection-button {
 
   &:has(input:checked)::before {
     background-color: token-value(color, blue, pale);
+    border-color: token-value(color, blue, light);
+  }
+
+  &:focus, &:has(input:focus)::before {
+    border-color: inherit;
   }
 
   &:has(input:disabled)::before {

package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss

@@ -6,7 +6,7 @@ $min-height: 40;
   display: flex;
   width: 100%;
   justify-content: space-between;
-  height: rem($min-height);
+  height: rem($min-height - 2);
   align-items: center;
   background-color: token-value(color, background);
   border: none;

package/src/sdg/components/DropdownList/_dropdownList.scss

@@ -43,6 +43,10 @@ $border: 1;
 
   &.qc-dropdown-list-invalid {
     border: rem(2) solid token-value(color, red, regular) !important;
+
+    & > .qc-dropdown-button {
+      height: rem(36);
+    }
   }
 }
 

package/src/sdg/components/Label/_label.scss

@@ -1,7 +1,7 @@
 @use "qc-sdg-lib" as *;
 
 .qc-label {
-  font-weight: token-value(font weight content medium);
+  font-weight: token-value(font weight content bold);
   display: block;
 
   &.qc-compact {

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

@@ -28,7 +28,7 @@ textarea {
     position: relative;
     color: token-value(color text primary);
     background-color: token-value(color background);
-    padding: rem(8);
+    padding: rem(7);
     text-overflow: ellipsis;
     overflow: hidden;
     margin-top: rem(4);
@@ -43,7 +43,7 @@ textarea {
     &:focus-visible {
       outline: 2px solid token-value(color formfield focus outline);
       border: 2px solid token-value(color formfield focus border);
-      padding: rem(7);
+      padding: rem(6);
     }
 
     &:disabled {
@@ -56,7 +56,7 @@ textarea {
   [invalid] > & {
     border-color: token-value(color, red, regular);
     border-width: 2px;
-    padding: rem(7);
+    padding: rem(6);
   }
 
 }

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

@@ -29,6 +29,7 @@
     background-color: token-value( color blue regular);
     outline: 2px solid token-value(color blue light);
     border: 2px solid token-value(color blue dark);
+    outline-offset: 0;
     @include qc-shading(2);
   }
   &:active {

package/src/sdg/qc-sdg-test.js

@@ -1,6 +1,6 @@
 export * from './bases/Icon/Test/IconEmbeddedTest.svelte';
 export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
-export * from "./components/DropdownList/Test/DropdownListEmbeddedTest.svelte";
+export * from "./components/DropdownList/Test/DropdownListSvelteTest.svelte";
 export * from "./components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte";
 export * from "./components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte";
 export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";

package/src/sdg/scss/settings/_base.scss

@@ -22,9 +22,3 @@ $grid-aliases: (
     mobile: xs
 );
 
-
-  //TODO 1 -générer automatiquement cette map à partir du contenu du fichie img en javascript (avec gupl ou autre)
-  //TODO 2 - demander des nouvelles icône les plus neutres possibles
-  //TODO 3 - faire le ménage ; certaines icones sont présentées en 2 couleaurs, ce qui est inutile depuis l'introduction de qc-icon
-
-

package/tests/buildSvelteTestsIgnore.json

@@ -0,0 +1,4 @@
+[
+  "**/button-baseline.spec.ts",
+  "**/dropdown-list-baseline.spec.ts"
+]

package/tests/{button.spec.ts → button-baseline.spec.ts}

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test';
 import path = require('path');
 
 /* test des composants web de la trousse */
-test('button ref', {
+test('button baseline', {
     tag: ['@baseline', '@button']
 }, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/button.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/buttonBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
     await expect(page).toHaveScreenshot('button.png', { fullPage: true });
 });

package/tests/choice-group-baseline.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test('choice-group radios baseline', {
+    tag: ['@baseline', '@radios']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/radiosBaseline.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
+});
+
+test('choice-group checkbox baseline', {
+    tag: ['@baseline', '@checkbox']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/checkboxBaseline.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
+});

package/tests/choice-group-svelte.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test('choice-group radios svelte', {
+    tag: ['@svelte', '@radios']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/radiosSvelte.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
+});
+
+test('choice-group checkbox svelte', {
+    tag: ['@svelte', '@checkbox']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/checkboxSvelte.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
+});

package/tests/{icon.spec.ts → icon-baseline.spec.ts}

@@ -5,15 +5,7 @@ import path = require('path');
 test('icon ref', {
     tag: ['@baseline', '@icon']
 }, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/icon.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/iconBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
     await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
 });
-
-test('icon svelte', {
-    tag: ['@svelte', '@icon']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/iconEmbedded.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-    await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
-});

package/tests/icon-svelte.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('icon ref', {
+    tag: ['@svelte', '@icon']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/iconSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
+});

package/tests/piv-header-baseline.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('pivHeader baseline', {
+    tag: ['@baseline', '@piv-header']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
+});

package/tests/piv-header-svelte.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('pivHeader svelte', {
+    tag: ['@svelte', '@piv-header']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
+});

package/tests/{textfield.spec.ts → textfield-baseline.spec.ts}

@@ -7,16 +7,7 @@ test.beforeEach(async ({ page }) => {
 })
 
 /* test des composants web de la trousse */
-test('textfield ref', {
-    tag: ['@baseline', '@textfield']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/textField.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
-});
-/* test des composants svelte */
-test('textfield svelte', {
+test('textfield baseline', {
     tag: ['@baseline', '@textfield']
 }, async ({ page }) => {
     await expect(page).toHaveScreenshot('textField.png', {fullPage: true});

package/tests/textfield-svelte.spec.ts

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
 })
 
 /* test des composants web de la trousse */
-test('textfield ref', {
+test('textfield svelte', {
     tag: ['@svelte', '@textfield']
 }, async ({ page }) => {
     await expect(page).toHaveScreenshot('textField.png', {fullPage: true});

package/tests/toggle-switch-baseline.spec.ts

@@ -0,0 +1,11 @@
+import {expect, test} from "@playwright/test";
+import path = require('path');
+
+test('toggleswitch baseline', {
+    tag: ['@baseline', '@toggleswitch']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+
+    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
+});

package/tests/toggle-switch-svelte.spec.ts

@@ -0,0 +1,11 @@
+import {expect, test} from "@playwright/test";
+import path = require('path');
+
+test('toggleswitch svelte', {
+    tag: ['@svelte', '@toggleswitch']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+
+    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
+});

package/tests/choice-group.spec.ts

@@ -1,36 +0,0 @@
-import { test, expect } from '@playwright/test';
-import path = require('path');
-
-test('choice-group radios ref', {
-    tag: ['@baseline', '@radios']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/radios.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
-});
-test('choice-group radios svelte', {
-    tag: ['@svelte', '@radios']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/radiosEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
-});
-
-test('choice-group checkbox ref', {
-    tag: ['@baseline', '@checkbox']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/checkbox.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
-});
-test('choice-group checkbox svelte', {
-    tag: ['@svelte', '@checkbox']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/checkboxEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
-});

package/tests/pivHeader.spec.ts

@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test';
-import path = require('path');
-
-
-test('pivHeader ref', {
-    tag: ['@baseline', '@piv-header']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/pivHeader.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
-});
-
-
-//TODO: test du composant svelte
-
-// test('pivHeader svelte', {
-//     tag: ['@svelte', '@piv-header']
-// }, async ({ page }) => {
-//     const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderEmbedded.test.html');
-//     await page.goto(`file://${htmlFilePath}`);
-//     await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
-// });

package/tests/toggle-switch.spec.ts

@@ -1,20 +0,0 @@
-import {expect, test} from "@playwright/test";
-import path = require('path');
-
-test('toggleswitch ref', {
-    tag: ['@baseline', '@toggleswitch']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitch.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-
-    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
-});
-/* test des composants svelte */
-test('toggleswitch svelte', {
-    tag: ['@svelte', '@toggleswitch']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchEmbedded.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-
-    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
-});