#382 Handle only numeric values as Badge content. Support custom limit.

packages/react-components/src/components/Badge/Badge.helpers.ts

@@ -0,0 +1,3 @@
+export function formatCount(count: number, max: number): string {
+  return count > max ? `${max}+` : `${count}`;
+}

packages/react-components/src/components/Badge/Badge.spec.tsx

@@ -11,11 +11,26 @@ describe('Badge', () => {
     expect(container.firstChild).toHaveClass('my-custom-class');
   });
 
-  it('should display content passed as children by default', () => {
-    const content = '3 steps left';
-    const { container } = render(<Badge>{content}</Badge>);
+  it('should display number passed as count', () => {
+    const count = 1;
+    const { container } = render(<Badge count={count} />);
 
-    expect(container).toHaveTextContent(content);
+    expect(container).toHaveTextContent(`${count}`);
+  });
+
+  it('should display number shortened to default max limit', () => {
+    const count = 100;
+    const { container } = render(<Badge count={count} />);
+
+    expect(container).toHaveTextContent('99+');
+  });
+
+  it('should display number shortened to passed max limit', () => {
+    const count = 10;
+    const max = 9;
+    const { container } = render(<Badge count={count} max={max} />);
+
+    expect(container).toHaveTextContent(`${max}+`);
   });
 
   it('should display exclamation mark for alert type', () => {

packages/react-components/src/components/Badge/Badge.stories.tsx

@@ -16,41 +16,47 @@ export const Default: Story<BadgeProps> = (
 
 Default.storyName = 'Badge';
 Default.args = {
-  children: '1',
+  count: 1,
 };
 
 export const Sizes = (): JSX.Element => (
   <>
     <StoryDescriptor title="Compact">
-      <Badge size="compact">1</Badge>
+      <Badge size="compact" count={1} />
     </StoryDescriptor>
     <StoryDescriptor title="Medium">
-      <Badge size="medium">1</Badge>
+      <Badge size="medium" count={1} />
     </StoryDescriptor>
     <StoryDescriptor title="Large">
-      <Badge size="large">1</Badge>
+      <Badge size="large" count={1} />
     </StoryDescriptor>
   </>
 );
 
 export const Kinds = (): JSX.Element => (
   <>
     <StoryDescriptor title="Primary">
-      <Badge kind="primary">1</Badge>
+      <Badge kind="primary" count={1} />
     </StoryDescriptor>
     <StoryDescriptor title="Secondary">
-      <Badge kind="secondary">1</Badge>
+      <Badge kind="secondary" count={1} />
     </StoryDescriptor>
     <StoryDescriptor title="Tertiary">
-      <Badge kind="tertiary">1</Badge>
+      <Badge kind="tertiary" count={1} />
     </StoryDescriptor>
   </>
 );
 
 export const Types = (): JSX.Element => (
   <>
-    <StoryDescriptor title="Content">
-      <Badge type="content">3 steps left</Badge>
+    <StoryDescriptor title="Count">
+      <Badge type="counter" count={1} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Count with default max limit">
+      <Badge type="counter" count={100} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Count with custom max limit">
+      <Badge type="counter" count={6} max={5} />
     </StoryDescriptor>
     <StoryDescriptor title="Alert">
       <Badge type="alert" />

packages/react-components/src/components/Badge/Badge.tsx

@@ -1,22 +1,27 @@
 import * as React from 'react';
+import cx from 'clsx';
 
 import styles from './Badge.module.scss';
-import cx from 'clsx';
+import { formatCount } from './Badge.helpers';
 
 const baseClass = 'badge';
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  count?: number;
   kind?: 'primary' | 'secondary' | 'tertiary';
+  max?: number;
   size?: 'large' | 'medium' | 'compact';
-  type?: 'content' | 'alert' | 'dot';
+  type?: 'counter' | 'alert' | 'dot';
 }
 
 export const Badge: React.FC<BadgeProps> = ({
-  children,
   className,
+  count = 0,
+  max = 99,
   kind = 'primary',
   size = 'medium',
-  type = 'content',
+  type = 'counter',
+  ...spanProps
 }) => {
   const mergedClassNames = cx(
     className,
@@ -26,10 +31,14 @@ export const Badge: React.FC<BadgeProps> = ({
   );
 
   const content = {
-    ['content']: children,
+    ['counter']: formatCount(count, max),
     ['alert']: '!',
     ['dot']: <span className={styles[`${baseClass}__dot`]} />,
   }[type];
 
-  return <span className={mergedClassNames}>{content}</span>;
+  return (
+    <span className={mergedClassNames} {...spanProps}>
+      {content}
+    </span>
+  );
 };