feat: Add Custom Cards stories section to Storybook#774
feat: Add Custom Cards stories section to Storybook#774sankalpjoshimp-afk wants to merge 3 commits into
Conversation
Adds a new 'Custom Cards' sub-section under Components/Data Display/Card with Basic and WithButtons stories matching the Figma design. Features a Figma-faithful layout with icon container, eyebrow, title, secondary text, border, shadow, and interactive Storybook controls for all copy and icon. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
PR SummaryLow Risk Overview Updates Reviewed by Cursor Bugbot for commit 8cbd48f. Bugbot is set up for automated code reviews on this repo. Configure here. |
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Replace raw <div style={{display:'flex',...}}> with <Flex>, move
Typography inline-style overrides to props (size/color/strong), and
fix 'Primary\n' arg artifact. Add a repo skill that codifies the same
checklist so designer-contributed stories get cleaned up automatically
next time.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| export const Basic: Story = { | ||
| render: args => ( | ||
| <ExampleStory title="A card with an icon, eyebrow label, title, and supporting secondary text."> | ||
| <CustomCard {...args} showButtons={false} /> |
There was a problem hiding this comment.
Hardcoded showButtons overrides Storybook controls in both stories
Medium Severity
Both Basic and WithButtons stories hardcode showButtons after the {...args} spread, so the explicit JSX prop always wins over whatever Storybook passes through args. The showButtons boolean control (registered in argTypes) renders in the Storybook panel but toggling it has no effect in either story. For WithButtons, the override is also redundant since showButtons: true is already set in args. The fix is to remove the hardcoded showButtons prop from both render functions and rely solely on args to drive the value.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 12ac31c. Configure here.
Move the Flex prop-mapping table, Typography prop-mapping table, and story-args hygiene rules into CLAUDE.md's Styling Guidelines so they're always loaded for /implement-ticket. Add a /simplify step to the designer workflow as the polish checkpoint that enforces them. Remove the designer-story-cleanup skill — it duplicated the existing /simplify skill plus rules that now live in CLAUDE.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 3 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 8cbd48f. Configure here.
| alignSelf: 'flex-start', | ||
| }}> | ||
| <Icon name={IconComponent} color="info" /> | ||
| </Flex> |
There was a problem hiding this comment.
Icon container uses Flex instead of Center component
Low Severity
The icon container uses <Flex align="center"> to center the icon, but the PR reviewer (@nastyastavitskaya) explicitly requested replacing it with the <Center> component: "tell claude to replace it with Center component, I think it might be better (and that's what I typically use for this case)." The project's CLAUDE.md styling guidelines also recommend <Center> over flex-based centering. A <Center> component already exists in src/components/layout/Center/Center.tsx and is exported from the component index.
Reviewed by Cursor Bugbot for commit 8cbd48f. Configure here.
| gap={Margin} | ||
| style={{ | ||
| background: ColorBgBase, | ||
| padding: MarginXl, |
There was a problem hiding this comment.
Margin tokens used for padding CSS properties
Low Severity
The padding CSS property uses MarginXl and Margin tokens instead of the semantically correct PaddingXl and Padding tokens. Dedicated padding tokens exist in src/styles/style.ts (Padding = '16px', PaddingXl = '32px') with identical values. While the rendered output is the same today, using the wrong semantic category makes the code misleading and fragile if token values ever diverge. No other component in the codebase uses margin tokens for padding.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 8cbd48f. Configure here.
2 participants
Adds a new 'Custom Cards' sub-section under Components/Data Display/Card with Basic and WithButtons stories matching the Figma design. Features a Figma-faithful layout with icon container, eyebrow, title, secondary text, border, shadow, and interactive Storybook controls for all copy and icon.
Instructions
mainfeat:,fix:orchore:. Source./, usuallyfeat/,fix/orchore/. Source.Summary
Testing Plan