e67e8f46f7
Add large size to Badge
...
- Add lg tokens: height 32px, paddingX 16px, fontSize 14px, iconSize 16px
- Refactor component to use size map instead of ternary
- Update stories: Sizes now shows all three, CompleteMatrix includes large
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com >
2026-03-25 16:08:17 +11:00
eb1099a4d0
Add Badge atom component
...
- Create badge component tokens (height, paddingX, fontSize, iconSize,
iconGap, borderRadius for sm/md sizes) — 10 tokens
- Build Badge component: pill-shaped status indicator label
- 6 colours: default, brand, success, warning, error, info
- 2 variants: soft (tonal, default) and filled (solid)
- 2 sizes: small (22px) and medium (26px)
- Optional leading icon prop
- All colours use CSS variables from token system (no hardcoded hex)
- Create 10 Storybook stories: Default, AllColoursSoft, AllColoursFilled,
WithIcons, WithIconsFilled, Sizes, SmallSizes, InPriceCard,
ServiceStatus, CompleteMatrix
- Regenerate token pipeline outputs
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com >
2026-03-25 16:05:04 +11:00
