Figma sync: design update (node 6:513)

[Wigwamwam]

Design Update

Triggered by: @george Wiggin

View in Figma

What changed

Excellent! The implementation is complete. Let me provide a summary of what was done.

Summary

I've successfully implemented the Figma design changes for the DashboardBarChart component (node 6:513). Here's what was created:

Changes Made

New Files Created:

1. src/ui/compositions/DashboardBarChart/DashboardBarChart.tsx - Main wrapper component that combines GraphHeader and GraphVisualisation into a complete card
2. src/ui/compositions/DashboardBarChart/dashboard-bar-chart.css - Styling for the card wrapper with:
   • White background using var(--mcp-color-surface-primary-light)
   • 16px border radius using var(--sds-size-radius-400)
   • Drop shadow using var(--sds-effects-shadows-drop-shadow-600)
   • Proper flexbox layout

Modified Files:
3. src/ui/compositions/index.ts - Added export for the new DashboardBarChart component
4. src/figma/compositions/DashboardBarChart.figma.tsx - Added Figma Code Connect mapping for node 6:513
5. src/stories/compositions/DashboardBarChart.stories.tsx - Added a new Storybook story for the complete component

Design Alignment

The implementation follows the Figma design exactly:

• ✅ Card wrapper with white background, rounded corners, and shadow
• ✅ Contains GraphHeader (node 6:449) with title and AI button
• ✅ Contains GraphVisualisation (node 6:450) with keys, chart, and dates
• ✅ All styling uses design tokens from theme.css (no hardcoded values)
• ✅ Follows existing project patterns and conventions

Verification

✅ Build successful: npm run app:build passes without errors

The implementation is minimal and only adds the necessary wrapper component to match the Figma design. The existing GraphHeader and GraphVisualisation components were already correct and required no changes.