diff --git a/.gitignore b/.gitignore index 686d4384eee8..0946074b2a04 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ node_modules npm-debug.log .history .idea +.vscode/ **/build/ **/dist/ build-old/ diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 64b33adb8dd8..000000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "typescript.tsdk": "node_modules/typescript/lib", - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "files.associations": { - ".env.template": "dotenv" - } -} diff --git a/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index 4d776799b567..66aef764e0c4 100644 Binary files a/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index bcb47820e436..6b74c25e2d6a 100644 Binary files a/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/chromium/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index b9c53d56a10e..b4a9f5b108a9 100644 Binary files a/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/firefox/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index 26236573cbc8..6c3da3a095c3 100644 Binary files a/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/mobile-chrome/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png index be851730d7ef..f280cd377674 100644 Binary files a/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/mobile-safari/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml b/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml index ebd986eb6e45..37f42c316165 100644 --- a/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/badge/showcase/webkit/should-have-same-aria-snapshot/DBBadge-should-have-same-aria-snapshot.yaml @@ -9,20 +9,14 @@ - link "Size" - text: (Default) Small Medium - link "Content" - - text: (Default) Text Dot - Small Icon - Small + - text: (Default) Text Icon - Small - link "Placement" - text: (Default) Inline Label - - button "LABEL SHOULD BE SET Corner - Top - Left" - - text: Corner - Top - Left - - button "LABEL SHOULD BE SET Corner - Center - Left" - - text: Corner - Center - Left - - button "LABEL SHOULD BE SET Corner - Bottom- Left" - - text: Corner - Bottom- Left - - button "LABEL SHOULD BE SET Corner - Top - Right" - - text: Corner - Top - Right - - button "LABEL SHOULD BE SET Corner - Center - Right" - - text: Corner - Center - Right - - button "LABEL SHOULD BE SET Corner - Bottom- Right" - - text: Corner - Bottom- Right + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" + - button "LABEL SHOULD BE SET" - link "Examples" - - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Dot - Medium Icon - Medium \ No newline at end of file + - text: 9 12 123 9 12 123 Numbers (Default) Text - Medium Icon - Medium \ No newline at end of file diff --git a/__snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png index 1a15c955f09d..977529f25403 100644 Binary files a/__snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png and b/__snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png index 4f0b449f9ae8..b4b00b681c28 100644 Binary files a/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png and b/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/chromium/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/chromium/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/chromium/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/chromium/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png index 05be5a56d214..bf0ff2eb6ab5 100644 Binary files a/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png and b/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/firefox/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/firefox/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/firefox/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/firefox/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png index ffabd6a79231..847a2fb5a324 100644 Binary files a/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png and b/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/mobile-chrome/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/mobile-chrome/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/mobile-chrome/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/mobile-chrome/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/divider/showcase/mobile-safari/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/mobile-safari/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/mobile-safari/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/mobile-safari/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/divider/showcase/webkit/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml b/__snapshots__/divider/showcase/webkit/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml index 876d2d33c764..617e15383ea2 100644 --- a/__snapshots__/divider/showcase/webkit/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/divider/showcase/webkit/should-have-same-aria-snapshot/DBDivider-should-have-same-aria-snapshot.yaml @@ -1,8 +1,5 @@ - main: - heading "DBDivider" [level=1] - link "Density" - - text: Functional (Default) Regular Expressive - link "Variant" - - text: (Default) Adaptive - Horizontal Adaptive - Vertical - - link "Emphasis" - - text: (Default) Weak Strong \ No newline at end of file + - link "Emphasis" \ No newline at end of file diff --git a/__snapshots__/footer/component/chromium/DBFooter-should-have-same-aria-snapshot.yaml b/__snapshots__/footer/component/chromium/DBFooter-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..a46bf9196748 --- /dev/null +++ b/__snapshots__/footer/component/chromium/DBFooter-should-have-same-aria-snapshot.yaml @@ -0,0 +1,4 @@ +- contentinfo: + - text: Footer Navigation Content + - paragraph: © Deutsche Bahn AG + - text: Legal Links \ No newline at end of file diff --git a/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-with-only-meta-section.png b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-with-only-meta-section.png new file mode 100644 index 000000000000..8046f1baccbc Binary files /dev/null and b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-with-only-meta-section.png differ diff --git a/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-without-copyright.png b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-without-copyright.png new file mode 100644 index 000000000000..0951ef3ecee6 Binary files /dev/null and b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot-without-copyright.png differ diff --git a/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot.png b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot.png new file mode 100644 index 000000000000..bf86f041204a Binary files /dev/null and b/__snapshots__/footer/component/chromium/DBFooter-should-match-screenshot.png differ diff --git a/__snapshots__/footer/component/firefox/DBFooter-should-have-same-aria-snapshot.yaml b/__snapshots__/footer/component/firefox/DBFooter-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..a46bf9196748 --- /dev/null +++ b/__snapshots__/footer/component/firefox/DBFooter-should-have-same-aria-snapshot.yaml @@ -0,0 +1,4 @@ +- contentinfo: + - text: Footer Navigation Content + - paragraph: © Deutsche Bahn AG + - text: Legal Links \ No newline at end of file diff --git a/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-with-only-meta-section.png b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-with-only-meta-section.png new file mode 100644 index 000000000000..6395ecc9fa98 Binary files /dev/null and b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-with-only-meta-section.png differ diff --git a/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-without-copyright.png b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-without-copyright.png new file mode 100644 index 000000000000..2b65b13d8934 Binary files /dev/null and b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot-without-copyright.png differ diff --git a/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot.png b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot.png new file mode 100644 index 000000000000..ad2e599c20f8 Binary files /dev/null and b/__snapshots__/footer/component/firefox/DBFooter-should-match-screenshot.png differ diff --git a/__snapshots__/footer/component/mobile-chrome/DBFooter-should-have-same-aria-snapshot.yaml b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..a46bf9196748 --- /dev/null +++ b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-have-same-aria-snapshot.yaml @@ -0,0 +1,4 @@ +- contentinfo: + - text: Footer Navigation Content + - paragraph: © Deutsche Bahn AG + - text: Legal Links \ No newline at end of file diff --git a/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-with-only-meta-section.png b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-with-only-meta-section.png new file mode 100644 index 000000000000..8046f1baccbc Binary files /dev/null and b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-with-only-meta-section.png differ diff --git a/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-without-copyright.png b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-without-copyright.png new file mode 100644 index 000000000000..0951ef3ecee6 Binary files /dev/null and b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot-without-copyright.png differ diff --git a/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot.png b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot.png new file mode 100644 index 000000000000..bf86f041204a Binary files /dev/null and b/__snapshots__/footer/component/mobile-chrome/DBFooter-should-match-screenshot.png differ diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts index ae1dea9fe8ec..daa2d8f996ee 100644 --- a/packages/components/scripts/post-build/components.ts +++ b/packages/components/scripts/post-build/components.ts @@ -352,6 +352,9 @@ export const getComponents = (): Component[] => [ } } }, + { + name: 'footer' + }, { name: 'brand' }, diff --git a/packages/components/src/components/footer/docs/Angular.md b/packages/components/src/components/footer/docs/Angular.md new file mode 100644 index 000000000000..497cbbb3a0e9 --- /dev/null +++ b/packages/components/src/components/footer/docs/Angular.md @@ -0,0 +1,98 @@ +## Angular + +For general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package. + +### Use component + +#### Simple + +```ts app.component.ts +// app.component.ts +import { Component } from "@angular/core"; +import { DBFooter } from "@db-ux/ngx-core-components"; + +@Component({ + selector: "app-root", + imports: [DBFooter], + template: ` + +
Footer Navigation
+
Legal Links
+ + ` +}) +export class AppComponent {} +``` + +#### With custom content + +```ts app.component.ts +// app.component.ts +import { Component } from "@angular/core"; +import { DBFooter, DBLink } from "@db-ux/ngx-core-components"; + +@Component({ + selector: "app-root", + imports: [DBFooter, DBLink], + template: ` + +
+ About Us + Contact + Careers +
+
+ Privacy Policy + Terms of Service + Imprint +
+ + ` +}) +export class AppComponent {} +``` + +#### Without copyright + +```ts app.component.ts +// app.component.ts +import { Component } from "@angular/core"; +import { DBFooter, DBLink } from "@db-ux/ngx-core-components"; + +@Component({ + selector: "app-root", + imports: [DBFooter, DBLink], + template: ` + +
Footer Content
+
+ Privacy + Legal +
+ + ` +}) +export class AppComponent {} +``` + +#### Only meta section + +```ts app.component.ts +// app.component.ts +import { Component } from "@angular/core"; +import { DBFooter, DBLink } from "@db-ux/ngx-core-components"; + +@Component({ + selector: "app-root", + imports: [DBFooter, DBLink], + template: ` + +
+ Privacy + Imprint +
+ + ` +}) +export class AppComponent {} +``` diff --git a/packages/components/src/components/footer/docs/HTML.md b/packages/components/src/components/footer/docs/HTML.md new file mode 100644 index 000000000000..d110bd7f2c4c --- /dev/null +++ b/packages/components/src/components/footer/docs/HTML.md @@ -0,0 +1,54 @@ +## HTML + +For general installation and configuration take a look at the [wc-core-components](https://www.npmjs.com/package/@db-ux/wc-core-components) package. + +### Use component + +#### Simple + +```html + +
Footer Navigation
+
Legal Links
+ +``` + +#### With custom content + +```html + +
+ About Us + Contact + Careers +
+
+ Privacy Policy + Terms of Service + Imprint +
+ +``` + +#### Without copyright + +```html + +
Footer Content
+
+ Privacy + Legal +
+ +``` + +#### Only meta section + +```html + +
+ Privacy + Imprint +
+ +``` diff --git a/packages/components/src/components/footer/docs/Migration.md b/packages/components/src/components/footer/docs/Migration.md new file mode 100644 index 000000000000..58b5b7a0d5e6 --- /dev/null +++ b/packages/components/src/components/footer/docs/Migration.md @@ -0,0 +1,44 @@ +## Migration + +### Migrating from v2 to v3 + +The Footer component is new in v3. If you previously used custom footer implementations, consider migrating to the new DBFooter component for consistency. + +#### Key features + +- Standardized footer layout with main and meta sections +- Built-in copyright text support +- Responsive width variants (full, small, medium, large) +- Consistent styling with the DB UX Design System + +#### Example migration + +**Before (custom implementation):** + +```html + +``` + +**After (DBFooter component):** + +```tsx +import { DBFooter, DBLink } from "@db-ux/react-core-components"; + +Footer Navigation} + meta={ + <> + Privacy + Imprint + + } +/>; +``` diff --git a/packages/components/src/components/footer/docs/React.md b/packages/components/src/components/footer/docs/React.md new file mode 100644 index 000000000000..aa3b1aae578e --- /dev/null +++ b/packages/components/src/components/footer/docs/React.md @@ -0,0 +1,92 @@ +## React + +For general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package. + +### Use component + +#### Simple + +```tsx App.tsx +// App.tsx +import { DBFooter } from "@db-ux/react-core-components"; + +const App = () => ( + Footer Navigation} + meta={
Legal Links
} + /> +); + +export default App; +``` + +#### With custom content + +```tsx App.tsx +// App.tsx +import { DBFooter, DBLink } from "@db-ux/react-core-components"; + +const App = () => ( + + About Us + Contact + Careers + + } + meta={ + <> + Privacy Policy + Terms of Service + Imprint + + } + /> +); + +export default App; +``` + +#### Without copyright + +```tsx App.tsx +// App.tsx +import { DBFooter, DBLink } from "@db-ux/react-core-components"; + +const App = () => ( + Footer Content} + meta={ + <> + Privacy + Legal + + } + /> +); + +export default App; +``` + +#### Only meta section + +```tsx App.tsx +// App.tsx +import { DBFooter, DBLink } from "@db-ux/react-core-components"; + +const App = () => ( + + Privacy + Imprint + + } + /> +); + +export default App; +``` diff --git a/packages/components/src/components/footer/docs/Vue.md b/packages/components/src/components/footer/docs/Vue.md new file mode 100644 index 000000000000..9e4d50773b84 --- /dev/null +++ b/packages/components/src/components/footer/docs/Vue.md @@ -0,0 +1,86 @@ +## Vue + +For general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package. + +### Use component + +#### Simple + +```vue App.vue + + + +``` + +#### With custom content + +```vue App.vue + + + +``` + +#### Without copyright + +```vue App.vue + + + +``` + +#### Only meta section + +```vue App.vue + + + +``` diff --git a/packages/components/src/components/footer/footer.lite.tsx b/packages/components/src/components/footer/footer.lite.tsx new file mode 100644 index 000000000000..90e92907e128 --- /dev/null +++ b/packages/components/src/components/footer/footer.lite.tsx @@ -0,0 +1,63 @@ +import { + Slot, + useDefaultProps, + useMetadata, + useRef +} from '@builder.io/mitosis'; +import { cls, getBoolean } from '../../utils'; +import { DBFooterProps } from './model'; + +useMetadata({}); +useDefaultProps({ + showCopyright: true, + showMain: true, + showMeta: true +}); + +export default function DBFooter(props: DBFooterProps) { + const _ref = useRef(null); + + return ( +
+ {getBoolean(props.showMain, 'showMain') && ( +
+
+
+ +
+
+
+ )} + + {getBoolean(props.showMeta, 'showMeta') && ( +
+
+
+ {getBoolean( + props.showCopyright, + 'showCopyright' + ) && ( +

+ © Deutsche Bahn AG +

+ )} + +
+
+
+ )} +
+ ); +} diff --git a/packages/components/src/components/footer/footer.scss b/packages/components/src/components/footer/footer.scss new file mode 100644 index 000000000000..6aee5e17bb6a --- /dev/null +++ b/packages/components/src/components/footer/footer.scss @@ -0,0 +1,135 @@ +@use "@db-ux/core-foundations/build/styles/variables"; +@use "@db-ux/core-foundations/build/styles/screen-sizes"; +@use "@db-ux/core-foundations/build/styles/helpers"; +@use "@db-ux/core-foundations/build/styles/colors"; + +.db-footer { + background-color: colors.$db-adaptive-bg-basic-level-1-default; + + + @include helpers.display(flex); + + flex-direction: column; + + &[data-width="small"] { + .db-footer-content-container { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-sm; + } + } + + &[data-width="medium"] { + .db-footer-content-container { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-md; + } + } + + &[data-width="large"] { + .db-footer-content-container { + margin-inline: auto; + max-inline-size: screen-sizes.$db-breakpoint-lg; + } + } + + .db-footer-main { + border-block-start: variables.$db-border-width-3xs solid + colors.$db-adaptive-on-bg-basic-emphasis-60-default; + min-block-size: variables.$db-sizing-lg; + + // Use design token directly to satisfy spacing lint rules + padding-block: variables.$db-spacing-fixed-md; + padding-inline: variables.$db-spacing-fixed-lg; + + @include helpers.display(flex); + + align-items: center; + justify-content: center; + + .db-footer-content-container { + @include helpers.display(flex); + + flex: 1 0 0; + align-items: center; + justify-content: center; + min-block-size: 1px; + min-inline-size: 1px; + + .db-footer-main-inner { + @include helpers.display(flex); + + flex: 1 0 0; + flex-direction: row; + align-items: center; + align-self: stretch; + + > * { + @include helpers.display(flex); + + flex: 1 0 0; + flex-direction: column; + align-items: center; + justify-content: center; + block-size: 100%; + min-block-size: 1px; + min-inline-size: 1px; + } + } + } + } + + .db-footer-meta { + background-color: colors.$db-adaptive-bg-basic-level-2-default; + border-block-start: variables.$db-border-width-3xs solid + colors.$db-adaptive-on-bg-basic-emphasis-60-default; + + // Ensure visible height per design + min-block-size: variables.$db-sizing-md; + + // Use design token directly to satisfy spacing lint rules + padding-block: variables.$db-spacing-fixed-xs; + padding-inline: variables.$db-spacing-fixed-lg; + + @include helpers.display(flex); + + align-items: center; + justify-content: center; + + .db-footer-content-container { + @include helpers.display(flex); + + flex: 1 0 0; + gap: variables.$db-spacing-fixed-sm; + align-items: center; + min-block-size: 1px; + min-inline-size: 1px; + + > *:not(.db-footer-copyright) { + @include helpers.display(flex); + + flex: 1 0 0; + } + + // Inner wrapper to align copyright + meta slot horizontally + .db-footer-meta-inner { + @include helpers.display(flex); + + gap: variables.$db-spacing-fixed-sm; + align-items: center; + flex: 1 0 0; + + > *:not(.db-footer-copyright) { + @include helpers.display(flex); + + flex: 1 0 0; + } + } + } + + .db-footer-copyright { + font: var(--db-type-body-sm); + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; + white-space: nowrap; + } + } +} diff --git a/packages/components/src/components/footer/footer.spec.tsx b/packages/components/src/components/footer/footer.spec.tsx new file mode 100644 index 000000000000..2456aa94e6e2 --- /dev/null +++ b/packages/components/src/components/footer/footer.spec.tsx @@ -0,0 +1,67 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect, test } from '@playwright/experimental-ct-react'; + +import { DBFooter } from './index'; +// @ts-ignore - vue can only find it with .ts as file ending +import { DEFAULT_VIEWPORT } from '../../shared/constants.ts'; + +const comp: any = ( + Footer Navigation Content} + meta={
Legal Links
} + /> +); + +const compNoCopyright: any = ( + Footer Content} + meta={
Links
} + /> +); + +const compOnlyMeta: any = ( + Meta Links Only} /> +); + +const testComponent = () => { + test('should match screenshot', async ({ mount }) => { + const component = await mount(comp); + await expect(component).toHaveScreenshot(); + }); + + test('should match screenshot without copyright', async ({ mount }) => { + const component = await mount(compNoCopyright); + await expect(component).toHaveScreenshot(); + }); + + test('should match screenshot with only meta section', async ({ + mount + }) => { + const component = await mount(compOnlyMeta); + await expect(component).toHaveScreenshot(); + }); +}; + +const testA11y = () => { + test('should have same aria-snapshot', async ({ mount }, testInfo) => { + const component = await mount(comp); + const snapshot = await component.ariaSnapshot(); + expect(snapshot).toMatchSnapshot(`${testInfo.testId}.yaml`); + }); + + test('should not have any A11y issues', async ({ page, mount }) => { + await mount(comp); + const accessibilityScanResults = await new AxeBuilder({ page }) + .include('.db-footer') + .analyze(); + + expect(accessibilityScanResults.violations).toEqual([]); + }); +}; + +test.describe('DBFooter', () => { + test.use({ viewport: DEFAULT_VIEWPORT }); + testComponent(); + testA11y(); +}); diff --git a/packages/components/src/components/footer/index.html b/packages/components/src/components/footer/index.html new file mode 100644 index 000000000000..f36b90a26bc6 --- /dev/null +++ b/packages/components/src/components/footer/index.html @@ -0,0 +1,27 @@ + + + + + DBFooter + + + +
+
+
+
+
Footer Main Content
+
+
+
+
+
+
+

