@scania/tegel 1.4.0 → 1.6.0

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

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