Merge branch 'main' into 3421-add-autofocus-for-db-input-components

.config/.jscpd.json

@@ -41,6 +41,7 @@
 		"packages/components/src/components/radio/radio.lite.tsx",
 		"packages/components/src/components/tag/tag.spec.tsx",
 		"packages/foundations/assets/icons/functional/fonts/**",
+		"packages/foundations/assets/icons/fonts/**",
 		"packages/foundations/src",
 		"showcases/**/results/**",
 		"showcases/angular-showcase/.angular/cache",

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -1,6 +1,7 @@
 name: 🐞 Bug Report
 description: Create a report to help us improve
 labels: [bug]
+projects: ["db-ui/8"]
 body:
   - type: markdown
     attributes:

.github/workflows/00-init.yml

@@ -13,6 +13,9 @@ jobs:
 
       - name: 🔄 Init Cache Default
         uses: ./.github/actions/npm-cache
+        env:
+          ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
+          ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
 
       - name: 💀 Killing me softly
         uses: ./.github/actions/cancel-workflow

.github/workflows/01-build-patternhub.yml

@@ -86,6 +86,8 @@ jobs:
       - name: 🔨 Build Patternhub
         id: build
         env:
+          ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
+          ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
           NEXT_PUBLIC_BASE_PATH: ${{ steps.base-path.outputs.result }}
         run: |
           npx --no tsx scripts/md-resolve-svg.ts

.github/workflows/01-build-showcases.yml

@@ -38,6 +38,9 @@ jobs:
           path: packages/components/build
 
       - name: 🔨 Build ${{ inputs.showcase }}
+        env:
+          ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
+          ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
         run: npm run build --workspace=${{ inputs.showcase }}
 
       - name: ⏫ Upload ${{ inputs.showcase }}

.github/workflows/default.yml

@@ -14,6 +14,7 @@ concurrency:
 jobs:
   init:
     uses: ./.github/workflows/00-init.yml
+    secrets: inherit
 
   scan-secrets:
     if: github.event.pull_request == null || github.event.pull_request.head.repo.owner.login == 'db-ui'

.github/workflows/release.yml

@@ -8,6 +8,7 @@ on:
 jobs:
   init:
     uses: ./.github/workflows/00-init.yml
+    secrets: inherit
 
   get-playwright-version:
     uses: ./.github/workflows/01-get-playwright-version.yml

.gitignore

@@ -46,18 +46,18 @@ showcases/patternhub/public/iframe-resizer/*
 **/recordings/
 
 /__snapshots__/**/*-win32.png
-/packages/foundations/assets/icons/functional/tmp/
-/packages/foundations/assets/icons/functional/fonts/**/index.html
-/packages/foundations/assets/icons/functional/fonts/**/index.css
-/packages/foundations/assets/icons/functional/fonts/**/font-face.css
-/packages/foundations/assets/icons/functional/fonts/**/info.json
 /packages/foundations/scss/_normalize.scss
