qc-trousse-sdg 1.4.4 → 1.4.6

package/tests/dropdown-list-baseline.spec.ts

@@ -18,6 +18,14 @@ test.describe('Rendu visuel',
         await expect(page).toHaveScreenshot('dropdownList.png', {fullPage: true});
     });
 
+    test('Select text wrap', {
+        tag: ['@baseline', '@textwrap', '@dropdownlist']
+    }, async ({ page }) => {
+        await page.getByRole('combobox', { name: 'Débordement' }).click();
+
+        await expect(page).toHaveScreenshot('dropdownListTextWrap.png', {fullPage: true});
+    });
+
     test('Select svelte', {
         tag: ['@svelte', '@dropdownlist']
     }, async ({ page }) => {
@@ -494,10 +502,8 @@ test.describe('formulaire', () => {
 
         await expect(page.locator('#dropdown-list-restaurants-input')).toHaveAttribute('aria-invalid', 'true');
         await expect(page.locator('#dropdown-list-restaurants-error')).toMatchAriaSnapshot(`
-        - alert:
-          - img
-          - text: Veuillez choisir un type de restaurant.
-    `);
+            - alert: Veuillez choisir un type de restaurant.
+        `);
 
         await page.locator('#dropdown-list-restaurants-input').click();
         await page.locator('[id="dropdown-list-restaurants-Pâtisserie-Pâtisserie"]').click();
@@ -527,3 +533,44 @@ test.describe('formulaire', () => {
         });
     });
 });
+
+test.describe('Manipulation du DOM', () => {
+   test('Réordonnancement des options', {
+       tag: ['@dom', '@dropdownlist'],
+       annotation: {
+           type: 'description',
+           description: 'En réordonnant les options dans le select, alors les changement sont reflétés dans la popup'
+       }
+   }, async ({ page }) => {
+       await page.locator('#select-single-choice').evaluate((select: HTMLSelectElement) => {
+           const options = Array.from(select.options);
+           options.reverse();
+
+           select.innerHTML = '';
+           select.append(...options);
+       });
+       await page.locator('#qc-select-single-choice-input').click();
+
+       await expect(page.locator('#qc-select-single-choice-items')).toMatchAriaSnapshot(`
+       - list:
+         - option "Option 16 (désactivée)"
+         - option "Option 15"
+         - option "Option 14"
+         - option "Option 13"
+         - option "Option 12"
+         - option "Option 11"
+         - option "Option 10"
+         - option "Option 9"
+         - option "Option 8"
+         - option "Option 7"
+         - option "Option 6"
+         - option "Option 5"
+         - option "Option 4"
+         - option "Option 3"
+         - option "Option 2"
+         - option "Option 1"
+       - status
+       `
+       );
+   });
+});

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

@@ -7,5 +7,8 @@ test('pivHeader baseline', {
 }, async ({ page }) => {
     const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
+
+    await page.getByRole('link', { name: 'Logo du gouvernement du Québec' }).first().focus();
+
     await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
 });

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

@@ -1,50 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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/CharCount/_charCount.html

@@ -1,7 +0,0 @@
-<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/RadioButton/_radioButton.html

@@ -1,24 +0,0 @@
-<h2 id="radio-button">Boutons radio</h2>
-<p>Les boutons radio sont aussi disponibles au format de <a href="#selection-button">boutons de sélection</a>.</p>
-<h3>Exemples</h3>
-
-
-  <qc-radio-group id="exemple-radio-md"
-                  legend="Choisissez une option :"
-                  name="ex-md"
-                  selection-button
-  >
-    <label>
-      <input type="radio"
-             name="ma-radio"
-             value="option1">
-      <span>Option 1</span>
-    </label>
-    <label>
-      <input type="radio"
-             name="ma-radio"
-             value="option2">
-      <span>Option 2</span>
-    </label>
-  </qc-radio-group>
-

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

@@ -1,11 +0,0 @@
-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 });
-});