From d1ae1a6f27dc800e3831fec6642763f946be60f1 Mon Sep 17 00:00:00 2001 From: Richie Date: Wed, 25 Mar 2026 16:05:54 +1100 Subject: [PATCH] Update memory files for Badge atom Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/memory/component-registry.md | 2 +- docs/memory/session-log.md | 35 ++++++++++++++++++++++++++++--- docs/memory/token-registry.md | 17 +++++++++++++++ 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 8b50a20..7c6be11 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -20,7 +20,7 @@ duplicates) and MUST update it after completing one. | IconButton | planned | contained, soft, outlined, text × small, medium, large | Reuses Button tokens | Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed. | | Typography | review | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. | | Input | review | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. | -| Badge | planned | default, success, warning, error | | Status indicators | +| Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. | | Icon | planned | various sizes | | Icon wrapper component | | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation | | Divider | planned | horizontal, vertical | | Visual separator | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 3290552..353207b 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -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 diff --git a/docs/memory/token-registry.md b/docs/memory/token-registry.md index 7680721..32f8ba1 100644 --- a/docs/memory/token-registry.md +++ b/docs/memory/token-registry.md @@ -208,3 +208,20 @@ the correct token for any design property. | card.background.default | → color.surface.raised (#FFFFFF) | Card | Card background (raised surface) | | card.background.hover | → color.surface.subtle (#FAFAFA) | Card | Subtle grey fill on hover for interactive cards | | card.background.selected | → color.surface.warm (#FEF9F5) | Card | Warm tint for selected cards | + +### Badge + +`tokens/component/badge.json` + +| Token path | Value / Reference | Used by | Description | +|-----------|-----------|---------|-------------| +| badge.height.sm | 22px | Badge | Small badge height | +| badge.height.md | 26px | Badge | Medium badge height (default) | +| badge.paddingX.sm | → spacing.2 (8px) | Badge | Small horizontal padding | +| badge.paddingX.md | → spacing.3 (12px) | Badge | Medium horizontal padding | +| badge.fontSize.sm | → fontSize.2xs (11px) | Badge | Small badge text | +| badge.fontSize.md | → fontSize.xs (12px) | Badge | Medium badge text | +| badge.iconSize.sm | 12px | Badge | Small badge icon | +| badge.iconSize.md | 14px | Badge | Medium badge icon | +| badge.iconGap.default | → spacing.1 (4px) | Badge | Icon-to-text gap | +| badge.borderRadius.default | → borderRadius.full (9999px) | Badge | Pill shape |