feat: added playgrounds page

.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:

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

@@ -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;
 

showcases/patternhub/data/routes.tsx

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

showcases/patternhub/pages/_app.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/foundations/playgrounds/index.mdx

@@ -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/public/assets/images/angular-showcase.svg.license

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

showcases/patternhub/public/assets/images/react-showcase.svg.license

@@ -0,0 +1 @@
+React logo retrieved from URL: https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg