@scania/tegel 1.4.0 → 1.6.0

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

@@ -1,15 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/banner/test/basic/index.html';
-test.describe('tds-banner-basic', () => {
-    test('renders basic banner correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('the close button should be visible', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const closeButton = page.getByRole('button');
-        await expect(closeButton).toBeVisible();
-    });
-});

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

@@ -1,37 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/banner/test/default/index.html';
-test.describe('tds-banner-default', () => {
-    test('renders default banner correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('header exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const bannerHeader = page.getByText('This is a header text area', { exact: true });
-        await expect(bannerHeader).toBeVisible();
-    });
-    test('text exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const bannerSubheader = page.getByText('This is the subheader text area', { exact: true });
-        await expect(bannerSubheader).toBeVisible();
-    });
-    test('icons exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const images = page.getByRole('img');
-        await expect(images).toHaveCount(2);
-    });
-    test('link example exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const linkExample = page.getByRole('link');
-        await expect(linkExample).toHaveCount(1);
-        await expect(linkExample).toBeVisible();
-    });
-    test('close button exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const closeButton = page.getByRole('button');
-        await expect(closeButton).toHaveCount(1);
-        await expect(closeButton).toBeVisible();
-    });
-});

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

@@ -1,15 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/banner/test/error/index.html';
-test.describe('tds-banner-error', () => {
-    test('renders error banner correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('icons exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const images = page.getByRole('img');
-        await expect(images).toHaveCount(2);
-    });
-});

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

@@ -1,15 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/banner/test/information/index.html';
-test.describe('tds-banner-information', () => {
-    test('renders information banner correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('icons exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const images = page.getByRole('img');
-        await expect(images).toHaveCount(2);
-    });
-});

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

@@ -1,49 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Block`,
-    parameters: {
-        layout: 'padded',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background. ',
-            control: {
-                type: 'radio',
-            },
-            options: ['Inherit from parent', 'Primary', 'Secondary'],
-            table: {
-                defaultValue: { summary: 'Inherit from parent' },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-    },
-};
-const Template = ({ modeVariant }) => formatHtmlPreview(`
-      <tds-block ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-        <h2 class="tds-headline-02">Block</h2>
-        <p class="tds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-          <tds-block>
-              <h3 class="tds-headline-04">Nested block</h3>
-              <p class="tds-detail-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
-          </tds-block>
-      </tds-block>
-    `);
-export const Default = Template.bind({});

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

@@ -1,36 +0,0 @@
-import itemReadme from "./breadcrumb/readme.md";
-import readme from "./readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Breadcrumbs`,
-    parameters: {
-        notes: { Breadcrumbs: readme, Breadcrumb: itemReadme },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-};
-const Template = () => formatHtmlPreview(`   
-      <tds-breadcrumbs>
-        <tds-breadcrumb>
-          <a href="#">Page 1</a>
-        </tds-breadcrumb>
-        <tds-breadcrumb>
-          <a href="#">Page 2</a>
-        </tds-breadcrumb>
-        <tds-breadcrumb current>
-          <a href="#">Page 3</a>
-        </tds-breadcrumb>
-      </tds-breadcrumbs>
-      `);
-export const Default = Template.bind({});

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

