@scania/tegel 1.3.3 → 1.5.0

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

@@ -1,185 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { iconsNames } from "../icon/iconsArray";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Button`,
-  parameters: {
-    notes: readme,
-    layout: 'padded',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&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' },
-      },
-    },
-    variant: {
-      name: 'Variant',
-      description: 'Four different Button variants to help the user to distinguish the level of importance of the task they represent.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Native types of button',
-      control: {
-        type: 'radio',
-      },
-      options: ['Button', 'Submit', 'Reset'],
-      table: {
-        defaultValue: { summary: 'button' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the Button.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    text: {
-      name: 'Text',
-      description: 'Sets the text to be displayed on the Button.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'onlyIcon', truthy: false },
-    },
-    fullbleed: {
-      name: 'Fullbleed',
-      description: 'Sets a fluid width on the Button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'onlyIcon', truthy: false },
-    },
-    onlyIcon: {
-      name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the Button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Sets icon to be displayed on the Button. Choose "none" to exclude the icon.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...iconsNames],
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the Button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    type: 'Button',
-    variant: 'Primary',
-    size: 'Large',
-    text: 'Button',
-    fullbleed: false,
-    onlyIcon: false,
-    icon: 'none',
-    disabled: false,
-  },
-};
-const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
-  const variantLookUp = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Ghost: 'ghost',
-    Danger: 'danger',
-  };
-  const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-  };
-  const modeVariantLookup = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-  };
-  const typeLookup = {
-    Button: 'button',
-    Submit: 'submit',
-    Reset: 'reset',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-    <tds-button
-      type='${typeLookup[type]}'
-      variant="${variantLookUp[variant]}"
-      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
-      ${!onlyIcon ? `text="${text}"` : ''}
-      ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
-    : ''}
-    >
-        ${onlyIcon || (icon && icon !== 'none')
-    ? `
-            <tds-icon slot="icon" size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
-            `
-    : ''}        
-    </tds-button>
-  </div>
-  <script>
-        document.querySelector('tds-button').addEventListener('click', (event) => {
-          console.log(event)
-        })
-  </script>
-  `);
-};
-/** Button as a web component */
-export const Default = WebComponentTemplate.bind({});

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

@@ -1,35 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/basic/index.html';
-test.describe('tds-button-basic', () => {
-  test('renders basic button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('component receives click event', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByRole('button');
-    const myEventSpy = await page.spyOnEvent('click');
-    await button.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-  });
-  test('expect button to be of role button', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByRole('button');
-    await expect(button).toHaveCount(1);
-  });
-  test('Text is displayed', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByText('Button', { exact: true });
-    await expect(button).toBeVisible();
-  });
-  test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByText('Button', { exact: true });
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('56px');
-  });
-});

package/dist/collection/components/button/test/danger/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/danger/index.html';
-test.describe('tds-button-danger', () => {
-  test('renders danger button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('Check so that height is correct to sm measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByText('Button', { exact: true });
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('40px');
-  });
-});

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

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/disabled/index.html';
-test.describe('tds-button-disabled', () => {
-  test('renders disabled button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('disabled button should be disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Check if disabled */
-    const button = page.getByRole('button');
-    await expect(button).toBeDisabled();
-  });
-  test('the cursor should be not-allowed', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid').getByRole('button');
-    const buttonCursorState = await button.evaluate((style) => getComputedStyle(style).cursor);
-    expect(buttonCursorState).toBe('not-allowed');
-  });
-});

package/dist/collection/components/button/test/ghost/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/ghost/index.html';
-test.describe('tds-button-ghost', () => {
-  test('renders ghost button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('Check so that height is correct to md measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByText('Button', { exact: true });
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('24px');
-  });
-});

package/dist/collection/components/button/test/icon/button.e2e.js

@@ -1,38 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/icon/index.html';
-test.describe('tds-button-icon', () => {
-  test('renders icon button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('icon should exist', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const icon = page.getByRole('img');
-    await expect(icon).toBeVisible();
-  });
-  test('Check so that height and width is correct to lg/default measurements with a single button', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByRole('button');
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('56px');
-    const buttonWidth = await button.evaluate((style) => getComputedStyle(style).width);
-    expect(buttonWidth).toBe('56px');
-    const icon = page.getByRole('img');
-    const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-    expect(iconHeight).toBe('20px');
-    const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-    expect(iconWidth).toBe('20px');
-  });
-  test('Check so that height and width is correct to lg/default measurements with a single button for the icon', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const icon = page.getByRole('img');
-    const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-    expect(iconHeight).toBe('20px');
-    const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-    expect(iconWidth).toBe('20px');
-  });
-});

