diff --git a/.config/.jscpd.json b/.config/.jscpd.json index 48bc7431db18..5658d1fdb1ed 100644 --- a/.config/.jscpd.json +++ b/.config/.jscpd.json @@ -3,6 +3,7 @@ "reporters": ["console"], "minTokens": 65, "ignore": [ + "showcases/patternhub/public/assets/images/*.svg", "**/.angular/**", ".history/**", "**/__snapshots__/**", diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml index b3ec725d1a06..78a31880807e 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yaml +++ b/.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: diff --git a/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png index 785b4f2b6e24..b35328b4944f 100644 Binary files a/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png and b/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/packages/foundations/scss/defaults/default-code.scss b/packages/foundations/scss/defaults/default-code.scss index b743d478a018..b48653d544d5 100644 --- a/packages/foundations/scss/defaults/default-code.scss +++ b/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; diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx index cf414ab5023e..4b31222b4520 100644 --- a/showcases/patternhub/data/routes.tsx +++ b/showcases/patternhub/data/routes.tsx @@ -291,7 +291,8 @@ export const ROUTES: NavigationItem[] = [ ] } ] - } + }, + { label: 'Playgrounds', path: '/foundations/playgrounds' } ]; const fillNavigationRecursive = ( diff --git a/showcases/patternhub/pages/_app.tsx b/showcases/patternhub/pages/_app.tsx index 1995a1939b5c..0746e8537935 100644 --- a/showcases/patternhub/pages/_app.tsx +++ b/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) => ( + + ## CodeSandbox + + + + ![](/assets/images/react-showcase.svg) + React 18 + React app including `@db-ux/react-core-components` + + + + + + ![](/assets/images/vue-showcase.svg) + Vue 3 + Vue app including `@db-ux/v-core-components` + + + + + + ![](/assets/images/angular-showcase.svg) + Angular 17 + Angular app including `@db-ux/ngx-core-components` + + + + + + ![](/assets/images/react-wind-showcase.svg) + React 18 + tailwind + React + tailwind app including `@db-ux/react-core-components` + + + + + +
+ + ## StackBlitz + + + + ![](/assets/images/react-showcase.svg) + React 18 + React app including `@db-ux/react-core-components` + + + + + + ![](/assets/images/vue-showcase.svg) + Vue 3 + Vue app including `@db-ux/v-core-components` + + + + + + ![](/assets/images/angular-showcase.svg) + Angular 17 + Angular app including `@db-ux/ngx-core-components` + + + + + + ![](/assets/images/react-wind-showcase.svg) + React 18 + tailwind + React + tailwind app including `@db-ux/react-core-components` + + + +
+ +export default ({ children }) => {children}; diff --git a/showcases/patternhub/public/assets/images/angular-showcase.svg b/showcases/patternhub/public/assets/images/angular-showcase.svg new file mode 100644 index 000000000000..34b2edde7128 --- /dev/null +++ b/showcases/patternhub/public/assets/images/angular-showcase.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/showcases/patternhub/public/assets/images/angular-showcase.svg.license b/showcases/patternhub/public/assets/images/angular-showcase.svg.license new file mode 100644 index 000000000000..c3d2bca37d20 --- /dev/null +++ b/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 diff --git a/showcases/patternhub/public/assets/images/react-showcase.svg b/showcases/patternhub/public/assets/images/react-showcase.svg new file mode 100644 index 000000000000..eb45348951d2 --- /dev/null +++ b/showcases/patternhub/public/assets/images/react-showcase.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/showcases/patternhub/public/assets/images/react-showcase.svg.license b/showcases/patternhub/public/assets/images/react-showcase.svg.license new file mode 100644 index 000000000000..b9acb3300d92 --- /dev/null +++ b/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 diff --git a/showcases/patternhub/public/assets/images/react-wind-showcase.svg b/showcases/patternhub/public/assets/images/react-wind-showcase.svg new file mode 100644 index 000000000000..0a1aa47ba144 --- /dev/null +++ b/showcases/patternhub/public/assets/images/react-wind-showcase.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/showcases/patternhub/public/assets/images/react-wind-showcase.svg.license b/showcases/patternhub/public/assets/images/react-wind-showcase.svg.license new file mode 100644 index 000000000000..621425eff96f --- /dev/null +++ b/showcases/patternhub/public/assets/images/react-wind-showcase.svg.license @@ -0,0 +1,2 @@ +React logo retrieved from URL: https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg +Tailwind logo retrieved from URL: https://tailwindcss.com/brand diff --git a/showcases/patternhub/public/assets/images/vue-showcase.svg b/showcases/patternhub/public/assets/images/vue-showcase.svg new file mode 100644 index 000000000000..1d2071afdb1e --- /dev/null +++ b/showcases/patternhub/public/assets/images/vue-showcase.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/showcases/patternhub/public/assets/images/vue-showcase.svg.license b/showcases/patternhub/public/assets/images/vue-showcase.svg.license new file mode 100644 index 000000000000..0b91cd772425 --- /dev/null +++ b/showcases/patternhub/public/assets/images/vue-showcase.svg.license @@ -0,0 +1 @@ +Vue logo retrieved from URL: https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg diff --git a/showcases/patternhub/styles/playgrounds.scss b/showcases/patternhub/styles/playgrounds.scss new file mode 100644 index 000000000000..70c6317778c9 --- /dev/null +++ b/showcases/patternhub/styles/playgrounds.scss @@ -0,0 +1,25 @@ +@use "@db-ux/core-foundations/build/styles/variables"; + +section.playground { + display: grid; + grid-template-columns: repeat(2, 1fr); /* Two columns */ + gap: variables.$db-spacing-fixed-md; /* Optional spacing between items */ + + h2 { + grid-column: span 2; + } + + a { + text-decoration: none; + + strong { + display: block; + } + + img { + width: variables.$db-sizing-md; + float: left; + margin-inline-end: variables.$db-spacing-fixed-sm; + } + } +}