Skip to content

Commit 8120299

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
feat(Note): visueel uitgelicht bericht voor aanvullende informatie (#38)
- Design token JSON met 6 structurele tokens (border-inline-start-width, column-gap, row-gap, padding-block, padding-inline-start/end) - HTML/CSS component met CSS Grid, border-inline-start, lokale kleur-custom-properties per variant (neutral=default, info, positive, negative, warning), dsn-note--no-heading modifier (icon spans beide rijen) - React component met as-prop polymorfisme (div/aside/nav/section), optionele heading, PREFERRED_ICONS, automatisch aria-labelledby voor landmarks, iconStart={null} voor geen icoon - 42 unit tests (824 totaal) - Storybook: stories.tsx, docs.mdx, docs.md met AllStates, WithoutHeading, WithList, AsNav en RTL stories Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 9fb8ceb commit 8120299

11 files changed

Lines changed: 1057 additions & 2 deletions

File tree

‎packages/components-html/src/note/note.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/**
2+
* Note Component
3+
* Visually highlighted message for supplementary or important information.
4+
* Passive counterpart to Alert — no live region, read on navigation only.
5+
*
6+
* Usage:
7+
* <!-- Neutral (default), with icon and heading -->
8+
* <div class="dsn-note">
9+
* <span class="dsn-note__icon" aria-hidden="true">
10+
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
11+
* </span>
12+
* <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Let op</strong>
13+
* <div class="dsn-note__content">
14+
* <p>Aanvullende informatie over dit onderwerp.</p>
15+
* </div>
16+
* </div>
17+
*
18+
* <!-- Info variant -->
19+
* <div class="dsn-note dsn-note--info">
20+
* <span class="dsn-note__icon" aria-hidden="true">
21+
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
22+
* </span>
23+
* <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Informatie</strong>
24+
* <div class="dsn-note__content">
25+
* <p>Body content.</p>
26+
* </div>
27+
* </div>
28+
*
29+
* <!-- Without heading — icon spans both rows -->
30+
* <div class="dsn-note dsn-note--no-heading">
31+
* <span class="dsn-note__icon" aria-hidden="true">
32+
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
33+
* </span>
34+
* <div class="dsn-note__content">
35+
* <p>Aanvullende informatie.</p>
36+
* </div>
37+
* </div>
38+
*
39+
* <!-- as="aside" — supplementary content -->
40+
* <aside class="dsn-note dsn-note--info">
41+
* ...
42+
* </aside>
43+
*
44+
* <!-- as="nav" — table of contents -->
45+
* <nav class="dsn-note" aria-labelledby="note-heading-id">
46+
* <span class="dsn-note__icon" aria-hidden="true">
47+
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
48+
* </span>
49+
* <strong class="dsn-heading dsn-heading--3 dsn-note__heading" id="note-heading-id">Op deze pagina</strong>
50+
* <nav class="dsn-note__content">
51+
* <ul>...</ul>
52+
* </nav>
53+
* </nav>
54+
*/
55+
56+
/* ===========================
57+
Local color tokens (neutral = default)
58+
=========================== */
59+
.dsn-note {
60+
--dsn-note-icon-color: var(--dsn-color-neutral-color-default);
61+
--dsn-note-color: var(--dsn-color-neutral-color-document);
62+
--dsn-note-background-color: var(--dsn-color-neutral-bg-default);
63+
--dsn-note-border-inline-start-color: var(--dsn-color-neutral-border-default);
64+
}
65+
66+
.dsn-note--info {
67+
--dsn-note-icon-color: var(--dsn-color-info-color-default);
68+
--dsn-note-color: var(--dsn-color-info-color-document);
69+
--dsn-note-background-color: var(--dsn-color-info-bg-default);
70+
--dsn-note-border-inline-start-color: var(--dsn-color-info-border-default);
71+
}
72+
73+
.dsn-note--positive {
74+
--dsn-note-icon-color: var(--dsn-color-positive-color-default);
75+
--dsn-note-color: var(--dsn-color-positive-color-document);
76+
--dsn-note-background-color: var(--dsn-color-positive-bg-default);
77+
--dsn-note-border-inline-start-color: var(
78+
--dsn-color-positive-border-default
79+
);
80+
}
81+
82+
.dsn-note--negative {
83+
--dsn-note-icon-color: var(--dsn-color-negative-color-default);
84+
--dsn-note-color: var(--dsn-color-negative-color-document);
85+
--dsn-note-background-color: var(--dsn-color-negative-bg-default);
86+
--dsn-note-border-inline-start-color: var(
87+
--dsn-color-negative-border-default
88+
);
89+
}
90+
91+
.dsn-note--warning {
92+
--dsn-note-icon-color: var(--dsn-color-warning-color-default);
93+
--dsn-note-color: var(--dsn-color-warning-color-document);
94+
--dsn-note-background-color: var(--dsn-color-warning-bg-default);
95+
--dsn-note-border-inline-start-color: var(--dsn-color-warning-border-default);
96+
}
97+
98+
/* ===========================
99+
Base layout
100+
=========================== */
101+
.dsn-note {
102+
display: grid;
103+
grid-template-columns: var(--dsn-icon-size-xl) 1fr;
104+
column-gap: var(--dsn-note-column-gap);
105+
row-gap: var(--dsn-note-row-gap);
106+
padding-block: var(--dsn-note-padding-block);
107+
padding-inline-start: var(--dsn-note-padding-inline-start);
108+
padding-inline-end: var(--dsn-note-padding-inline-end);
109+
border-inline-start: var(--dsn-note-border-inline-start-width) solid
110+
var(--dsn-note-border-inline-start-color);
111+
background-color: var(--dsn-note-background-color);
112+
color: var(--dsn-note-color);
113+
}
114+
115+
/* ===========================
116+
Icon
117+
=========================== */
118+
.dsn-note__icon {
119+
grid-column: 1;
120+
grid-row: 1;
121+
align-self: center;
122+
flex-shrink: 0;
123+
width: var(--dsn-icon-size-xl);
124+
height: var(--dsn-icon-size-xl);
125+
color: var(--dsn-note-icon-color);
126+
}
127+
128+
/* ===========================
129+
Heading
130+
=========================== */
131+
.dsn-note__heading {
132+
grid-column: 2;
133+
grid-row: 1;
134+
align-self: center;
135+
}
136+
137+
/* ===========================
138+
Content
139+
=========================== */
140+
.dsn-note__content {
141+
grid-column: 2;
142+
grid-row: 2;
143+
}
144+
145+
/* ===========================
146+
No-heading modifier — icon spans both rows, content moves to row 1
147+
=========================== */
148+
.dsn-note--no-heading .dsn-note__icon {
149+
grid-row: 1 / span 2;
150+
align-self: start;
151+
margin-block-start: 0.125em;
152+
}
153+
154+
.dsn-note--no-heading .dsn-note__content {
155+
grid-row: 1;
156+
}

‎packages/components-react/src/Note/Note.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* Note component styles for React
3+
* Re-exports the base Note styles from components-html
4+
*/
5+
6+
@import '../../../components-html/src/note/note.css';

0 commit comments

Comments
 (0)