ECHOES-1385 Implement new EmptyState component

[2amelia]

Summary

• add a reusable \ component to \
• export the component publicly with tests and Storybook coverage
• refine spacing, icon-color inheritance, and docs/examples based on review feedback

Validation

• yarn jest src/components/empty-state
• yarn ts-check
• yarn lint

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	17fe587
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a6385c3e9c5fe0008c80ea3
😎 Deploy Preview	https://deploy-preview-737--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1385

[jeremy-davis-sonarsource]

Looks good! Nice work.

Just a few comments, but I'm trusting you to address them. No need for a re-review

(NP = Nitpicks, feel free to ignore)

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[gitar-bot]

Code Review ✅ Approved 2 resolved / 2 findings

Implements the reusable EmptyState component with comprehensive tests and Storybook coverage, addressing the hardcoded heading level finding.

✅ 2 resolved

✅ Edge Case: Heading level hardcoded to h2 may break heading order

📄 src/components/empty-state/EmptyState.tsx:79-81
EmptyState always renders its heading as <Heading as="h2">. When the component is placed on a page where the surrounding document outline doesn't start at h1, this produces non-sequential heading levels, an accessibility (heading-order) issue that the component's a11y test won't catch since it renders in isolation. Consider exposing an optional headingLevel/as prop (defaulting to h2) so consumers can align the level with their page structure.

✅ Quality: EmptyState uses ref-as-prop while rest of codebase uses forwardRef

📄 src/components/empty-state/EmptyState.tsx:60 📄 src/components/empty-state/EmptyState.tsx:67-71
Existing components (Heading, Text, Button) forward refs via forwardRef, but EmptyState adopts the React 19 ref-in-props pattern. This works under React 19 but is inconsistent with the surrounding conventions, which can confuse maintainers. Consider matching the established forwardRef pattern for consistency, or intentionally standardize on the new pattern project-wide.

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}