@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,145 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-import readme from "./readme.md";
-import readmeItem from "./footer-item/readme.md";
-import readmeLinkGroup from "./footer-group/readme.md";
-export default {
-    title: `${ComponentsFolder}/Footer`,
-    parameters: {
-        notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
-        layout: 'fullscreen',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-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' },
-            },
-        },
-        topPart: {
-            name: 'Top part',
-            description: 'Adds the top part of the Footer with more links.',
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        topPart: false,
-    },
-};
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-    <main>
-      <div class="tds-u-p3 ">
-        <div class="tds-body-01">
-          Resize the window to see how the Footer behaves on smaller/bigger screens.
-        </div>
-      </div>
-    </main>
-    <tds-footer
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      ${topPart
-    ? `
-      <div slot="top">
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-      `
-    : ''}
-      <div slot="start">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-      <div slot="end">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-    </tds-footer>
-  
-  `);
-export const Default = Template.bind({});

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

@@ -1,34 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/footer/test/default/index.html';
-test.describe('tds-footer-default', () => {
-    test('renders default footer correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const footerComponent = page.locator('footer');
-        await expect(footerComponent).toHaveCount(1);
-        /** Check screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('Footer contains four links "Link text"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const footerLinks = page.getByRole('link').filter({ hasText: /Link text/ });
-        await expect(footerLinks).toHaveCount(4);
-    });
-    test('Footer contains three truck icons', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const footerTruckIcons = page.getByRole('link').filter({ has: page.getByRole('img') });
-        await expect(footerTruckIcons).toHaveCount(3);
-    });
-    test('Footer contains copyright text', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const footerCopyrightText = page.getByText(`Copyright © ${new Date().getFullYear()} Scania`);
-        await expect(footerCopyrightText).toHaveCount(1);
-        await expect(footerCopyrightText).toBeVisible();
-    });
-    test('Footer contains brand label (Scania)', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const footerBrandText = page.getByText('Scania', { exact: true });
-        await expect(footerBrandText).toHaveCount(1);
-        await expect(footerBrandText).toBeHidden();
-    });
-});

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

@@ -1,82 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeHamburger from "./header-hamburger/readme.md";
-import readmeTitle from "./header-title/readme.md";
-import readmeItem from "./header-item/readme.md";
-import readmeDropdown from "./header-dropdown/readme.md";
-import readmeDropdownList from "./header-dropdown-list/readme.md";
-import readmeDropdownListItem from "./header-dropdown-list-item/readme.md";
-import readmeDropdownListUser from "./header-dropdown-list-user/readme.md";
-import readmeBrandSymbol from "./header-brand-symbol/readme.md";
-import readmeLauncher from "./header-launcher/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Header`,
-    parameters: {
-        notes: {
-            'Header': readme,
-            'Header hamburger': readmeHamburger,
-            'Header title': readmeTitle,
-            'Header item': readmeItem,
-            'Header dropdown': readmeDropdown,
-            'Header dropdown list': readmeDropdownList,
-            'Header dropdown list item': readmeDropdownListItem,
-            'Header dropdown list user': readmeDropdownListUser,
-            'Header launcher': readmeLauncher,
-            'Header brand symbol': readmeBrandSymbol,
-        },
-        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: {},
-    args: {},
-};
-const Template = () => formatHtmlPreview(`
-  <tds-header>
-    <tds-header-title>
-      Example: default
-    </tds-header-title>
-
-    <tds-header-launcher slot="end">
-      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
-      <tds-header-launcher-list>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Trucklyfe</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">HaulHub</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">WheelWizz</a>
-        </tds-header-launcher-list-item>
-      </tds-header-launcher-list>
-    </tds-header-launcher>
-
-
-    <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>
-  
-  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
-    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
-  </main>
-  `);
-export const Default = Template.bind({});

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

