Skip to content

Commit 4bb0bdb

Browse files
leapesissihamelmichaelmkraus
authored
Feat(documentation): remaining pages and teaser (#290)
* docs(releases): reorganize release documentation structure - Add new releases section with index, versioning, and content status pages - Create migration guides directory with v2 and v3 migration documentation - Reorganize release notes from flat structure to nested releases/release-notes - Update documentation navigation order (components: 3, icons: 4, releases: 6) - Adjust documentation index order from 3 to 10 for proper hierarchy - Restructure content to establish clear separation between releases, migration guides, and release notes * docs(releases): add migration guides for v1-v4 with visual assets - Add comprehensive migration guide for v1.0.0 covering stable components and property alignment - Add migration guide for v2.0.0 documenting color system and component updates - Add migration guide for v4.0.0 with notification and switch component changes - Add 40+ migration guide visual assets across v1, v2, v3, and v4 directories - Create new ReleaseTeaser, FeedbackTeaser, StatusNotification, and YourAction components - Update TableOfContents component styling and functionality - Add global styles and type definitions for migration guide support - Reorganize content navigation and update migration guides index with descending sort - Adjust content-status page order from 3 to 6 in documentation hierarchy * feat(components): replace feedback teaser with external teaser component - Replace FeedbackTeaser and ReleaseTeaser components with new ExternalTeaser and ExternalTeaserRow components - Add teaser image assets (GitHub, Figma, DB Theme) to static assets - Update all migration guide pages (v1-v4) to use ExternalTeaserRow with enhanced metadata including images, alt text, and labels - Expand resources page with ExternalTeaser component for improved external link presentation - Restructure teaser data format from releases array to items array with additional image and label properties - Wrap teasers in DBSection for consistent spacing and layout * feat(documentation): add contribution page and update migration guides - Add new contribution documentation page with GitHub, email, and Teams contact options - Replace ExternalTeaser component with CardTeaser across all migration guides (v1-v4) - Add feedback teaser image asset for contribution links - Add mail and teams teaser image assets for contact options - Refactor CardTeaser component with new CardTeaserRow layout and styling - Update migration guide feedback sections to link to contribution page - Add external flag to GitHub teaser links in migration guides - Update global styles to support new teaser component layout * docs(contribution): reorganize contribution page with sectioned layout * docs(releases): expand versioning page with semantic versioning guide - Update page title and description to "Versioning & Releases" - Add semantic versioning overview with visual diagram - Document Major, Minor, and Patch release types with examples - Include release cadence information for each version type - Add communication channels table showing where releases are announced - Link to related content: Release Notes, Migration Guides, and Contribution - Add release-types.png asset illustrating MAJOR.MINOR.PATCH structure * refactor(versioning): replace anchor tags with DBLink component * docs(releases): expand content status page with lifecycle definitions - Rewrite content-status.mdx with comprehensive explanations of each status level (Concept, Beta, Stable, Legacy, Deprecated) - Add visual status progression diagram using DBCard and DBBadge components - Include detailed "What to expect" sections for each status with expectations and guarantees - Add related content teaser cards linking to components and versioning pages - Update page description to reflect new content focus - Remove unused CardTeaserRow import from versioning.mdx - Add optional showLink prop to StatusNotification component for flexible link display - Improve component flexibility to support both linked and standalone notification variants * docs(releases): adjust heading hierarchy and improve table of contents depth - Update content-status.mdx tocMaxDepth to 3 for better navigation structure - Demote "What to expect" headings from h3 to h4 across all status sections (Concept, Beta, Stable, Legacy, Deprecated) - Add global CSS styling for h4, h5, h6 elements using db-type-headline-3xs font - Ensure consistent heading hierarchy and improved accessibility in documentation --------- Co-authored-by: Sissi Hamel <sissi.hamel@deutschebahn.com> Co-authored-by: michaelmkraus <michael.m.kraus@deutschebahn.com>
1 parent 317843c commit 4bb0bdb

124 files changed

Lines changed: 1597 additions & 8 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content/pages/documentation/components/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sectionSpacing: 'small'
44
sectionWidth: 'auto'
55
title: 'Components'
66
headline: 'Components'
7+
order: 3
78
align: start
89
toc: true
910
description: 'An overview of all available components in the Design System, grouped by maturity: Stable, Beta, and Concept.'

‎content/pages/documentation/contribution/index.mdx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
layout: '@template/layouts/documentation'
3+
sectionSpacing: 'small'
4+
sectionWidth: 'auto'
5+
title: 'Contribution'
6+
headline: 'Contribution'
7+
description: 'Get involved, share feedback, and help improve the DB UX Design System.'
8+
align: start
9+
order: 9
10+
toc: false
11+
---
12+
13+
import CardTeaserRow from '@template/components/CardTeaser/CardTeaserRow';
14+
import { DBSection } from '@db-ux/react-core-components';
15+
16+
<DBSection spacing="small" width="auto">
17+
18+
## Overall & Design
19+
20+
<CardTeaserRow
21+
items={[
22+
{
23+
title: 'GitHub Core',
24+
description:
25+
'Report design issues, request features, or contribute to the design foundations.',
26+
url: 'https://github.com/db-ux-design-system/core',
27+
image: '/assets/teasers/github.png',
28+
imageAlt: 'GitHub',
29+
label: 'View on GitHub',
30+
external: true,
31+
},
32+
{
33+
title: 'Feedback via Email',
34+
description: 'Reach out to the Design System team directly via email.',
35+
url: 'mailto:db-ux-designsystem@deutschebahn.com',
36+
image: '/assets/teasers/mail.png',
37+
imageAlt: 'Email',
38+
label: 'Send Email',
39+
external: true,
40+
},
41+
{
42+
title: 'Feedback via DB UX Community (Teams)',
43+
description: 'Join the DB UX Design System channel on Microsoft Teams.',
44+
url: 'https://teams.microsoft.com/l/channel/19%3A7dd9929be1fe494c823b11e0e2d22341%40thread.skype/DB%20UX%20Design%20System?groupId=72c53609-2941-46dd-8be9-e4d1d2c45c77&tenantId=a1a72d9c-49e6-4f6d-9af6-5aafa1183bfd',
45+
image: '/assets/teasers/teams.png',
46+
imageAlt: 'Teams',
47+
label: 'Open Teams Channel',
48+
external: true,
49+
},
50+
]}
51+
/>
52+
53+
</DBSection>
54+
55+
<DBSection spacing="small" width="auto">
56+
57+
## Development
58+
59+
<CardTeaserRow
60+
items={[
61+
{
62+
title: 'GitHub Core Web',
63+
description: 'Report bugs, request features, or contribute to the component library.',
64+
url: 'https://github.com/db-ux-design-system/core-web',
65+
image: '/assets/teasers/github.png',
66+
imageAlt: 'GitHub',
67+
label: 'View on GitHub',
68+
external: true,
69+
},
70+
{
71+
title: 'Feedback via Web Community (Teams)',
72+
description: 'Join the DB UX Design System channel on Microsoft Teams.',
73+
url: 'https://teams.microsoft.com/l/channel/19%3A6c0e92ce4aef409598ff77c4cd06e001%40thread.skype/SIG%20-%20DB%20UX%20Design%20System?groupId=2f363785-c59e-4763-9bc3-8e13998a4588&tenantId=a1a72d9c-49e6-4f6d-9af6-5aafa1183bfd',
74+
image: '/assets/teasers/teams.png',
75+
imageAlt: 'Teams',
76+
label: 'Open Teams Channel',
77+
external: true,
78+
},
79+
]}
80+
/>
81+
82+
</DBSection>

‎content/pages/documentation/icons/index.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const frontmatter: DocumentationFrontMatter = {
1212
title: 'Icons',
1313
description: 'Browse and copy all available DB UX icon names for use in code.',
1414
align: 'start',
15+
order: 4,
1516
};
1617
1718
const iconNames = Object.keys(iconDescriptions);

‎content/pages/documentation/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 3
2+
order: 10
33
layout: '@template/layouts/default'
44
title: 'Documentation'
55
hidePage: true

‎content/pages/documentation/releases/content-status.mdx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
layout: '@template/layouts/documentation'
3+
sectionSpacing: 'small'
4+
sectionWidth: 'auto'
5+
title: 'Content Status'
6+
headline: 'Content Status'
7+
description: 'What Concept, Beta, Stable, Legacy, and Deprecated mean in the DB UX Design System and what to expect from each status.'
8+
align: start
9+
order: 6
10+
toc: true
11+
tocMaxDepth: 3
12+
---
13+
14+
import { DBSection, DBCard, DBBadge, DBStack } from '@db-ux/react-core-components';
15+
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
16+
17+
<DBSection spacing="small" width="auto">
18+
19+
Every component, pattern, and template in the DB UX Design System has a status that tells you how mature and reliable it is — from early explorations to production-ready standards.
20+
21+
<div style={{ display: 'grid', gridTemplateColumns: 'auto auto', columnGap: 'var(--db-spacing-fixed-lg)', rowGap: 'var(--db-spacing-fixed-xs)', width: 'fit-content' }}>
22+
23+
<DBCard data-density="expressive" style={{ width: 'fit-content' }} spacing="large">
24+
<DBStack direction="row" gap="small" alignment="center">
25+
<DBBadge semantic="warning">Concept</DBBadge>
26+
<span data-icon="arrow_right" />
27+
<DBBadge semantic="informational">Beta</DBBadge>
28+
<span data-icon="arrow_right" />
29+
<DBBadge semantic="successful">Stable</DBBadge>
30+
</DBStack>
31+
</DBCard>
32+
33+
<DBCard data-density="expressive" style={{ width: 'fit-content' }} spacing="large">
34+
<DBStack direction="row" gap="small" alignment="center">
35+
<DBBadge semantic="critical">Legacy</DBBadge>
36+
<DBBadge>Deprecated</DBBadge>
37+
</DBStack>
38+
</DBCard>
39+
40+
<small>Active development lifecycle.</small>
41+
<small>Superseded or being removed.</small>
42+
43+
</div>
44+
45+
</DBSection>
46+
<DBSection spacing="small" width="auto">
47+
48+
## Concept
49+
50+
Early visual and functional approaches for new content. At this stage, initial directions are being defined but **nothing is final**. Designs and implementations may **change substantially** as ideas are tested and refined.
51+
52+
You can use concept content as a **design reference** for your own implementation. However, be prepared to **incorporate future changes** once the content matures. Design is always available; a development implementation **may not yet exist** and typically joins in the beta phase.
53+
54+
<DBCard spacing='large' style={{ marginBlockEnd: 'var(--db-spacing-fixed-2xl)' }} data-color="warning">
55+
### What to expect
56+
57+
- **Design available**, development implementation may follow later
58+
- **No stability guarantees** — API, design, and accessibility are not yet validated and may change at any time
59+
- **Limited documentation** and usage guidelines
60+
- **Plan for rework** as the content matures toward Beta and Stable
61+
62+
</DBCard>
63+
64+
## Beta
65+
66+
Content is **functional and largely stable**, but minor visual or functional changes may still occur. Design and development have been **aligned**, and the content has undergone **initial user testing** — it addresses a **validated user need**.
67+
68+
We recommend **testing Beta content thoroughly** in your projects and sharing feedback to help improve quality and reliability.
69+
70+
<DBCard spacing='large' style={{ marginBlockEnd: 'var(--db-spacing-fixed-2xl)' }} data-color="informational">
71+
### What to expect
72+
73+
- **Aligned between design and development**
74+
- Suitable for project use, but **minor breaking changes are still possible**
75+
- Documentation and usage guidelines are available but may be incomplete
76+
- Accessibility and cross-browser testing is **underway but not fully validated**
77+
78+
</DBCard>
79+
80+
## Stable
81+
82+
Content is considered **mature and reliable** — accessible, brand-compliant, and Design System conformant. Stable content is **mandatory to use** as the UX standard.
83+
84+
We **continuously update and improve** stable content to ensure it meets user needs and current standards.
85+
86+
<DBCard spacing='large' style={{ marginBlockEnd: 'var(--db-spacing-fixed-2xl)' }} data-color="successful">
87+
### What to expect
88+
89+
- **Fully validated** for accessibility, cross-browser, and cross-framework compatibility
90+
- **Complete documentation**, usage guidelines, and design specs
91+
- **API stability** — breaking changes only happen in Major releases
92+
- **Ongoing maintenance** and regular improvements
93+
94+
</DBCard>
95+
96+
## Legacy
97+
98+
Content is **outdated and no longer actively developed**. Only limited support in the form of **critical bug fixes** is provided. We recommend **migrating to current Design System content**.
99+
100+
<DBCard spacing='large' style={{ marginBlockEnd: 'var(--db-spacing-fixed-2xl)' }}data-color="critical">
101+
### What to expect
102+
103+
- **No new features** or improvements
104+
- Only **critical bug fixes**
105+
- A **recommended alternative** is available in the Design System
106+
107+
</DBCard>
108+
109+
## Deprecated
110+
111+
Content is **marked for removal** and will be **fully removed in a future Major release**. In design, deprecated content is visually marked first, giving you **time to migrate** before it is removed.
112+
113+
<DBCard spacing='large' style={{ marginBlockEnd: 'var(--db-spacing-fixed-2xl)' }}elevationLevel='2'>
114+
### What to expect
115+
116+
- **Content will be removed** — plan your migration
117+
- **No bug fixes** or maintenance
118+
- A **sufficient transition period** is provided before removal in a major release
119+
120+
</DBCard>
121+
</DBSection>
122+
123+
<DBSection spacing="small" width="auto">
124+
125+
## Related Content
126+
127+
<TeaserCard
128+
teasers={[
129+
{
130+
title: 'Components',
131+
description: 'Browse all components grouped by status: Stable, Beta, and Concept.',
132+
url: '/documentation/components',
133+
},
134+
{
135+
title: 'Versioning & Releases',
136+
description: 'How we version and release updates across Design and Development.',
137+
url: '/documentation/releases/versioning',
138+
},
139+
{
140+
title: 'Contribution',
141+
description: 'Share feedback, report issues, or contribute to the Design System.',
142+
url: '/documentation/contribution',
143+
},
144+
]}
145+
/>
146+
147+
</DBSection>

‎content/pages/documentation/releases/index.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: '@template/layouts/documentation'
3+
sectionSpacing: 'small'
4+
sectionWidth: 'auto'
5+
title: 'Releases'
6+
headline: 'Releases'
7+
description: 'Everything about releases, versioning, content status, and migration guides for the DB UX Design System.'
8+
align: start
9+
order: 6
10+
---

‎content/pages/documentation/releases/migration-guides/index.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: '@template/layouts/documentation'
3+
sectionSpacing: 'small'
4+
sectionWidth: 'auto'
5+
title: 'Migration Guides'
6+
headline: 'Migration Guides'
7+
description: 'Step-by-step guides for migrating between major versions of the DB UX Design System.'
8+
align: start
9+
order: 1
10+
sortChildrenDescending: true
11+
---

0 commit comments

Comments
 (0)