qc-trousse-sdg 1.4.6 → 1.4.7

package/src/sdg/components/TextField/TextField.svelte

@@ -34,7 +34,9 @@
         rootElement = $state(),
         textFieldRow = $state(),
         defaultInvalidText = $derived.by(() => {
-            if (!maxlengthReached) return '';
+            if (!maxlengthReached) {
+                return undefined;
+            }
             return lang === 'fr'
                 ? `La limite de caractères du champ ${label} est dépassée.`
                 : `The character limit for the ${label} field has been exceeded.`
@@ -44,13 +46,18 @@
     onMount(() => {
         if (webComponentMode) return;
         if (!input) {
-            input = rootElement.querySelector('input,textarea');
+            input = rootElement?.querySelector('input,textarea');
         }
         onMountInput(
             input,
             textFieldRowParam => textFieldRow = textFieldRowParam,
             valueParam => value = valueParam,
-            invalidParam => invalid = invalidParam
+            invalidParam => invalid = invalidParam,
+            requiredParam => {
+                if (requiredParam) {
+                    required = requiredParam;
+                }
+            }
         )
     })
 
@@ -117,7 +124,6 @@
         input.setAttribute('aria-invalid', invalid)
         input.setAttribute('aria-required', required)
     })
-
 </script>
 
 {#snippet textfield()}
@@ -140,7 +146,7 @@
         </div>
     {/if}
 
-    {@render children()}
+    {@render children?.()}
 
     {#if maxlength && maxlength !== null}
         <div
@@ -157,7 +163,7 @@
     {/if}
 
     <FormError {invalid}
-               invalidText={invalidText ? invalidText :  defaultInvalidText}
+               invalidText={invalidText ? invalidText : defaultInvalidText}
                label={label ? label : input?.getAttribute("aria-label")}
                bind:id={errorId}
                extraClasses={['qc-xs-mt']}

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -40,11 +40,22 @@
         textFieldRow = $state()
     ;
     onMount(() => {
-        input = $host().querySelector('input,textarea');
+        const initialLabelElement = $host()?.querySelector('label');
+        if (initialLabelElement) {
+            label = initialLabelElement.innerHTML;
+            initialLabelElement.remove();
+        }
+
+        input = $host()?.querySelector('input,textarea');
         onMountInput(input,
             textFieldRowParam => textFieldRow = textFieldRowParam,
             valueParam => value = valueParam,
-            invalidParam => invalid = invalidParam
+            invalidParam => invalid = invalidParam,
+            requiredParam => {
+                if (requiredParam) {
+                    required = requiredParam;
+                }
+            }
         )
     })
 
@@ -55,9 +66,6 @@
 
     $effect(() => {
         if (!input) return;
-        if (label) {
-            input.before(labelElement);
-        }
         if (description) {
             input.before(descriptionElement);
         }
@@ -72,7 +80,11 @@
             textFieldRow.appendChild(formErrorElement);
         }
         else {
-            input.after(formErrorElement);
+            if (maxlengthElement) {
+                maxlengthElement.after(formErrorElement);
+            } else {
+                input.after(formErrorElement);
+            }
         }
     })
 </script>

package/src/sdg/components/TextField/textFieldUtils.js

@@ -1,6 +1,6 @@
 import {Utils} from "../utils";
 
-export function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
+export function onMountInput(input, setTextFieldRow, setValue, setInvalid, setRequired) {
     if (!input) return;
     if (!input.autocomplete) {
         input.autocomplete = "off"
@@ -8,7 +8,8 @@ export function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
     if (!input.id) {
         input.id =  Utils.generateId(input.type);
     }
-    setValue(input.value)
+    setValue(input.value);
+    setRequired(input.required);
     input.addEventListener(
         'input',
         () => {

package/src/sdg/components/utils.js

@@ -134,6 +134,29 @@ export class Utils {
         // Convertit le mot en minuscules.
         return word.toLowerCase();
     }
+
+    static now() {
+        return (new Date()).getTime();
+    }
+
+    /**
+     * Creates a MutationObserver instance with selector nesting check
+     * @param rootElement
+     * @param callback
+     * @param selector
+     * @returns {MutationObserver | null}
+     */
+    static createMutationObserver(rootElement, callback, selector) {
+        if (!selector) {
+            selector = rootElement.tagName.toLowerCase();
+        }
+        if (rootElement.querySelector(selector)) {
+            console.warn(`Imbrication d'éléments "${selector}" détectée. Le MutationObserver n'est pas créé`);
+            return null;
+        }
+
+        return new MutationObserver(callback);
+    }
 }
 
 function getCacheBustingParam(cssPath, currentScriptSrc) {

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

@@ -7,4 +7,5 @@ export * from './components/TextField/Test/TextFieldEmbededTest.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";
+export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";
+export * from "./components/Alert/Test/AlertSvelteTest.svelte";

package/src/sdg/scss/lib/_mixins.scss

@@ -38,11 +38,17 @@
 @mixin hover-link() {
   color: token-value(color, link, hover);
   text-decoration: none;
+  .qc-ext-link-text {
+    text-decoration: none;
+  }
 }
 
 @mixin active-link() {
   color: token-value(color, link, active);
   text-decoration: none;
+  .qc-ext-link-text {
+    text-decoration: none;
+  }
 }
 
 @mixin focus-link() {

package/src/sdg/scss/utilities/_states.scss

@@ -3,7 +3,7 @@
 .qc-required {
   @include content-font(md, bold);
   color: token-value(color, red, regular);
-  margin-left: rem(6);
+  margin-left: token-value(spacer, xs);
 }
 
 .qc-disabled {

package/tests/alert-baseline.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/alertBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+});
+
+test('Alert baseline', {
+    tag: ['@alert', '@baseline']
+}, async ({ page }) => {
+    await expect(page).toHaveScreenshot('alert.png', { fullPage: true });
+});
+
+test('Fermeture d\'alerte', {
+    tag: ['@alert', '@baseline']
+}, async ({ page }) => {
+    await page.getByRole('button', { name: 'Fermer l’alerte' }).click();
+    await expect(page).toHaveScreenshot('alert-hide.png', { fullPage: true });
+
+    await page.reload();
+    await expect(page).toHaveScreenshot('alert-hide.png', { fullPage: true });
+});

package/tests/alert-svelte.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/alertSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+});
+
+test('Alert svelte', {
+    tag: ['@alert', '@svelte']
+}, async ({ page }) => {
+    await expect(page).toHaveScreenshot('alert.png', { fullPage: true });
+});
+
+test('Fermeture d\'alerte', {
+    tag: ['@alert', '@svelte']
+}, async ({ page }) => {
+    await page.getByRole('button', { name: 'Fermer l’alerte' }).click();
+    await expect(page).toHaveScreenshot('alert-hide.png', { fullPage: true });
+
+    await page.reload();
+    await expect(page).toHaveScreenshot('alert-hide.png', { fullPage: true });
+});

package/tests/buildSvelteTestsIgnore.json

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

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

@@ -26,6 +26,14 @@ test.describe('Rendu visuel',
         await expect(page).toHaveScreenshot('dropdownListTextWrap.png', {fullPage: true});
     });
 
+    test('Select tiroir au-dessus', {
+        tag: ['@baseline', '@popup-above', '@dropdownlist']
+    }, async ({ page }) => {
+        await page.getByRole('combobox', { name: 'Régions desservies' }).click();
+
+        await expect(page).toHaveScreenshot('dropdownListPopupAbove.png', {fullPage: true});
+    });
+
     test('Select svelte', {
         tag: ['@svelte', '@dropdownlist']
     }, async ({ page }) => {

package/tests/external-link-baseline.spec.ts

@@ -0,0 +1,30 @@
+import {expect, test} from "@playwright/test";
+import path = require('path');
+import {link} from "node:fs";
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/externalLinkBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+});
+
+test.describe('Rendu visuel', () => {
+    test(
+    'Survol de lien', {
+            tag: ['@baseline', '@external-link']
+        }, async ({ page }) => {
+        await page.getByRole('link', { name: 'Lorem ipsum dolor sit amet,' }).first().hover();
+
+        await expect(page).toHaveScreenshot('externalLinkHover.png', {fullPage: true});
+    });
+
+    test(
+        'Clique sur lien', {
+            tag: ['@baseline', '@external-link']
+        }, async ({ page }) => {
+        await page.locator('#multi-links').evaluate((link: HTMLElement) => {
+            link.querySelector('a').innerHTML = 'Cliquez ici';
+        });
+
+        await expect(page).toHaveScreenshot('externalLinkChange.png', {fullPage: true});
+    })
+});

package/tests/textfield-baseline.spec.ts

@@ -15,14 +15,14 @@ test('textfield baseline', {
 
 test.describe('Aria', () => {
     test('aria-required', async ({ page }) => {
-        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+        await expect(page.locator('#text-lg')).toHaveAttribute('aria-required', 'true');
     });
 
     test('aria-invalid', async ({ page }) => {
-        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+        await expect(page.locator('#text-md')).toHaveAttribute('aria-invalid', 'true');
 
-        await page.getByRole('textbox', { name: 'Moyen' }).click();
-        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
-        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+        await page.locator('#text-md').click();
+        await page.locator('#text-md').fill('1');
+        await expect(page.locator('#text-md')).toHaveAttribute('aria-invalid', 'false');
     });
 });

package/tests/textfield-svelte.spec.ts

@@ -15,14 +15,14 @@ test('textfield svelte', {
 
 test.describe('Aria', () => {
     test('aria-required', async ({ page }) => {
-        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+        await expect(page.locator('#text-lg')).toHaveAttribute('aria-required', 'true');
     });
 
     test('aria-invalid', async ({ page }) => {
-        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+        await expect(page.locator('#text-md')).toHaveAttribute('aria-invalid', 'true');
 
-        await page.getByRole('textbox', { name: 'Moyen' }).click();
-        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
-        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+        await page.locator('#text-md').click();
+        await page.locator('#text-md').fill('1');
+        await expect(page.locator('#text-md')).toHaveAttribute('aria-invalid', 'false');
     });
 });