@scania/tegel 1.4.0 → 1.6.0

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

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

@@ -1,20 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-menu/test/show/index.html';
-test.describe('tds-popover-menu-show', () => {
-    test('renders show=true popover-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking the trigger button should keep the popover menu dialog open when it is open by default', 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).toBeVisible();
-        await triggerButton.click();
-        await expect(triggerButton).toBeVisible();
-        await expect(dropDownList).toBeVisible();
-    });
-});

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

@@ -1,20 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/popover-menu/test/show-false/index.html';
-test.describe('tds-popover-menu-show-false', () => {
-    test('renders show=false popover-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking the trigger button should not open the popover menu dialog when show is false', 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).toBeHidden();
-    });
-});

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -1,91 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Radio Button`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        label: {
-            name: 'Label text',
-            description: 'Sets the label for the Radio Button.',
-            controls: {
-                type: 'text',
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Radio Button.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        label: 'Label text',
-        disabled: false,
-    },
-};
-const Template = ({ label, disabled }) => formatHtmlPreview(`
-  <style>
-  .demo-fieldset-reset { 
-    border: 0;
-    margin: 0;
-    min-width: 0;
-    padding: 0; 
-  }
-</style>
-
-  <fieldset class="demo-fieldset-reset">
-  <tds-radio-button 
-    name="rb-example"
-    value="option1"
-    radio-id="option-1"
-    required=false
-    ${disabled ? 'disabled' : ''}
-    checked="true" 
-  >
-    <div slot="label">
-      ${label} 1
-    </div>
-  </tds-radio-button>
-
-  <tds-radio-button
-    name="rb-example"
-    value="option2"
-    radio-id="option-2"
-    required=false
-    ${disabled ? 'disabled' : ''} 
-  >
-    <div slot="label">
-      ${label} 2
-    </div>
-  </tds-radio-button>
-    
-  </fieldset>
-
-  <!-- Script tag with eventlistener for demo purposes. -->
-  <script>
-  document.addEventListener('tdsChange', (event) => {
-    console.log(event)
-  })
-  </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,224 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeSideMenuUser from "./side-menu-user/readme.md";
-import readmeSideMenuOverlay from "./side-menu-overlay/readme.md";
-import readmeSideMenuCloseButton from "./side-menu-close-button/readme.md";
-import readmeSideMenuCollapseButton from "./side-menu-collapse-button/readme.md";
-import readmeSideMenuDropdown from "./side-menu-dropdown/readme.md";
-import readmeSideMenuItem from "./side-menu-item/readme.md";
-import readmeSideMenuDropdownList from "./side-menu-dropdown-list/readme.md";
-import readmeSideMenuDropdownListItem from "./side-menu-dropdown-list-item/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Side Menu`,
-    parameters: {
-        notes: {
-            'Side Menu': readme,
-            'Side Menu Item': readmeSideMenuItem,
-            'Side Menu Dropdown': readmeSideMenuDropdown,
-            'Side Menu Dropdown List': readmeSideMenuDropdownList,
-            'Side Menu Dropdown List Item': readmeSideMenuDropdownListItem,
-            'Side Menu User': readmeSideMenuUser,
-            'Side Menu Collapse Button': readmeSideMenuCollapseButton,
-            'Side Menu Close Button': readmeSideMenuCloseButton,
-            'Side Menu Overlay': readmeSideMenuOverlay,
-        },
-        layout: 'fullscreen',
-        docs: {
-            source: {
-                state: 'closed',
-            },
-        },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        persistent: {
-            name: 'Persistent',
-            description: 'Set the Side Menu to always show. This should be used if there are more navigation items to show than can always fit in the Header, more than three Header items is a good rule of thumb.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        collapsible: {
-            name: 'Collapsible',
-            description: 'Make the Side Menu collapsible',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'persistent', truthy: true },
-        },
-        collapsed: {
-            name: 'Collapsed',
-            description: 'Collapsed Side Menu',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'collapsible', truthy: true },
-        },
-    },
-    args: {
-        persistent: true,
-        collapsible: false,
-        collapsed: false,
-    },
-};
-const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
-    <script>
-    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
-    window.demoSideMenu = document.querySelector('#demo-side-menu');
-  </script>
-  <style>
-    :root {
-      --app-bar-height: 64px;
-    }
-
-    /* Note: to make the layout fill the entire viewport height you'll need to set the */
-    /* height of the parent element and all of its ancestors to 100%. */
-    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
-    .demo-layout {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .demo-header {
-      position: sticky;
-      top: 0;
-    }
-    .demo-wrap-side-menu-and-main {
-      display: flex;
-      flex-grow: 1;
-    }
-    ${persistent
-    ? `
-        /* the lg breakpoint is used here to match the breakpoint used in the Header */
-    @media (min-width: 992px) {
-      #demo-side-menu {
-        /* We suggest you attach the persistent Side Menu to your layout like this: */
-        height: calc(100vh - var(--app-bar-height));
-        position: sticky;
-        top: var(--app-bar-height);
-        left: 0px;
-      }
-    }`
-    : ''}
-    /* If an extra button in the Header is required except on */
-    /* very narrow screens, you can use classes like these: */
-    .demo-hide {
-      display: none;
-    }
-
-    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
-    @media (min-width: 375px) {
-      .demo-xs-hide {
-        display: none;
-      }
-      .demo-xs-show {
-        display: block;
-      }
-    }
-  </style>
-
-  <div class="demo-layout">
-    <tds-header class="demo-header">
-      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
-
-      <tds-header-title>
-        My Application
-      </tds-header-title>
-
-      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
-
-      <tds-header-brand-symbol slot="end">
-        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-      </tds-header-brand-symbol>
-    </tds-header>
-
-    <div class="demo-wrap-side-menu-and-main">
-      <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu ${collapsed ? 'collapsed' : ''} aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
-
-        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="timer" size="24px"></tds-icon>
-            About us
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="truck" size="24px"></tds-icon>
-            Trucks
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-dropdown default-open selected>
-          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
-          <span slot="label">
-            Wheel types
-          </span>
-          <tds-side-menu-dropdown-list>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">
-                Hub-centric wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com" aria-current="page">
-                Rim wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="star" size="24px"></tds-icon>
-            Values
-          </button>
-        </tds-side-menu-item>
-
-        ${collapsible
-    ? `<tds-side-menu-collapse-button slot="sticky-end">
-          Collapse  
-        </tds-side-menu-collapse-button>`
-    : ''}
-
-      </tds-side-menu>
-
-      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
-        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
-        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
-
-        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
-
-        <p><i>Note: The collapse button is optional.</i></p>
-        <button id="test">Toggle the collapsed state programatically</button>
-      </main>
-    </div>
-  </div>
-  <script>
-    sideMenu = document.querySelector('tds-side-menu')
-    document.querySelector('#test')?.addEventListener('click', ()=> {
-      sideMenu.collapsed = !sideMenu.collapsed;
-    })
-
-    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-export const Default = Template.bind({});

package/dist/collection/components/side-menu/test/collapsible/side-menu.e2e.js

@@ -1,28 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/side-menu/test/collapsible/index.html';
-test.describe('tds-side-menu-collapsible', () => {
-    test('renders collapsible side-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const sideMenuNavigation = page.getByRole('navigation');
-        await expect(sideMenuNavigation).toHaveCount(1);
-        await expect(sideMenuNavigation).toBeVisible();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('collapse button exists on the bottom of side menu', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
-        await expect(sideMenuCollapseButton).toHaveCount(1);
-        await expect(sideMenuCollapseButton).toBeVisible();
-    });
-    test('click collapse button to close the menu', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
-        await sideMenuCollapseButton.click();
-        await expect(sideMenuCollapseButton).toHaveCount(1);
-        await expect(sideMenuCollapseButton).toBeVisible();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,38 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/side-menu/test/default/index.html';
-test.describe('tds-side-menu-default', () => {
-    test('renders default side-menu correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const sideMenuNavigation = page.getByRole('navigation');
-        await expect(sideMenuNavigation).toHaveCount(1);
-        await expect(sideMenuNavigation).toBeVisible();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('all side menu buttons to be visible', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const sideMenuButtons = page.getByRole('button');
-        await expect(sideMenuButtons).toHaveCount(4);
-        const promises = [];
-        for (let i = 0; i < 4; i++) {
-            promises.push(expect(sideMenuButtons.nth(i)).toBeVisible());
-        }
-        await Promise.all(promises);
-    });
-    test('wheel type list is open by default and under Wheel types there are two sublink', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        /* Make sure first list item is there and visible */
-        const sideMenuWheelTypeListItemOne = page
-            .getByRole('listitem')
-            .getByRole('link', { name: /Hub-centric wheel/ });
-        await expect(sideMenuWheelTypeListItemOne).toHaveCount(1);
-        await expect(sideMenuWheelTypeListItemOne).toBeVisible();
-        /* Make sure the second list item is there and visible */
-        const sideMenuWheelTypeListItemTwo = page
-            .getByRole('listitem')
-            .getByRole('link', { name: /Rim wheel/ });
-        await expect(sideMenuWheelTypeListItemTwo).toHaveCount(1);
-        await expect(sideMenuWheelTypeListItemTwo).toBeVisible();
-    });
-});