@scania/tegel 1.4.0 → 1.5.0

package/dist/collection/components/text-field/text-field.stories.js

@@ -1,247 +0,0 @@
-import readme from "./readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Text Field`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&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' },
-            },
-        },
-        state: {
-            name: 'State',
-            description: 'Switches between success and error state.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Default', 'Success', 'Error'],
-            table: {
-                defaultValue: { summary: 'default' },
-            },
-        },
-        type: {
-            name: 'Type',
-            description: 'Which type of Text Field',
-            control: {
-                type: 'radio',
-            },
-            options: ['Text', 'Password'],
-            table: {
-                defaultValue: { summary: 'text' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Switches between different sizes.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: 'Sets the label text.',
-            control: {
-                type: 'text',
-            },
-        },
-        labelPosition: {
-            name: 'Label position',
-            description: 'Sets the label text position.',
-            control: {
-                type: 'radio',
-            },
-            options: ['No label', 'Inside', 'Outside'],
-            table: {
-                defaultValue: { summary: 'no-label' },
-            },
-        },
-        placeholderText: {
-            name: 'Placeholder',
-            description: 'Sets the placeholder text.',
-            control: {
-                type: 'text',
-            },
-        },
-        helper: {
-            name: 'Helper text',
-            description: 'Sets the helper text.',
-            control: {
-                type: 'text',
-            },
-        },
-        prefix: {
-            name: 'Prefix',
-            description: 'Adds a prefix symbol or text before the Text Field.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        prefixType: {
-            name: 'Prefix type',
-            description: 'Switches between icon and text for the prefix.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Icon', 'Text'],
-            if: { arg: 'prefix', eq: true },
-        },
-        suffix: {
-            name: 'Suffix',
-            description: 'Adds a suffix symbol or text after the Text Field.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        suffixType: {
-            name: 'Suffix type',
-            description: 'Swithces between icon or text for the suffix.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Icon', 'Text'],
-            if: { arg: 'suffix', eq: true },
-        },
-        maxLength: {
-            name: 'Max length',
-            description: 'Sets a maximum value of how long the text can be.',
-            control: {
-                type: 'number',
-            },
-        },
-        noMinWidth: {
-            name: 'No minimum width',
-            description: 'Enables component to shrink below 208px which is the default width.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        readonly: {
-            description: 'Sets the Text Field to read-only state.',
-            name: 'Read Only',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            description: 'Disables the Text Field.',
-            name: 'Disabled',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        state: 'Default',
-        type: 'Text',
-        size: 'Large',
-        label: 'Label',
-        labelPosition: 'No label',
-        placeholderText: 'Placeholder',
-        helper: '',
-        prefix: false,
-        prefixType: 'Icon',
-        suffix: false,
-        suffixType: 'Icon',
-        maxLength: 0,
-        noMinWidth: 'Default',
-        readonly: false,
-        disabled: false,
-    },
-};
-const Template = ({ modeVariant, state, type, size, label, labelPosition, placeholderText, helper, prefix, prefixType, suffix, suffixType, maxLength, noMinWidth, readonly, disabled, }) => {
-    const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-    const stateValue = state.toLowerCase();
-    const sizeLookUp = {
-        Large: 'lg',
-        Medium: 'md',
-        Small: 'sm',
-    };
-    return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 200px;
-    height: 150px;
-  }
-    </style>
-
-  <div class="demo-wrapper">
-    <tds-text-field
-      type="${type.toLowerCase()}"
-      size="${sizeLookUp[size]}"
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      state="${stateValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${helper ? `helper="${helper}"` : ''}
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'read-only' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
-        ${prefix || suffix
-        ? `
-          ${prefixType || suffixType === 'Text'
-            ? `<span slot="${prefix ? 'prefix' : 'suffix'}">$</span>`
-            : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
-        `
-        : ''}
-
-        </tds-text-field>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-text-field')
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,26 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/textarea/test/basic/index.html';
-test.describe('tds-textarea', () => {
-    test('renders default textarea correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTextarea = page.getByTestId('tds-textarea-testid');
-        await expect(tdsTextarea).toHaveCount(1);
-        /* Expect no difference in screenshot  */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('test if able to type in textarea', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const textarea = page.getByRole('textbox');
-        /* Expect to have received an event from clicking on the textarea */
-        const myEventSpy = await page.spyOnEvent('click');
-        await textarea.click();
-        expect(myEventSpy).toHaveReceivedEvent();
-        /* Expect the textbox to have the cursor text style */
-        const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
-        expect(textareaCursorState).toBe('text');
-        /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
-        await textarea.fill('Adding some text');
-        expect(await textarea.inputValue()).toBe('Adding some text');
-    });
-});

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

