explicitly support default type for Status component

appfolio · Sep 7, 2021 · 5b3766c · 5b3766c
1 parent a87c02d
commit 5b3766c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/components/Status.tsx b/src/components/Status.tsx
@@ -4,12 +4,12 @@ import Icon from './Icon';
 import { FontAwesomeAPMProps } from './icon/FontAwesomeAPM';
 
 interface StatusProps extends Omit<FontAwesomeAPMProps, 'name'> {
-  type: 'info' | 'muted' | 'success' | 'danger' | 'warning';
+  type?: 'info' | 'muted' | 'success' | 'danger' | 'warning' | 'none';
   className?: string;
 }
 
-const Status = ({ type, className, ...props }: StatusProps) => {
-  let name = 'circle';
+const Status = ({ type = 'none', className, ...props }: StatusProps) => {
+  let name = '';
   switch (type) {
     case 'info':
       name = 'info-circle';
@@ -26,10 +26,14 @@ const Status = ({ type, className, ...props }: StatusProps) => {
     case 'warning':
       name = 'exclamation-circle';
       break;
+    case 'none':
+      name = 'circle';
+      break;
     default:
+      throw new Error(`Unsupported value for 'type' prop passed to Status component: "${type}"`);
   }
   return (
-    <Icon {...props} name={name} fixedWidth className={classnames(`text-${type || 'muted'}`, className)} />
+    <Icon {...props} name={name} fixedWidth className={classnames(`text-${type === 'none' ? 'muted' : type}`, className)} />
   );
 };
 

diff --git a/test/components/Status.spec.tsx b/test/components/Status.spec.tsx
@@ -16,6 +16,18 @@ describe('<Status />', () => {
     assert.strictEqual(icon.prop('className'), 'text-info');
   });
 
+  it('should accept none as an option', () => {
+    const icon = shallow(<Status type='none' />).find(Icon);
+    assert.strictEqual(icon.prop('name'), 'circle');
+    assert.strictEqual(icon.prop('className'), 'text-muted');
+  });
+
+  it('should default to the "none" type', () => {
+    const icon = shallow(<Status />).find(Icon);
+    assert.strictEqual(icon.prop('name'), 'circle');
+    assert.strictEqual(icon.prop('className'), 'text-muted');
+  });
+
   it('should take a type option and classnames', () => {
     const icon = shallow(<Status type='muted' className='mx-5' />).find(Icon);
     assert.strictEqual(icon.prop('className'), 'text-muted mx-5');