Add custom limit to CountBadge (#935)

modules/badge/react/README.md

@@ -24,7 +24,7 @@ accessibility concerns you'll want to keep in mind:
 - The live region should be outside the button
 - The live region should be visually hidden and only contain text
 
-### Example
+### Notification Example
 
 ```tsx
 import styled from '@emotion/styled';
@@ -49,21 +49,47 @@ const AccessibleHide = styled('div')({
 </IconButton>
 <AccessibleHide role="status" aria-live="polite" aria-atomic="true">
   New notifications
-</div>
+</AccessibleHide>
 ```
 
 ## Usage
 
+📝 **Note** With all usage examples, please also refer to the accessibility guidelines above.
+
+### Basic Usage
+
+#### Setting the Count
+
+```tsx
+import * as React from 'react';
+import {CountBadge} from '@workday/canvas-kit-react-badge';
+
+const CustomCountBadge = () => {
+  return <CountBadge count={3} />;
+};
+```
+
+#### Setting a Variant
+
 ```tsx
 import * as React from 'react';
 import {CountBadge} from '@workday/canvas-kit-react-badge';
 
-// default CountBadge
-<CountBadge count={3} />
+const InverseCountBadge = () => {
+  return <CountBadge variant="inverse" count={3} />;
+};
+```
 
-// inverse CountBadge variant
-<CountBadge variant="inverse" count={3} />
+#### Setting a Limit
 
+```tsx
+import * as React from 'react';
+import {CountBadge} from '@workday/canvas-kit-react-badge';
+
+const InverseCountBadge = () => {
+  // this will display the count as '99+'
+  return <CountBadge variant="inverse" count={100} limit={100} />;
+};
 ```
 
 ## Static Properties
@@ -99,4 +125,10 @@ Default: `0`
 
 📝 **Note**
 
-Values greater than 999 are formatted to "999+"
+By default, values greater than 999 are formatted to "999+"
+
+#### `limit: number`
+
+> Limit sets when to format the displayed count
+
+Default: `1000`

modules/badge/react/lib/CountBadge.tsx

@@ -5,6 +5,7 @@ import {borderRadius, colors, fontFamily} from '@workday/canvas-kit-react-core';
 
 export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   count?: number;
+  limit?: number;
   variant?: 'default' | 'inverse';
 }
 
@@ -53,9 +54,9 @@ const Container = styled('span')<CountBadgeProps>(
 );
 
 const CountBadge = (props: CountBadgeProps) => {
-  const {variant = 'default', count = 0, ...elemProps} = props;
+  const {variant = 'default', count = 0, limit = 1000, ...elemProps} = props;
 
-  const formattedCount = count < 1000 ? `${count}` : '999+';
+  const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
 
   return (
     <Container variant={variant} {...elemProps}>

modules/badge/react/spec/CountBadge.spec.tsx

@@ -1,32 +1,48 @@
 import React from 'react';
 import {render} from '@testing-library/react';
 import {CountBadge, CountBadgeProps} from '../index';
+const context = describe;
 
 describe('CountBadge', () => {
   const renderCountBadge = (props = {} as Partial<CountBadgeProps>) => {
     return render(<CountBadge {...props} />);
   };
 
-  it('should default to 0 if no count is provided', () => {
-    const expected = '0';
-    const {container} = renderCountBadge();
+  context('when the default count is set', () => {
+    it('should default to 0 if no count is provided', () => {
+      const expected = '0';
+      const {container} = renderCountBadge();
 
-    expect(container.textContent).toEqual(expected);
+      expect(container.textContent).toEqual(expected);
+    });
   });
 
-  it('should render the count for numbers under 1000', () => {
-    const count = 999;
-    const expected = count.toString();
-    const {container} = renderCountBadge({count});
+  context('when the default limit is set', () => {
+    it('should render the count for numbers under 1000', () => {
+      const count = 999;
+      const expected = count.toString();
+      const {container} = renderCountBadge({count});
 
-    expect(container.textContent).toEqual(expected);
+      expect(container.textContent).toEqual(expected);
+    });
+
+    it('should render 999+ for numbers 1000 and above', () => {
+      const count = 1000;
+      const expected = '999+';
+      const {container} = renderCountBadge({count});
+
+      expect(container.textContent).toEqual(expected);
+    });
   });
 
-  it('should render 999+ for numbers 1000 and above', () => {
-    const count = 1000;
-    const expected = '999+';
-    const {container} = renderCountBadge({count});
+  context('when a custom limit is set', () => {
+    it('should render a formatted number if the count exceeds the limit', () => {
+      const count = 100;
+      const limit = 100;
+      const expected = '99+';
+      const {container} = renderCountBadge({count, limit});
 
-    expect(container.textContent).toEqual(expected);
+      expect(container.textContent).toEqual(expected);
+    });
   });
 });

modules/badge/react/stories/stories.tsx

@@ -28,3 +28,13 @@ export const Inverse = () => (
     />
   </div>
 );
+
+export const CustomLimit = () => (
+  <div className="story">
+    <CountBadge
+      count={number('Count', 100)}
+      limit={number('Number', 100)}
+      variant={select('Variant', ['default', 'inverse'], 'default')}
+    />
+  </div>
+);

modules/badge/react/stories/stories_visualTesting.tsx

@@ -24,6 +24,7 @@ export const CountBadgeStates = () => {
           label: 'Greater than 999',
           props: {count: 1000},
         },
+        {label: 'Custom Limit', props: {count: 100, limit: 100}},
       ]}
       rowProps={[
         {label: 'Default', props: {}},