@scania/tegel 1.3.3 → 1.4.0

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

@@ -2,89 +2,89 @@ import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Message`,
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&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' },
-      },
+    title: `${ComponentsFolder}/Message`,
+    parameters: {
+        layout: 'centered',
+        notes: readme,
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    messageVariant: {
-      name: 'Message variant',
-      description: 'Changes the variant of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'information' },
-      },
+    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' },
+            },
+        },
+        messageVariant: {
+            name: 'Message variant',
+            description: 'Changes the variant of the component.',
+            control: {
+                type: 'radio',
+            },
+            options: ['Information', 'Error', 'Warning', 'Success'],
+            table: {
+                defaultValue: { summary: 'information' },
+            },
+        },
+        header: {
+            name: 'Header',
+            description: 'Sets the header for the Message.',
+            control: {
+                type: 'text',
+            },
+        },
+        extendedMessage: {
+            name: 'Extended Message content',
+            description: 'Sets the content of an extended Message.',
+            control: {
+                type: 'text',
+            },
+        },
+        minimal: {
+            name: 'Minimal',
+            description: 'Applies minimal Message styling.',
+            control: {
+                type: 'boolean',
+            },
+            table: {
+                defaultValue: { summary: false },
+            },
+        },
+        noIcon: {
+            name: 'No icon',
+            description: 'Hides the icon.',
+            control: {
+                type: 'boolean',
+            },
+            table: {
+                defaultValue: { summary: false },
+            },
+        },
     },
-    header: {
-      name: 'Header',
-      description: 'Sets the header for the Message.',
-      control: {
-        type: 'text',
-      },
+    args: {
+        modeVariant: 'Inherit from parent',
+        messageVariant: 'Information',
+        header: 'Message header',
+        extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
+        minimal: false,
+        noIcon: false,
     },
-    extendedMessage: {
-      name: 'Extended Message content',
-      description: 'Sets the content of an extended Message.',
-      control: {
-        type: 'text',
-      },
-    },
-    minimal: {
-      name: 'Minimal',
-      description: 'Applies minimal Message styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageVariant: 'Information',
-    header: 'Message header',
-    extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
-    minimal: false,
-    noIcon: false,
-  },
 };
 const Template = ({ modeVariant, messageVariant, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
     <style>
@@ -99,8 +99,8 @@ const Template = ({ modeVariant, messageVariant, header, extendedMessage, minima
           ${noIcon ? 'no-icon' : ''}
           ${minimal ? 'minimal' : ''}
           ${modeVariant !== 'Inherit from parent'
-  ? `mode-variant="${modeVariant.toLowerCase()}"`
-  : ''}
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
+    : ''}
       >
       ${extendedMessage}
       </tds-message>

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

@@ -0,0 +1,16 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/message/test/basic/index.html';
+test.describe('tds-message-basic', () => {
+    test('is basic message rendered correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('has icon', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const messageIcon = page.getByRole('img');
+        await expect(messageIcon).toHaveCount(1);
+        await expect(messageIcon).toBeVisible();
+    });
+});

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

@@ -1,33 +1,28 @@
 import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/message/test/error/index.html';
-test.describe('tds-message', () => {
-  test('is rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Check if a component exists in the DOM */
-    const messageComponent = page.locator('tds-message');
-    expect(messageComponent).toBeTruthy();
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('is in error variant', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentDiv = page.locator('tds-message > div');
-    await expect(messageComponentDiv).toHaveClass(/error/);
-  });
-  test('has header text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentHeader = page.locator('tds-message .header');
-    await expect(messageComponentHeader).not.toBeEmpty();
-  });
-  test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponent = page.locator('tds-message');
-    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
-  });
-  test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageIconComponent = page.locator('tds-message tds-icon');
-    await expect(messageIconComponent).toHaveAttribute('name', 'error');
-  });
+test.describe('tds-message-error', () => {
+    test('is error message rendered correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('has header text', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const messageComponentHeader = page.getByText('Message header', { exact: true });
+        await expect(messageComponentHeader).toHaveCount(1);
+        await expect(messageComponentHeader).toBeVisible();
+    });
+    test('has subheader text', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const messageComponentSubHeader = page.getByText('Longer Message text can be placed here.');
+        await expect(messageComponentSubHeader).toHaveCount(1);
+        await expect(messageComponentSubHeader).toBeVisible();
+    });
+    test('has error icon', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const messageIcon = page.getByRole('img');
+        await expect(messageIcon).toHaveCount(1);
+        await expect(messageIcon).toBeVisible();
+    });
 });

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

@@ -1,33 +1,10 @@
 import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/message/test/information/index.html';
-test.describe('tds-message', () => {
-  test('is rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Check if a component exists in the DOM */
-    const messageComponent = page.locator('tds-message');
-    expect(messageComponent).toBeTruthy();
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('is in information variant', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentDiv = page.locator('tds-message > div');
-    await expect(messageComponentDiv).toHaveClass(/information/);
-  });
-  test('has header text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentHeader = page.locator('tds-message .header');
-    await expect(messageComponentHeader).not.toBeEmpty();
-  });
-  test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponent = page.locator('tds-message');
-    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
-  });
-  test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageIconComponent = page.locator('tds-message tds-icon');
-    await expect(messageIconComponent).toHaveAttribute('name', 'info');
-  });
+test.describe('tds-message-information', () => {
+    test('is information message rendered correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Take screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

package/dist/collection/components/message/test/success/message.e2e.js

@@ -1,33 +1,10 @@
 import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/message/test/success/index.html';
-test.describe('tds-message', () => {
-  test('is rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Check if a component exists in the DOM */
-    const messageComponent = page.locator('tds-message');
-    expect(messageComponent).toBeTruthy();
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('is in success variant', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentDiv = page.locator('tds-message > div');
-    await expect(messageComponentDiv).toHaveClass(/success/);
-  });
-  test('has header text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentHeader = page.locator('tds-message .header');
-    await expect(messageComponentHeader).not.toBeEmpty();
-  });
-  test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponent = page.locator('tds-message');
-    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
-  });
-  test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageIconComponent = page.locator('tds-message tds-icon');
-    await expect(messageIconComponent).toHaveAttribute('name', 'tick');
-  });
+test.describe('tds-message-success', () => {
+    test('is success message rendered correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Take screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

package/dist/collection/components/message/test/warning/message.e2e.js

@@ -1,33 +1,10 @@
 import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/message/test/warning/index.html';
-test.describe('tds-message', () => {
-  test('is rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Check if a component exists in the DOM */
-    const messageComponent = page.locator('tds-message');
-    expect(messageComponent).toBeTruthy();
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('is in warning variant', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentDiv = page.locator('tds-message > div');
-    await expect(messageComponentDiv).toHaveClass(/warning/);
-  });
-  test('has header text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponentHeader = page.locator('tds-message .header');
-    await expect(messageComponentHeader).not.toBeEmpty();
-  });
-  test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageComponent = page.locator('tds-message');
-    await expect(messageComponent).toHaveText(/Longer Message text can be placed here. Longer Message text can be placed here./);
-  });
-  test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const messageIconComponent = page.locator('tds-message tds-icon');
-    await expect(messageIconComponent).toHaveAttribute('name', 'warning');
-  });
+test.describe('tds-message-warning', () => {
+    test('is warning message rendered correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Take screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });