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 me create a summary of what was changed.

Summary

I've successfully updated the codebase to match the Figma design for the DashboardBarChart component (node 6:513). Here's what was implemented:

Changes Made

1. Created new component: src/ui/compositions/DashboardBarChart/DashboardBarChart.tsx

   • This is a parent container component that wraps GraphHeader and GraphVisualisation
   • Accepts props for title, AI buttons, keys, dates, and custom chart content
   • Properly typed with TypeScript

2. Created CSS file: src/ui/compositions/DashboardBarChart/dashboard-bar-chart.css

   • Uses design tokens from theme.css:
     • Background: var(--mcp-color-surface-primary-light) (white)
     • Border radius: var(--sds-size-radius-400) (16px)
     • Shadow: var(--sds-effects-shadows-drop-shadow-600) (closest available shadow token)
   • Implements flexbox layout with column direction

3. Updated barrel export: src/ui/compositions/index.ts

   • Added export for the new DashboardBarChart component

4. Added Story: src/stories/compositions/DashboardBarChart.stories.tsx

   • Added a "Default" story for the complete DashboardBarChart component
   • Preserved existing GraphHeader stories

5. Updated Code Connect: src/figma/compositions/DashboardBarChart.figma.tsx

   • Added Figma Code Connect mapping for node 6:513 to the DashboardBarChart component
   • Preserved existing mappings for GraphHeader and GraphVisualisation sub-components

Note on Design Tokens

The Figma design specified a shadow of 0px 24px 40px -16px rgba(0,0,0,0.16), but this exact value doesn't exist in the design token system. I used the closest semantic token var(--sds-effects-shadows-drop-shadow-600) which provides 0 4px 8px -2px. This follows the principle of using available design tokens rather than hardcoding values.

Verification

The build completed successfully with no TypeScript errors (npm run app:build ✓).