Use human readable numbers in Cardinal

storybookjs · Mar 21, 2023 · 52ddae7 · 52ddae7
1 parent 001ebba
commit 52ddae7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Cardinal.stories.tsx b/src/components/Cardinal.stories.tsx
@@ -185,3 +185,11 @@ export const WithIcon = () => (
 );
 
 WithIcon.storyName = 'with icon';
+
+export const Thousands = () => <Cardinal count={12345} text="Story" />;
+
+Thousands.storyName = 'thousands';
+
+export const Decimals = () => <Cardinal count={123.45} text="Story" />;
+
+Decimals.storyName = 'decimals';
diff --git a/src/components/Cardinal.tsx b/src/components/Cardinal.tsx
@@ -192,11 +192,11 @@ export const Cardinal: FunctionComponent<CardinalProps> = ({
   alignment,
   ...props
 }) => {
-  let countValue = count;
+  let countValue = typeof count === 'number' ? count.toLocaleString('en-US') : count;
   if (countLink) {
     countValue = (
       <Link href={countLink} inverse={status === 'inverse'}>
-        {count}
+        {countValue}
       </Link>
     );
   }