Skip to content

feat: Storybook Phase 1 — DataViz primitive and Card stories#5584

Merged
fpigeonjr merged 6 commits into
mainfrom
ops-5525/storybook-phase-1
Apr 28, 2026
Merged

feat: Storybook Phase 1 — DataViz primitive and Card stories#5584
fpigeonjr merged 6 commits into
mainfrom
ops-5525/storybook-phase-1

Conversation

@fpigeonjr
Copy link
Copy Markdown
Contributor

@fpigeonjr fpigeonjr commented Apr 24, 2026

What changed

Added Storybook stories for all 10 DataViz primitive and Card wrapper components
listed in issue #5525. Every story uses live Controls (color pickers, number
spinners, range sliders) so the UX team can interact with components in isolation.
Also enabled autodocs globally so every component gets a generated Docs tab.

Issue

Closes #5525
Parent: #1224 | Depends on: #5524 (Phase 0 — complete)

How to test

cd frontend
bun run storybook
# Opens at http://localhost:6006

Navigate to each component in the sidebar and verify:

  • All stories render with correct USWDS styles
  • Controls panel shows grouped controls (Slice Values, Slice Colors, etc.)
  • Docs tab shows component description + all story variants inline
  • Hover interactions work (legend bolding, donut center percent)
  • Over-budget/over-received states show red bars and warning tags
  • Zero-value edge cases render cleanly (no crash, correct fallback UI)
  • Accessibility panel shows no critical violations

Stories added (37 total across 10 components):

Component Stories
ResponsiveDonutWithInnerPercent Default, AllOneCategory, TinySlice, AccessibilityLabeling
HorizontalStackedBar Default, TinySegment, SingleSegment, AllZero, KeyboardNav
LineGraph Default, InProgress, ZeroLeft, ZeroRight
ReverseLineGraph Default, ZeroReceived, OverReceived
LineBar Default, ZeroValue, ZeroValueNotFirstRow, MaxValue
DonutGraphWithLegendCard Default, AllOneCategory, TinySlice
LineGraphWithLegendCard Default, EqualSplit, ZeroBudget
BudgetCard Default, OverBudget, ZeroBudget
BigBudgetCard Default, OverBudget, ZeroBudget
ReceivedFundingCard Default, OverReceived, ZeroFunding

A11y impact

  • Accessibility changes included and validated against WCAG 2.1 AA intent
    • All stories checked against addon-a11y panel
    • AccessibilityLabeling story on ResponsiveDonutWithInnerPercent specifically
      validates the MutationObserver-applied aria-label on the nivo SVG

Screenshots

Run bun run storybook locally — see How to test above.

Definition of Done Checklist

  • OESA: Code refactored for clarity
  • OESA: Dependency rules followed
  • Automated unit tests updated and passed
  • Automated integration tests updated and passed
  • Automated quality tests updated and passed
  • Automated load tests updated and passed
  • Automated a11y tests updated and passed
  • Automated security tests updated and passed
  • 90%+ Code coverage achieved (*.stories.jsx excluded from coverage gate)
  • Form validations updated

Links

  • Implementation plan + gotchas: docs/stories/OPS-5525/storybook-phase-1.md
  • Storybook conventions: frontend/.storybook/README.md

@fpigeonjr
feat: add Storybook Phase 1 DataViz primitive and Card stories
73c583b 
Enable autodocs globally in .storybook/preview.jsx (tags: ['autodocs']).
Add 10 co-located story files with live Controls (color pickers, number
spinners, range sliders) and Docs tab descriptions:

DataViz primitives:
- ResponsiveDonutWithInnerPercent: Default, AllOneCategory, TinySlice, A11y
- HorizontalStackedBar: Default, TinySegment, SingleSegment, AllZero, KeyboardNav
- LineGraph: Default, InProgress, ZeroLeft, ZeroRight
- ReverseLineGraph: Default, ZeroReceived, OverReceived
- LineBar: Default, ZeroValue, ZeroValueNotFirstRow, MaxValue

Card composites:
- DonutGraphWithLegendCard: Default, AllOneCategory, TinySlice
- LineGraphWithLegendCard: Default, EqualSplit, ZeroBudget
- BudgetCard: Default, OverBudget, ZeroBudget
- BigBudgetCard: Default, OverBudget, ZeroBudget
- ReceivedFundingCard: Default, OverReceived, ZeroFunding

Add implementation plan and gotchas at docs/stories/OPS-5525/.

