diff --git a/CHANGELOG.md b/CHANGELOG.md index e03b208..6aa8ae1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.7.0] + +### Added + +- Added `SummaryCard` component. + ## [1.6.7] ### Refactor diff --git a/package.json b/package.json index 0496536..ae7da5c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.7", + "version": "1.7.0", "description": "A simple React UI library", "main": "dist/index.js", "module": "dist/index.js", diff --git a/src/organisms/SummaryCard/index.tsx b/src/organisms/SummaryCard/index.tsx new file mode 100644 index 0000000..b6883b1 --- /dev/null +++ b/src/organisms/SummaryCard/index.tsx @@ -0,0 +1,41 @@ +import { Typography } from '../..'; +import { Space } from '../../molecules'; +import { SummaryCardWrapper } from './styles'; +import { RdSummaryCardProps } from './types'; + +export const SummaryCard: React.FC = props => { + const { + format = 'number', + value, + subValue = null, + label = 'Total', + subLabel = null, + ...cardProps + } = props; + + return ( + + + + {label} + + + + {value} + + + + {(subLabel || subValue) && ( + + {subLabel && ( + + {subLabel} + + )} + {subValue && {subValue}} + + )} + + + ); +}; diff --git a/src/organisms/SummaryCard/styles.tsx b/src/organisms/SummaryCard/styles.tsx new file mode 100644 index 0000000..58b827b --- /dev/null +++ b/src/organisms/SummaryCard/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Card } from '../../molecules'; + +export const SummaryCardWrapper = styled(Card)``; diff --git a/src/organisms/SummaryCard/types.ts b/src/organisms/SummaryCard/types.ts new file mode 100644 index 0000000..1238ebc --- /dev/null +++ b/src/organisms/SummaryCard/types.ts @@ -0,0 +1,40 @@ +import { ReactNode } from 'react'; +import { RdCardProps } from '../../molecules'; + +export interface RdSummaryCardProps extends RdCardProps { + /** + * Determines the display format of values. + * + * - `"number"` → renders plain number format. + * - `"currency"` → renders values as currency. + * + * @default "number" + */ + format?: 'number' | 'currency'; + + /** + * The main numeric value to display. + * Usually represents the total amount or main KPI. + */ + value: ReactNode; + + /** + * The secondary numeric value to display. + * Typically represents today's or a breakdown value. + */ + subValue?: ReactNode; + + /** + * Label displayed above the main value. + * + * @default "Total" + */ + label?: string; + + /** + * Label displayed next to the sub value. + * + * @default "Today total" + */ + subLabel?: string; +} diff --git a/src/organisms/index.ts b/src/organisms/index.ts index 022f736..eb821cb 100644 --- a/src/organisms/index.ts +++ b/src/organisms/index.ts @@ -1,2 +1,3 @@ export * from './App'; export * from './ConfigProvider'; +export * from './SummaryCard' \ No newline at end of file