@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,119 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Modal`,
-    parameters: {
-        layout: 'fullscreen',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        actionsPosition: {
-            name: 'Actions position',
-            description: "Defines the postion of Modal action's slot - if slot scrolls or stays on top of the content.",
-            control: {
-                type: 'radio',
-            },
-            options: ['Sticky', 'Static'],
-            table: {
-                defaultValue: { summary: 'static' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Sets the size of Modal.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small', 'Extra small'],
-            table: {
-                defaultValue: { summary: 'md' },
-            },
-        },
-        headerText: {
-            name: 'Modal header',
-            description: 'Sets the header text of the Modal.',
-            control: {
-                type: 'text',
-            },
-        },
-        bodyContent: {
-            name: 'Modal body text',
-            description: 'Sets the body content of the Modal.',
-            control: {
-                type: 'text',
-            },
-        },
-        showModal: {
-            name: 'Show Modal',
-            description: 'Toggles if the Modal is displayed.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        prevent: {
-            name: 'Prevent',
-            description: 'Disables closing Modal on clicking on overlay area.',
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-    args: {
-        actionsPosition: 'Static',
-        size: 'Large',
-        headerText: 'The buttons for the Modal only works in the canvas tab',
-        bodyContent: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-        showModal: true,
-        prevent: false,
-    },
-};
-const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-};
-const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal, prevent }) => formatHtmlPreview(`
- <!-- The button below is just for demo purposes -->
-  <tds-button id="my-modal-button" text="Open Modal"></tds-button>
-  
-  
-  <tds-modal 
-    header="${headerText}"
-    selector="#my-modal-button"   
-    ${showModal ? 'show' : ''} 
-    id="my-modal" size="${sizeLookUp[size]}" 
-    actions-position="${actionsPosition.toLowerCase()}"
-    prevent="${prevent}"
-  >          
-      <span slot="body">
-          ${bodyContent}
-      </span>      
-      <span slot='actions' class='tds-u-flex tds-u-gap2'>
-        <tds-button data-dismiss-modal size="md" text="Delete" variant="danger"></tds-button>
-        <tds-button data-dismiss-modal size="md" text="Cancel" variant="secondary"></tds-button>
-      </span>      
-  </tds-modal>
-  
-  <!-- The script below is just for demo purposes -->
-  <script>
-    modal = document.querySelector('tds-modal')
-    modal.addEventListener('tdsClose', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const Default = ModalTemplate.bind({});

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

@@ -1,28 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/modal/test/default/index.html';
-test.describe('tds-modal-default', () => {
-    test('renders modal correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsModal = page.getByTestId('tds-modal-testid');
-        await expect(tdsModal).toHaveCount(1);
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('modal contains three buttons', async ({ page }) => {
-        await page.goto(componentTestPath);
-        // Locate the buttons within the modal
-        const modalButtons = page.getByRole('button');
-        // Assert that there are three buttons
-        await expect(modalButtons).toHaveCount(3);
-    });
-    test('modal contains a header and a body', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const modalHeader = page.getByText('This is a header', { exact: true });
-        const modalBody = page.getByText('Where you can put anything you want!', {
-            exact: true,
-        });
-        // Assert that there are three buttons
-        await expect(modalHeader).toBeVisible();
-        await expect(modalBody).toBeVisible();
-    });
-});

package/dist/collection/components/modal/test/open-close/modal.e2e.js

@@ -1,63 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/modal/test/open-close/index.html';
-test.describe('tds-modal-open', () => {
-    test.beforeEach(async ({ page }) => {
-        await page.goto(componentTestPath);
-    });
-    test('Modal is closed by default', async ({ page }) => {
-        const tdsModal = page.locator('tds-modal');
-        await expect(tdsModal).toBeHidden(); // Modal is initially closed
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('[Open Modal] button exists', async ({ page }) => {
-        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-        await expect(openModalButton).toBeVisible(); // [Open Modal] button exists and is visible
-    });
-    test('Open modal using selector', async ({ page }) => {
-        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-        await openModalButton.dispatchEvent('click');
-        const modalSelector = 'tds-modal'; // Adjust the selector to match your modal's attributes
-        await page.waitForSelector(modalSelector);
-        const modal = await page.locator(modalSelector);
-        await expect(modal).toBeVisible(); // Modal should be open when using selector
-    });
-    test('Clicking [Open Modal] button opens the modal', async ({ page }) => {
-        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-        const tdsModal = page.locator('tds-modal');
-        await openModalButton.dispatchEvent('click');
-        // Assert that the modal is visible
-        await expect(tdsModal).toBeVisible();
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('Clicking [Delete] button closes the modal', async ({ page }) => {
-        const deleteButton = page.getByRole('button').filter({ hasText: /Delete/ });
-        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-        const tdsModal = page.locator('tds-modal');
-        await openModalButton.dispatchEvent('click');
-        await expect(tdsModal).toBeVisible();
-        await expect(deleteButton).toBeVisible();
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-        await deleteButton.dispatchEvent('click'); // Click [Delete] button
-        await expect(deleteButton).toBeHidden(); // button is removed
-        await expect(tdsModal).toBeHidden();
-    });
-    test('Clicking [Close] button closes the modal', async ({ page }) => {
-        const closeButton = page.locator('button[aria-label="close"]');
-        const tdsModal = page.locator('tds-modal');
-        // Now, close the modal
-        await closeButton.dispatchEvent('click');
-        await expect(tdsModal).toBeHidden(); // Modal should be closed after clicking Close
-    });
-    test('Clicking on area outside modal closes the modal', async ({ page }) => {
-        const tdsModalBackdrop = page.locator('.tds-modal-backdrop');
-        const tdsModal = page.locator('tds-modal');
-        // First, open the modal
-        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-        await openModalButton.dispatchEvent('click');
-        await expect(tdsModal).toBeVisible(); // Modal should be open
-        // Now, close the modal by clicking outside
-        await tdsModalBackdrop.dispatchEvent('click');
-        await expect(tdsModal).toBeHidden(); // Modal should be closed after clicking outside
-    });
-});

package/dist/collection/components/modal/test/prevent-true/modal.e2e.js

@@ -1,13 +0,0 @@
-import { test, expect } from "@playwright/test";
-const componentTestPath = 'src/components/modal/test/prevent-true/index.html';
-test.describe('tds-modal-open', () => {
-    test.beforeEach(async ({ page }) => {
-        await page.goto(componentTestPath);
-    });
-    test('Prevent = true: Clicking on area outside modal does not close the modal', async ({ page, }) => {
-        const tdsModalBackdrop = page.locator('.tds-modal-backdrop');
-        const tdsModal = page.locator('tds-modal');
-        await tdsModalBackdrop.dispatchEvent('click');
-        await expect(tdsModal).toBeVisible(); // Modal should remain open when prevent is true
-    });
-});

package/dist/collection/components/popover-canvas/popover-canvas.stories.js

@@ -1,92 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Popover Canvas`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-    },
-    argTypes: {
-        canvasPosition: {
-            name: 'Canvas position',
-            description: 'Sets the position of the Popover Canvas.',
-            control: {
-                type: 'select',
-            },
-            options: [
-                'Bottom',
-                'Bottom start',
-                'Bottom end',
-                'Top',
-                'Top start',
-                'Top end',
-                'Left',
-                'Left start',
-                'Left end',
-                'Right',
-                'Right start',
-                'Right end',
-                'Auto',
-            ],
-            table: {
-                defaultValue: { summary: 'auto' },
-            },
-        },
-    },
-    args: {
-        canvasPosition: 'Auto',
-    },
-};
-const ComponentPopoverCanvas = ({ canvasPosition }) => {
-    const canvasPosLookup = {
-        'Bottom': 'bottom',
-        'Bottom start': 'bottom-start',
-        'Bottom end': 'bottom-end',
-        'Top': 'top',
-        'Top start': 'top-start',
-        'Top end': 'top-end',
-        'Left': 'left',
-        'Left start': 'left-start',
-        'Left end': 'left-end',
-        'Right': 'right',
-        'Right start': 'right-start',
-        'Right end': 'right-end',
-        'Auto': 'auto',
-    };
-    return formatHtmlPreview(`
-      <style>
-        /* demo-wrapper and demo-styles is for demonstration purposes only */
-        .demo-wrapper {
-          display: flex;
-          flex-wrap; nowrap;
-          align-items: center;
-        }
-      </style>
-
-      <!-- The 'referenceEl' prop can be used instead of 'selector', 
-      wich might be preferable in frameworks like React -->
-      <tds-popover-canvas
-        placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger"
-        class="tds-u-p2">
-        <h2 class="tds-headline-02 tds-u-mt0">A Popover Canvas!</h2>
-        <p class="tds-body-01">
-          Where you can put anything you want!
-        </p>  
-        <tds-link>
-          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
-        </tds-link>
-      </tds-popover-canvas>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span class="tds-u-mr2">Click icon for Popover Canvas</span>
-        
-        <tds-button aria-label="menu" only-icon id="trigger" type="secondary" size="sm">
-          <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-        </tds-button>
-      </div>
-    `);
-};
-export const Default = ComponentPopoverCanvas.bind({});

package/dist/collection/components/popover-canvas/test/default/popover-canvas.e2e.js

@@ -1,30 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-canvas/test/default/index.html';
-test.describe('tds-popover-canvas-default', () => {
-    test('renders default popover-canvas correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        await triggerButton.click();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('make sure popover canvas shows after trigger button is pressed and content is displayed', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        const popoverCanvasHeader = page.getByRole('heading');
-        const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
-            exact: true,
-        });
-        const popoverCanvasLink = page.getByRole('link');
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeHidden();
-        await expect(popoverCanvasBody).toBeHidden();
-        await expect(popoverCanvasLink).toBeHidden();
-        await triggerButton.click();
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeVisible();
-        await expect(popoverCanvasBody).toBeVisible();
-        await expect(popoverCanvasLink).toBeVisible();
-    });
-});

package/dist/collection/components/popover-canvas/test/show-false/popover-canvas.e2e.js

@@ -1,30 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-canvas/test/show-false/index.html';
-test.describe('tds-popover-canvas-show-false', () => {
-    test('renders show=false popover-canvas correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        await triggerButton.click();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('make sure popover canvas does not show after trigger button is pressed and content is not displayed before or after button click', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        const popoverCanvasHeader = page.getByRole('heading');
-        const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
-            exact: true,
-        });
-        const popoverCanvasLink = page.getByRole('link');
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeHidden();
-        await expect(popoverCanvasBody).toBeHidden();
-        await expect(popoverCanvasLink).toBeHidden();
-        await triggerButton.click();
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeHidden();
-        await expect(popoverCanvasBody).toBeHidden();
-        await expect(popoverCanvasLink).toBeHidden();
-    });
-});

package/dist/collection/components/popover-canvas/test/show-true/popover-canvas.e2e.js

@@ -1,30 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-canvas/test/show-true/index.html';
-test.describe('tds-popover-canvas-show-true', () => {
-    test('renders show=true popover-canvas correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        await triggerButton.click();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('make sure the popover canvas content is displayed both before and after the trigger button is pressed', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button');
-        const popoverCanvasHeader = page.getByRole('heading');
-        const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
-            exact: true,
-        });
-        const popoverCanvasLink = page.getByRole('link');
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeVisible();
-        await expect(popoverCanvasBody).toBeVisible();
-        await expect(popoverCanvasLink).toBeVisible();
-        await triggerButton.click();
-        await expect(triggerButton).toBeVisible();
-        await expect(popoverCanvasHeader).toBeVisible();
-        await expect(popoverCanvasBody).toBeVisible();
-        await expect(popoverCanvasLink).toBeVisible();
-    });
-});

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -1,146 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import popoverMenuReadme from "./readme.md";
-import popoverMenuItemReadme from "./popover-menu-item/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Popover Menu`,
-    parameters: {
-        layout: 'centered',
-        notes: { 'Popover Menu': popoverMenuReadme, 'Popover Menu Item': popoverMenuItemReadme },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        menuPosition: {
-            name: 'Menu position',
-            description: 'Sets the position of the Popover Menu.',
-            control: {
-                type: 'select',
-            },
-            options: [
-                'Bottom',
-                'Bottom start',
-                'Bottom end',
-                'Top',
-                'Top start',
-                'Top end',
-                'Left',
-                'Left start',
-                'Left end',
-                'Right',
-                'Right start',
-                'Right end',
-                'Auto',
-            ],
-            table: {
-                defaultValue: { summary: 'auto' },
-            },
-        },
-        icons: {
-            name: 'Icons',
-            description: 'Shows the Popover Menu with/without icons.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        fluidWidth: {
-            name: 'Fluid width',
-            description: 'Unsets the width of the Popover Menu.',
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-    args: {
-        menuPosition: 'Auto',
-        icons: false,
-        fluidWidth: false,
-    },
-};
-const Template = ({ menuPosition, icons, fluidWidth }) => {
-    const menuPosLookup = {
-        'Bottom': 'bottom',
-        'Bottom start': 'bottom-start',
-        'Bottom end': 'bottom-end',
-        'Top': 'top',
-        'Top start': 'top-start',
-        'Top end': 'top-end',
-        'Left': 'left',
-        'Left start': 'left-start',
-        'Left end': 'left-end',
-        'Right': 'right',
-        'Right start': 'right-start',
-        'Right end': 'right-end',
-        'Auto': 'auto',
-    };
-    return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <tds-popover-menu
-      id="my-popover-menu"
-      placement="${menuPosLookup[menuPosition]}"
-      ${fluidWidth ? 'fluid-width' : ''}
-      selector="#my-popover-button"
-      >
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} ${fluidWidth ? 'The menu width adjusts to the widest word' : 'Action'} </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item disabled>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-    </tds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="tds-u-mr2">Click icon for Popover Menu</span>
-      
-      <tds-button aria-label="menu" only-icon id="my-popover-button" type="ghost" size="sm">
-        <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-      </tds-button>
-    </div>
-    
-    
-    `);
-};
-export const Default = Template.bind({});

package/dist/collection/components/popover-menu/test/default/popover-menu.e2e.js

@@ -1,60 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-menu/test/default/index.html';
-test.describe('tds-popover-menu-default', () => {
-    test('renders default popover-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        await triggerButton.click();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking the trigger button should open the popover menu dialog', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        const dropDownList = page.getByRole('list');
-        await expect(triggerButton).toBeVisible();
-        await expect(dropDownList).toBeHidden();
-        await triggerButton.click();
-        await expect(triggerButton).toBeVisible();
-        await expect(dropDownList).toBeVisible();
-        const tdsMenuItemListItems = dropDownList.getByRole('listitem');
-        await expect(tdsMenuItemListItems).toHaveCount(9);
-        const tdsMenuItemListItemLinks = tdsMenuItemListItems.getByRole('link');
-        const tdsMenuItemListItemButtons = tdsMenuItemListItems.getByRole('button');
-        await expect(tdsMenuItemListItemLinks).toHaveCount(7);
-        await expect(tdsMenuItemListItemButtons).toHaveCount(2);
-    });
-    test('hover active menu item -> active item should be clickable', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        const dropDownList = page.getByRole('list');
-        await triggerButton.click();
-        const tdsMenuItemListItemLinks = page
-            .getByRole('listitem')
-            .filter({ has: page.getByRole('link') });
-        const myEventSpy = await page.spyOnEvent('click');
-        await tdsMenuItemListItemLinks.first().click();
-        expect(myEventSpy).toHaveReceivedEvent();
-        /* Expect dropdown not to close after clicking the menu item */
-        await expect(dropDownList).toBeVisible();
-    });
-    test('hover inactive menu item -> inactive menu item should not be clickable', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        await triggerButton.click();
-        const tdsMenuItemListItemButtons = page
-            .getByRole('listitem')
-            .filter({ has: page.getByRole('button') });
-        await expect(tdsMenuItemListItemButtons).toHaveCount(2);
-        await expect(tdsMenuItemListItemButtons.first()).toHaveAttribute('disabled');
-        await expect(tdsMenuItemListItemButtons.last()).not.toHaveAttribute('disabled');
-    });
-    test('icons are not existing for menu items', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsMenuItemListItemIcons = page
-            .getByRole('listitem')
-            .filter({ has: page.getByRole('img') });
-        await expect(tdsMenuItemListItemIcons).toHaveCount(0);
-    });
-});

package/dist/collection/components/popover-menu/test/icons-fluid/popover-menu.e2e.js

@@ -1,27 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-menu/test/icons-fluid/index.html';
-test.describe('tds-popover-menu-icons-fluid', () => {
-    test('renders icons-fluid popover-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        await triggerButton.click();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('menu item "The menu with adjusts to the widest word" exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsMenuItemListLongText = page.getByText('The menu width adjusts to the widest word');
-        await expect(tdsMenuItemListLongText).toHaveCount(1);
-        await expect(tdsMenuItemListLongText).toBeHidden();
-    });
-    test('icons are existing for menu items', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-        await triggerButton.click();
-        const tdsMenuItemListItemIcons = page
-            .getByRole('listitem')
-            .filter({ has: page.getByRole('img') });
-        await expect(tdsMenuItemListItemIcons).toHaveCount(9);
-    });
-});