Skip to content

Commit 3d5b13e

Browse files
leapeleape
committed
feat(documentation): add components overview page with teaser cards
- Add comprehensive components documentation index page with Stable, Beta, and Concept sections - Implement TeaserCard component for displaying component cards with title, description, and links - Add DisabledWrapper component styling updates with warning semantic badge for concept components - Update TeaserCard styling with improved layout and visual hierarchy - Include table of contents and description metadata for better documentation navigation - Organize 40+ components across three maturity levels with clear categorization
1 parent a76b32a commit 3d5b13e

File tree

4 files changed

+269
-57
lines changed

4 files changed

+269
-57
lines changed

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

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,234 @@ sectionSpacing: 'small'
44
sectionWidth: 'auto'
55
title: 'Components'
66
headline: 'Components'
7+
align: start
8+
toc: true
9+
description: 'An overview of all available components in the Design System, grouped by maturity: Stable, Beta, and Concept.'
710
---
11+
12+
import { DBSection } from '@db-ux/react-core-components';
13+
import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
14+
15+
<DBSection spacing="small" width="auto">
16+
17+
## Stable
18+
19+
<TeaserCard
20+
teasers={[
21+
{
22+
title: 'Badge',
23+
description: 'Short, contextual information such as status, category, or metadata.',
24+
url: '/documentation/components/badge',
25+
},
26+
{
27+
title: 'Button',
28+
description: 'Initiates actions and confirms decisions to guide users through key tasks.',
29+
url: '/documentation/components/button',
30+
},
31+
{
32+
title: 'Checkbox',
33+
description: 'Lets users select one or more independent options with clear selection state.',
34+
url: '/documentation/components/checkbox',
35+
},
36+
{
37+
title: 'Drawer',
38+
description: 'Sliding panel for supplemental content or lightweight interactions.',
39+
url: '/documentation/components/drawer',
40+
},
41+
{
42+
title: 'Infotext',
43+
description: 'Compact supporting information or guidance directly in the interface.',
44+
url: '/documentation/components/infotext',
45+
},
46+
{
47+
title: 'Input',
48+
description: 'Captures short, single-line user text entries in forms and dialogs.',
49+
url: '/documentation/components/input',
50+
},
51+
{
52+
title: 'Link',
53+
description: 'Navigation to other pages, sections, or external destinations.',
54+
url: '/documentation/components/link',
55+
},
56+
{
57+
title: 'Notification',
58+
description: 'Brief message about an event, state change, or system feedback.',
59+
url: '/documentation/components/notification',
60+
},
61+
{
62+
title: 'Radio',
63+
description: 'Lets users select exactly one option from a set of mutually exclusive choices.',
64+
url: '/documentation/components/radio',
65+
},
66+
{
67+
title: 'Select',
68+
description: 'Lets users choose one option from a predefined list via a dropdown.',
69+
url: '/documentation/components/select',
70+
},
71+
{
72+
title: 'Switch',
73+
description: 'Toggles a setting between two states with immediate effect.',
74+
url: '/documentation/components/switch',
75+
},
76+
{
77+
title: 'Tag',
78+
description: 'Compact label to categorize, highlight attributes, or represent selections.',
79+
url: '/documentation/components/tag',
80+
},
81+
{
82+
title: 'Textarea',
83+
description: 'Lets users enter and review longer, multi-line text.',
84+
url: '/documentation/components/textarea',
85+
},
86+
{
87+
title: 'Tooltip',
88+
description: 'Brief, contextual information on hover or focus without interrupting flow.',
89+
url: '/documentation/components/tooltip',
90+
},
91+
]}
92+
/>
93+
94+
## Beta
95+
96+
<TeaserCard
97+
teasers={[
98+
{
99+
title: 'Accordion',
100+
description: 'Collapsible sections to save space and reveal details progressively.',
101+
url: '/documentation/components/accordion',
102+
},
103+
{
104+
title: 'Backdrop',
105+
description: 'Overlay layer behind modal content to indicate focus and block interaction.',
106+
url: '/documentation/components/backdrop',
107+
},
108+
{
109+
title: 'Card',
110+
description: 'Groups related content into a contained surface for visual structure.',
111+
url: '/documentation/components/card',
112+
},
113+
{
114+
title: 'Custom Select',
115+
description: 'Advanced dropdown with search, grouping, and multi-selection support.',
116+
url: '/documentation/components/custom-select',
117+
},
118+
{
119+
title: 'Divider',
120+
description: 'Visual separator to structure and group content areas.',
121+
url: '/documentation/components/divider',
122+
},
123+
{
124+
title: 'Header',
125+
description: 'Top area with brand identity, primary navigation, and optional actions.',
126+
url: '/documentation/components/header',
127+
},
128+
{
129+
title: 'Navigation',
130+
description: 'Set of destinations for consistent movement through an application.',
131+
url: '/documentation/components/navigation',
132+
},
133+
{
134+
title: 'Navigation Item',
135+
description: 'Individual destination within Navigation with icons and active states.',
136+
url: '/documentation/components/navigation-item',
137+
},
138+
{
139+
title: 'Popover',
140+
description: 'Floating overlay for contextual content triggered by user interaction.',
141+
url: '/documentation/components/popover',
142+
},
143+
{
144+
title: 'Section',
145+
description: 'Structural container for grouping page content with consistent spacing.',
146+
url: '/documentation/components/section',
147+
},
148+
{
149+
title: 'Stack',
150+
description: 'Layout component for arranging elements in a vertical or horizontal flow.',
151+
url: '/documentation/components/stack',
152+
},
153+
]}
154+
/>
155+
156+
## Concept
157+
158+
<TeaserCard
159+
teasers={[
160+
{
161+
title: 'Breadcrumb',
162+
description: 'Shows the current page location within a navigational hierarchy.',
163+
disabled: true,
164+
},
165+
{
166+
title: 'ButtonGroup',
167+
description: 'Groups related buttons together for combined actions.',
168+
disabled: true,
169+
},
170+
{
171+
title: 'Control Panel',
172+
description: 'Container for grouped controls and settings.',
173+
disabled: true,
174+
},
175+
{
176+
title: 'Footer',
177+
description: 'Bottom area with secondary navigation, legal links, and meta information.',
178+
disabled: true,
179+
},
180+
{
181+
title: 'Heading',
182+
description: 'Typographic element for structuring content with semantic hierarchy.',
183+
disabled: true,
184+
},
185+
{
186+
title: 'List',
187+
description: 'Ordered or unordered collection of related items.',
188+
disabled: true,
189+
},
190+
{
191+
title: 'LoadingIndicator',
192+
description: 'Visual feedback indicating that content or a process is loading.',
193+
disabled: true,
194+
},
195+
{
196+
title: 'Logo',
197+
description: 'Brand mark for consistent identity across applications.',
198+
disabled: true,
199+
},
200+
{
201+
title: 'Menu',
202+
description: 'List of actions or options triggered from a control element.',
203+
disabled: true,
204+
},
205+
{
206+
title: 'Pulse',
207+
description: 'Animated indicator to draw attention to new or updated content.',
208+
disabled: true,
209+
},
210+
{
211+
title: 'Shell',
212+
description: 'Application frame providing consistent layout structure.',
213+
disabled: true,
214+
},
215+
{
216+
title: 'Table',
217+
description: 'Structured data display in rows and columns.',
218+
disabled: true,
219+
},
220+
{
221+
title: 'Tabs',
222+
description: 'Organizes content into switchable panels within the same context.',
223+
disabled: true,
224+
},
225+
{
226+
title: 'Text',
227+
description: 'Typographic element for body copy and inline text content.',
228+
disabled: true,
229+
},
230+
{
231+
title: 'ToggleButton',
232+
description: 'Button that switches between two states on press.',
233+
disabled: true,
234+
},
235+
]}
236+
/>
237+
</DBSection>

