Skip to content

Commit dbd8cf2

Browse files
leapegithub-actions[bot]mfranzkeCopilotnmerget
authored
feat(documentation): enable navigation (#252)
* docs(pages): remove isMenuItemDisabled flag from documentation index * auto update snapshots (#256) Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * auto update snapshots (#266) Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * auto update snapshots (#268) Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge branch 'main' into feat(documentation)--enable-navigation-item, taking main version of conflicting PNG snapshots Agent-Logs-Url: https://github.com/db-ux-design-system/db-ux-design-system.github.io/sessions/57de5c44-6617-4e44-be13-31740884340b Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> * auto update snapshots (#270) Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>
1 parent 2161e08 commit dbd8cf2

File tree

104 files changed

+312
-538
lines changed

Some content is hidden

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

104 files changed

+312
-538
lines changed

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ toc: true
1010
---
1111

1212
import { DBSection } from '@db-ux/react-core-components';
13+
import CollapseButton from '@template/components/CollapseButton/CollapseButton.astro';
14+
import CollapsibleWrapper from '@template/components/CollapseButton/CollapsibleWrapper.astro';
1315
import GuidelineExample from '@template/components/GuidelineExample/GuidelineExample.astro';
1416
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1517
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
@@ -40,7 +42,9 @@ Accordions group content into collapsible sections to save space and let users r
4042

4143
<DBSection spacing="small" width="auto">
4244

43-
## Usage Hints
45+
## Guidelines
46+
47+
<CollapsibleWrapper collapsedHeight="320px">
4448

4549
### Collapsable Content
4650

@@ -110,6 +114,10 @@ Nested accordions quickly become hard to understand and navigate. If nesting is
110114
/>
111115
</div>
112116

117+
</CollapsibleWrapper>
118+
119+
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />
120+
113121
</DBSection>
114122

115123
<DBSection spacing="small" width="auto">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ dialog::backdrop {
9191

9292
<DBSection spacing="small" width="auto">
9393

94-
## Usage Hints
94+
## Guidelines
9595

9696
### Focus attention
9797

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ toc: true
1010
---
1111

1212
import { DBSection } from '@db-ux/react-core-components';
13+
import CollapseButton from '@template/components/CollapseButton/CollapseButton.astro';
14+
import CollapsibleWrapper from '@template/components/CollapseButton/CollapsibleWrapper.astro';
1315
import GuidelineExample from '@template/components/GuidelineExample/GuidelineExample.astro';
1416
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1517
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
@@ -40,7 +42,9 @@ Cards group related content into a contained surface to improve scanning and cre
4042

4143
<DBSection spacing="small" width="auto">
4244

43-
## Usage Hints
45+
## Guidelines
46+
47+
<CollapsibleWrapper collapsedHeight="320px">
4448

4549
### Grouping
4650

@@ -127,6 +131,10 @@ If the card is interactive, it must be keyboard reachable and expose correct sem
127131
/>
128132
</div>
129133

134+
</CollapsibleWrapper>
135+
136+
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />
137+
130138
</DBSection>
131139

132140
<DBSection spacing="small" width="auto">

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

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -97,57 +97,6 @@ In checkbox groups, keep options parallel in wording and length. If a group need
9797
/>
9898
</div>
9999

100-
### Use "Select all" and indeterminate state carefully
101-
102-
If you provide "Select all", it must reflect the group state: checked when all are selected, unchecked when none are selected, and indeterminate when some are selected.
103-
104-
<div className="guideline-examples">
105-
<GuidelineExample
106-
variant="do"
107-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1116&embed-host=share"
108-
description="Use an indeterminate state for partial selection and keep it synchronized with the group."
109-
/>
110-
<GuidelineExample
111-
variant="dont"
112-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1117&embed-host=share"
113-
description='Show "Select all" as checked when only some options are selected.'
114-
/>
115-
</div>
116-
117-
### Keep interaction and states consistent
118-
119-
Ensure checked, unchecked, disabled, and error states are visually distinct and consistent across the UI. Don't make the click target too small; the label should be clickable.
120-
121-
<div className="guideline-examples">
122-
<GuidelineExample
123-
variant="do"
124-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1118&embed-host=share"
125-
description="Allow clicking the label to toggle and use consistent spacing between checkbox and label."
126-
/>
127-
<GuidelineExample
128-
variant="dont"
129-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1119&embed-host=share"
130-
description="Make only the small box clickable or use inconsistent spacing across lists."
131-
/>
132-
</div>
133-
134-
### Accessibility and screenreader text
135-
136-
Every checkbox needs an accessible name. If the visible label is hidden, provide a screenreader label text. Communicate group context and required/invalid states to assistive technologies.
137-
138-
<div className="guideline-examples">
139-
<GuidelineExample
140-
variant="do"
141-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1122&embed-host=share"
142-
description="Provide a programmatic label and a screenreader label when the visual label is not shown."
143-
/>
144-
<GuidelineExample
145-
variant="dont"
146-
figmaUrl="https://embed.figma.com/design/3sTqkyZLQuIgT27PyPmIbz/Doku--Checkbox-%E2%9C%85?node-id=3-1123&embed-host=share"
147-
description="Ship a checkbox without an accessible label or rely on position/placeholder-like text to explain it."
148-
/>
149-
</div>
150-
151100
</CollapsibleWrapper>
152101

153102
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />

‎content/pages/documentation/components/custom-select.mdx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ toc: true
1010
---
1111

1212
import { DBSection } from '@db-ux/react-core-components';
13+
import CollapseButton from '@template/components/CollapseButton/CollapseButton.astro';
14+
import CollapsibleWrapper from '@template/components/CollapseButton/CollapsibleWrapper.astro';
1315
import GuidelineExample from '@template/components/GuidelineExample/GuidelineExample.astro';
1416
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1517
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
@@ -40,7 +42,9 @@ Custom Select is an advanced dropdown for choosing one or multiple predefined op
4042

4143
<DBSection spacing="small" width="auto">
4244

43-
## Usage Hints
45+
## Guidelines
46+
47+
<CollapsibleWrapper collapsedHeight="320px">
4448

4549
### Custom Select vs Select
4650

@@ -127,6 +131,10 @@ Enable search when the list is long or users know what they want. Use grouping o
127131
/>
128132
</div>
129133

134+
</CollapsibleWrapper>
135+
136+
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />
137+
130138
</DBSection>
131139

132140
<DBSection spacing="small" width="auto">

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ toc: true
1010
---
1111

1212
import { DBSection } from '@db-ux/react-core-components';
13+
import CollapseButton from '@template/components/CollapseButton/CollapseButton.astro';
14+
import CollapsibleWrapper from '@template/components/CollapseButton/CollapsibleWrapper.astro';
1315
import GuidelineExample from '@template/components/GuidelineExample/GuidelineExample.astro';
1416
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1517
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
@@ -40,7 +42,9 @@ Divider is a thin horizontal or vertical line that separates UI elements into lo
4042

4143
<DBSection spacing="small" width="auto">
4244

43-
## Usage Hints
45+
## Guidelines
46+
47+
<CollapsibleWrapper collapsedHeight="320px">
4448

4549
### Emphasis
4650

@@ -93,6 +97,10 @@ Align dividers to the content container and grid. Avoid partial or "floating" di
9397
/>
9498
</div>
9599

100+
</CollapsibleWrapper>
101+
102+
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />
103+
96104
</DBSection>
97105

98106
<DBSection spacing="small" width="auto">

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ headline: 'Header'
66
title: 'Header'
77
description: 'Header defines the top area of a page and provides consistent access to brand identity, primary navigation, and optional actions. It anchors orientation and supports navigation patterns across responsive layouts, with optional meta navigation above the main bar.'
88
align: start
9-
status: 'legacy'
9+
status: 'beta'
1010
toc: true
1111
---
1212

@@ -17,7 +17,6 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
1717
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1818
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
1919
import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
20-
import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
2120

2221
- Provide global navigation entry points and current location context
2322
- Offer quick access to common actions like search, menu, or profile
@@ -58,14 +57,6 @@ import ComponentPlayground from '@template/components/ComponentPlayground/Compon
5857

5958
</DBSection>
6059

61-
<DBSection spacing="small" width="auto">
62-
63-
## Playground
64-
65-
<ComponentPlayground component="header" />
66-
67-
</DBSection>
68-
6960
<DBSection spacing="small" width="auto">
7061

7162
## Guidelines

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

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -109,28 +109,6 @@ Use the brand variant sparingly to highlight particularly important navigational
109109
/>
110110
</div>
111111

112-
### Accessibility and clarity
113-
114-
Links must be clearly identifiable, descriptive, and accessible via keyboard and assistive technologies.
115-
116-
<div
117-
style={{
118-
display: 'flex',
119-
gap: 'var(--db-spacing-fixed-md)',
120-
}}
121-
>
122-
<GuidelineExample
123-
variant="do"
124-
figmaUrl="https://embed.figma.com/design/3HjaNLCvfdsdoRZKbFnV3s/Doku--Link?node-id=3-1116&embed-host=share"
125-
description="Use meaningful link labels that describe the destination."
126-
/>
127-
<GuidelineExample
128-
variant="dont"
129-
figmaUrl="https://embed.figma.com/design/3HjaNLCvfdsdoRZKbFnV3s/Doku--Link?node-id=3-1117&embed-host=share"
130-
description="Use vague labels like 'Click here' or rely on color alone."
131-
/>
132-
</div>
133-
134112
</CollapsibleWrapper>
135113

136114
<CollapseButton collapsedText="Show all Guidelines" expandedText="Hide some Guidelines" />

‎content/pages/documentation/components/navigation-item.mdx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { DBSection } from '@db-ux/react-core-components';
1414

1515
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
1616
import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
17-
import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
1817
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1918

2019
- Always wrap content in an anchor element for proper navigation semantics
@@ -56,14 +55,6 @@ import ResourceCards from '@template/components/ResourceCards/ResourceCards.astr
5655

5756
</DBSection>
5857

59-
<DBSection spacing="small" width="auto">
60-
61-
## Playground
62-
63-
<ComponentPlayground component="navigationItem" />
64-
65-
</DBSection>
66-
6758
<DBSection spacing="small" width="auto">
6859

6960
## FAQ

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
1818
import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
1919
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
2020
import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
21-
import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
2221

2322
- Offer primary destinations at the top level (global navigation)
2423
- Support structured sub-navigation for deeper sections (nested levels)
@@ -59,14 +58,6 @@ import ComponentPlayground from '@template/components/ComponentPlayground/Compon
5958

6059
</DBSection>
6160

62-
<DBSection spacing="small" width="auto">
63-
64-
## Playground
65-
66-
<ComponentPlayground component="navigation" />
67-
68-
</DBSection>
69-
7061
<DBSection spacing="small" width="auto">
7162

7263
## Guidelines

0 commit comments

Comments
 (0)