feat: added playground page (#4551)

* feat: align how to use a DBCard as button or anchor

* auto update snapshots (#4507)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: update interactive card

* auto update snapshots (#4525)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update docs/migration/v2.x.x-to-v3.0.0.md

Co-authored-by: Maximilian Franzke <[email protected]>

* Update docs/migration/v2.x.x-to-v3.0.0.md

Co-authored-by: Maximilian Franzke <[email protected]>

* Update showcases/vue-showcase/src/components/card/Card.vue

Co-authored-by: Maximilian Franzke <[email protected]>

* Update showcases/react-showcase/src/components/card/index.tsx

Co-authored-by: Maximilian Franzke <[email protected]>

* Update showcases/angular-showcase/src/app/components/card/card.component.html

Co-authored-by: Maximilian Franzke <[email protected]>

* feat: add auto interactive mode when wrapping card in button or anchor

* fix: linting issue

* feat: added playground page (#4543)

* Revert "feat: added playground page (#4543)"

This reverts commit 9c5665e.

* Revert "chore: update lint-staged config (#4500)" (#4550)

This reverts commit f6baa38.

* docs: added playground page

* chore: run format

* fix: linting issue

* auto update snapshots (#4558)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply suggestions from code review

* Update index.mdx

* refactor: restructured the pages structure

* refactor: more contents

* style: optimizations

* Update v2.x.x-to-v3.0.0.md

* refactor: prettier

* refactor: running prettier

* Update .jscpd.json

* Update playgrounds.scss

* auto update snapshots (#4563)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: issue with vue showcase

* refactor: some optimizations

* refactor: further optimizations

* style: added general tokens

* style: optimization

* refactor: reformatting

* refactor: using a variable

* auto update snapshots (#4584)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 3 people

.config/.jscpd.json

@@ -3,6 +3,7 @@
 	"reporters": ["console"],
 	"minTokens": 65,
 	"ignore": [
+		"showcases/patternhub/public/assets/images/*.svg",
 		"**/.angular/**",
 		".history/**",
 		"**/__snapshots__/**",

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -9,6 +9,8 @@ body:
       value: |
         Thank you for taking the time to fill out this bug report! Feedback from the community is highly valuable to us, as it helps improve our work and benefits all users. 🙂
 
+        We would be more than happy if you could share a URL if the problem occurs in our [documentation](https://design-system.deutschebahn.com/core-web/), or at least some code. Even better would be a [working example on StackBlitz or CodeSandbox](https://design-system.deutschebahn.com/core-web/version/latest/foundations/playgrounds). Please keep in mind not to share any internal information or data this way. This includes internal URLs. Only use sample material.
+
   - type: checkboxes
     id: component
     attributes:

__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png

@@ -16,7 +16,7 @@ pre:not([class]):has(code) {
 	}
 }
 
-a:has(code:not([class])) {
+a:has(code:not([class]):only-child) {
 	background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
 	color: colors.$db-adaptive-on-bg-inverted-default;
 

packages/foundations/scss/defaults/default-code.scss

@@ -291,7 +291,8 @@ export const ROUTES: NavigationItem[] = [
 				]
 			}
 		]
-	}
+	},
+	{ label: 'Playgrounds', path: '/foundations/playgrounds' }
 ];
 
 const fillNavigationRecursive = (

showcases/patternhub/data/routes.tsx

@@ -7,6 +7,7 @@ import LinkHeader from '../components/link-header';
 import '../styles/decision-tree.scss';
 import '../styles/globals.scss';
 import '../styles/highlight.scss';
+import '../styles/playgrounds.scss';
 
 const App = ({ Component, pageProps }: AppProps) => (
 	<MDXProvider

showcases/patternhub/pages/_app.tsx

@@ -0,0 +1,86 @@
+import DefaultPage from "../../../components/default-page";
+import { DBCard } from "../../../../../output/react/src";
+
+# Playgrounds
+
+You can try out our components on StackBlitz or CodeSandbox without downloading or installing anything on your local machine.
+
+We would also appreciate it if you could provide a working example when opening an issue in our repository. Please keep in mind not to share any internal information or data this way, not even in screenshots. This includes internal URLs. Only use sample material.
+
+<section class="playground">
+
+    ## CodeSandbox
+
+    <a href="https://codesandbox.io/s/github/db-ux-design-system/examples/tree/main/react-example">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/react-showcase.svg)
+    		<strong>React 18</strong>
+    		React app including `@db-ux/react-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://codesandbox.io/s/github/db-ux-design-system/examples/tree/main/vue-example">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/vue-showcase.svg)
+    		<strong>Vue 3</strong>
+    		Vue app including `@db-ux/v-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://codesandbox.io/s/github/db-ux-design-system/examples/tree/main/angular17-example">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/angular-showcase.svg)
+    		<strong>Angular 17</strong>
+    		Angular app including `@db-ux/ngx-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://codesandbox.io/s/github/db-ux-design-system/examples/tree/main/react-tailwind-template">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/react-wind-showcase.svg)
+    		<strong>React 18 + tailwind</strong>
+    		React + tailwind app including `@db-ux/react-core-components`
+    	</DBCard>
+    </a>
+
+</section>
+
+<section class="playground">
+
+    ## StackBlitz
+
+    <a href="https://stackblitz.com/fork/github/db-ux-design-system/examples/tree/main/react-example?file=index.html">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/react-showcase.svg)
+    		<strong>React 18</strong>
+    		React app including `@db-ux/react-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://stackblitz.com/fork/github/db-ux-design-system/examples/tree/main/vue-example?file=index.html">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/vue-showcase.svg)
+    		<strong>Vue 3</strong>
+    		Vue app including `@db-ux/v-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://stackblitz.com/fork/github/db-ux-design-system/examples/tree/main/angular17-example?file=index.html">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/angular-showcase.svg)
+    		<strong>Angular 17</strong>
+    		Angular app including `@db-ux/ngx-core-components`
+    	</DBCard>
+    </a>
+
+    <a href="https://stackblitz.com/fork/github/db-ux-design-system/examples/tree/main/react-tailwind-template?file=index.html">
+    	<DBCard behavior="interactive">
+    		![](/assets/images/react-wind-showcase.svg)
+    		<strong>React 18 + tailwind</strong>
+    		React + tailwind app including `@db-ux/react-core-components`
+    	</DBCard>
+    </a>
+
+</section>
+
+export default ({ children }) => <DefaultPage>{children}</DefaultPage>;

showcases/patternhub/pages/foundations/playgrounds/index.mdx

@@ -0,0 +1 @@
+Angular logo retrieved from URL: https://angular.io/assets/images/logos/angular/angular.svg