@scania/tegel 1.4.0 → 1.6.0

package/dist/types/components.d.ts

@@ -295,6 +295,10 @@ export namespace Components {
           * Resets min width rule
          */
         "noMinWidth": boolean;
+        /**
+          * Method that sets the value of the datetime element
+         */
+        "setValue": (newValue: string) => Promise<void>;
         /**
           * Size of the input
          */
@@ -304,7 +308,7 @@ export namespace Components {
          */
         "state": string;
         /**
-          * Sets input type
+          * Sets an input type
          */
         "type": 'datetime-local' | 'date' | 'time';
         /**
@@ -459,15 +463,15 @@ export namespace Components {
         /**
           * The value of column key, usually comes from JSON, needed for sorting
          */
-        "cellKey": string;
+        "cellKey"?: string;
         /**
           * Text that displays in column cell
          */
-        "cellValue": string;
+        "cellValue"?: string;
         /**
-          * In case noMinWidth is set, the user has to specify width value for each column.
+          * In case noMinWidth is set, the user has to specify the width value for each column.
          */
-        "customWidth": string;
+        "customWidth"?: string;
         /**
           * Enables sorting on that column
          */
@@ -475,7 +479,7 @@ export namespace Components {
         /**
           * Setting for text align, default is left. Other accepted values are "right" or "end".
          */
-        "textAlign": string;
+        "textAlign"?: string;
     }
     interface TdsHeaderDropdown {
         /**
@@ -561,17 +565,21 @@ export namespace Components {
     }
     interface TdsIcon {
         /**
-          * Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
+          * Pass the name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
          */
         "name": string;
         /**
-          * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
+          * Pass a size of icon as a string, for example, 32px, 1rem, 4em...
          */
         "size": string;
+        /**
+          * Set description for the svg.
+         */
+        "svgDescription"?: string;
         /**
           * Override the default title for the svg.
          */
-        "svgTitle": string;
+        "svgTitle"?: string;
     }
     interface TdsInlineTab {
         /**
@@ -1066,6 +1074,10 @@ export namespace Components {
     interface TdsTableBody {
     }
     interface TdsTableBodyRow {
+        /**
+          * Marks the row as disabled, used for multiselect table.
+         */
+        "disabled"?: boolean;
         /**
           * Marks the row as selected, used for multiselect table.
          */
@@ -1097,15 +1109,19 @@ export namespace Components {
     }
     interface TdsTableHeader {
         /**
-          * @deprecated Deprecated, use selected instead..
+          * @deprecated Deprecated, use selected instead.
          */
         "allSelected": boolean;
         /**
-          * Prop for controling the indeterminate state of the "All selected"-checkbox.
+          * Prop for controlling the enabled/disabled state of the "All selected"-checkbox.
+         */
+        "disabled"?: boolean;
+        /**
+          * Prop for controlling the indeterminate state of the "All selected"-checkbox.
          */
         "indeterminate": boolean;
         /**
-          * Prop for controling the checked/unchecked state of the "All selected"-checkbox.
+          * Prop for controlling the checked/unchecked state of the "All selected"-checkbox.
          */
         "selected": boolean;
     }
@@ -1140,10 +1156,18 @@ export namespace Components {
           * Position of the label for the Text Field.
          */
         "labelPosition": 'inside' | 'outside' | 'no-label';
+        /**
+          * Max allowed value for input type number
+         */
+        "max": string | number;
         /**
           * Max length of input
          */
         "maxLength": number;
+        /**
+          * Min allowed value for input type number
+         */
+        "min": string | number;
         /**
           * Mode variant of the Text Field
          */
@@ -1175,7 +1199,7 @@ export namespace Components {
         /**
           * Which input type, text, password or similar
          */
-        "type": 'text' | 'password';
+        "type": 'text' | 'password' | 'number';
         /**
           * Value of the input text
          */
@@ -2757,7 +2781,7 @@ declare namespace LocalJSX {
          */
         "state"?: string;
         /**
-          * Sets input type
+          * Sets an input type
          */
         "type"?: 'datetime-local' | 'date' | 'time';
         /**
@@ -2931,11 +2955,11 @@ declare namespace LocalJSX {
          */
         "cellValue"?: string;
         /**
-          * In case noMinWidth is set, the user has to specify width value for each column.
+          * In case noMinWidth is set, the user has to specify the width value for each column.
          */
         "customWidth"?: string;
         /**
-          * Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic.
+          * Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to implement custom-sorting logic.
          */
         "onTdsSort"?: (event: TdsHeaderCellCustomEvent<{
     tableId: string;
@@ -3035,13 +3059,17 @@ declare namespace LocalJSX {
     }
     interface TdsIcon {
         /**
-          * Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
+          * Pass the name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
          */
         "name"?: string;
         /**
-          * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
+          * Pass a size of icon as a string, for example, 32px, 1rem, 4em...
          */
         "size"?: string;
+        /**
+          * Set description for the svg.
+         */
+        "svgDescription"?: string;
         /**
           * Override the default title for the svg.
          */
@@ -3551,6 +3579,10 @@ declare namespace LocalJSX {
     interface TdsTableBody {
     }
     interface TdsTableBodyRow {
+        /**
+          * Marks the row as disabled, used for multiselect table.
+         */
+        "disabled"?: boolean;
         /**
           * Event emitted when a row is selected/deselected.
          */
@@ -3597,11 +3629,15 @@ declare namespace LocalJSX {
     }
     interface TdsTableHeader {
         /**
-          * @deprecated Deprecated, use selected instead..
+          * @deprecated Deprecated, use selected instead.
          */
         "allSelected"?: boolean;
         /**
-          * Prop for controling the indeterminate state of the "All selected"-checkbox.
+          * Prop for controlling the enabled/disabled state of the "All selected"-checkbox.
+         */
+        "disabled"?: boolean;
+        /**
+          * Prop for controlling the indeterminate state of the "All selected"-checkbox.
          */
         "indeterminate"?: boolean;
         /**
@@ -3613,7 +3649,7 @@ declare namespace LocalJSX {
     selectedRows: any[];
   }>) => void;
         /**
-          * Prop for controling the checked/unchecked state of the "All selected"-checkbox.
+          * Prop for controlling the checked/unchecked state of the "All selected"-checkbox.
          */
         "selected"?: boolean;
     }
@@ -3655,10 +3691,18 @@ declare namespace LocalJSX {
           * Position of the label for the Text Field.
          */
         "labelPosition"?: 'inside' | 'outside' | 'no-label';
+        /**
+          * Max allowed value for input type number
+         */
+        "max"?: string | number;
         /**
           * Max length of input
          */
         "maxLength"?: number;
+        /**
+          * Min allowed value for input type number
+         */
+        "min"?: string | number;
         /**
           * Mode variant of the Text Field
          */
@@ -3706,7 +3750,7 @@ declare namespace LocalJSX {
         /**
           * Which input type, text, password or similar
          */
-        "type"?: 'text' | 'password';
+        "type"?: 'text' | 'password' | 'number';
         /**
           * Value of the input text
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "^4.9.0",
+    "@stencil/core": "^4.12.0",
     "prettier": "^2.7.1"
   },
   "devDependencies": {

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

@@ -1,100 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeItem from "./accordion-item/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Accordion`,
-    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' },
-            },
-        },
-        iconPosition: {
-            name: 'Expand icon position',
-            description: 'Sets the horizontal position of the expand icon.',
-            control: {
-                type: 'radio',
-            },
-            options: { End: 'end', Start: 'start' },
-            table: {
-                defaultValue: { summary: 'end' },
-            },
-        },
-        paddingReset: {
-            name: 'Less padding right',
-            description: 'Sets less padding on the right inside Accordion Items.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disable all items',
-            description: 'Disables all Accordion Items.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    parameters: {
-        notes: { 'Accordion': readme, 'Accordion Item': readmeItem },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        iconPosition: 'end',
-        paddingReset: false,
-        disabled: false,
-    },
-};
-const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
-    const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
-    const disabledAttr = disabled ? 'disabled' : '';
-    const paddingResetAttr = paddingReset ? 'padding-reset' : '';
-    return formatHtmlPreview(`
-    <tds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <tds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum doler sit amet.
-      </tds-accordion-item>
-      <tds-accordion-item ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
-        <div slot="header">Second item</div>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
-      </tds-accordion-item>
-    </tds-accordion>
-
-    <!-- Script tag for demo purposes -->
-  <script>    
-    accordionItems = document.querySelectorAll('tds-accordion-item');
-    for (let i = 0; i < accordionItems.length; i++) {
-      accordionItems[i].addEventListener('tdsToggle',(event) => {
-        console.log(event)
-      })
-    }
-  </script>`);
-};
-export const Default = Template.bind({});

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

@@ -1,19 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-accordion', () => {
-    test('renders basic accordion correctly', async ({ page }) => {
-        await page.goto('src/components/accordion/test/basic/index.html');
-        const accordion = page.locator('tds-accordion');
-        await expect(accordion).toHaveClass(/hydrated/);
-        await expect(accordion).toContainText('First item');
-        await expect(accordion).toContainText('Second item');
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('fires tdsToggle event on click', async ({ page }) => {
-        await page.goto('src/components/accordion/test/basic/index.html');
-        const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
-        const myEventSpy = await page.spyOnEvent('tdsToggle');
-        await accordionFirstItem.click();
-        expect(myEventSpy).toHaveReceivedEvent();
-    });
-});

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

@@ -1,19 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-accordion', () => {
-    test('renders disabled accordion correctly', async ({ page }) => {
-        await page.goto('src/components/accordion/test/disabled/index.html');
-        const accordion = page.locator('tds-accordion');
-        await expect(accordion).toHaveClass(/hydrated/);
-        await expect(accordion).toContainText('First item');
-        await expect(accordion).toContainText('Second item');
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('does not fire tdsToggle event on click on disabled accordion', async ({ page }) => {
-        await page.goto('src/components/accordion/test/disabled/index.html');
-        const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
-        const myEventSpy = await page.spyOnEvent('tdsToggle');
-        await accordionFirstItem.click();
-        expect(myEventSpy).not.toHaveReceivedEvent();
-    });
-});

package/dist/collection/components/accordion/test/expanded/accordion.e2e.js

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-accordion', () => {
-    test('renders expanded accordion correctly', async ({ page }) => {
-        await page.goto('src/components/accordion/test/expanded/index.html');
-        const accordion = page.locator('tds-accordion');
-        await expect(accordion).toHaveClass(/hydrated/);
-        await expect(accordion).toContainText('First item');
-        await expect(accordion).toContainText('Second item');
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('does fire tdsToggle event on click on accordion', async ({ page }) => {
-        await page.goto('src/components/accordion/test/expanded/index.html');
-        const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
-        const myEventSpy = await page.spyOnEvent('tdsToggle');
-        await accordionFirstItem.click({
-            position: {
-                x: 1,
-                y: 1,
-            },
-        });
-        expect(myEventSpy).toHaveReceivedEvent();
-    });
-});

package/dist/collection/components/accordion/test/padding-reset/accordion.e2e.js

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-accordion', () => {
-    test('renders padding-reset accordion correctly', async ({ page }) => {
-        await page.goto('src/components/accordion/test/padding-reset/index.html');
-        const accordion = page.locator('tds-accordion');
-        await expect(accordion).toHaveClass(/hydrated/);
-        await expect(accordion).toContainText('First item');
-        await expect(accordion).toContainText('Second item');
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('does fire tdsToggle event on click on accordion', async ({ page }) => {
-        await page.goto('src/components/accordion/test/padding-reset/index.html');
-        const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
-        const myEventSpy = await page.spyOnEvent('tdsToggle');
-        await accordionFirstItem.click({
-            position: {
-                x: 1,
-                y: 1,
-            },
-        });
-        expect(myEventSpy).toHaveReceivedEvent();
-    });
-});

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

@@ -1,106 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Badge`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the component.',
-            control: {
-                type: 'radio',
-            },
-            options: {
-                Large: 'lg',
-                Small: 'sm',
-            },
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        value: {
-            name: 'Value',
-            description: 'Sets a value to show on the Badge.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'size', neq: 'sm' },
-        },
-        hidden: {
-            name: 'Hidden',
-            description: 'Toggles visibility of the Badge.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        demoCode: {
-            name: 'Demo code',
-            description: 'Displays code example of component usage. Not part of component props.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        size: 'lg',
-        value: 1,
-        hidden: false,
-        demoCode: false,
-    },
-};
-const Template = ({ value, size, hidden, demoCode }) => formatHtmlPreview(`
-    ${demoCode
-    ? `<style>
-    /* Note: Demo classes used here are just for demo purposes in Storybook */
-    .badge-demo-box {
-      margin:5px;
-      height: 32px;
-      width: 32px;
-      position: relative;
-      background-color: #C4C4C4;
-    }
-
-    .badge-demo-box tds-badge[size="lg"]{
-      position: absolute;
-      left: 16px;
-      top: -5px;
-    }
-
-    .badge-demo-box tds-badge[size="sm"]{
-      position: absolute;
-      left: 26px;
-      top: -2px;
-    }
-    </style>`
-    : ''}
-
-    <div class="${demoCode ? 'badge-demo-box' : ''}">
-      <tds-badge
-        ${value ? `value="${value}"` : ''}
-        ${hidden ? 'hidden' : ''}
-        size="${size}">
-      </tds-badge>
-    </div>`);
-export const Default = Template.bind({});

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

@@ -1,10 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-badge', () => {
-    test('renders basic badge correctly', async ({ page }) => {
-        await page.goto('src/components/badge/test/basic/index.html');
-        const accordion = page.locator('tds-badge');
-        await expect(accordion).toHaveClass('hydrated');
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

package/dist/collection/components/badge/test/value/badge.e2e.js

@@ -1,11 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-test.describe('tds-badge', () => {
-    test('renders value badge correctly', async ({ page }) => {
-        await page.goto('src/components/badge/test/value/index.html');
-        (await page.locator('tds-badge').all()).forEach(async (element) => {
-            await expect(element).toHaveClass(/hydrated/);
-        });
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,92 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { iconsNames } from "../icon/iconsArray";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-// FIXME: CMS: Change state to type in Code tab of component
-export default {
-    title: `${ComponentsFolder}/Banner`,
-    parameters: {
-        notes: readme,
-        layout: 'fullscreen',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-            },
-        ],
-    },
-    argTypes: {
-        variant: {
-            name: 'Variant',
-            description: 'Changes the variant of the component.',
-            options: ['Default', 'Error', 'Information'],
-            control: {
-                type: 'radio',
-            },
-            table: {
-                defaultValue: { summary: 'default' },
-            },
-        },
-        header: {
-            name: 'Header',
-            description: 'Sets text to be displayed in the header section.',
-            control: {
-                type: 'text',
-            },
-        },
-        subheader: {
-            name: 'Subheader',
-            description: 'Sets text to be displayed in the subheader section.',
-            control: {
-                type: 'text',
-            },
-        },
-        actions: {
-            name: 'Actions slot',
-            description: 'Slot for the bottom part of the Banner, used for links.',
-            control: {
-                type: 'text',
-            },
-        },
-        icon: {
-            name: 'Icon',
-            description: 'Name of icon to display, choose `none` to remove the icon.',
-            control: {
-                type: 'select',
-            },
-            options: [...iconsNames, 'none'],
-            if: { arg: 'variant', eq: 'Default' },
-        },
-    },
-    args: {
-        variant: 'Default',
-        header: 'This is a header text area',
-        subheader: 'This is the subheader text area',
-        actions: '<tds-link slot="actions" ><a href="/">Link example</a></tds-link>',
-        icon: 'truck',
-    },
-};
-const Template = ({ variant, icon, header, subheader, actions }) => formatHtmlPreview(`
-      <tds-banner
-          ${variant !== 'Default' ? `variant="${variant.toLowerCase()}"` : ''}
-          ${icon !== 'none' && variant === 'Default' ? `icon="${icon}"` : ''}
-          ${header !== '' ? `header="${header}"` : ''}
-          ${subheader ? `subheader="${subheader}"` : ''}       
-          >
-          ${actions ? `${actions}` : ''}
-      </tds-banner>
-
-      <!-- Script tag with eventlistener for demo purposes. -->
-      <script>
-        document.addEventListener('tdsClose', (event) => {
-          console.log(event)
-        })
-      </script>
-    `);
-export const Default = Template.bind({});