@scania/tegel 1.4.0 → 1.5.0

package/dist/types/components.d.ts

@@ -459,15 +459,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 +475,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 +561,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 {
         /**
@@ -2931,11 +2935,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 +3039,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.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [

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

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

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

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

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

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

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

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

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

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

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