@scania/tegel 1.3.3 → 1.5.0

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,101 +0,0 @@
-import formatHtmlPreview from "../../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import readmeTab from "./navigation-tab/readme.md";
-import { ComponentsFolder } from "../../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Tabs`,
-  parameters: {
-    notes: {
-      'Navigation Tabs': readme,
-      'Navigation Tab': readmeTab,
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variation 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' },
-      },
-    },
-    defaultSelectedIndex: {
-      name: 'Default selected index',
-      description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      table: {
-        defaultValue: { summary: '0' },
-      },
-    },
-    selectedIndex: {
-      name: 'Selected index',
-      description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 0, 1, 2, 3],
-      if: { arg: 'defaultSelectedIndex', eq: 'None' },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    defaultSelectedIndex: 'None',
-    selectedIndex: 'None',
-  },
-};
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-navigation-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-navigation-tab>
-        <button>First tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Second tab is much longer</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Third tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab disabled>
-        <button>Fourth tab</button>
-      </tds-navigation-tab>
-    </tds-navigation-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-    </div>
- 
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTab = document.getElementsByClassName('selectedTab')[0]
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-navigation-tabs');
-    
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
-    `);
-export const NavigationTabs = Template.bind({});

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