Skip to content

feat(Alert): compact bericht met signaalkleur (#37)#47

Merged
jeffreylauwers merged 3 commits intomainfrom
feature/alert
Mar 2, 2026
Merged

feat(Alert): compact bericht met signaalkleur (#37)#47
jeffreylauwers merged 3 commits intomainfrom
feature/alert

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

@jeffreylauwers jeffreylauwers commented Mar 2, 2026 •
edited
Loading

Summary

  • Design tokens — 6 structurele tokens: border-radius (0px, thema-overschrijfbaar), border-width, column-gap, row-gap, padding-block, padding-inline
  • HTML/CSS — CSS Grid layout met linkerborder, lokale CSS custom properties voor kleur per variant (info=default, positive, negative, warning), dsn-alert--no-icon modifier
  • React — Alert component met Heading compositie (appearance="heading-3"), PREFERRED_ICONS per variant, iconStart={null} voor geen icoon, role="alert", headingLevel prop
  • Tests — 32 nieuwe unit tests (782 totaal, 40 suites)
  • Storybook — 3 bestanden (stories, mdx, md) met Default, Positive, Negative, Warning, AllStates, WithList (validatiepatroon), NoIcon, LongText, RTL en RTLLongText stories

Test plan

  • Tests groen (pnpm test — 782 tests)
  • Lint schoon (0 errors, 4 pre-existing warnings)
  • TypeScript schoon (0 nieuwe errors)
  • Storybook gebouwd

🤖 Generated with Claude Code

Jeffrey Lauwers and others added 3 commits March 2, 2026 20:50
@claude
feat(Alert): compact status label met signaalkleur (#37)
1e0ffc2 
- Design token JSON met 6 structurele tokens (border-radius 0px, border-width, column-gap, row-gap, padding-block, padding-inline)
- HTML/CSS component met CSS Grid layout, linkerborder, lokale kleur-custom-properties per variant (info=default, positive, negative, warning) en dsn-alert--no-icon modifier
- React component met Heading compositie (appearance="heading-3"), PREFERRED_ICONS per variant, iconStart={null} voor geen icoon, role="alert"
- 32 unit tests (782 totaal)
- Storybook: stories.tsx, docs.mdx, docs.md met alle states, validatielijst-voorbeeld en RTL stories

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix(Alert): @import CSS uit components-html in React CSS file
ddabdcf 
Alert.css miste de @import — zelfde patroon als StatusBadge.css.
Storybook laadt alleen de React-package CSS, dus de @import is nodig
om de component-stijlen te tonen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
fix(Alert): border rondom ipv alleen border-inline-start
69e7fd3 
Alert krijgt een volledige border (alle kanten).
Note component krijgt straks alleen border-inline-start.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 9fb8ceb into main Mar 2, 2026
1 check passed
@jeffreylauwers jeffreylauwers deleted the feature/alert branch March 27, 2026 06:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@jeffreylauwers