@scania/tegel 1.4.0 → 1.5.0

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

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

@@ -1,243 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Slider`,
-    argTypes: {
-        min: {
-            name: 'Min. value',
-            description: 'Sets the minimum value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        max: {
-            name: 'Max. value',
-            description: 'Sets the maximum value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 100 },
-            },
-        },
-        initialValue: {
-            name: 'Initial value',
-            description: 'Sets the initial value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        showLabel: {
-            name: 'Show label',
-            description: 'Toggles if the lable should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        labelText: {
-            name: 'Label text',
-            description: 'Sets the text for the label.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'showLabel', eq: true },
-        },
-        showTicks: {
-            name: 'Show ticks',
-            description: 'Toggles if ticks should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        numTicks: {
-            name: 'Number of ticks',
-            description: 'Sets the number of ticks to be displayed.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        showTickNumbers: {
-            name: 'Show tick numbers',
-            description: 'Toggles if tick numbers should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        snapToTicks: {
-            name: 'Snap to ticks',
-            description: 'Snaps the thumb to the closest tick when dragging.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        showTooltip: {
-            name: 'Show tooltip',
-            description: 'Toggles if the tooltip should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        showControls: {
-            name: 'Show controls (not compatible with input field)',
-            description: 'Toggles if controls should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        step: {
-            name: 'Step value',
-            description: 'Sets the value to increment/decrement with when using controls.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'showControls', eq: true },
-            table: {
-                defaultValue: { summary: 1 },
-            },
-        },
-        showInput: {
-            name: 'Show value input field (not compatible with controls)',
-            description: 'Toggles if the values input field should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showControls', eq: false },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        thumbSize: {
-            name: 'Thumb size',
-            description: 'Switches between the large and small version of the thumb.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        readonly: {
-            name: 'Read Only',
-            description: 'Puts the control in a read-only state.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the slider.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    parameters: {
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    args: {
-        min: '0',
-        max: '100',
-        initialValue: '50',
-        showLabel: false,
-        labelText: 'Label',
-        showTicks: false,
-        numTicks: '3',
-        showTickNumbers: false,
-        snapToTicks: false,
-        showTooltip: true,
-        showControls: false,
-        step: '1',
-        showInput: false,
-        thumbSize: 'Large',
-        readonly: false,
-        disabled: false,
-    },
-};
-const sizeLookUp = {
-    Large: 'lg',
-    Small: 'sm',
-};
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </style>
-
-   <div class="demo-wrapper">
-     <tds-slider 
-        min="${min}"
-        max="${max}"
-        ${showControls && step ? `step="${step}"` : ''}
-        value="${initialValue}"
-        ${showTicks ? `ticks="${numTicks}"` : ''}
-        ${showTickNumbers ? 'show-tick-numbers' : ''}
-        ${snapToTicks ? 'snap' : ''}
-        ${showLabel ? `label="${labelText}"` : ''}
-        ${showTooltip ? 'tooltip' : ''}
-        ${showControls ? 'controls' : ''}
-        ${showInput ? 'input' : ''}
-        ${disabled ? 'disabled' : ''}
-        thumb-size="${sizeLookUp[thumbSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </tds-slider>
-    </div>
-    
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelector('tds-slider')
-      
-      slider.removeEventListener('tdsChange', null)
-      slider.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});