qc-trousse-sdg 1.4.3 → 1.4.5

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

@@ -62,18 +62,10 @@ textarea {
 }
 
 $sizes: map.get($lg-tokens, size, max-width);
-input ,
-input + .qc-textfield-charcount {
-  .qc-textfield &,
-  qc-textfield & {
-    max-width: token-value(size input max-width);
-  }
-}
-textarea,
-textarea + .qc-textfield-charcount {
-  .qc-textfield &,
-  qc-textfield & {
-    max-width: token-value(size textarea max-width);
+
+@each $size, $width in $sizes {
+  [size="#{$size}"] {
+    max-width: 100%;
   }
 }
 
@@ -84,7 +76,8 @@ textarea,
   & + .qc-textfield-charcount {
     @each $size, $width in $sizes {
       [size="#{$size}"] & {
-        max-width: $width;
+        max-width: 100%;
+        width: $width;
       }
     }
   }

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

@@ -1,3 +1,7 @@
+import {setMcePivHeaderLogoSrc} from "./components/PivHeader/Test/pivHeaderTest";
+
+setMcePivHeaderLogoSrc();
+
 export * from './bases/Icon/Test/IconEmbeddedTest.svelte';
 export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
 export * from "./components/DropdownList/Test/DropdownListSvelteTest.svelte";

package/src/sdg/scss/settings/_tokens.scss

@@ -216,11 +216,7 @@ $lg-tokens: (
           lg: rem(528),
           xl: rem(825)
       ),
-      input: (
-        max-width: token-value(size max-width md),
-      ),
       textarea: (
-        max-width: token-value(size max-width lg),
         min-height: rem(108)
       ),
       search-bar: (

package/tests/buildSvelteTestsIgnore.json

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

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/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 });
-});