@scania/tegel 1.3.1 → 1.3.3

package/dist/collection/components/dropdown/dropdown.js

@@ -86,7 +86,9 @@ export class TdsDropdown {
       }
       else {
         this.filterResult = children.filter((element) => {
-          if (!element.textContent.toLowerCase().includes(query.toLowerCase())) {
+          if (!this.normalizeString(element.textContent)
+            .toLowerCase()
+            .includes(this.normalizeString(query).toLowerCase())) {
             element.setAttribute('hidden', '');
           }
           else {
@@ -121,6 +123,7 @@ export class TdsDropdown {
     this.error = false;
     this.multiselect = false;
     this.filter = false;
+    this.normalizeText = true;
     this.noResultText = 'No result';
     this.defaultValue = undefined;
     this.open = false;
@@ -270,6 +273,10 @@ export class TdsDropdown {
       this.setDefaultOption();
     }
   }
+  /** Method to check if we should normalize text */
+  normalizeString(text) {
+    return this.normalizeText ? text.normalize('NFD').replace(/\p{Diacritic}/gu, '') : text;
+  }
   /** Method that resets the dropdown without emitting an event. */
   internalReset() {
     this.getChildren().forEach((element) => {
@@ -570,6 +577,24 @@ export class TdsDropdown {
         "reflect": false,
         "defaultValue": "false"
       },
+      "normalizeText": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Normalizes input text for fuzzier search"
+        },
+        "attribute": "normalize-text",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "noResultText": {
         "type": "string",
         "mutable": false,
@@ -714,7 +739,7 @@ export class TdsDropdown {
       },
       "setValue": {
         "complexType": {
-          "signature": "(value: string | string[], label?: string) => Promise<{ value: any; label: any; }[]>",
+          "signature": "(value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -732,7 +757,7 @@ export class TdsDropdown {
               "id": "global::HTMLTdsDropdownOptionElement"
             }
           },
-          "return": "Promise<{ value: any; label: any; }[]>"
+          "return": "Promise<{ value: string; label: string; }[]>"
         },
         "docs": {
           "text": "Method for setting the value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -52,6 +52,16 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
+    normalizeText: {
+      name: 'Normalize text',
+      description: 'Should search be normalized',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
     multiselect: {
       name: 'Multiselect',
       description: 'Adds multiselect functionality to the Dropdown.',
@@ -146,6 +156,7 @@ export default {
     modeVariant: 'Inherit from parent',
     error: false,
     filter: false,
+    normalizeText: true,
     multiselect: false,
     size: 'Large',
     labelText: 'Label text',
@@ -167,9 +178,10 @@ const defaultOptionLookUp = {
   'Option 2': 'option-2',
   'Option 3': 'option-3',
   'Option 4': 'option-4',
+  'îles Åland': 'iles-aland',
 };
 const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
-const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
+const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, normalizeText, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
   <style>
   /* demo-wrapper is for demonstration purposes only*/
   .demo-wrapper {
@@ -200,6 +212,7 @@ const Template = ({ placeholder, labelText, labelPosition, helperText, size, err
           size="${sizeLookUp[size]}"
           ${error ? 'error' : ''}
           ${filter ? 'filter' : ''}
+          ${normalizeText ? '' : `normalize-text="false"`}
           ${multiselect ? 'multiselect' : ''}
           ${disabled ? 'disabled' : ''}
           open-direction="${openDirection.toLowerCase()}"
@@ -216,6 +229,9 @@ const Template = ({ placeholder, labelText, labelPosition, helperText, size, err
             <tds-dropdown-option value="option-4">
               Option 4
             </tds-dropdown-option>
+            <tds-dropdown-option value="iles-aland">
+              îles Åland
+            </tds-dropdown-option>
         </tds-dropdown>
     </div>
 

package/dist/collection/components/dropdown/test/basic/dropdown.e2e.js

@@ -0,0 +1,41 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/basic/index.html';
+test.describe('tds-dropdown-basic', () => {
+  test('renders basic dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* check diff in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('should find label and not exist', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const labelText = page.getByText(/Label text/);
+    await expect(labelText).toHaveCount(0);
+  });
+  test('find helper text and check not exist', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const helperText = page.getByText(/Helper text/);
+    await expect(helperText).toHaveCount(0);
+  });
+  test('have the button to be visible', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownButton = page.getByRole('button').first();
+    await expect(dropdownButton).toBeVisible();
+  });
+  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownButton = page.getByRole('button').first();
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+    await dropdownButton.click();
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/dropdown/test/default/dropdown.e2e.js

@@ -0,0 +1,76 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/default/index.html';
+test.describe('tds-dropdown-default', () => {
+  test('renders default dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* check diff in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('should find label and be visible', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const labelText = page.getByText(/Label text/);
+    await expect(labelText).toBeVisible();
+  });
+  test('find helper text and check if visible', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const helperText = page.getByText(/Helper text/);
+    await expect(helperText).toBeVisible();
+  });
+  test('have the placeholder="Placeholder" text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await expect(dropdownButton).toBeVisible();
+  });
+  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+    await dropdownButton.click();
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* click the dropdown button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+    /* Click the Option 1 button */
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ })
+      .getByRole('button');
+    await dropdownListElementOneButton.click();
+    await expect(dropdownListElementOneButton).toBeHidden();
+    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+    /* also check screenshot diff to make sure it says Option 1 */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    const dropdownListElementTwoButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 2/ });
+    const dropdownButtonElement = page.getByRole('button', { name: 'Placeholder' });
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeHidden();
+    /* after clicking dropdownlist should be visible, the button should also be */
+    await dropdownButtonElement.click();
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeVisible();
+    /* after clicking option 2 that is disabled list should be visible and also button should be */
+    await dropdownListElementTwoButton.click();
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeVisible();
+  });
+});

package/dist/collection/components/dropdown/test/error/dropdown.e2e.js

@@ -0,0 +1,36 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/error/index.html';
+test.describe('tds-dropdown-error', () => {
+  test('renders error dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('find helper text and check if visible and have icon', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const helperText = page.getByText(/Helper text/);
+    await expect(helperText).toBeVisible();
+    const helperTextIcon = helperText.getByRole('img');
+    await expect(helperTextIcon).toHaveCount(1);
+  });
+  test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ })
+      .getByRole('button');
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeHidden();
+    await dropdownButton.click();
+    /* after clicking dropdownlist should be visible, the button should also be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeVisible();
+    /* check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/dropdown/test/filter/dropdown.e2e.js

@@ -0,0 +1,56 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/filter/index.html';
+test.describe('tds-dropdown-filter', () => {
+  test('renders filter dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    const inputElement = page.getByRole('textbox');
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ });
+    const dropdownListElementTwoButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 2/ });
+    const dropdownListElementThreeButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 3/ });
+    const dropdownListElementFourButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 4/ });
+    const dropdownListElementFiveButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /îles Åland/ });
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(inputElement).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeHidden();
+    await expect(dropdownListElementTwoButton).toBeHidden();
+    await expect(dropdownListElementThreeButton).toBeHidden();
+    await expect(dropdownListElementFourButton).toBeHidden();
+    await expect(dropdownListElementFiveButton).toBeHidden();
+    /* Clicking the input element should show the dropdown list and all its content */
+    await inputElement.click();
+    await expect(inputElement).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeVisible();
+    await expect(dropdownListElementThreeButton).toBeVisible();
+    await expect(dropdownListElementFourButton).toBeVisible();
+    await expect(dropdownListElementFiveButton).toBeVisible();
+    /* Add text and only Option 1 should be visible */
+    await inputElement.fill('iles');
+    await expect(inputElement).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeHidden();
+    await expect(dropdownListElementTwoButton).toBeHidden();
+    await expect(dropdownListElementThreeButton).toBeHidden();
+    await expect(dropdownListElementFourButton).toBeHidden();
+    await expect(dropdownListElementFiveButton).toBeVisible();
+    /* Check diff on screenshot after adding text */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.js

@@ -0,0 +1,43 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/filter/normalize-text-false/index.html';
+test.describe('tds-dropdown-filter', () => {
+  test('renders filter dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    const inputElement = page.getByRole('textbox');
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ });
+    const dropdownListElementTwoButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 2/ });
+    const dropdownListElementThreeButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 3/ });
+    const dropdownListElementFourButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 4/ });
+    const dropdownListElementFiveButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /îles Åland/ });
+    /* Add text and only Option 1 should be visible */
+    await inputElement.fill('iles');
+    await expect(inputElement).toBeVisible();
+    await expect(dropdownListElementOneButton).toBeHidden();
+    await expect(dropdownListElementTwoButton).toBeHidden();
+    await expect(dropdownListElementThreeButton).toBeHidden();
+    await expect(dropdownListElementFourButton).toBeHidden();
+    await expect(dropdownListElementFiveButton).toBeHidden();
+    const noResult = page.getByText('No result');
+    await expect(noResult).toBeVisible();
+    /* Check diff on screenshot after adding text */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/dropdown/test/multiselect/dropdown.e2e.js