@@ -1,34 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/textarea/test/default/index.html';
-test.describe('tds-textarea-default', () => {
-    test('renders default textarea correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTextarea = page.getByTestId('tds-textarea-testid');
-        await expect(tdsTextarea).toHaveCount(1);
-        /* Expect no difference in screenshot  */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('test if able to type in textarea', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const textarea = page.getByRole('textbox');
-        /* Expect to have received an event from clicking on the textarea */
-        const myEventSpy = await page.spyOnEvent('click');
-        await textarea.click();
-        expect(myEventSpy).toHaveReceivedEvent();
-        /* Expect the textbox to have the cursor text style */
-        const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
-        expect(textareaCursorState).toBe('text');
-        /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
-        await textarea.fill('Adding some text');
-        expect(await textarea.inputValue()).toBe('Adding some text');
-        /* Expect no difference in screenshot  */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('not able to find label if "no-label" is set', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const textareaLabel = page.getByText('Label');
-        await expect(textareaLabel).toHaveCount(0);
-        await expect(textareaLabel).toBeHidden();
-    });
-});

package/dist/collection/components/textarea/test/read-only/textarea.e2e.js

@@ -1,26 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/textarea/test/read-only/index.html';
-test.describe('tds-textarea-read-only', () => {
-    test('renders read-only textarea correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTextarea = page.getByTestId('tds-textarea-testid');
-        await expect(tdsTextarea).toHaveCount(1);
-        /* Expect the tds-textarea to have the read-only attribute */
-        await expect(tdsTextarea).toHaveAttribute('read-only');
-        /* Expect no diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('read-only textarea - native textarea should have readonly attribute', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const textarea = page.getByRole('textbox');
-        /* Expect the textarea within tds-textarea to have the readonly attribute */
-        await expect(textarea).toHaveAttribute('readonly');
-    });
-    test('be able to find label if "outside" is set', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const textareaLabel = page.getByText('Label');
-        await expect(textareaLabel).toHaveCount(1);
-        await expect(textareaLabel).toBeVisible();
-    });
-});

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

@@ -1,188 +0,0 @@
-import readme from "./readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Textarea`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&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' },
-            },
-        },
-        state: {
-            name: 'State',
-            description: 'Switches between success and error state.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Default', 'Success', 'Error'],
-            table: {
-                defaultValue: { summary: 'default' },
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: 'Sets the label text.',
-            control: {
-                type: 'text',
-            },
-        },
-        labelPosition: {
-            name: 'Label position',
-            description: 'Sets the label text position.',
-            control: {
-                type: 'radio',
-            },
-            options: ['No label', 'Inside', 'Outside'],
-            table: {
-                defaultValue: { summary: 'no-label' },
-            },
-        },
-        placeholder: {
-            name: 'Placeholder',
-            description: 'Sets the placeholder text.',
-            control: {
-                type: 'text',
-            },
-        },
-        helper: {
-            name: 'Helper text',
-            description: 'Sets the helper text.',
-            control: {
-                type: 'text',
-            },
-        },
-        rows: {
-            name: 'Rows',
-            description: 'Sets the number of rows.',
-            control: {
-                type: 'number',
-            },
-        },
-        maxLength: {
-            name: 'Max length',
-            description: 'Sets a maximum value of how long the text can be.',
-            control: {
-                type: 'number',
-            },
-        },
-        noMinWidth: {
-            name: 'No minimum width',
-            description: 'Enables component to shrink below 208px which is the default width.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        readonly: {
-            name: 'Read only',
-            description: 'Sets the Textarea to read-only state.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Textarea.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        state: 'Default',
-        label: 'Label',
-        labelPosition: 'No label',
-        placeholder: 'Placeholder',
-        helper: '',
-        rows: 5,
-        maxLength: 0,
-        noMinWidth: false,
-        readonly: false,
-        disabled: false,
-    },
-};
-const Template = ({ modeVariant, state, label, labelPosition, placeholder, helper, rows, maxLength, noMinWidth, readonly, disabled, }) => {
-    const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-    const stateValue = state.toLowerCase();
-    const labelPosLookup = {
-        'No label': 'no-label',
-        'Inside': 'inside',
-        'Outside': 'outside',
-    };
-    return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-      width: 400px;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-        <tds-textarea
-          rows="${rows}"
-          state="${stateValue}"
-          label="${label}"
-          helper="${helper}"
-          ${modeVariant !== 'Inherit from parent'
-        ? `mode-variant="${modeVariant.toLowerCase()}"`
-        : ''}
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          ${noMinWidth ? 'no-min-width' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </tds-textarea>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-textarea')
-
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,90 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Toast`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        variant: {
-            name: 'Message variant',
-            description: 'Changes the variant of Toast.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Information', 'Success', 'Warning', 'Error'],
-            table: {
-                defaultValue: {
-                    summary: 'information',
-                },
-            },
-        },
-        header: {
-            name: 'Header',
-            description: 'Adds a header text.',
-            control: {
-                type: 'text',
-            },
-        },
-        subheader: {
-            name: 'Subheader',
-            description: 'Adds a subheader text.',
-            control: {
-                type: 'text',
-            },
-        },
-        actions: {
-            name: 'Actions slot',
-            description: 'Slot for the bottom part of the Toast, used for links.',
-            control: {
-                type: 'text',
-            },
-        },
-        hidden: {
-            name: 'Hidden',
-            description: 'Hides the Toast.',
-            control: {
-                type: 'boolean',
-            },
-        },
-    },
-    args: {
-        variant: 'Information',
-        header: 'Header',
-        subheader: 'Subheader',
-        actions: `<tds-link slot="actions">
-          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
-      </tds-link>`,
-        hidden: false,
-    },
-};
-const Template = ({ variant, header, subheader, actions, hidden }) => formatHtmlPreview(`<tds-toast
-        variant="${variant.toLowerCase()}"
-        header="${header}"
-        ${subheader ? `subheader="${subheader}"` : ''}
-        ${hidden ? 'hidden' : ''}
-    >
-    ${actions || ''}
-    </tds-toast>
-    
-    <script>
-      document.addEventListener('tdsClose', (event) => {
-          console.log(event)
-      })
-    </script>
-  `);
-export const Default = Template.bind({});