© Deutsche Bahn AG

+
Meta Content
+
+
+
+
+ + diff --git a/packages/components/src/components/footer/index.ts b/packages/components/src/components/footer/index.ts new file mode 100644 index 000000000000..dd1cb27e4303 --- /dev/null +++ b/packages/components/src/components/footer/index.ts @@ -0,0 +1 @@ +export { default as DBFooter } from './footer'; diff --git a/packages/components/src/components/footer/model.ts b/packages/components/src/components/footer/model.ts new file mode 100644 index 000000000000..d7d504e14761 --- /dev/null +++ b/packages/components/src/components/footer/model.ts @@ -0,0 +1,42 @@ +import { + ContainerWidthProps, + GlobalProps, + GlobalState +} from '../../shared/model'; + +export type DBFooterDefaultProps = { + /** + * Slot for the main footer content. + * Typically used for navigation links, footer columns, etc. + */ + main?: any; + + /** + * Slot for the meta footer content. + * Typically used for copyright information, legal links, etc. + */ + meta?: any; + + /** + * Shows or hides the copyright text "© Deutsche Bahn AG". + */ + showCopyright?: boolean | string; + + /** + * Shows or hides the main footer section. + */ + showMain?: boolean | string; + + /** + * Shows or hides the meta footer section. + */ + showMeta?: boolean | string; +}; + +export type DBFooterProps = DBFooterDefaultProps & + GlobalProps & + ContainerWidthProps; + +export type DBFooterDefaultState = {}; + +export type DBFooterState = DBFooterDefaultState & GlobalState; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index b905eb44af91..62053f259ecb 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -26,6 +26,8 @@ export * from './components/divider'; export * from './components/divider/model'; export * from './components/drawer'; export * from './components/drawer/model'; +export * from './components/footer'; +export * from './components/footer/model'; export * from './components/header'; export * from './components/header/model'; export * from './components/icon'; diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss index 0830302f8b04..2d0a39f5b93a 100644 --- a/packages/components/src/styles/index.scss +++ b/packages/components/src/styles/index.scss @@ -6,6 +6,7 @@ @forward "../components/input/input"; @forward "../components/brand/brand"; @forward "../components/header/header"; +@forward "../components/footer/footer"; @forward "../components/page/page"; @forward "../components/link/link"; @forward "../components/section/section"; diff --git a/showcases/angular-showcase/src/app/components/default.component.html b/showcases/angular-showcase/src/app/components/default.component.html index 193515fe1f3f..2ce44ecf922c 100644 --- a/showcases/angular-showcase/src/app/components/default.component.html +++ b/showcases/angular-showcase/src/app/components/default.component.html @@ -22,6 +22,7 @@ context: { exampleProps: example.props ?? {}, exampleName: example.name, + exampleContent: $any(example).content, exampleIndex: exampleIndex, variantIndex: variantRefIndex } @@ -78,6 +79,8 @@

