Merge branch 'develop' into fix/CDEP-3759-colon-for-beta-release

scania-digital-design-system · Dec 18, 2024 · b8824d7 · b8824d7
2 parents 2906199 + 34583ce
commit b8824d7
Show file tree

Hide file tree

Showing 98 changed files with 907 additions and 119 deletions.
diff --git a/packages/core/src/components/banner/test/basic/banner.e2e.ts b/packages/core/src/components/banner/test/basic/banner.e2e.ts
@@ -4,16 +4,16 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/banner/test/basic/index.html';
 
 test.describe.parallel('tds-banner-basic', () => {
-  test('renders basic banner correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders basic banner correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('the close button should be visible', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const closeButton = page.getByRole('button');
     await expect(closeButton).toBeVisible();
   });

diff --git a/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts
@@ -0,0 +1,15 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/banner/test/default/darkmode/index.html';
+
+test.describe.parallel('tds-banner-default-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default banner correctly with darkmode', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...ner-default-darkmode-renders-default-banner-correctly-with-darkmode-1-linux.png b/...ner-default-darkmode-renders-default-banner-correctly-with-darkmode-1-linux.png
diff --git a/...mponents/divider/test/darkmode/index.html → ...s/banner/test/default/darkmode/index.html b/...mponents/divider/test/darkmode/index.html → ...s/banner/test/default/darkmode/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Divider - Horizontal, dark mode</title>
+    <title>Banner - Default</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
@@ -11,7 +11,13 @@
     </script>
   </head>
 
-  <body class="tds-mode-dark" style="padding: 20px; height: 300px;">
-    <tds-divider data-testid="divider"></tds-divider>
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
+    <tds-banner
+      icon="truck"
+      header="This is a header text area"
+      subheader="This is the subheader text area"
+    >
+      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
+    </tds-banner>
   </body>
 </html>
diff --git a/...ponents/banner/test/default/banner.e2e.ts → ...nner/test/default/lightmode/banner.e2e.ts b/...ponents/banner/test/default/banner.e2e.ts → ...nner/test/default/lightmode/banner.e2e.ts
@@ -1,48 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/banner/test/default/index.html';
+const componentTestPath = 'src/components/banner/test/default/lightmode/index.html';
 
-test.describe.parallel('tds-banner-default', () => {
-  test('renders default banner correctly', async ({ page }) => {
+test.describe.parallel('tds-banner-default-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders default banner correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('header exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const bannerHeader = page.getByText('This is a header text area', { exact: true });
     await expect(bannerHeader).toBeVisible();
   });
 
   test('text exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const bannerSubheader = page.getByText('This is the subheader text area', { exact: true });
     await expect(bannerSubheader).toBeVisible();
   });
 
   test('icons exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const images = page.getByRole('img');
     await expect(images).toHaveCount(2);
   });
 
   test('link example exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const linkExample = page.getByRole('link');
     await expect(linkExample).toHaveCount(1);
     await expect(linkExample).toBeVisible();
   });
 
   test('close button exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const closeButton = page.getByRole('button');
     await expect(closeButton).toHaveCount(1);
     await expect(closeButton).toBeVisible();

diff --git a/...ders-default-banner-correctly-1-linux.png → ...ders-default-banner-correctly-1-linux.png b/...ders-default-banner-correctly-1-linux.png → ...ders-default-banner-correctly-1-linux.png
diff --git a/...components/banner/test/default/index.html → .../banner/test/default/lightmode/index.html b/...components/banner/test/default/index.html → .../banner/test/default/lightmode/index.html
diff --git a/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts
@@ -0,0 +1,15 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/banner/test/error/darkmode/index.html';
+
+test.describe.parallel('tds-banner-error-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders error banner correctly with darkmode', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...-banner-error-darkmode-renders-error-banner-correctly-with-darkmode-1-linux.png b/...-banner-error-darkmode-renders-error-banner-correctly-with-darkmode-1-linux.png
diff --git a/packages/core/src/components/banner/test/error/darkmode/index.html b/packages/core/src/components/banner/test/error/darkmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Banner - Error</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
+    <tds-banner
+      variant="error"
+      header="This is a header text area"
+      subheader="This is the subheader text area"
+    >
+      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
+    </tds-banner>
+  </body>
+</html>
diff --git a/...omponents/banner/test/error/banner.e2e.ts → ...banner/test/error/lightmode/banner.e2e.ts b/...omponents/banner/test/error/banner.e2e.ts → ...banner/test/error/lightmode/banner.e2e.ts
@@ -1,19 +1,19 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/banner/test/error/index.html';
+const componentTestPath = 'src/components/banner/test/error/lightmode/index.html';
 
-test.describe.parallel('tds-banner-error', () => {
-  test('renders error banner correctly', async ({ page }) => {
+test.describe.parallel('tds-banner-error-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders error banner correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('icons exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const images = page.getByRole('img');
     await expect(images).toHaveCount(2);
   });

diff --git a/...enders-error-banner-correctly-1-linux.png → ...enders-error-banner-correctly-1-linux.png b/...enders-error-banner-correctly-1-linux.png → ...enders-error-banner-correctly-1-linux.png
diff --git a/...c/components/banner/test/error/index.html → ...ts/banner/test/error/lightmode/index.html b/...c/components/banner/test/error/index.html → ...ts/banner/test/error/lightmode/index.html
diff --git a/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts
@@ -0,0 +1,15 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/banner/test/information/darkmode/index.html';
+
+test.describe.parallel('tds-banner-information-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders information banner correctly with darkmode', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...rmation-darkmode-renders-information-banner-correctly-with-darkmode-1-linux.png b/...rmation-darkmode-renders-information-banner-correctly-with-darkmode-1-linux.png
diff --git a/packages/core/src/components/banner/test/information/darkmode/index.html b/packages/core/src/components/banner/test/information/darkmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Banner - Information</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
+    <tds-banner
+      variant="information"
+      header="This is a header text area"
+      subheader="This is the subheader text area"
+    >
+      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
+    </tds-banner>
+  </body>
+</html>
diff --git a/...nts/banner/test/information/banner.e2e.ts → .../test/information/lightmode/banner.e2e.ts b/...nts/banner/test/information/banner.e2e.ts → .../test/information/lightmode/banner.e2e.ts
@@ -1,19 +1,19 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/banner/test/information/index.html';
+const componentTestPath = 'src/components/banner/test/information/lightmode/index.html';
 
-test.describe.parallel('tds-banner-information', () => {
-  test('renders information banner correctly', async ({ page }) => {
+test.describe.parallel('tds-banner-information-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders information banner correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('icons exists', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const images = page.getByRole('img');
     await expect(images).toHaveCount(2);
   });

diff --git a/...-information-banner-correctly-1-linux.png → ...-information-banner-correctly-1-linux.png b/...-information-banner-correctly-1-linux.png → ...-information-banner-correctly-1-linux.png
diff --git a/...onents/banner/test/information/index.html → ...ner/test/information/lightmode/index.html b/...onents/banner/test/information/index.html → ...ner/test/information/lightmode/index.html
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts b/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts
@@ -0,0 +1,23 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/breadcrumbs/test/default/darkmode/index.html';
+
+test.describe.parallel('tds-breadcrumbs-default-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default breadcrumbs correctly', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('page 3 item should be able to become focused', async ({ page }) => {
+    const pageThree = page.getByText(/Page 3/);
+    await pageThree.focus();
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...rumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png b/...rumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png
diff --git a/...-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png b/...-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html b/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Breadcrumbs - Default</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958)">
+    <tds-breadcrumbs>
+      <tds-breadcrumb>
+        <a href="#">Page 1</a>
+      </tds-breadcrumb>
+      <tds-breadcrumb>
+        <a href="#">Page 2</a>
+      </tds-breadcrumb>
+      <tds-breadcrumb current>
+        <a href="#">Page 3</a>
+      </tds-breadcrumb>
+    </tds-breadcrumbs>
+  </body>
+</html>
diff --git a/...eadcrumbs/test/default/breadcrumbs.e2e.ts → ...test/default/lightmode/breadcrumbs.e2e.ts b/...eadcrumbs/test/default/breadcrumbs.e2e.ts → ...test/default/lightmode/breadcrumbs.e2e.ts
@@ -1,18 +1,19 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/breadcrumbs/test/default/index.html';
+const componentTestPath = 'src/components/breadcrumbs/test/default/lightmode/index.html';
 
-test.describe.parallel('tds-breadcrumbs-default', () => {
-  test('renders default breadcrumbs correctly', async ({ page }) => {
+test.describe.parallel('tds-breadcrumbs-default-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders default breadcrumbs correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('items Page 1, Page 2, Page 3 exist on the page', async ({ page }) => {
-    await page.goto(componentTestPath);
     const navigation = page.getByRole('navigation');
     await expect(navigation).toHaveCount(1);
     const listItems = page.getByRole('listitem');
@@ -32,8 +33,6 @@ test.describe.parallel('tds-breadcrumbs-default', () => {
   });
 
   test('page 3 item should be able to become focused', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const pageThree = page.getByText(/Page 3/);
     await pageThree.focus();
 

diff --git a/...uld-be-able-to-become-focused-1-linux.png → ...uld-be-able-to-become-focused-1-linux.png b/...uld-be-able-to-become-focused-1-linux.png → ...uld-be-able-to-become-focused-1-linux.png
diff --git a/...default-breadcrumbs-correctly-1-linux.png → ...default-breadcrumbs-correctly-1-linux.png b/...default-breadcrumbs-correctly-1-linux.png → ...default-breadcrumbs-correctly-1-linux.png
diff --git a/...nents/breadcrumbs/test/default/index.html → ...dcrumbs/test/default/lightmode/index.html b/...nents/breadcrumbs/test/default/index.html → ...dcrumbs/test/default/lightmode/index.html
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/primary/darkmode/index.html';
+
+test.describe.parallel('tds-button-secondary-primary-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...utton-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png b/...utton-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/index.html b/packages/core/src/components/button/test/secondary/primary/darkmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Secondary</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
+    <tds-button
+      text="Button"
+      variant="secondary"
+      mode-variant="primary"
+      size="md"
+      data-testid="tds-button-testid"
+    ></tds-button>
+  </body>
+</html>
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/primary/lightmode/index.html';
+
+test.describe.parallel('tds-button-secondary-primary-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...tton-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png b/...tton-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png