richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update memory files for Badge atom

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 16:05:54 +11:00
parent eb1099a4d0
commit d1ae1a6f27
3 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/memory/session-log.md
View File

@@ -348,6 +348,35 @@ Each entry follows this structure:
- Toggle/switch pattern from Figma (ListItemAddItem) is a separate component concern, not Card
**Next steps:**
- User to review Card selected/hover states in Storybook
- Build Badge or Chip atom next
- Begin PriceCard or ServiceOption molecule once Card is approved
- ~~User to review Card selected/hover states in Storybook~~ ✓ Approved
- ~~Build Badge or Chip atom next~~ ✓ Badge done
### Session 2026-03-25h — Badge atom
**Agent(s):** Claude Opus (via conversation)
**Work completed:**
- Searched FA 2.0 and Parsons 1.0 Figma files for badge/chip/tag components — none found, designed from conventions
- Created badge component tokens (`tokens/component/badge.json`): height, paddingX, fontSize, iconSize, iconGap, borderRadius for sm/md — 10 tokens total
- Built Badge component (`src/components/atoms/Badge/Badge.tsx`):
- Pill-shaped, display-only status indicator (not interactive)
- 6 colour intents: default, brand, success, warning, error, info
- 2 variants: soft (tonal bg + coloured text, default) and filled (solid bg + white text)
- 2 sizes: small (22px) and medium (26px)
- Optional leading `icon` prop for contextual icons
- All soft colours use CSS variables from token system — no hardcoded hex
- Warning text uses amber.700 for WCAG AA compliance
- Created 10 Storybook stories including realistic compositions (InPriceCard, ServiceStatus)
- Preflight passed all 5 checks
- Committed and pushed to Gitea
**Decisions made:**
- Badge defaults to soft variant — calmer, more appropriate for FA's sensitive context. Filled variant for high-priority emphasis only.
- Badge uses Box (span) not MUI Chip — keeps it simple, display-only, no interactive baggage
- Pill shape (borderRadius.full) distinguishes badges from rectangular UI elements
- Brand soft colours match Button soft (brand.200 bg, brand.700 text) for visual consistency
**Next steps:**
- User to review Badge in Storybook
- Build Chip atom next (interactive variant of badge — clickable, deletable)
- Begin PriceCard molecule once Badge and Card are both approved