package/dist/collection/components/button/test/secondary/button.e2e.js

@@ -1,18 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/button/test/secondary/index.html';
-test.describe('tds-button-secondary', () => {
-  test('renders secondary button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('Check so that height is correct to md measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByText('Button', { exact: true });
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('48px');
-  });
-});

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

@@ -1,163 +0,0 @@
-import readme from "./readme.md";
-import CardPlaceholder from "../../stories/assets/image/card-placeholder.png";
-import CardBodyImage from "../../stories/assets/image/card-img.png";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Card`,
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&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' },
-      },
-    },
-    header: {
-      name: 'Header text',
-      description: 'Sets the header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader text',
-      description: 'Sets the subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    thumbnail: {
-      name: 'Header thumbnail',
-      description: 'Toggles a thumbnail in the header.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    imagePlacement: {
-      name: 'Body image placement',
-      description: 'Sets the placement of the body image, above or below the header.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'below' },
-      },
-    },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Toggles an image in the Card body. Cannot be combined with divider.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyDivider', eq: false },
-    },
-    bodyContent: {
-      name: 'Body text',
-      description: 'Sets the body text for the Card.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyDivider: {
-      name: 'Body divider',
-      description: 'Adds a divider above the body content. Cannot be combined with body image.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyImg', eq: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    cardActions: {
-      name: 'Content of the bottom of the Card',
-      description: 'Slot to add custom HTML elements to the bottom of the Card.',
-      control: {
-        type: 'text',
-      },
-    },
-    clickable: {
-      name: 'Clickable',
-      description: 'Toggles if the Card is clickable or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    header: 'Header text',
-    subheader: 'Subheader text',
-    thumbnail: true,
-    imagePlacement: 'Below',
-    bodyImg: false,
-    bodyContent: '',
-    bodyDivider: false,
-    cardActions: `<tds-icon slot="actions" size="20px" name="arrow_right"></tds-icon>`,
-    clickable: false,
-  },
-};
-const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, bodyImg, bodyContent, bodyDivider, cardActions, clickable, }) => formatHtmlPreview(`<style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-        width: 368px;
-    }
-    </style>
-    <div class="demo-wrapper">
-    <tds-card
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    ${header ? `header="${header}"` : ''}
-    image-placement="${imagePlacement.toLowerCase()}-header"
-    ${subheader ? `subheader="${subheader}"` : ''}
-    ${bodyImg ? `body-img="${CardBodyImage}"` : ''}
-    ${clickable ? 'clickable' : ''}
-    ${bodyDivider ? 'body-divider' : ''}
-    >
-    ${thumbnail
-  ? `<img slot="thumbnail" src="${CardPlaceholder}" alt="Thumbnail for the card."/>`
-  : ''}
-  ${bodyContent
-  ? `
-    <div slot="body">
-        ${bodyContent}
-    </div>`
-  : ''}
-    ${cardActions ? `${cardActions}` : ''}
-    </tds-card>
-    </div>
-    ${clickable
-  ? `
-    <script>
-        document.addEventListener('tdsClick', (event)=>{
-            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
-        })
-    </script>
-    `
-  : ''}
-  `);
-export const Default = Template.bind({});

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

@@ -1,93 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Checkbox`,
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label of the component.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the Checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    indeterminate: {
-      name: 'Indeterminate',
-      description: 'Sets the checkbox in a intederminte state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the Checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-  },
-};
-const Template = ({ label, checked, disabled, indeterminate }) => formatHtmlPreview(`
-    <tds-checkbox
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        ${indeterminate ? 'indeterminate' : ''}
-        value="checkbox-1"
-        checkbox-id="first-checkbox"
-        >
-        <div slot="label">${label}</div>
-    </tds-checkbox>
-    
-    <!-- Script tag with event listener for demo purposes. -->
-    <script>
-      checkboxElement = document.querySelector("tds-checkbox");
-      checkboxElement.addEventListener("tdsChange", (event) => {
-        console.log("Checkbox with id: ", event.detail.checkboxId, " is ", event.detail.checked);
-      });
-      checkboxElement.addEventListener("tdsFocus", (event) => {
-        console.log(event);
-      });
-      checkboxElement.addEventListener("tdsBlur", (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});