@@ -0,0 +1,81 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/multiselect/index.html';
+test.describe('tds-dropdown-multiselect', () => {
+  test('renders multiselect dropdown correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    /* click the dropdown button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+    /* Click the Option 1 button */
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ });
+    await dropdownListElementOneButton.click();
+    await expect(dropdownListElementOneButton).toBeVisible();
+    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+    /* also check screenshot diff to make sure it says Option 1 */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({ page, }) => {
+    await page.goto(componentTestPath);
+    /* click the button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+    /* get all checkboxes */
+    const dropdownListElementOneButton = page
+      .getByText(/Option 1/)
+      .filter({ has: page.getByRole('checkbox') });
+    const dropdownListElementTwoButton = page
+      .getByText(/Option 2/)
+      .filter({ has: page.getByRole('checkbox') });
+    const dropdownListElementThreeButton = page
+      .getByText(/Option 3/)
+      .filter({ has: page.getByRole('checkbox') });
+    const dropdownListElementFourButton = page
+      .getByText(/Option 4/)
+      .filter({ has: page.getByRole('checkbox') });
+    await expect(dropdownListElementOneButton).toHaveCount(1);
+    await expect(dropdownListElementTwoButton).toHaveCount(1);
+    await expect(dropdownListElementThreeButton).toHaveCount(1);
+    await expect(dropdownListElementFourButton).toHaveCount(1);
+    /* check each one and see that it updates correctly */
+    await dropdownListElementOneButton.click();
+    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+    const inputText = page.getByRole('button', { name: /Option 1/ });
+    await expect(inputText).toHaveCount(1);
+    await dropdownListElementTwoButton.click();
+    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+    await expect(inputText).toHaveCount(1);
+    await dropdownListElementThreeButton.click();
+    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+    const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
+    await expect(inputText2).toHaveCount(1);
+    await dropdownListElementFourButton.click();
+    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+    await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
+    const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
+    await expect(inputText3).toHaveCount(1);
+    /* also check screenshot diff to make sure */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/message/message.stories.js

@@ -98,7 +98,6 @@ const Template = ({ modeVariant, messageVariant, header, extendedMessage, minima
           header="${header}"
           ${noIcon ? 'no-icon' : ''}
           ${minimal ? 'minimal' : ''}
-          mode-variant="${modeVariant.toLowerCase()}"
           ${modeVariant !== 'Inherit from parent'
   ? `mode-variant="${modeVariant.toLowerCase()}"`
   : ''}

package/dist/collection/components/message/test/error/message.e2e.js

@@ -0,0 +1,33 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/message/test/error/index.html';
+test.describe('tds-message', () => {
+  test('is rendered correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Check if a component exists in the DOM */
+    const messageComponent = page.locator('tds-message');
+    expect(messageComponent).toBeTruthy();
+    /* Take screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('is in error variant', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentDiv = page.locator('tds-message > div');
+    await expect(messageComponentDiv).toHaveClass(/error/);
+  });
+  test('has header text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentHeader = page.locator('tds-message .header');
+    await expect(messageComponentHeader).not.toBeEmpty();
+  });
+  test('has subheader text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponent = page.locator('tds-message');
+    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
+  });
+  test('has error icon', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageIconComponent = page.locator('tds-message tds-icon');
+    await expect(messageIconComponent).toHaveAttribute('name', 'error');
+  });
+});

package/dist/collection/components/message/test/information/message.e2e.js

@@ -0,0 +1,33 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/message/test/information/index.html';
+test.describe('tds-message', () => {
+  test('is rendered correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Check if a component exists in the DOM */
+    const messageComponent = page.locator('tds-message');
+    expect(messageComponent).toBeTruthy();
+    /* Take screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('is in information variant', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentDiv = page.locator('tds-message > div');
+    await expect(messageComponentDiv).toHaveClass(/information/);
+  });
+  test('has header text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentHeader = page.locator('tds-message .header');
+    await expect(messageComponentHeader).not.toBeEmpty();
+  });
+  test('has subheader text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponent = page.locator('tds-message');
+    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
+  });
+  test('has error icon', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageIconComponent = page.locator('tds-message tds-icon');
+    await expect(messageIconComponent).toHaveAttribute('name', 'info');
+  });
+});

package/dist/collection/components/message/test/success/message.e2e.js

@@ -0,0 +1,33 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/message/test/success/index.html';
+test.describe('tds-message', () => {
+  test('is rendered correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Check if a component exists in the DOM */
+    const messageComponent = page.locator('tds-message');
+    expect(messageComponent).toBeTruthy();
+    /* Take screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('is in success variant', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentDiv = page.locator('tds-message > div');
+    await expect(messageComponentDiv).toHaveClass(/success/);
+  });
+  test('has header text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentHeader = page.locator('tds-message .header');
+    await expect(messageComponentHeader).not.toBeEmpty();
+  });
+  test('has subheader text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponent = page.locator('tds-message');
+    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
+  });
+  test('has error icon', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageIconComponent = page.locator('tds-message tds-icon');
+    await expect(messageIconComponent).toHaveAttribute('name', 'tick');
+  });
+});

package/dist/collection/components/message/test/warning/message.e2e.js

@@ -0,0 +1,33 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/message/test/warning/index.html';
+test.describe('tds-message', () => {
+  test('is rendered correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    /* Check if a component exists in the DOM */
+    const messageComponent = page.locator('tds-message');
+    expect(messageComponent).toBeTruthy();
+    /* Take screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('is in warning variant', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentDiv = page.locator('tds-message > div');
+    await expect(messageComponentDiv).toHaveClass(/warning/);
+  });
+  test('has header text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponentHeader = page.locator('tds-message .header');
+    await expect(messageComponentHeader).not.toBeEmpty();
+  });
+  test('has subheader text', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageComponent = page.locator('tds-message');
+    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
+  });
+  test('has error icon', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const messageIconComponent = page.locator('tds-message tds-icon');
+    await expect(messageIconComponent).toHaveAttribute('name', 'warning');
+  });
+});

package/dist/collection/components/popover-core/popover-core.js

@@ -51,6 +51,11 @@ export class TdsPopoverCore {
       }
     }
   }
+  /* To enable initial loading of a component if user controls show prop*/
+  componentWillLoad() {
+    this.setIsShown(this.show);
+  }
+  /* To observe any change of show prop after an initial load */
   onShowChange(newValue) {
     this.setIsShown(newValue);
   }

package/dist/collection/components/table/table/test/batch/table.e2e.js

@@ -0,0 +1,24 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/table/table/test/batch/index.html';
+test.describe('tds-table-batch', () => {
+  test('renders batch table correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tableComponent = page.getByRole('table');
+    await expect(tableComponent).toHaveCount(1);
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('table has a settings button', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarSettings = page.getByRole('img');
+    await expect(tdsTableToolbarSettings).toHaveCount(1);
+    await expect(tdsTableToolbarSettings).toBeVisible();
+  });
+  test('table has a [Download] button', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
+    await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
+    await expect(tdsTableToolbarDownloadButton).toBeVisible();
+  });
+});