@@ -1,44 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/header/test/default/index.html';
-test.describe('tds-header-default', () => {
-    test('renders default header correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const headerComponent = page.getByRole('navigation');
-        await expect(headerComponent).toHaveCount(1);
-        await expect(headerComponent).toBeVisible();
-        /** Check screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('title exists and is "Example: default"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const headerComponentHeaderText = page.getByText('Example: default');
-        await expect(headerComponentHeaderText).toHaveCount(1);
-        await expect(headerComponentHeaderText).toBeVisible();
-    });
-    test('luncher button icon exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const headerComponentLuncherButton = page.getByRole('button');
-        await expect(headerComponentLuncherButton).toHaveCount(1);
-        await expect(headerComponentLuncherButton).toBeVisible();
-    });
-    test('brand label with link exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const headerComponentBrandLink = page.getByLabel('Scania - red gryphon on blue shield');
-        await expect(headerComponentBrandLink).toHaveCount(1);
-        await expect(headerComponentBrandLink).toBeVisible();
-    });
-    test('launcher should open on click', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const headerComponentLuncherButton = page.getByRole('button');
-        await headerComponentLuncherButton.click();
-        const headerLuncherList = page
-            .getByRole('listitem')
-            .filter({ has: page.getByRole('heading') })
-            .getByRole('list');
-        await expect(headerLuncherList).toHaveCount(1);
-        await expect(headerLuncherList).toBeVisible();
-        /** Check screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,48 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { iconsNames } from "./iconsArray";
-import readme from "./readme.md";
-export default {
-    title: 'Foundations',
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        icon: {
-            name: 'Icon name',
-            description: 'Select icon to display',
-            control: {
-                type: 'select',
-            },
-            options: iconsNames,
-        },
-        size: {
-            name: 'Size in pixels',
-            description: 'Set the size of the Icon',
-            control: {
-                type: 'select',
-            },
-            options: [16, 20, 24, 32],
-        },
-    },
-    args: {
-        size: 32,
-        icon: 'truck',
-    },
-};
-const IconTemplate = (args) => formatHtmlPreview(`
-  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
-  `);
-export const Icons = IconTemplate.bind({});

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

@@ -1,59 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Link`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        underline: {
-            name: 'Underline',
-            description: 'Adds an underline under the Link text.',
-            controls: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: true },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Link.',
-            controls: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        underline: true,
-        disabled: false,
-    },
-};
-const Template = ({ underline, disabled }) => formatHtmlPreview(`
-    <p class='tds-body-02'>The <tds-link
-        ${disabled ? 'disabled' : ''}
-        ${underline ? '' : 'underline="false"'}
-        >
-        <a href="https://tegel.scania.com/home" target='_blank'>Tegel</a>
-    </tds-link> Design System is for digital products and services at Scania.
-     It enables an efficient development process and ensures a premium experience across all of Scania's digital touchpoints.    
-    </p>  
-  `);
-export const Default = Template.bind({});

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

@@ -1,109 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Message`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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' },
-            },
-        },
-        messageVariant: {
-            name: 'Message variant',
-            description: 'Changes the variant of the component.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Information', 'Error', 'Warning', 'Success'],
-            table: {
-                defaultValue: { summary: 'information' },
-            },
-        },
-        header: {
-            name: 'Header',
-            description: 'Sets the header for the Message.',
-            control: {
-                type: 'text',
-            },
-        },
-        extendedMessage: {
-            name: 'Extended Message content',
-            description: 'Sets the content of an extended Message.',
-            control: {
-                type: 'text',
-            },
-        },
-        minimal: {
-            name: 'Minimal',
-            description: 'Applies minimal Message styling.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        noIcon: {
-            name: 'No icon',
-            description: 'Hides the icon.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        messageVariant: 'Information',
-        header: 'Message header',
-        extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
-        minimal: false,
-        noIcon: false,
-    },
-};
-const Template = ({ modeVariant, messageVariant, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
-    <style>
-      .demo-wrapper {
-        width: 380px;
-      }
-    </style>
-    <div class="demo-wrapper">
-      <tds-message
-          variant="${messageVariant.toLowerCase()}"
-          header="${header}"
-          ${noIcon ? 'no-icon' : ''}
-          ${minimal ? 'minimal' : ''}
-          ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariant.toLowerCase()}"`
-    : ''}
-      >
-      ${extendedMessage}
-      </tds-message>
-    </div>
-    `);
-export const Default = Template.bind({});

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

@@ -1,16 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/message/test/basic/index.html';
-test.describe('tds-message-basic', () => {
-    test('is basic message rendered correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('has icon', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const messageIcon = page.getByRole('img');
-        await expect(messageIcon).toHaveCount(1);
-        await expect(messageIcon).toBeVisible();
-    });
-});

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

@@ -1,28 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/message/test/error/index.html';
-test.describe('tds-message-error', () => {
-    test('is error message rendered correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('has header text', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const messageComponentHeader = page.getByText('Message header', { exact: true });
-        await expect(messageComponentHeader).toHaveCount(1);
-        await expect(messageComponentHeader).toBeVisible();
-    });
-    test('has subheader text', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const messageComponentSubHeader = page.getByText('Longer Message text can be placed here.');
-        await expect(messageComponentSubHeader).toHaveCount(1);
-        await expect(messageComponentSubHeader).toBeVisible();
-    });
-    test('has error icon', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const messageIcon = page.getByRole('img');
-        await expect(messageIcon).toHaveCount(1);
-        await expect(messageIcon).toBeVisible();
-    });
-});

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

@@ -1,10 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/message/test/information/index.html';
-test.describe('tds-message-information', () => {
-    test('is information message rendered correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Take screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,10 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/message/test/success/index.html';
-test.describe('tds-message-success', () => {
-    test('is success message rendered correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Take screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,10 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/message/test/warning/index.html';
-test.describe('tds-message-warning', () => {
-    test('is warning message rendered correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Take screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});