‎template/components/DisabledWrapper/DisabledWrapper.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const { label, disabled = true, emphasis, size = 'medium', ariaLabel } = Astro.p
2222
<div class="disabled-wrapper-overlay" aria-label={ariaLabel || label}>
2323
<DBBadge
2424
size={size}
25-
semantic="informational"
25+
semantic="warning"
2626
emphasis={emphasis === 'default' ? undefined : emphasis}
2727
>
2828
{label}

‎template/components/TeaserCard/TeaserCard.astro‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -24,45 +24,41 @@ const { teasers } = Astro.props;
2424
const Component = teaser.component ? (DBComponents as any)[teaser.component] : null;
2525
const isLink = teaser.component === 'DBLink';
2626
const isDisabled = teaser.disabled === true;
27-
const card = (
28-
<DBCard behavior={!isDisabled && !!teaser.url ? 'interactive' : undefined} spacing="none">
29-
<div class="teaser-wrapper">
30-
<div class="teaser-content">
31-
<h2 class="teaser-title">
32-
{!isDisabled && teaser.url ? (
33-
<a class="teaser-title-link" href={teaser.url}>
34-
{teaser.title}
35-
</a>
36-
) : (
37-
teaser.title
38-
)}
39-
</h2>
40-
<p class="teaser-description">{teaser.description}</p>
41-
</div>
42-
{Component && (
43-
<div class="teaser-preview">
44-
{isLink ? (
45-
<Component
46-
href="#"
47-
wrap={false}
48-
onclick="event.preventDefault(); event.stopPropagation();"
49-
>
50-
{teaser.title}
51-
</Component>
52-
) : (
53-
<Component>{teaser.title}</Component>
54-
)}
55-
</div>
56-
)}
27+
const cardContent = (
28+
<div class="teaser-wrapper">
29+
<div class="teaser-content">
30+
<h2 class="teaser-title">{teaser.title}</h2>
31+
<p class="teaser-description">{teaser.description}</p>
5732
</div>
58-
</DBCard>
33+
{Component && (
34+
<div class="teaser-preview">
35+
{isLink ? (
36+
<Component
37+
href="#"
38+
wrap={false}
39+
onclick="event.preventDefault(); event.stopPropagation();"
40+
>
41+
{teaser.title}
42+
</Component>
43+
) : (
44+
<Component>{teaser.title}</Component>
45+
)}
46+
</div>
47+
)}
48+
</div>
5949
);
6050
return isDisabled ? (
6151
<DisabledWrapper label="Coming Soon" size="small">
62-
{card}
52+
<DBCard spacing="none">{cardContent}</DBCard>
6353
</DisabledWrapper>
54+
) : teaser.url ? (
55+
<a href={teaser.url} class="teaser-card-link">
56+
<DBCard behavior="interactive" spacing="none">
57+
{cardContent}
58+
</DBCard>
59+
</a>
6460
) : (
65-
card
61+
<DBCard spacing="none">{cardContent}</DBCard>
6662
);
6763
})
6864
}

