Figma sync: design update (node 6:513)

[Wigwamwam]

Design Update

Triggered by: @george Wiggin

View in Figma

What changed

Perfect! The build passes. Let me create a summary of the changes I made:

Summary

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

New Files Created:

1. src/ui/compositions/DashboardBarChart/DashboardBarChart.tsx - A new parent component that wraps GraphHeader and GraphVisualisation into a complete card
2. src/ui/compositions/DashboardBarChart/dashboard-bar-chart.css - CSS styling for the card container using design tokens

Files Modified:

1. src/ui/compositions/index.ts - Added export for the new DashboardBarChart component
2. src/figma/compositions/DashboardBarChart.figma.tsx - Added Figma Code Connect mapping for the new component (node-id=6-513)
3. src/stories/compositions/DashboardBarChart.stories.tsx - Updated stories to include the complete component

Design Implementation Details:

• ✅ Card container with 560px width
• ✅ White background using --mcp-color-surface-primary-light
• ✅ 16px border radius using --sds-size-radius-400
• ✅ Drop shadow using --sds-effects-shadows-drop-shadow-600
• ✅ Proper composition of GraphHeader and GraphVisualisation sub-components
• ✅ All styling uses design tokens from theme.css (no hardcoded values)

Verification:

• ✅ Build passes: npm run app:build succeeds with no errors
• ✅ TypeScript compilation successful
• ✅ ESLint validation passed

The component is now ready and matches the Figma design, providing a complete dashboard bar chart card with header, AI button, visualization, and proper styling.