-
-/packages/foundations/assets/icons/functional/fonts/**/*.eot
-/packages/foundations/assets/icons/functional/fonts/**/*.svg
-/packages/foundations/assets/icons/functional/fonts/**/*.ttf
-/packages/foundations/assets/icons/functional/fonts/**/*.woff
-/packages/foundations/assets/icons/functional/fonts/**/*.json
+/packages/foundations/assets/icons/tmp/
+/packages/foundations/assets/icons/fonts/**/index.html
+/packages/foundations/assets/icons/fonts/**/index.css
+/packages/foundations/assets/icons/fonts/**/font-face.css
+/packages/foundations/assets/icons/fonts/**/info.json
+/packages/foundations/assets/icons/fonts/**/*.eot
+/packages/foundations/assets/icons/fonts/**/*.svg
+/packages/foundations/assets/icons/fonts/**/*.ttf
+/packages/foundations/assets/icons/fonts/**/*.woff
+/packages/foundations/assets/icons/fonts/**/*.json
+/packages/foundations/assets/icons/functional/**
 
 /output/stencil/.stencil
 /output/stencil/loader

.xo-config.cjs

@@ -1,6 +1,10 @@
 module.exports = {
 	prettier: true,
-	ignores: ['./showcases/nuxt-showcase/**', './packages/migration/**'],
+	ignores: [
+		'./showcases/nuxt-showcase/**',
+		'./packages/migration/**',
+		'./packages/foundations/**'
+	],
 	overrides: [
 		{
 			files: ['./showcases/angular-showcase/**'],

README.md

@@ -5,7 +5,7 @@
 
 # DB UI Mono (Beta) 🚂💖
 
-![Part of DB UX Design System Core](https://img.shields.io/badge/Part%20of-DB%20UX%20Design%20System%20Core-d7dce1.svg)
+![Part of DB UX Design System (Version 3)](https://img.shields.io/badge/Part%20of-DB%20UX%20Design%20System%20v3-d7dce1.svg)
 ![Main pipeline](https://github.com/db-ui/mono/actions/workflows/default.yml/badge.svg)
 ![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
@@ -36,7 +36,7 @@ designers, and content authors build, maintain, and scale best of class digital
 
 Install your preferred package via npm or yarn e.g. `npm i @db-ui/react-components`.
 
-Afterwards you need to add the specific CSS or SCSS files to provide the styles of DB UX Design System.
+Afterwards you need to add the specific CSS or SCSS files to provide the styles of DB UX Design System (Version 3).
 For a detailed overview look at our [examples](https://github.com/db-ui/examples).
 
 ## Components

__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml

@@ -12,17 +12,17 @@
   - text: (Default) Text Dot - Small Icon - Small
   - link "Placement arrow_up_right\" / \""
   - text: (Default) Inline Label
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Left"
   - text: Corner - Top - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Left"
   - text: Corner - Center - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
   - text: Corner - Bottom- Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Right"
   - text: Corner - Top - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Right"
   - text: Corner - Center - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
   - text: Corner - Bottom- Right
   - link "Examples arrow_up_right\" / \""
   - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium

__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml

@@ -12,17 +12,17 @@
   - text: (Default) Text Dot - Small Icon - Small
   - link "Placement arrow_up_right\" / \""
   - text: (Default) Inline Label
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Left"
   - text: Corner - Top - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Left"
   - text: Corner - Center - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
   - text: Corner - Bottom- Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Right"
   - text: Corner - Top - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Right"
   - text: Corner - Center - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
   - text: Corner - Bottom- Right
   - link "Examples arrow_up_right\" / \""
   - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium

__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml

@@ -12,17 +12,17 @@
   - text: (Default) Text Dot - Small Icon - Small
   - link "Placement arrow_up_right\" / \""
   - text: (Default) Inline Label
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Left"
   - text: Corner - Top - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Left"
   - text: Corner - Center - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
   - text: Corner - Bottom- Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Right"
   - text: Corner - Top - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Right"
   - text: Corner - Center - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
   - text: Corner - Bottom- Right
   - link "Examples arrow_up_right\" / \""
   - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium

__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml

@@ -12,17 +12,17 @@
   - text: (Default) Text Dot - Small Icon - Small
   - link "Placement arrow_up_right\" / \""
   - text: (Default) Inline Label
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Left"
   - text: Corner - Top - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Left"
   - text: Corner - Center - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
   - text: Corner - Bottom- Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Right"
   - text: Corner - Top - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Right"
   - text: Corner - Center - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
   - text: Corner - Bottom- Right
   - link "Examples arrow_up_right\" / \""
   - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium

__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml

@@ -12,17 +12,17 @@
   - text: (Default) Text Dot - Small Icon - Small
   - link "Placement arrow_up_right\" / \""
   - text: (Default) Inline Label
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Left"
   - text: Corner - Top - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Left"
   - text: Corner - Center - Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Left"
   - text: Corner - Bottom- Left
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Top - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Top - Right"
   - text: Corner - Top - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Center - Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Center - Right"
   - text: Corner - Center - Right
-  - button "person\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
+  - button "x_placeholder\" / \" LABEL SHOULD BE SET Corner - Bottom- Right"
   - text: Corner - Bottom- Right
   - link "Examples arrow_up_right\" / \""
   - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium

__snapshots__/brand/component/chromium/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1 +1 @@
-- text: db" / " Test
+- text: brand" / " Test

__snapshots__/brand/component/mobile-chrome/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1 +1 @@
-- text: db" / " Test
+- text: brand" / " Test

__snapshots__/brand/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1,8 +1,8 @@
 - main:
   - heading "DBBrand" [level=1]
   - link "Density arrow_up_right\" / \""
-  - text: db" / " Functional db" / " (Default) Regular db" / " Expressive
+  - text: brand" / " Functional brand" / " (Default) Regular brand" / " Expressive
   - link "Variants arrow_up_right\" / \""
-  - text: db" / " (Default) With Logo No Logo
+  - text: brand" / " (Default) With Logo No Logo
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/chromium/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1,8 +1,8 @@
 - main:
   - heading "DBBrand" [level=1]
   - link "Density arrow_up_right\" / \""
-  - text: db" / " Functional db" / " (Default) Regular db" / " Expressive
+  - text: brand" / " Functional brand" / " (Default) Regular brand" / " Expressive
   - link "Variants arrow_up_right\" / \""
-  - text: db" / " (Default) With Logo No Logo
+  - text: brand" / " (Default) With Logo No Logo
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1,8 +1,8 @@
 - main:
   - heading "DBBrand" [level=1]
   - link "Density arrow_up_right\" / \""
-  - text: db" / " Functional db" / " (Default) Regular db" / " Expressive
+  - text: brand" / " Functional brand" / " (Default) Regular brand" / " Expressive
   - link "Variants arrow_up_right\" / \""
-  - text: db" / " (Default) With Logo No Logo
+  - text: brand" / " (Default) With Logo No Logo
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/mobile-safari/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1,8 +1,8 @@
 - main:
   - heading "DBBrand" [level=1]
   - link "Density arrow_up_right\" / \""
-  - text: db" / " Functional db" / " (Default) Regular db" / " Expressive
+  - text: brand" / " Functional brand" / " (Default) Regular brand" / " Expressive
   - link "Variants arrow_up_right\" / \""
-  - text: db" / " (Default) With Logo No Logo
+  - text: brand" / " (Default) With Logo No Logo
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/brand/showcase/webkit/should-have-same-aria-snapshot/DBBrand-should-have-same-aria-snapshot.yaml

@@ -1,8 +1,8 @@
 - main:
   - heading "DBBrand" [level=1]
   - link "Density arrow_up_right\" / \""
-  - text: db" / " Functional db" / " (Default) Regular db" / " Expressive
+  - text: brand" / " Functional brand" / " (Default) Regular brand" / " Expressive
   - link "Variants arrow_up_right\" / \""
-  - text: db" / " (Default) With Logo No Logo
+  - text: brand" / " (Default) With Logo No Logo
   - img "this is a fancy placeholder logo"
   - text: Custom Logo

__snapshots__/button/component/chromium/DBButton-should-have-same-aria-snapshot.yaml

@@ -1 +1 @@
-- button "person\" / \" User"
+- button "x_placeholder\" / \" User"

__snapshots__/button/component/mobile-chrome/DBButton-should-have-same-aria-snapshot.yaml

@@ -1 +1 @@
-- button "person\" / \" User"
+- button "x_placeholder\" / \" User"

__snapshots__/button/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -17,10 +17,10 @@
   - button "Small"
   - link "Show Icon arrow_up_right\" / \""
   - button "(Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" True"
   - link "No Text arrow_up_right\" / \""
-  - button "person\" / \" (Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" (Default) False"
+  - button "x_placeholder\" / \" True"
   - link "Width arrow_up_right\" / \""
   - button "(Default) Auto"
   - button "Width"

__snapshots__/button/showcase/chromium/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -17,10 +17,10 @@
   - button "Small"
   - link "Show Icon arrow_up_right\" / \""
   - button "(Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" True"
   - link "No Text arrow_up_right\" / \""
-  - button "person\" / \" (Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" (Default) False"
+  - button "x_placeholder\" / \" True"
   - link "Width arrow_up_right\" / \""
   - button "(Default) Auto"
   - button "Width"

__snapshots__/button/showcase/mobile-chrome/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -17,10 +17,10 @@
   - button "Small"
   - link "Show Icon arrow_up_right\" / \""
   - button "(Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" True"
   - link "No Text arrow_up_right\" / \""
-  - button "person\" / \" (Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" (Default) False"
+  - button "x_placeholder\" / \" True"
   - link "Width arrow_up_right\" / \""
   - button "(Default) Auto"
   - button "Width"

__snapshots__/button/showcase/mobile-safari/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -17,10 +17,10 @@
   - button "Small"
   - link "Show Icon arrow_up_right\" / \""
   - button "(Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" True"
   - link "No Text arrow_up_right\" / \""
-  - button "person\" / \" (Default) False"
-  - button "person\" / \" True"
+  - button "x_placeholder\" / \" (Default) False"
+  - button "x_placeholder\" / \" True"
   - link "Width arrow_up_right\" / \""
   - button "(Default) Auto"
   - button "Width"