Create StatCard and Stat component

[kruulik]

Ticket []

Description Of Changes

Created HOC for ant Card to allow re-ordering cover content and introduced an option for inline title styling to match designs
Created HOC for Statistic component, ensuring the correct token styles are used
Added a story under Dashboard/Card to demonstrate how these could be assembled

Code Changes

• Added CustomCard and Statistic HOC's
• Added story

Steps to Confirm

turbo run storybook and then visit Dashboard/Card

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Feb 27, 2026 5:18pm
fides-privacy-center	Ignored		Feb 27, 2026 5:18pm

[Copilot]

Pull request overview

Adds new FidesUI higher-order components (HOCs) to support dashboard “stat card” patterns by extending Ant Design’s Card and Statistic, and demonstrates composition via a Storybook story.

Changes:

• Introduces CustomCard with optional coverPosition="bottom" and associated SCSS for reordering cover placement.
• Introduces CustomStatistic with a trend prop that maps to Ant Design theme tokens for value coloring.
• Adds a Dashboard/Card Storybook story and small supporting adjustments (RadarChart layout tweak, Storybook Vite optimizeDeps, changelog entry).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
clients/fidesui/src/index.ts	Switches Card export to the new CustomCard wrapper and exports its props type
clients/fidesui/src/hoc/index.tsx	Re-exports newly added HOCs (CustomCard, CustomStatistic)
clients/fidesui/src/hoc/CustomCard.tsx	Adds Card wrapper with coverPosition and default clipping class
clients/fidesui/src/hoc/CustomCard.module.scss	Adds flex/order styling to place Card cover below the body
clients/fidesui/src/hoc/CustomStatistic.tsx	Adds Statistic wrapper with trend-based token color selection
clients/fidesui/src/components/dashboard/StatCard.stories.tsx	Adds Storybook examples composing CustomCard + CustomStatistic + charts
clients/fidesui/src/components/charts/RadarChart.tsx	Adjusts radar chart radius and axis render ordering
clients/fidesui/.storybook/main.ts	Adds antd to Vite optimizeDeps for Storybook
changelog/dashboard-card.yaml	Adds changelog entry for the new UI building blocks

Comments suppressed due to low confidence (2)

clients/fidesui/src/index.ts:304

• CustomCard is now re-exported as Card, which changes runtime behavior for every existing import { Card } from "fidesui" consumer (e.g. always adds the overflow-clip class). To avoid unintended clipping regressions, consider adding an opt-out prop (e.g. clipContent?: boolean) or defaulting clipping off unless coverPosition="bottom"/cover is used, while still keeping the new functionality available.

export {
  CustomAvatar as Avatar,
  CustomCard as Card,
  CopyTooltip,
  CustomDateRangePicker as DateRangePicker,
  CustomInput as Input,
  CustomList as List,
  CustomSelect as Select,

clients/fidesui/src/index.ts:309

• A CustomStatistic HOC is introduced and exported from ./hoc, but it is not re-exported from the package entrypoint (src/index.ts) the way other HOCs are (e.g. CustomCard as Card, CustomInput as Input). If this is intended for external use, consider exporting CustomStatistic (and its props type) here as Statistic/StatisticProps for a consistent public API.

// Higher-order components
export type {
  CustomAvatarProps as AvatarProps,
  CustomCardProps as CardProps,
  ICustomMultiSelectProps,
  ICustomSelectProps,
  CustomInputProps as InputProps,
} from "./hoc";
export {
  CustomAvatar as Avatar,
  CustomCard as Card,
  CopyTooltip,
  CustomDateRangePicker as DateRangePicker,
  CustomInput as Input,
  CustomList as List,
  CustomSelect as Select,
  CustomTable as Table,
  CustomTag as Tag,
  CustomTooltip as Tooltip,
  CustomTypography as Typography,
} from "./hoc";

---

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

[greptile-apps]

Greptile Summary

This PR introduces two HOC wrappers — CustomCard and CustomStatistic — that extend Ant Design's Card and Statistic components with additional layout props (coverPosition, headerLayout) and trend-aware colour styling respectively, then re-exports them as the canonical Card and Statistic from fidesui. A Storybook story file (StatCard.stories.tsx) demonstrates how the two components compose into a dashboard stat card. A minor refactor to RadarChart moves PolarAngleAxis to render after Radar (fixing SVG z-order so tick labels appear on top of the fill) and increases outerRadius from 70% to 80%.

• CustomCard adds coverPosition="bottom" (reorders body/cover via CSS order) and headerLayout="inline" (places title and tabs on one row), cleanly extracting custom props before forwarding the rest to Ant Design's Card
• CustomStatistic maps a trend prop to the appropriate Ant Design colour token (colorSuccess, colorError, colorText) and applies a semibold default font-weight
• TREND_TOKEN_MAP in CustomStatistic is a static constant that should be lifted to module scope to avoid reallocating the object on every render
• Two story render functions use <div className="flex ..."> where the project convention calls for Ant Design's <Flex> component

Confidence Score: 4/5

• Safe to merge after addressing the minor style issues; no logic or breaking-change concerns
• The HOC pattern is consistent with the existing codebase, the CSS module overrides are well-justified and documented, the re-export changes are backward-compatible, and the RadarChart reordering is a correct visual fix. The only issues are a static constant defined inside a render function and two div elements in stories that should use Flex.
• clients/fidesui/src/hoc/CustomStatistic.tsx (TREND_TOKEN_MAP placement), clients/fidesui/src/components/dashboard/StatCard.stories.tsx (div vs Flex)

Important Files Changed

Filename	Overview
clients/fidesui/src/hoc/CustomStatistic.tsx	New HOC wrapping Ant Design's Statistic with trend-aware colour styling; TREND_TOKEN_MAP constant is unnecessarily recreated on every render by being declared inside the forwardRef callback
clients/fidesui/src/hoc/CustomCard.tsx	New HOC wrapping Ant Design's Card with coverPosition and headerLayout props; cleanly extracts custom props before spreading onto the wrapped component
clients/fidesui/src/hoc/CustomCard.module.scss	CSS module providing inlineHeader and bottomCover layout utilities; the !important usage for padding override is well-documented with an inline comment explaining the specificity conflict
clients/fidesui/src/components/dashboard/StatCard.stories.tsx	Storybook stories demonstrating StatCard usage; two instances of div with flex Tailwind classes should use the Ant Design Flex component per project convention
clients/fidesui/src/components/charts/RadarChart.tsx	PolarAngleAxis moved to render after Radar (fixing label z-order so tick labels appear on top of the radar fill); outerRadius increased from 70% to 80%
clients/fidesui/src/index.ts	Card is now exported via CustomCard HOC (replacing the direct Ant Design Card export), and Statistic is added as a new HOC export; backward-compatible for existing consumers

_{Last reviewed commit: b5fb4a8}

[greptile-apps]

_{8 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

---

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

[jpople]

Looks good to me, very clean.