{{ title }}

context: { exampleProps: example.props, exampleName: example.name, + exampleContent: + $any(example).content, exampleIndex: exampleIndex, variantIndex: variantIndex } diff --git a/showcases/angular-showcase/src/app/components/footer/footer.component.html b/showcases/angular-showcase/src/app/components/footer/footer.component.html new file mode 100644 index 000000000000..b1b240327549 --- /dev/null +++ b/showcases/angular-showcase/src/app/components/footer/footer.component.html @@ -0,0 +1,28 @@ + + + +
+ {{ exampleContent ?? exampleName }} +
+
+ Legal Links +
+ + + diff --git a/showcases/angular-showcase/src/app/components/footer/footer.component.ts b/showcases/angular-showcase/src/app/components/footer/footer.component.ts new file mode 100644 index 000000000000..2b12198bf499 --- /dev/null +++ b/showcases/angular-showcase/src/app/components/footer/footer.component.ts @@ -0,0 +1,18 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { DBFooter } from '../../../../../../output/angular/src'; +import defaultComponentVariants from '../../../../../shared/footer.json'; +import { environment } from '../../../environments/environment'; +import { DefaultComponent } from '../default.component'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + imports: environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBFooter], + schemas: environment.webComponents ? [CUSTOM_ELEMENTS_SCHEMA] : [], + standalone: true +}) +export class FooterComponent { + variants = defaultComponentVariants; +} diff --git a/showcases/angular-showcase/src/app/utils/navigation-item.ts b/showcases/angular-showcase/src/app/utils/navigation-item.ts index b7b06efdd447..02210730193b 100644 --- a/showcases/angular-showcase/src/app/utils/navigation-item.ts +++ b/showcases/angular-showcase/src/app/utils/navigation-item.ts @@ -9,6 +9,7 @@ import { CheckboxComponent } from '../components/checkbox/checkbox.component'; import { CustomSelectComponent } from '../components/custom-select/custom-select.component'; import { DividerComponent } from '../components/divider/divider.component'; import { DrawerComponent } from '../components/drawer/drawer.component'; +import { FooterComponent } from '../components/footer/footer.component'; import { HeaderComponent } from '../components/header/header.component'; import { HomeComponent } from '../components/home/home.component'; import { IconComponent } from '../components/icon/icon.component'; @@ -172,6 +173,11 @@ export const NAVIGATION_ITEMS: NavItem[] = [ path: '01/header', label: 'Header', component: HeaderComponent + }, + { + path: '01/footer', + label: 'Footer', + component: FooterComponent } ]) }, diff --git a/showcases/patternhub/data/components.json b/showcases/patternhub/data/components.json index 987d0eb9d487..22801bd498f8 100644 --- a/showcases/patternhub/data/components.json +++ b/showcases/patternhub/data/components.json @@ -138,6 +138,10 @@ "label": "DBHeader", "name": "header" }, + { + "label": "DBFooter", + "name": "footer" + }, { "label": "DBSection", "name": "section" diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx index 18492ff0e685..397e3cb83828 100644 --- a/showcases/patternhub/data/routes.tsx +++ b/showcases/patternhub/data/routes.tsx @@ -9,6 +9,7 @@ import CheckboxComponent from '../../react-showcase/src/components/checkbox'; import CustomSelectComponent from '../../react-showcase/src/components/custom-select'; import DividerComponent from '../../react-showcase/src/components/divider'; import DrawerComponent from '../../react-showcase/src/components/drawer'; +import FooterComponent from '../../react-showcase/src/components/footer'; import HeaderComponent from '../../react-showcase/src/components/header'; // Import IconComponent from '../../react-showcase/src/components/icon'; import InfotextComponent from '../../react-showcase/src/components/infotext'; @@ -39,6 +40,7 @@ import * as checkboxCode from '../components/code-docs/checkbox'; import * as customSelectCode from '../components/code-docs/custom-select'; import * as dividerCode from '../components/code-docs/divider'; import * as drawerCode from '../components/code-docs/drawer'; +import * as footerCode from '../components/code-docs/footer'; import * as headerCode from '../components/code-docs/header'; // Import * as iconCode from '../components/code-docs/icon'; import * as infotextCode from '../components/code-docs/infotext'; @@ -118,6 +120,7 @@ const nameComponentMap = { divider: , drawer: , header: , + footer: , // Page: , section: , navigation: ( diff --git a/showcases/react-showcase/src/components/data.ts b/showcases/react-showcase/src/components/data.ts index cd1333254ce9..1541e55397f6 100644 --- a/showcases/react-showcase/src/components/data.ts +++ b/showcases/react-showcase/src/components/data.ts @@ -17,7 +17,11 @@ export const getVariants = ( example: getExample({ ...example.props, id: example.props?.id ?? example.name, - children: example.props?.children ?? example.name + // Prefer explicit JSON content when present, fallback to provided children, then name + children: + (example as any)?.content ?? + example.props?.children ?? + example.name }) })) })); diff --git a/showcases/react-showcase/src/components/footer/index.tsx b/showcases/react-showcase/src/components/footer/index.tsx new file mode 100644 index 000000000000..53e70ec22793 --- /dev/null +++ b/showcases/react-showcase/src/components/footer/index.tsx @@ -0,0 +1,35 @@ +import { DBFooter } from '../../../../../output/react/src'; +import defaultComponentVariants from '../../../../shared/footer.json'; +import { type BaseComponentProps } from '../base-component-data'; +import { getVariants } from '../data'; +import DefaultComponent from '../default-component'; + +const getFooter = ({ + children, + showCopyright, + showMain, + showMeta, + width +}: any) => ( + {children}} + /> +); + +const FooterComponent = (props: BaseComponentProps) => { + return ( + + ); +}; + +export default FooterComponent; diff --git a/showcases/react-showcase/src/utils/navigation-item.tsx b/showcases/react-showcase/src/utils/navigation-item.tsx index 1f5f0774bb6e..c8376547dc02 100644 --- a/showcases/react-showcase/src/utils/navigation-item.tsx +++ b/showcases/react-showcase/src/utils/navigation-item.tsx @@ -8,6 +8,7 @@ import CheckboxComponent from '../components/checkbox'; import CustomSelectComponent from '../components/custom-select'; import DividerComponent from '../components/divider'; import DrawerComponent from '../components/drawer'; +import FooterComponent from '../components/footer'; import HeaderComponent from '../components/header'; import Home from '../components/home'; import IconComponent from '../components/icon'; @@ -175,6 +176,11 @@ export const NAVIGATION_ITEMS: NavigationItem[] = [ path: 'header', label: 'Header', component: + }, + { + path: 'footer', + label: 'Footer', + component: } ]) }, diff --git a/showcases/shared/default-component-data.ts b/showcases/shared/default-component-data.ts index 791857481de4..3e374bb0a24c 100644 --- a/showcases/shared/default-component-data.ts +++ b/showcases/shared/default-component-data.ts @@ -2,6 +2,7 @@ export type DefaultComponentExample = { name?: string; experimental?: boolean; example?: any; + content?: string; style?: { display?: string; width?: string; diff --git a/showcases/shared/footer.json b/showcases/shared/footer.json new file mode 100644 index 000000000000..ba2fbbd7e1a4 --- /dev/null +++ b/showcases/shared/footer.json @@ -0,0 +1,17 @@ +[ + { + "name": "Default", + "examples": [ + { + "name": "Full", + "content": "Default Footer with showCopyright, showMain and showMeta enabled", + "props": { + "width": "full", + "showMeta": true, + "showMain": true, + "showCopyright": true + } + } + ] + } +] diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css index b244b174a8f8..d9ec3208d1bc 100644 --- a/showcases/showcase-styles.css +++ b/showcases/showcase-styles.css @@ -1,6 +1,6 @@ /* Styles for the showcases */ .desktop-navigation ul { - list-style-type: ""; + list-style-type: none; display: flex; } @@ -50,6 +50,17 @@ db-card:is(.variants-card) > .db-card { gap: var(--db-spacing-fixed-md); } +/* Ensure footer examples take full width within variant lists */ +.variants-list > div:has(.db-footer), +.variants-list > div:has(db-footer) { + inline-size: 100%; +} + +.variants-list .db-footer, +.variants-list db-footer { + inline-size: 100%; +} + .variants-list .db-select, .w-full { inline-size: 100%; @@ -178,26 +189,27 @@ main .db-header { align-items: center; font: var(--db-type-body-2xs); font-weight: 700; + white-space: nowrap; +} - a { - text-decoration: none; - } - - text-wrap: nowrap; +.dummy-component a { + text-decoration: none; } .section-card-container { display: grid; gap: var(--db-spacing-fixed-sm); grid-template-columns: repeat(1, minmax(0, 1fr)); +} - @media screen and (width >= 768px) { +@media screen and (width >= 768px) { + .section-card-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} - .db-card { - inline-size: 100%; - } +.section-card-container .db-card { + inline-size: 100%; } .nav-item-list { diff --git a/showcases/vue-showcase/src/components/DefaultComponent.vue b/showcases/vue-showcase/src/components/DefaultComponent.vue index cf6498885cc4..a68a66d104be 100644 --- a/showcases/vue-showcase/src/components/DefaultComponent.vue +++ b/showcases/vue-showcase/src/components/DefaultComponent.vue @@ -128,6 +128,7 @@ const getElevation = (): "1" | "2" | "3" => name="example" v-bind:exampleProps="example.props ?? {}" v-bind:exampleName="example.name" + v-bind:exampleContent="example.content" v-bind:exampleIndex="exampleIndex" v-bind:variantIndex="variantRefIndex" > @@ -165,6 +166,7 @@ const getElevation = (): "1" | "2" | "3" => name="example" v-bind:exampleProps="example.props" v-bind:exampleName="example.name" + v-bind:exampleContent="example.content" v-bind:exampleIndex="exampleIndex" v-bind:variantIndex="variantIndex" > diff --git a/showcases/vue-showcase/src/components/footer/Footer.vue b/showcases/vue-showcase/src/components/footer/Footer.vue new file mode 100644 index 000000000000..1805177ded66 --- /dev/null +++ b/showcases/vue-showcase/src/components/footer/Footer.vue @@ -0,0 +1,24 @@ + + + diff --git a/showcases/vue-showcase/src/utils/navigation-items.ts b/showcases/vue-showcase/src/utils/navigation-items.ts index beee8433a446..486594bac33e 100644 --- a/showcases/vue-showcase/src/utils/navigation-items.ts +++ b/showcases/vue-showcase/src/utils/navigation-items.ts @@ -10,6 +10,7 @@ import Checkbox from '../components/checkbox/Checkbox.vue'; import CustomSelect from '../components/custom-select/CustomSelect.vue'; import Divider from '../components/divider/Divider.vue'; import Drawer from '../components/drawer/Drawer.vue'; +import Footer from '../components/footer/Footer.vue'; import Header from '../components/header/Header.vue'; import Home from '../components/home/Home.vue'; import Icon from '../components/icon/Icon.vue'; @@ -177,6 +178,11 @@ export const navigationItems: NavItem[] = [ path: '/01/header', label: 'Header', component: markRaw(Header) + }, + { + path: '/01/footer', + label: 'Footer', + component: markRaw(Footer) } ]) },