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(`