@@ -1,33 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/breadcrumbs/test/default/index.html';
-test.describe('tds-breadcrumbs-default', () => {
-    test('renders default breadcrumbs correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('items Page 1, Page 2, Page 3 exist on the page', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const navigation = page.getByRole('navigation');
-        await expect(navigation).toHaveCount(1);
-        const listItems = page.getByRole('listitem');
-        await expect(listItems).toHaveCount(3);
-        const pageOne = page.getByRole('link').filter({ hasText: 'Page 1' });
-        const pageTwo = page.getByRole('link').filter({ hasText: 'Page 2' });
-        const pageThree = page.getByRole('link').filter({ hasText: 'Page 3' });
-        await expect(pageOne).toHaveCount(1);
-        await expect(pageOne).toBeVisible();
-        await expect(pageTwo).toHaveCount(1);
-        await expect(pageTwo).toBeVisible();
-        await expect(pageThree).toHaveCount(1);
-        await expect(pageThree).toBeVisible();
-    });
-    test('page 3 item should be able to become focused', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const pageThree = page.getByText(/Page 3/);
-        await pageThree.focus();
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,185 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { iconsNames } from "../icon/iconsArray";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Button`,
-    parameters: {
-        notes: readme,
-        layout: 'padded',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Inherit from parent', 'Primary', 'Secondary'],
-            table: {
-                defaultValue: { summary: 'Inherit from parent' },
-            },
-        },
-        variant: {
-            name: 'Variant',
-            description: 'Four different Button variants to help the user to distinguish the level of importance of the task they represent.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-            table: {
-                defaultValue: { summary: 'primary' },
-            },
-        },
-        type: {
-            name: 'Type',
-            description: 'Native types of button',
-            control: {
-                type: 'radio',
-            },
-            options: ['Button', 'Submit', 'Reset'],
-            table: {
-                defaultValue: { summary: 'button' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Button.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small', 'Extra small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        text: {
-            name: 'Text',
-            description: 'Sets the text to be displayed on the Button.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'onlyIcon', truthy: false },
-        },
-        fullbleed: {
-            name: 'Fullbleed',
-            description: 'Sets a fluid width on the Button.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-            if: { arg: 'onlyIcon', truthy: false },
-        },
-        onlyIcon: {
-            name: 'Only Icon',
-            description: 'Displays only the icon and excludes any text from the Button.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-            if: { arg: 'size', neq: 'Extra small' },
-        },
-        icon: {
-            name: 'Icon',
-            description: 'Sets icon to be displayed on the Button. Choose "none" to exclude the icon.',
-            control: {
-                type: 'select',
-            },
-            options: ['none', ...iconsNames],
-            if: { arg: 'size', neq: 'Extra small' },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Button.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        type: 'Button',
-        variant: 'Primary',
-        size: 'Large',
-        text: 'Button',
-        fullbleed: false,
-        onlyIcon: false,
-        icon: 'none',
-        disabled: false,
-    },
-};
-const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
-    const variantLookUp = {
-        Primary: 'primary',
-        Secondary: 'secondary',
-        Ghost: 'ghost',
-        Danger: 'danger',
-    };
-    const sizeLookUp = {
-        'Large': 'lg',
-        'Medium': 'md',
-        'Small': 'sm',
-        'Extra small': 'xs',
-    };
-    const modeVariantLookup = {
-        Primary: 'primary',
-        Secondary: 'secondary',
-    };
-    const typeLookup = {
-        Button: 'button',
-        Submit: 'submit',
-        Reset: 'reset',
-    };
-    return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-    <tds-button
-      type='${typeLookup[type]}'
-      variant="${variantLookUp[variant]}"
-      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
-      ${!onlyIcon ? `text="${text}"` : ''}
-      ${modeVariant !== 'Inherit from parent'
-        ? `mode-variant="${modeVariantLookup[modeVariant]}"`
-        : ''}
-    >
-        ${onlyIcon || (icon && icon !== 'none')
-        ? `
-            <tds-icon slot="icon" size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
-            `
-        : ''}        
-    </tds-button>
-  </div>
-  <script>
-        document.querySelector('tds-button').addEventListener('click', (event) => {
-          console.log(event)
-        })
-  </script>
-  `);
-};
-/** Button as a web component */
-export const Default = WebComponentTemplate.bind({});

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

@@ -1,35 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/basic/index.html';
-test.describe('tds-button-basic', () => {
-    test('renders basic button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('component receives click event', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByRole('button');
-        const myEventSpy = await page.spyOnEvent('click');
-        await button.click();
-        expect(myEventSpy).toHaveReceivedEvent();
-    });
-    test('expect button to be of role button', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByRole('button');
-        await expect(button).toHaveCount(1);
-    });
-    test('Text is displayed', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByText('Button', { exact: true });
-        await expect(button).toBeVisible();
-    });
-    test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByText('Button', { exact: true });
-        const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-        expect(buttonHeight).toBe('56px');
-    });
-});

package/dist/collection/components/button/test/danger/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/danger/index.html';
-test.describe('tds-button-danger', () => {
-    test('renders danger button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('Check so that height is correct to sm measurements', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByText('Button', { exact: true });
-        const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-        expect(buttonHeight).toBe('40px');
-    });
-});

package/dist/collection/components/button/test/disabled/button.e2e.js

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/disabled/index.html';
-test.describe('tds-button-disabled', () => {
-    test('renders disabled button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('disabled button should be disabled', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check if disabled */
-        const button = page.getByRole('button');
-        await expect(button).toBeDisabled();
-    });
-    test('the cursor should be not-allowed', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid').getByRole('button');
-        const buttonCursorState = await button.evaluate((style) => getComputedStyle(style).cursor);
-        expect(buttonCursorState).toBe('not-allowed');
-    });
-});

package/dist/collection/components/button/test/ghost/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/ghost/index.html';
-test.describe('tds-button-ghost', () => {
-    test('renders ghost button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('Check so that height is correct to md measurements', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByText('Button', { exact: true });
-        const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-        expect(buttonHeight).toBe('24px');
-    });
-});

package/dist/collection/components/button/test/icon/button.e2e.js

@@ -1,38 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/icon/index.html';
-test.describe('tds-button-icon', () => {
-    test('renders icon button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('icon should exist', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const icon = page.getByRole('img');
-        await expect(icon).toBeVisible();
-    });
-    test('Check so that height and width is correct to lg/default measurements with a single button', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByRole('button');
-        const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-        expect(buttonHeight).toBe('56px');
-        const buttonWidth = await button.evaluate((style) => getComputedStyle(style).width);
-        expect(buttonWidth).toBe('56px');
-        const icon = page.getByRole('img');
-        const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-        expect(iconHeight).toBe('20px');
-        const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-        expect(iconWidth).toBe('20px');
-    });
-    test('Check so that height and width is correct to lg/default measurements with a single button for the icon', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const icon = page.getByRole('img');
-        const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-        expect(iconHeight).toBe('20px');
-        const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-        expect(iconWidth).toBe('20px');
-    });
-});

package/dist/collection/components/button/test/secondary/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/secondary/index.html';
-test.describe('tds-button-secondary', () => {
-    test('renders secondary button correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByTestId('tds-button-testid');
-        await expect(button).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('Check so that height is correct to md measurements', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const button = page.getByText('Button', { exact: true });
-        const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-        expect(buttonHeight).toBe('48px');
-    });
-});