‎template/components/TeaserCard/TeaserCard.css‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,22 @@
44
gap: var(--db-spacing-fixed-md);
55
}
66

7-
.teaser-cards .db-card > .teaser-wrapper {
8-
display: flex;
9-
flex-direction: column;
7+
.teaser-cards > * {
108
block-size: 100%;
11-
position: relative;
129
}
1310

14-
.teaser-cards .db-card .teaser-title-link {
15-
display: inline-block;
16-
color: inherit;
17-
text-decoration: none;
18-
}
19-
20-
.teaser-cards .db-card .teaser-title-link::after {
21-
content: '';
22-
position: absolute;
23-
inset: 0;
24-
z-index: 1;
11+
.teaser-cards .teaser-card-link {
12+
block-size: 100%;
2513
}
2614

27-
/* stylelint-disable-next-line a11y/no-outline-none */
28-
.teaser-cards .db-card .teaser-title-link:focus-visible {
29-
outline: none;
15+
.teaser-cards .db-card {
16+
block-size: 100%;
3017
}
3118

32-
.teaser-cards .db-card:focus-within {
33-
outline: var(--db-border-width-xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
34-
outline-offset: calc(-1 * var(--db-border-width-3xs));
19+
.teaser-cards .db-card > .teaser-wrapper {
20+
display: flex;
21+
flex-direction: column;
22+
block-size: 100%;
3523
}
3624

3725
.teaser-preview {
@@ -42,8 +30,6 @@
4230
background: var(--db-adaptive-bg-basic-level-3-default);
4331
flex-shrink: 0;
4432
margin-block-start: auto;
45-
position: relative;
46-
z-index: 2;
4733
}
4834

4935
.teaser-preview .db-link {

0 commit comments

Comments
 (0)