@scania/tegel 1.4.0 → 1.6.0

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

@@ -1,219 +0,0 @@
-import readme from "./readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Datetime`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&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' },
-            },
-        },
-        state: {
-            name: 'State',
-            description: 'Switches between success and error state.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 'Success', 'Error'],
-        },
-        type: {
-            name: 'Type',
-            description: 'Sets the field to display date, time or both.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Datetime', 'Date', 'Time'],
-            table: {
-                defaultValue: { summary: 'datetime-local' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Switches between different sizes.',
-            control: {
-                type: 'radio',
-                // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-            },
-            options: ['Large', 'Medium', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        defaultValue: {
-            name: 'Default value',
-            description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
-            control: {
-                type: 'radio',
-            },
-            options: ['None', 'Custom'],
-            table: {
-                defaultValue: { summary: 'none' },
-            },
-        },
-        minValue: {
-            description: 'Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
-            name: 'Min value',
-            control: {
-                type: 'text',
-            },
-            table: {
-                defaultValue: { summary: undefined },
-            },
-        },
-        maxValue: {
-            description: 'Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
-            name: 'Max value',
-            control: {
-                type: 'text',
-            },
-            table: {
-                defaultValue: { summary: undefined },
-            },
-        },
-        noMinWidth: {
-            name: 'No minimum width',
-            description: 'Enables component to shrink below 208px which is the default width.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: 'Sets the label text.',
-            control: {
-                type: 'text',
-            },
-        },
-        helper: {
-            name: 'Helper text',
-            description: 'Sets the helper text.',
-            control: {
-                type: 'text',
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the component.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        state: 'None',
-        type: 'Datetime',
-        size: 'Large',
-        defaultValue: 'None',
-        minValue: '',
-        maxValue: '',
-        noMinWidth: false,
-        label: 'Label text',
-        helper: 'Helper text',
-        disabled: false,
-    },
-};
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minValue, maxValue, noMinWidth, label, helper, disabled, }) => {
-    const typeLookup = {
-        Datetime: 'datetime-local',
-        Date: 'date',
-        Time: 'time',
-    };
-    const sizeLookup = {
-        Large: 'lg',
-        Medium: 'md',
-        Small: 'sm',
-    };
-    const stateLookup = {
-        None: 'none',
-        Success: 'success',
-        Error: 'error',
-    };
-    const getDefaultValue = (value, componentType) => {
-        if (value === 'Custom') {
-            switch (componentType) {
-                case 'Datetime':
-                    return '1891-01-01T12:30';
-                case 'Date':
-                    return '1891-01-01';
-                case 'Time':
-                    return '12:30';
-                default:
-                    return 'Invalid type';
-            }
-        }
-        else
-            return false;
-    };
-    return formatHtmlPreview(`
-    <style>
-        /* Note: Demo classes used here are just for demo purposes in Storybook */
-        .demo-wrapper {
-            width: 180px;
-        }
-    </style>
-
-  <div class="demo-wrapper">
-        
-    <tds-datetime
-      id="datetime"
-      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"      
-      ${minValue ? `min=${minValue}` : ''}
-      ${maxValue ? `max=${maxValue}` : ''}
-      size="${sizeLookup[size]}"
-      state="${stateLookup[state]}"
-      ${disabled ? 'disabled' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${label ? `label="${label}" ` : ''}
-      ${helper ? `helper="${helper}" ` : ''}
-      >
-    </tds-datetime>
-  </div>
-
-    <script>
-    /* DEMO Code: Used only for Storybook demo purposes */
-      datetimeElement = document.querySelector('tds-datetime');
-      datetimeElement.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-      datetimeElement.addEventListener('tdsFocus', (event) => {
-        console.log(event);
-      });
-      datetimeElement.addEventListener('tdsBlur', (event) => {
-        console.log(event);
-      });
-    </script>
-`);
-};
-export const Default = datetimeTemplate.bind({});

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

@@ -1,62 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Divider`,
-    parameters: {
-        layout: 'centered',
-        notes: { Divider: readme },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
-            },
-        ],
-    },
-    argTypes: {
-        orientation: {
-            name: 'Orientation',
-            description: 'Choose Divider orientation.',
-            control: {
-                type: 'radio',
-                options: ['Horizontal', 'Vertical'],
-            },
-            table: {
-                defaultValue: { summary: 'horizontal' },
-            },
-        },
-        width: {
-            name: 'Width',
-            description: 'Sets the Divider width.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'orientation', eq: 'Horizontal' },
-        },
-        height: {
-            name: 'Height',
-            description: 'Sets the Divider height.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'orientation', eq: 'Vertical' },
-        },
-    },
-    args: {
-        orientation: 'Horizontal',
-        width: 150,
-        height: 150,
-    },
-};
-const Template = ({ orientation, width, height }) => formatHtmlPreview(`
-  <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
-    <tds-divider orientation="${orientation.toLowerCase()}"></tds-divider>
-  </div>
-`);
-export const Default = Template.bind({});

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

@@ -1,260 +0,0 @@
-import readme from "./readme.md";
-import readmeDropdownOption from "./dropdown-option/readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Dropdown`,
-    parameters: {
-        layout: 'centered',
-        notes: { 'Dropdown': readme, 'Dropdown option': readmeDropdownOption },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-            },
-        ],
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variant of the component.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Inherit from parent', 'Primary', 'Secondary'],
-            table: {
-                defaultValue: { summary: 'Inherit from parent' },
-            },
-        },
-        error: {
-            name: 'Error',
-            description: 'Sets the Dropdown in an error state.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        filter: {
-            name: 'Filter',
-            description: 'Adds filter functionality to the Dropdown.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        normalizeText: {
-            name: 'Normalize text',
-            description: 'Should search be normalized',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: 'true' },
-            },
-        },
-        multiselect: {
-            name: 'Multiselect',
-            description: 'Adds multiselect functionality to the Dropdown.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Size of the Dropdown.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        labelText: {
-            name: 'Label text',
-            control: 'text',
-            description: 'Label text helps to describe what the Dropdown contains',
-            if: { arg: 'labelPosition', neq: 'None' },
-        },
-        labelPosition: {
-            name: 'Label position',
-            description: 'Label text position',
-            control: {
-                type: 'radio',
-            },
-            options: ['Outside', 'Inside', 'None'],
-            table: {
-                defaultValue: { summary: 'null' },
-            },
-        },
-        helperText: {
-            name: 'Helper text',
-            description: 'Helper text assists the user with additional information about the Dropdown.',
-            control: 'text',
-        },
-        placeholder: {
-            name: 'Placeholder',
-            type: 'string',
-            description: 'Placeholder text when no option is selected',
-        },
-        noResultText: {
-            name: 'No result message',
-            type: 'string',
-            description: 'Message that appears when no results match criteria in filter feature',
-            table: {
-                defaultValue: { summary: 'No result' },
-            },
-            control: 'text',
-            if: { arg: 'filter', eq: true },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the component',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        openDirection: {
-            name: 'Open direction',
-            description: 'The direction the Dropdown will open.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Auto', 'Up', 'Down'],
-            table: {
-                summary: {
-                    defaultValue: 'auto',
-                },
-            },
-        },
-        defaultOption: {
-            name: 'Default options',
-            description: 'Sets a pre-selected option.',
-            control: {
-                type: 'radio',
-            },
-            options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-            if: { arg: 'multiselect', eq: false },
-        },
-        multiDefaultOption: {
-            name: 'Default options',
-            description: 'Sets a pre-selected option.',
-            control: {
-                type: 'check',
-            },
-            options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
-            if: { arg: 'multiselect', eq: true },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        error: false,
-        filter: false,
-        noResultText: 'No result',
-        normalizeText: true,
-        multiselect: false,
-        size: 'Large',
-        labelText: 'Label text',
-        labelPosition: 'Outside',
-        helperText: 'Helper text',
-        placeholder: 'Placeholder',
-        disabled: false,
-        openDirection: 'Auto',
-        defaultOption: 'No default',
-    },
-};
-const sizeLookUp = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-};
-const defaultOptionLookUp = {
-    'Option 1': 'option-1',
-    'Option 2': 'option-2',
-    'Option 3': 'option-3',
-    'Option 4': 'option-4',
-    'îles Åland': 'iles-aland',
-};
-const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
-const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, normalizeText, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, noResultText, }) => formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-    height:200px;
-  }
-  .hej {
-    margin-top: 79px;
-  }
-  </style>
-
-    <div class="demo-wrapper">
-        <tds-dropdown
-        ${defaultOption && defaultOption !== 'No default'
-    ? `default-value="${defaultOptionLookUp[defaultOption]}"`
-    : ''}
-        ${multiDefaultOption
-    ? `default-value="${getMultiselectDefaultValue(multiDefaultOption)}"`
-    : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-          name="dropdown"
-          label="${labelText}"
-          ${labelPosition && labelPosition !== 'None'
-    ? `label-position="${labelPosition.toLowerCase()}"`
-    : ''}
-          placeholder="${placeholder}"
-          helper="${helperText}"
-          size="${sizeLookUp[size]}"
-          ${error ? 'error' : ''}
-          ${filter ? 'filter' : ''}
-          ${filter ? `no-result-text="${noResultText}"` : ''}
-          ${normalizeText ? '' : `normalize-text="false"`}
-          ${multiselect ? 'multiselect' : ''}
-          ${disabled ? 'disabled' : ''}
-          open-direction="${openDirection.toLowerCase()}"          
-          >
-            <tds-dropdown-option value="option-1">
-              Option 1
-            </tds-dropdown-option>
-            <tds-dropdown-option disabled value="option-2">
-              Option 2
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-3">
-              Option 3
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-4">
-              Option 4
-            </tds-dropdown-option>
-            <tds-dropdown-option value="iles-aland">
-              îles Åland
-            </tds-dropdown-option>
-        </tds-dropdown>
-    </div>
-
-    <script>
-      dropdown = document.querySelector('tds-dropdown')
-
-      dropdown.addEventListener('tdsChange', (event) => {
-        console.log(event)
-      })
-
-    </script>
-        
-  `);
-export const Default = Template.bind({});

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

@@ -1,41 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/basic/index.html';
-test.describe('tds-dropdown-basic', () => {
-    test('renders basic dropdown correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdown = page.getByTestId('tds-dropdown-testid');
-        await expect(dropdown).toHaveCount(1);
-        /* check diff in screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('should find label and not exist', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const labelText = page.getByText(/Label text/);
-        await expect(labelText).toHaveCount(0);
-    });
-    test('find helper text and check not exist', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const helperText = page.getByText(/Helper text/);
-        await expect(helperText).toHaveCount(0);
-    });
-    test('have the button to be visible', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdownButton = page.getByRole('button').first();
-        await expect(dropdownButton).toBeVisible();
-    });
-    test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdownButton = page.getByRole('button').first();
-        const dropdownListElementOne = page
-            .locator('tds-dropdown-option')
-            .filter({ hasText: 'Option 1' });
-        await expect(dropdownListElementOne).toBeHidden();
-        await dropdownButton.click();
-        /* before clicking dropdownlist should not be visible, the button should be */
-        await expect(dropdownButton).toBeVisible();
-        await expect(dropdownListElementOne).toBeVisible();
-        /* checks diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,76 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/default/index.html';
-test.describe('tds-dropdown-default', () => {
-    test('renders default dropdown correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdown = page.getByTestId('tds-dropdown-testid');
-        await expect(dropdown).toHaveCount(1);
-        /* check diff in screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('should find label and be visible', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const labelText = page.getByText(/Label text/);
-        await expect(labelText).toBeVisible();
-    });
-    test('find helper text and check if visible', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const helperText = page.getByText(/Helper text/);
-        await expect(helperText).toBeVisible();
-    });
-    test('have the placeholder="Placeholder" text', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-        await expect(dropdownButton).toBeVisible();
-    });
-    test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-        const dropdownListElementOne = page
-            .locator('tds-dropdown-option')
-            .filter({ hasText: 'Option 1' });
-        await expect(dropdownListElementOne).toBeHidden();
-        await dropdownButton.click();
-        /* before clicking dropdownlist should not be visible, the button should be */
-        await expect(dropdownButton).toBeVisible();
-        await expect(dropdownListElementOne).toBeVisible();
-        /* checks diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* click the dropdown button */
-        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-        await dropdownButton.click();
-        /* Click the Option 1 button */
-        const dropdownListElementOneButton = page
-            .locator('tds-dropdown-option')
-            .filter({ hasText: /Option 1/ })
-            .getByRole('button');
-        await dropdownListElementOneButton.click();
-        await expect(dropdownListElementOneButton).toBeHidden();
-        const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-        await expect(dropdownButtonWithOption1.first()).toBeVisible();
-        /* also check screenshot diff to make sure it says Option 1 */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const dropdownListElementTwoButton = page
-            .locator('tds-dropdown-option')
-            .filter({ hasText: /Option 2/ });
-        const dropdownButtonElement = page.getByRole('button', { name: 'Placeholder' });
-        /* before clicking dropdownlist should not be visible, the button should be */
-        await expect(dropdownButtonElement).toBeVisible();
-        await expect(dropdownListElementTwoButton).toBeHidden();
-        /* after clicking dropdownlist should be visible, the button should also be */
-        await dropdownButtonElement.click();
-        await expect(dropdownButtonElement).toBeVisible();
-        await expect(dropdownListElementTwoButton).toBeVisible();
-        /* after clicking option 2 that is disabled list should be visible and also button should be */
-        await dropdownListElementTwoButton.click();
-        await expect(dropdownButtonElement).toBeVisible();
-        await expect(dropdownListElementTwoButton).toBeVisible();
-    });
-});