Closes #5525
@fpigeonjr fpigeonjr added task task for an associated story or backlog item documentation dev frontend ready Designers have created the designs, story has been refined, and ready for a Developer to begin labels Apr 24, 2026
@fpigeonjr fpigeonjr self-assigned this Apr 24, 2026
@fpigeonjr fpigeonjr marked this pull request as ready for review April 27, 2026 16:24
@fpigeonjr fpigeonjr requested a review from Copilot April 27, 2026 18:26
Copilot AI reviewed Apr 27, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Phase 1 Storybook coverage for DataViz primitives and related Card wrapper components, plus supporting docs/config so UX can review these presentational components in isolation.

Changes:

  • Added co-located Storybook story files for DataViz primitives (donut, stacked bar, line graphs, line bar) with interactive Controls and edge-case scenarios.
  • Added co-located Storybook story files for Card wrappers (budget/received funding + legend cards) to exercise common visual states (zero, over-budget/over-received, etc.).
  • Updated Storybook preview configuration and added an implementation-plan/gotchas doc for the phase.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
frontend/src/components/UI/DataViz/ResponsiveDonutWithInnerPercent/ResponsiveDonutWithInnerPercent.stories.jsx Donut primitive stories incl. accessibility-labeling scenario and shared wrapper for stateful hover percent.
frontend/src/components/UI/DataViz/LineGraph/ReverseLineGraph.stories.jsx Reverse line graph stories for default/zero/over-received states using computed percents.
frontend/src/components/UI/DataViz/LineGraph/LineGraph.stories.jsx LineGraph stories including striped and zero-left/right variants with controls.
frontend/src/components/UI/DataViz/LineBar/LineBar.stories.jsx LineBar stories covering TBD/$0 and max-ratio behavior.
frontend/src/components/UI/DataViz/HorizontalStackedBar/HorizontalStackedBar.stories.jsx Stacked bar stories including tiny segment, all-zero, and keyboard navigation coverage.
frontend/src/components/UI/Cards/LineGraphWithLegendCard/LineGraphWithLegendCard.stories.jsx Legend card stories with realistic funding splits and zero-budget behavior.
frontend/src/components/UI/Cards/DonutGraphWithLegendCard/DonutGraphWithLegendCard.stories.jsx Donut+legend card stories mirroring donut edge cases with computed percents.
frontend/src/components/UI/Cards/BudgetCard/ReceivedFundingCard.stories.jsx Received funding card stories for default/over-received/zero-funding states.
frontend/src/components/UI/Cards/BudgetCard/BudgetCard.stories.jsx Budget card stories for default/over-budget/zero-budget states.
frontend/src/components/UI/Cards/BudgetCard/BigBudgetCard.stories.jsx Big budget card stories plus Storybook-only decorator override for full-width rendering.
frontend/.storybook/preview.jsx Enables autodocs tagging globally and keeps global Redux/Router decorators.
docs/stories/OPS-5525/storybook-phase-1.md Phase 1 implementation notes, conventions recap, and gotchas discovered while adding stories.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread ...nents/UI/DataViz/ResponsiveDonutWithInnerPercent/ResponsiveDonutWithInnerPercent.stories.jsx
Comment thread frontend/src/components/UI/DataViz/LineGraph/LineGraph.stories.jsx Outdated
@fpigeonjr
fix: address PR review comments on story files
322ab1e 
- Remove role/aria-label from DonutWrapper container div so the
  MutationObserver accessibility smoke-test isn't masked by the wrapper
- Correct LineGraph overBudget description: it disables striping only;
  bar colors are controlled by data[].color, not by the prop itself
@fpigeonjr
chore: formatting
98372b0
@fpigeonjr fpigeonjr merged commit 5af1260 into main Apr 28, 2026
71 of 117 checks passed
@fpigeonjr fpigeonjr deleted the ops-5525/storybook-phase-1 branch April 28, 2026 23:06
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 28, 2026

🎉 This PR is included in version 1.374.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

josbell pushed a commit that referenced this pull request Apr 28, 2026
@fpigeonjr @josbell
feat: Storybook Phase 1 — DataViz primitive and Card stories (#5584)
b49c991
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@rajohnson90 rajohnson90 rajohnson90 approved these changes

@weimiao67 weimiao67 weimiao67 approved these changes

@johndeange johndeange Awaiting requested review from johndeange johndeange is a code owner

@Santi-3rd Santi-3rd Awaiting requested review from Santi-3rd Santi-3rd is a code owner

@josbell josbell Awaiting requested review from josbell josbell is a code owner

Assignees

@fpigeonjr fpigeonjr

Labels

dev frontend ready Designers have created the designs, story has been refined, and ready for a Developer to begin documentation released task task for an associated story or backlog item

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Storybook: Phase 1 — DataViz Primitive Stories

4 participants

@fpigeonjr @rajohnson90 @weimiao67