Figma sync: design update (node 6:513)

[Wigwamwam]

Design Update

Triggered by: @george Wiggin

View in Figma

What changed

Perfect! The build succeeded. Now let's create a summary of what was done:

Summary

I've successfully implemented the Figma design change for the "organism/dashboard-bar-chart" component (node 6:513). Here's what was created:

New Files Created:

1. src/ui/compositions/DashboardBarChart/DashboardBarChart.tsx - A wrapper component that combines GraphHeader and GraphVisualisation sub-components
2. src/ui/compositions/DashboardBarChart/dashboard-bar-chart.css - Styling 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 node 6:513
3. src/stories/compositions/DashboardBarChart.stories.tsx - Added a new story for the complete dashboard bar chart component

Design Tokens Used:

• Background: var(--sds-color-white-1000) (white #ffffff)
• Border radius: var(--sds-size-radius-400) (16px / 1rem)
• Shadow: var(--sds-effects-shadows-drop-shadow-600) (large shadow matching the Figma design)

Verification:

✅ Build passed successfully with npm run app:build

The implementation follows the project's conventions:

• Uses existing sub-components (GraphHeader and GraphVisualisation)
• Applies design tokens from theme.css (no hardcoded values)
• Follows the established file structure and naming patterns
• Uses proper TypeScript types
• Maintains minimal changes as required