diff --git a/.github/CODE_STYLE.md b/.github/CODE_STYLE.md
index 2a1ca540a..df423b5a3 100644
--- a/.github/CODE_STYLE.md
+++ b/.github/CODE_STYLE.md
@@ -140,9 +140,6 @@ they might change without notice. Their payload might also be changed based on r
with 'internal'. This is to make it as clear as possible to a user that this is an internal event that the components are using,
but the user should not interact with it. E.g. `internalTdsPropsChange`.
-### Development version of Storybook
-https://develop--tegel-storybook.netlify.app/ is a Storybook version connected to the develop branch.
-It offers the possibility to check out the version of code that is merged to develop branch.
-It can be used to see a version of code that is about to be released or to do a regression test.
+
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 2094aac19..519bff6a4 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,15 +2,20 @@
_Describe what the pull-request is about_
**Solving issue**
-_In case of GitHub issue add # plus the number of the issue (for example #123) OR if it is Azure then AB# and number of ticket_
+_Please link to the issue this pull request is solving by adding ticket number after CDEP-_
Fixes: [CDEP-](https://tegel.atlassian.net/browse/CDEP-)
**How to test**
-_Add description how to test if possible_
+_Provide detailed steps for testing, including any necessary setup._
1. Go to...
2. Check in...
3. Run ...
+**Checklist before submission**
+- [ ] I have added unit tests for my changes (if applicable)
+- [ ] All existing tests pass
+- [ ] I have updated the documentation (if applicable)
+
**Suggested test steps**
- [ ] Browser testing (Chrome, Safari, Firefox)
- [ ] Keyboard operability
@@ -22,7 +27,7 @@ _Add description how to test if possible_
- [ ] Events
**Screenshots**
-_If applicable, add screenshots to help explain_
+_Include before/after screenshots for UI changes._
**Additional context**
-_Add any other context about the pull-request here._
+_Add any other context or feedback requests about the pull-request here._
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
deleted file mode 100644
index 45309fbb1..000000000
--- a/.github/workflows/chromatic.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: 'Chromatic'
-on:
- push:
- branches:
- - develop
-
-jobs:
- chromatic-deployment:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/setup-node@v3
- with:
- node-version: 20
-
- - uses: actions/checkout@v1
-
- - name: Install dependencies
- run: npm install
-
- - name: Installing dependencies in core
- working-directory: packages/core
- run: npm install
-
- - name: Building @scania/tegel
- working-directory: packages/core
- run: npm run build
-
- - name: Publish to Chromatic
- working-directory: packages/core
- run: npx chromatic --project-token=${{secrets.CHROMATIC_PROJECT_TOKEN}} --exit-once-uploaded
diff --git a/.github/workflows/create-release-pr.yml b/.github/workflows/create-release-pr.yml
index 9d035b3ee..4646179ac 100644
--- a/.github/workflows/create-release-pr.yml
+++ b/.github/workflows/create-release-pr.yml
@@ -18,7 +18,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
# Reference for this pattern: https://github.com/peter-evans/create-pull-request/blob/main/docs/examples.md#keep-a-branch-up-to-date-with-another
- name: Reset promotion branch
diff --git a/.github/workflows/release-all.yml b/.github/workflows/release-all.yml
new file mode 100644
index 000000000..056078782
--- /dev/null
+++ b/.github/workflows/release-all.yml
@@ -0,0 +1,87 @@
+name: Release All Packages
+
+on:
+ workflow_dispatch:
+ inputs:
+ nodeVersion:
+ description: 'Node version'
+ required: true
+ default: '20.9.0'
+ type: string
+ tags:
+ description: 'Tag'
+ required: true
+ default: 'latest'
+ type: choice
+ options:
+ - latest
+ - beta
+ - dev
+ dryRun:
+ description: 'Dry run'
+ required: false
+ default: false
+ type: boolean
+
+jobs:
+ release-core:
+ runs-on: ubuntu-latest
+ outputs:
+ version: ${{ steps.core-release.outputs.version }}
+ steps:
+ - name: Trigger Core Release
+ id: core-release
+ uses: benc-uk/workflow-dispatch@v1
+ with:
+ workflow: release-core.yml
+ token: ${{ secrets.GITHUB_TOKEN }}
+ inputs: '{"nodeVersion": "${{ github.event.inputs.nodeVersion }}", "tags": "${{ github.event.inputs.tags }}", "dryRun": "${{ github.event.inputs.dryRun }}"}'
+
+ release-angular:
+ needs: release-core
+ runs-on: ubuntu-latest
+ steps:
+ - name: Trigger Angular Release
+ uses: benc-uk/workflow-dispatch@v1
+ with:
+ workflow: release-angular.yml
+ token: ${{ secrets.GITHUB_TOKEN }}
+ inputs: '{"nodeVersion": "${{ github.event.inputs.nodeVersion }}", "tags": "${{ github.event.inputs.tags }}", "dryRun": "${{ github.event.inputs.dryRun }}"}'
+
+ release-react:
+ needs: release-core
+ runs-on: ubuntu-latest
+ steps:
+ - name: Trigger React Release
+ uses: benc-uk/workflow-dispatch@v1
+ with:
+ workflow: release-react.yml
+ token: ${{ secrets.GITHUB_TOKEN }}
+ inputs: '{"nodeVersion": "${{ github.event.inputs.nodeVersion }}", "tags": "${{ github.event.inputs.tags }}", "dryRun": "${{ github.event.inputs.dryRun }}"}'
+
+ create-pr:
+ needs: [release-core, release-angular, release-react]
+ runs-on: ubuntu-latest
+ if: success()
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v4
+ with:
+ ref: develop
+
+ - name: Core - Read Package.json Version
+ id: version
+ working-directory: packages/core
+ run: echo "PACKAGE_VERSION=$(jq -r .version package.json)" >> $GITHUB_ENV
+
+ - name: Create Pull Request
+ id: create-pr
+ uses: peter-evans/create-pull-request@v5
+ with:
+ commit-message: 'release: ${{ env.PACKAGE_VERSION }}'
+ title: 'release: ${{ env.PACKAGE_VERSION }}'
+ body: |
+ This PR is to sync the develop branch with the main branch after the successful release of the core package.
+ Version: ${{ env.PACKAGE_VERSION }}
+ base: main
+ branch: develop
diff --git a/.github/workflows/release-angular.yml b/.github/workflows/release-angular.yml
index 3dc117fa5..9617287a6 100644
--- a/.github/workflows/release-angular.yml
+++ b/.github/workflows/release-angular.yml
@@ -11,7 +11,7 @@ on:
tags:
description: 'Tag'
required: true
- default: 'beta'
+ default: 'latest'
type: choice
options:
- latest
@@ -21,7 +21,7 @@ on:
dryRun:
description: 'Dry run'
required: false
- default: true
+ default: false
type: boolean
jobs:
@@ -33,7 +33,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Set up node
# Setup .npmrc file to publish to npm
@@ -43,7 +43,7 @@ jobs:
registry-url: 'https://registry.npmjs.org'
- name: Set Tegel user
- run: git config --global user.name "Tegel - Scania" && git config --global user.email "tegel.design.system@gmail.com"r
+ run: git config --global user.name "Tegel - Scania" && git config --global user.email "tegel.design.system@gmail.com"
- name: Angular - Read package.json Version
id: version
@@ -69,6 +69,7 @@ jobs:
run: npm run build-angular
- name: Angular - Publish
+ working-directory: packages/angular
run: |
if [ "${{ github.event.inputs.dryRun }}" == "true" ]; then
npm publish --tag ${{ github.event.inputs.tags }} --dry-run
@@ -89,7 +90,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Remove git tag on failure
run: |
diff --git a/.github/workflows/release-core.yml b/.github/workflows/release-core.yml
index 4e484f8da..f528fd827 100644
--- a/.github/workflows/release-core.yml
+++ b/.github/workflows/release-core.yml
@@ -11,7 +11,7 @@ on:
tags:
description: 'Tag'
required: true
- default: 'beta'
+ default: 'latest'
type: choice
options:
- latest
@@ -21,7 +21,7 @@ on:
dryRun:
description: 'Dry run'
required: false
- default: true
+ default: false
type: boolean
jobs:
@@ -33,7 +33,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Set up node
uses: actions/setup-node@v3
@@ -88,7 +88,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Remove git tag on failure
run: |
diff --git a/.github/workflows/release-react.yml b/.github/workflows/release-react.yml
index a12862db1..3ded4efd2 100644
--- a/.github/workflows/release-react.yml
+++ b/.github/workflows/release-react.yml
@@ -11,7 +11,7 @@ on:
tags:
description: 'Tag'
required: true
- default: 'beta'
+ default: 'latest'
type: choice
options:
- latest
@@ -21,7 +21,7 @@ on:
dryRun:
description: 'Dry run'
required: false
- default: true
+ default: false
type: boolean
jobs:
@@ -31,7 +31,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Set up node
uses: actions/setup-node@v3
@@ -86,7 +86,7 @@ jobs:
- name: Check out code
uses: actions/checkout@v4
with:
- ref: main
+ ref: develop
- name: Remove git tag on failure
run: |
diff --git a/README.md b/README.md
index a1406c03d..9b0e4796f 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
![GitHub release (latest by date)](https://img.shields.io/github/v/release/scania-digital-design-system/tegel)
![Status: Beta](https://img.shields.io/badge/status-beta-red)
-[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tds-storybook.tegel.scania.com/)
![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
![node-current](https://img.shields.io/badge/Node.js-18-orange)
@@ -8,7 +8,6 @@
[![Downloads](https://img.shields.io/npm/dw/@scania/tegel?color=76a4ed)](https://www.npmjs.com/package/@scania/tegel)
[![Last Commit](https://img.shields.io/github/last-commit/scania-digital-design-system/tegel)](https://github.com/scania-digital-design-system/tegel/commits/main)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/scania-digital-design-system/tegel/pulls)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/8070a4bb-ed31-4125-86aa-0c6140c55e73/deploy-status)](https://app.netlify.com/sites/tegel-storybook/deploys)
@@ -16,7 +15,7 @@
Official website: https://tegel.scania.com/
-Storybook: https://tegel-storybook.netlify.app/
+Storybook: https://tds-storybook.tegel.scania.com/
The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.
diff --git a/color/_tokens.scss b/color/_tokens.scss
index 4ad851d49..22748fa23 100644
--- a/color/_tokens.scss
+++ b/color/_tokens.scss
@@ -1,5 +1,17 @@
@import './mixins';
+$black: (
+ black-100: rgb(0 0 0 / 100%),
+ black-87: rgb(0 0 0 / 87%),
+ black-48: rgb(0 0 0 / 48%),
+ black-38: rgb(0 0 0 / 38%),
+);
+$white: (
+ white-100: rgb(255 255 255 / 100%),
+ white-87: rgb(255 255 255 / 87%),
+ white-48: rgb(255 255 255 / 48%),
+ white-38: rgb(255 255 255 / 38%),
+);
$grey: (
grey-958: #0d0f13,
grey-900: #1d2229,
@@ -15,7 +27,6 @@ $grey: (
grey-100: #edeff3,
grey-50: #f9fafb,
);
-
$blue: (
blue-900: #001533,
blue-800: #041e42,
@@ -28,7 +39,6 @@ $blue: (
blue-100: #bacde8,
blue-50: #e4e9f1,
);
-
$red: (
red-900: #450307,
red-800: #6a080f,
@@ -69,8 +79,8 @@ $orange: (
orange-100: #fbe3df,
orange-50: #fdf5f3,
);
+$original-colors: map-collect($black, $white, $grey, $blue, $red, $green, $orange);
-$original-colors: map-collect($grey, $blue, $red, $green, $orange);
//TODO: Should we keep brand pallete?
$brand-pallete: (
black: #000,
@@ -88,5 +98,4 @@ $semantic: (
positive: #1dab8b,
information: get-color-original(blue-400),
);
-
$all-colors: map-collect($original-colors, $semantic, $brand-pallete);
diff --git a/packages/angular/README.md b/packages/angular/README.md
index 35450956c..0343eb824 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -1,4 +1,4 @@
-[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tds-storybook.tegel.scania.com/)
![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
![Status: Beta](https://img.shields.io/badge/status-beta-red)
![npm](https://img.shields.io/npm/v/%40scania%2Ftegel-angular)
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 9d91d1647..ba697854b 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@scania/tegel-angular",
- "version": "1.3.2",
+ "version": "1.6.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@scania/tegel-angular",
- "version": "1.3.2",
+ "version": "1.6.1",
"dependencies": {
"@scania/tegel": "1.3.0",
"tslib": "^2.3.0"
@@ -6268,9 +6268,9 @@
"dev": true
},
"node_modules/follow-redirects": {
- "version": "1.15.3",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
- "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+ "version": "1.15.4",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+ "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
"dev": true,
"funding": [
{
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 3125802f8..dc5bcd3f5 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@scania/tegel-angular",
- "version": "1.3.2",
+ "version": "1.6.1",
"description": "Angular wrappers for Tegel package",
"main": "dist",
"files": [
diff --git a/packages/core/README.md b/packages/core/README.md
index 15b46767f..efb6e0a5a 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1,5 +1,5 @@
[![Github release](https://img.shields.io/npm/v/@scania/tegel?color=1081C2)](https://www.npmjs.com/package/@scania/tegel)
-[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tds-storybook.tegel.scania.com/)
![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
![Status: Beta](https://img.shields.io/badge/status-beta-red)
![node-current](https://img.shields.io/node/v/%40scania%2Ftegel)
diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json
index 3472a3cc8..bda5037a0 100644
--- a/packages/core/package-lock.json
+++ b/packages/core/package-lock.json
@@ -1,16 +1,16 @@
{
"name": "@scania/tegel",
- "version": "1.3.2",
+ "version": "1.6.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@scania/tegel",
- "version": "1.3.2",
+ "version": "1.6.1",
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.11.8",
- "@stencil/core": "^4.7.1",
+ "@stencil/core": "^4.12.0",
"prettier": "^2.7.1"
},
"devDependencies": {
@@ -4227,9 +4227,9 @@
}
},
"node_modules/@stencil/core": {
- "version": "4.7.1",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.1.tgz",
- "integrity": "sha512-KDWA/3qDiABA5LqtHCmTVwORuzgu/YdC0FpSBwVmwlw6K8jUjbTA5JB6Q03da2F+EQlDHOVgbW0TNtHCm54uXQ==",
+ "version": "4.12.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+ "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
"bin": {
"stencil": "bin/stencil"
},
diff --git a/packages/core/package.json b/packages/core/package.json
index 35343d913..7d47a4632 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@scania/tegel",
- "version": "1.3.2",
+ "version": "1.6.1",
"description": "Tegel Design System",
"type": "module",
"keywords": [
@@ -33,7 +33,7 @@
"access": "public"
},
"scripts": {
- "build": "stencil build --docs && stencil build --docs",
+ "build": "stencil build && stencil build --docs",
"_comment": "Due to stencil bug with types creation, we need to run build two times!",
"start": "stencil build --dev --watch --serve",
"test": "node docker-test-runner.js",
@@ -49,7 +49,7 @@
},
"dependencies": {
"@popperjs/core": "^2.11.8",
- "@stencil/core": "^4.7.1",
+ "@stencil/core": "^4.12.0",
"prettier": "^2.7.1"
},
"devDependencies": {
diff --git a/packages/core/src/components/accordion/test/expanded/accordion.e2e.ts-snapshots/tds-accordion-renders-expanded-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/expanded/accordion.e2e.ts-snapshots/tds-accordion-renders-expanded-accordion-correctly-1-linux.png
index c28d8a778..0ce3c467c 100644
Binary files a/packages/core/src/components/accordion/test/expanded/accordion.e2e.ts-snapshots/tds-accordion-renders-expanded-accordion-correctly-1-linux.png and b/packages/core/src/components/accordion/test/expanded/accordion.e2e.ts-snapshots/tds-accordion-renders-expanded-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/basic/banner.e2e.ts b/packages/core/src/components/banner/test/basic/banner.e2e.ts
index d0e8b51ef..17081f49c 100644
--- a/packages/core/src/components/banner/test/basic/banner.e2e.ts
+++ b/packages/core/src/components/banner/test/basic/banner.e2e.ts
@@ -1,11 +1,20 @@
import { test } from 'stencil-playwright';
import { expect } from '@playwright/test';
-test.describe('tds-banner', () => {
+const componentTestPath = 'src/components/banner/test/basic/index.html';
+
+test.describe('tds-banner-basic', () => {
test('renders basic banner correctly', async ({ page }) => {
- await page.goto('src/components/banner/test/basic/index.html');
- const accordion = page.locator('tds-banner');
- await expect(accordion).toHaveClass(/hydrated/);
+ await page.goto(componentTestPath);
+
+ /* 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/basic/banner.e2e.ts-snapshots/tds-banner-basic-renders-basic-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/basic/banner.e2e.ts-snapshots/tds-banner-basic-renders-basic-banner-correctly-1-linux.png
new file mode 100644
index 000000000..b372634e4
Binary files /dev/null and b/packages/core/src/components/banner/test/basic/banner.e2e.ts-snapshots/tds-banner-basic-renders-basic-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/basic/banner.e2e.ts-snapshots/tds-banner-renders-basic-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/basic/banner.e2e.ts-snapshots/tds-banner-renders-basic-banner-correctly-1-linux.png
deleted file mode 100644
index 2545d1680..000000000
Binary files a/packages/core/src/components/banner/test/basic/banner.e2e.ts-snapshots/tds-banner-renders-basic-banner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/basic/index.html b/packages/core/src/components/banner/test/basic/index.html
index dc9ff7efb..7d5a97a6d 100644
--- a/packages/core/src/components/banner/test/basic/index.html
+++ b/packages/core/src/components/banner/test/basic/index.html
@@ -2,7 +2,7 @@
- Badge - Basic
+ Banner - Basic
+
+
+
+
+ Link example
+
+
+
diff --git a/packages/core/src/components/banner/test/error/banner.e2e.ts b/packages/core/src/components/banner/test/error/banner.e2e.ts
new file mode 100644
index 000000000..921c26359
--- /dev/null
+++ b/packages/core/src/components/banner/test/error/banner.e2e.ts
@@ -0,0 +1,20 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/banner/test/error/index.html';
+
+test.describe('tds-banner-error', () => {
+ test('renders error banner correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+
+ /* 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/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-renders-error-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-renders-error-banner-correctly-1-linux.png
new file mode 100644
index 000000000..671561bd7
Binary files /dev/null and b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-renders-error-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/error/index.html b/packages/core/src/components/banner/test/error/index.html
new file mode 100644
index 000000000..8494bdaa4
--- /dev/null
+++ b/packages/core/src/components/banner/test/error/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+ Banner - Error
+
+
+
+
+
+
+
+ Link example
+
+
+
diff --git a/packages/core/src/components/banner/test/information/banner.e2e.ts b/packages/core/src/components/banner/test/information/banner.e2e.ts
new file mode 100644
index 000000000..d694ede00
--- /dev/null
+++ b/packages/core/src/components/banner/test/information/banner.e2e.ts
@@ -0,0 +1,20 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/banner/test/information/index.html';
+
+test.describe('tds-banner-information', () => {
+ test('renders information banner correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+
+ /* 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/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-renders-information-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-renders-information-banner-correctly-1-linux.png
new file mode 100644
index 000000000..480822c9f
Binary files /dev/null and b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-renders-information-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/information/index.html b/packages/core/src/components/banner/test/information/index.html
new file mode 100644
index 000000000..ce6f6eea1
--- /dev/null
+++ b/packages/core/src/components/banner/test/information/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+ Banner - Information
+
+
+
+
+
+
+
+ Link example
+
+
+
diff --git a/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts
new file mode 100644
index 000000000..2594d7cbd
--- /dev/null
+++ b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts
@@ -0,0 +1,43 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/breadcrumbs/test/default/index.html';
+
+test.describe('tds-breadcrumbs-default', () => {
+ test('renders default breadcrumbs correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+
+ /* 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');
+ await expect(listItems).toHaveCount(3);
+ const pageOne = page.getByRole('link').filter({ hasText: 'Page 1' });
+ const pageTwo = page.getByRole('link').filter({ hasText: 'Page 2' });
+ const pageThree = page.getByRole('link').filter({ hasText: 'Page 3' });
+
+ await expect(pageOne).toHaveCount(1);
+ await expect(pageOne).toBeVisible();
+
+ await expect(pageTwo).toHaveCount(1);
+ await expect(pageTwo).toBeVisible();
+
+ await expect(pageThree).toHaveCount(1);
+ await expect(pageThree).toBeVisible();
+ });
+
+ 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();
+
+ /* Check diff on screenshot */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-page-3-item-should-be-able-to-become-focused-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-page-3-item-should-be-able-to-become-focused-1-linux.png
new file mode 100644
index 000000000..9c38f0b6b
Binary files /dev/null and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-page-3-item-should-be-able-to-become-focused-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-renders-default-breadcrumbs-correctly-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-renders-default-breadcrumbs-correctly-1-linux.png
new file mode 100644
index 000000000..c2de71c7e
Binary files /dev/null and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-renders-default-breadcrumbs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/index.html b/packages/core/src/components/breadcrumbs/test/default/index.html
new file mode 100644
index 000000000..3a92572fe
--- /dev/null
+++ b/packages/core/src/components/breadcrumbs/test/default/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+ Breadcrumbs - Default
+
+
+
+
+
+
+
+
+ Page 1
+
+
+ Page 2
+
+
+ Page 3
+
+
+
+
diff --git a/packages/core/src/components/button/button-vars.scss b/packages/core/src/components/button/button-vars.scss
index 9a11bdb95..01c922702 100644
--- a/packages/core/src/components/button/button-vars.scss
+++ b/packages/core/src/components/button/button-vars.scss
@@ -27,25 +27,24 @@
//Secondary
--tds-btn-secondary-background: transparent;
--tds-btn-secondary-color: var(--tds-black);
- --tds-btn-secondary-border-color: rgb(0 0 0 / 48%);
+ --tds-btn-secondary-border-color: var(--tds-black-48);
--tds-btn-secondary-background-hover: var(--tds-blue-500);
--tds-btn-secondary-color-hover: var(--tds-white);
--tds-btn-secondary-border-color-hover: var(--tds-blue-500);
--tds-btn-secondary-background-active: transparent;
--tds-btn-secondary-color-active: var(--tds-black);
- --tds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
+ --tds-btn-secondary-border-color-active: var(--tds-black-87);
--tds-btn-secondary-background-focus: transparent;
--tds-btn-secondary-color-focus: var(--tds-black);
--tds-btn-secondary-border-color-focus: var(--tds-blue-400);
- --tds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+ --tds-btn-secondary-outline-color: var(--tds-black-38);
--tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
--tds-btn-secondary-background-disabled: transparent;
- --tds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
- --tds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+ --tds-btn-secondary-color-disabled: var(--tds-black-38);
+ --tds-btn-secondary-border-color-disabled: var(--tds-black-38);
--tds-btn-icon-secondary-color-focus: var(--tds-black);
--tds-btn-icon-secondary-fill-focus: var(--tds-black);
- --tds-btn-icon-secondary-fill-active: var(--tds-black);
- --tds-btn-icon-secondary-fill-active: var(--tds-black);
+ --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
/* ICON */ //not used
--tds-btn-icon-secondary-fill: var(--tds-grey-958);
@@ -56,7 +55,6 @@
--tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
/* ICON HOVER */ //not used
- --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
--tds-btn-icon-secondary-color-active: var(--tds-grey-958);
//Ghost
@@ -65,17 +63,17 @@
--tds-btn-ghost-border-color: transparent;
--tds-btn-ghost-background-hover: transparent;
--tds-btn-ghost-color-hover: var(--tds-black);
- --tds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
- --tds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
+ --tds-btn-ghost-border-color-hover: var(--tds-black-48);
+ --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
--tds-btn-ghost-background-active: transparent;
--tds-btn-ghost-color-active: var(--tds-black);
- --tds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
+ --tds-btn-ghost-border-color-active: var(--tds-black-87);
--tds-btn-ghost-background-focus: transparent;
--tds-btn-ghost-color-focus: var(--tds-black);
- --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
- --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+ --tds-btn-ghost-border-color-focus: var(--tds-blue-400);
+ --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
--tds-btn-ghost-background-disabled: transparent;
- --tds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
+ --tds-btn-ghost-color-disabled: var(--tds-black-38);
--tds-btn-ghost-border-color-disabled: transparent;
/* ICON */
@@ -99,7 +97,7 @@
--tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
--tds-btn-danger-background-disabled-secondary: var(--tds-white);
--tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
- --tds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
+ --tds-btn-danger-color-disabled: var(--tds-black-38);
--tds-btn-danger-border-color-disabled: transparent;
/* ICON */
@@ -128,7 +126,7 @@
--tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
--tds-btn-primary-background-disabled-secondary: var(--tds-grey-868);
--tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
- --tds-btn-primary-color-disabled: var(--tds-grey-600);
+ --tds-btn-primary-color-disabled: var(--tds-white-38);
/* ICON */ //not used
--tds-btn-icon-primary-fill: var(--tds-grey-50);
@@ -137,21 +135,21 @@
//Secondary
--tds-btn-secondary-background: transparent;
--tds-btn-secondary-color: var(--tds-white);
- --tds-btn-secondary-border-color: var(--tds-white);
+ --tds-btn-secondary-border-color: var(--tds-white-48);
--tds-btn-secondary-background-hover: var(--tds-blue-500);
--tds-btn-secondary-color-hover: var(--tds-white);
--tds-btn-secondary-border-color-hover: var(--tds-blue-500);
--tds-btn-secondary-background-active: transparent;
--tds-btn-secondary-color-active: var(--tds-white);
- --tds-btn-secondary-border-color-active: var(--tds-white);
+ --tds-btn-secondary-border-color-active: var(--tds-white-87);
--tds-btn-secondary-background-focus: transparent;
--tds-btn-secondary-color-focus: var(--tds-white);
--tds-btn-secondary-border-color-focus: var(--tds-blue-400);
--tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
--tds-btn-secondary-outline-color: var(--tds-white);
--tds-btn-secondary-background-disabled: transparent;
- --tds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
- --tds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+ --tds-btn-secondary-color-disabled: var(--tds-white-38);
+ --tds-btn-secondary-border-color-disabled: var(--tds-white-38);
--tds-btn-icon-secondary-color-focus: var(--tds-white);
--tds-btn-icon-secondary-fill-focus: var(--tds-white);
@@ -165,17 +163,17 @@
--tds-btn-ghost-border-color: transparent;
--tds-btn-ghost-background-hover: transparent;
--tds-btn-ghost-color-hover: var(--tds-white);
- --tds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
- --tds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
+ --tds-btn-ghost-border-color-hover: var(--tds-white-48);
+ --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
--tds-btn-ghost-background-active: transparent;
--tds-btn-ghost-color-active: var(--tds-white);
- --tds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
+ --tds-btn-ghost-border-color-active: var(--tds-white-87);
--tds-btn-ghost-background-focus: transparent;
--tds-btn-ghost-color-focus: var(--tds-white);
--tds-btn-ghost-border-color-focus: var(--tds-blue-300);
--tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
--tds-btn-ghost-background-disabled: transparent;
- --tds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
+ --tds-btn-ghost-color-disabled: var(--tds-white-38);
--tds-btn-ghost-border-color-disabled: transparent;
/* ICON */
@@ -199,7 +197,7 @@
--tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
--tds-btn-danger-background-disabled-secondary: var(--tds-grey-868);
--tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
- --tds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
+ --tds-btn-danger-color-disabled: var(--tds-white-38);
--tds-btn-danger-border-color-disabled: transparent;
/* ICON */
diff --git a/packages/core/src/components/card/test/basic/card.e2e.ts b/packages/core/src/components/card/test/basic/card.e2e.ts
new file mode 100644
index 000000000..8a46294d8
--- /dev/null
+++ b/packages/core/src/components/card/test/basic/card.e2e.ts
@@ -0,0 +1,13 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/card/test/basic/index.html';
+
+test.describe('tds-card-basic', () => {
+ test('renders basic card correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+
+ /* Check diff on screenshot */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png
new file mode 100644
index 000000000..8cb897c35
Binary files /dev/null and b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/basic/index.html b/packages/core/src/components/card/test/basic/index.html
new file mode 100644
index 000000000..a706b8834
--- /dev/null
+++ b/packages/core/src/components/card/test/basic/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Card - Basic
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts b/packages/core/src/components/card/test/clickable/card.e2e.ts
new file mode 100644
index 000000000..e5c786f30
--- /dev/null
+++ b/packages/core/src/components/card/test/clickable/card.e2e.ts
@@ -0,0 +1,26 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/card/test/clickable/index.html';
+
+test.describe('tds-card-clickable', () => {
+ test('renders clickable card correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardButton = page.getByRole('button');
+ await cardButton.hover();
+
+ /* Check diff on screenshot */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+
+ test('card should contain a button that is clickable', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardButton = page.getByRole('button');
+ await expect(cardButton).toHaveCount(1);
+ await expect(cardButton).toBeVisible();
+
+ const myEventSpy = await page.spyOnEvent('click');
+ await cardButton.click();
+ expect(myEventSpy).toHaveReceivedEvent();
+ });
+});
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png
new file mode 100644
index 000000000..b3033dcab
Binary files /dev/null and b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/clickable/index.html b/packages/core/src/components/card/test/clickable/index.html
new file mode 100644
index 000000000..e2f93788d
--- /dev/null
+++ b/packages/core/src/components/card/test/clickable/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Card - clickable
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts b/packages/core/src/components/card/test/default/card.e2e.ts
new file mode 100644
index 000000000..73a17b886
--- /dev/null
+++ b/packages/core/src/components/card/test/default/card.e2e.ts
@@ -0,0 +1,40 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/card/test/default/index.html';
+
+test.describe('tds-card-default', () => {
+ test('renders default card correctly', async ({ page }) => {
+ await page.goto(componentTestPath);
+
+ /* Check diff on screenshot */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+
+ test('header text exists', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardHeaderText = page.getByText('Header text', { exact: true });
+ await expect(cardHeaderText).toHaveCount(1);
+ await expect(cardHeaderText).toBeVisible();
+ });
+
+ test('subheader text exists', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardSubheaderText = page.getByText('Subheader text', { exact: true });
+ await expect(cardSubheaderText).toHaveCount(1);
+ await expect(cardSubheaderText).toBeVisible();
+ });
+
+ test('arrow icon exists', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardTdsIcon = page.getByRole('img');
+ await expect(cardTdsIcon).toHaveCount(1);
+ await expect(cardTdsIcon).toBeVisible();
+ });
+
+ test('card should not contain a button that is clickable', async ({ page }) => {
+ await page.goto(componentTestPath);
+ const cardButton = page.getByRole('button');
+ await expect(cardButton).toHaveCount(0);
+ });
+});
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png
new file mode 100644
index 000000000..a23c2534c
Binary files /dev/null and b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/default/index.html b/packages/core/src/components/card/test/default/index.html
new file mode 100644
index 000000000..e118c66e5
--- /dev/null
+++ b/packages/core/src/components/card/test/default/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Card - Default
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/src/components/datetime/datetime.stories.tsx b/packages/core/src/components/datetime/datetime.stories.tsx
index 2a1ea0607..bad4bb9a9 100644
--- a/packages/core/src/components/datetime/datetime.stories.tsx
+++ b/packages/core/src/components/datetime/datetime.stories.tsx
@@ -232,6 +232,9 @@ const datetimeTemplate = ({
datetimeElement.addEventListener('tdsBlur', (event) => {
console.log(event);
});
+ datetimeElement.addEventListener('tdsInput', (event) => {
+ console.log(event);
+ });
`,
);
diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx
index 1ce5fdaed..265bab0af 100644
--- a/packages/core/src/components/datetime/datetime.tsx
+++ b/packages/core/src/components/datetime/datetime.tsx
@@ -1,4 +1,4 @@
-import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';
+import { Component, State, h, Prop, Listen, Event, EventEmitter, Method } from '@stencil/core';
@Component({
tag: 'tds-datetime',
@@ -10,11 +10,11 @@ export class TdsDatetime {
/** Text-input for focus state */
textInput?: HTMLInputElement;
- /** Sets input type */
+ /** Sets an input type */
@Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';
/** Value of the input text */
- @Prop({ reflect: true }) value = '';
+ @Prop({ reflect: true, mutable: true }) value = '';
/** Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00" */
@Prop() min: string;
@@ -82,6 +82,21 @@ export class TdsDatetime {
})
tdsFocus: EventEmitter;
+ /** Input event for the Datetime */
+ @Event({
+ eventName: 'tdsInput',
+ composed: true,
+ bubbles: true,
+ cancelable: false,
+ })
+ tdsInput: EventEmitter;
+
+ /** Method that sets the value of the datetime element */
+ @Method()
+ async setValue(newValue: string) {
+ this.value = newValue;
+ }
+
getDefaultValue = () => {
const dateTimeObj = {
year: this.defaultValue.slice(0, 4),
@@ -121,9 +136,9 @@ export class TdsDatetime {
}
// Data input event in value prop
- handleInput(e): void {
- this.value = e.target.value;
- this.tdsChange.emit(e);
+ handleInput(e: InputEvent): void {
+ this.value = (e.target as HTMLInputElement).value;
+ this.tdsInput.emit(e);
}
// Change event isn't a composed:true by default in for input
@@ -132,13 +147,13 @@ export class TdsDatetime {
}
/** Set the input as focus when clicking the whole Datetime with suffix/prefix */
- handleFocusClick(e): void {
+ handleFocusClick(e: FocusEvent): void {
this.textInput.focus();
this.tdsFocus.emit(e);
}
/** Set the input as focus when clicking the whole Datetime with suffix/prefix */
- handleBlur(e): void {
+ handleBlur(e: FocusEvent): void {
this.textInput.blur();
this.tdsBlur.emit(e);
}
diff --git a/packages/core/src/components/datetime/readme.md b/packages/core/src/components/datetime/readme.md
index c9f6075cf..07fdf6b47 100644
--- a/packages/core/src/components/datetime/readme.md
+++ b/packages/core/src/components/datetime/readme.md
@@ -7,22 +7,22 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------ |
-| `autofocus` | `autofocus` | Autofocus for input | `boolean` | `false` |
-| `defaultValue` | `default-value` | Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM | `string` | `'none'` |
-| `disabled` | `disabled` | Set input in disabled state | `boolean` | `false` |
-| `helper` | `helper` | Helper text for the component | `string` | `''` |
-| `label` | `label` | Label text for the component | `string` | `''` |
-| `max` | `max` | Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00" | `string` | `undefined` |
-| `min` | `min` | Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00" | `string` | `undefined` |
-| `modeVariant` | `mode-variant` | Set the variant of the Datetime component. | `"primary" \| "secondary"` | `null` |
-| `name` | `name` | Name property | `string` | `''` |
-| `noMinWidth` | `no-min-width` | Resets min width rule | `boolean` | `false` |
-| `size` | `size` | Size of the input | `"lg" \| "md" \| "sm"` | `'lg'` |
-| `state` | `state` | Error state of input | `string` | `undefined` |
-| `type` | `type` | Sets input type | `"date" \| "datetime-local" \| "time"` | `'datetime-local'` |
-| `value` | `value` | Value of the input text | `string` | `''` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
+| `autofocus` | `autofocus` | Autofocus for input | `boolean` | `false` |
+| `defaultValue` | `default-value` | Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM | `string` | `'none'` |
+| `disabled` | `disabled` | Set input in disabled state | `boolean` | `false` |
+| `helper` | `helper` | Helper text for the component | `string` | `''` |
+| `label` | `label` | Label text for the component | `string` | `''` |
+| `max` | `max` | Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00" | `string` | `undefined` |
+| `min` | `min` | Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00" | `string` | `undefined` |
+| `modeVariant` | `mode-variant` | Set the variant of the Datetime component. | `"primary" \| "secondary"` | `null` |
+| `name` | `name` | Name property | `string` | `''` |
+| `noMinWidth` | `no-min-width` | Resets min width rule | `boolean` | `false` |
+| `size` | `size` | Size of the input | `"lg" \| "md" \| "sm"` | `'lg'` |
+| `state` | `state` | Error state of input | `string` | `undefined` |
+| `type` | `type` | Sets an input type | `"date" \| "datetime-local" \| "text" \| "time"` | `'text'` |
+| `value` | `value` | Value of the input text | `string` | `''` |
## Events
@@ -32,6 +32,26 @@
| `tdsBlur` | Blur event for the Datetime | `CustomEvent` |
| `tdsChange` | Change event for the Datetime | `CustomEvent` |
| `tdsFocus` | Focus event for the Datetime | `CustomEvent` |
+| `tdsInput` | Input event for the Datetime | `CustomEvent` |
+
+
+## Methods
+
+### `setValue(newValue: string) => Promise`
+
+Method that sets the value of the datetime element
+
+#### Parameters
+
+| Name | Type | Description |
+| ---------- | -------- | ----------- |
+| `newValue` | `string` | |
+
+#### Returns
+
+Type: `Promise`
+
+
## Dependencies
diff --git a/packages/core/src/components/dropdown/dropdown-filter.scss b/packages/core/src/components/dropdown/dropdown-filter.scss
index 1b3790550..4191cd68e 100644
--- a/packages/core/src/components/dropdown/dropdown-filter.scss
+++ b/packages/core/src/components/dropdown/dropdown-filter.scss
@@ -17,6 +17,7 @@
&.disabled {
color: var(--tds-dropdown-disabled-color);
+ border-bottom: 1px solid transparent;
}
.value-wrapper {
diff --git a/packages/core/src/components/dropdown/dropdown-option/readme.md b/packages/core/src/components/dropdown/dropdown-option/readme.md
index fb3b88d91..a1bb788e8 100644
--- a/packages/core/src/components/dropdown/dropdown-option/readme.md
+++ b/packages/core/src/components/dropdown/dropdown-option/readme.md
@@ -28,6 +28,12 @@
Method to select/deselect an option.
+#### Parameters
+
+| Name | Type | Description |
+| ---------- | --------- | ----------- |
+| `selected` | `boolean` | |
+
#### Returns
Type: `Promise`
diff --git a/packages/core/src/components/dropdown/dropdown.stories.tsx b/packages/core/src/components/dropdown/dropdown.stories.tsx
index d96716ea8..1d03a1f95 100644
--- a/packages/core/src/components/dropdown/dropdown.stories.tsx
+++ b/packages/core/src/components/dropdown/dropdown.stories.tsx
@@ -111,6 +111,16 @@ export default {
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',
@@ -157,6 +167,7 @@ export default {
modeVariant: 'Inherit from parent',
error: false,
filter: false,
+ noResultText: 'No result',
normalizeText: true,
multiselect: false,
size: 'Large',
@@ -202,6 +213,7 @@ const Template = ({
disabled,
defaultOption,
multiDefaultOption,
+ noResultText,
}) =>
formatHtmlPreview(`