feat(statusicon): add Paused status type to StatusIcon (#53)

Author: mturley

src/components/StatusIcon/StatusIcon.stories.mdx

@@ -25,6 +25,8 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
     <br />
     <StatusIcon status="Loading" />
     <br />
+    <StatusIcon status="Paused" />
+    <br />
     <StatusIcon status="Unknown" />
   </Story>
 </Canvas>
@@ -43,6 +45,8 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
     <br />
     <StatusIcon status="Loading" isDisabled />
     <br />
+    <StatusIcon status="Paused" isDisabled />
+    <br />
     <StatusIcon status="Unknown" isDisabled />
   </Story>
 </Canvas>
@@ -56,6 +60,7 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
     <StatusIcon status="Error" label="Error" />
     <StatusIcon status="Info" label="Info" />
     <StatusIcon status="Loading" label="Loading" />
+    <StatusIcon status="Paused" label="Paused" />
     <StatusIcon status="Unknown" label="Unknown" />
   </Story>
 </Canvas>

src/components/StatusIcon/StatusIcon.test.tsx

@@ -99,6 +99,21 @@ describe('StatusIcon', () => {
     });
   });
 
+  describe('Paused status', () => {
+    it('should have label if present', () => {
+      checkText({ status: 'Paused', label: 'Paused' }, 'Paused');
+    });
+    it('should have correct color', () => {
+      checkColor({ status: 'Paused' }, '#151515');
+    });
+    it('should have disabled color if disabled', () => {
+      checkColor({ status: 'Paused', isDisabled: true }, disabledColor.value);
+    });
+    it('should pass down a given className', () => {
+      checkClass({ status: 'Paused', className: 'foo' }, 'foo', 'svg');
+    });
+  });
+
   describe('Unknown status', () => {
     it('should have label if present', () => {
       checkText({ status: 'Unknown', label: 'Unknown' }, 'Unknown');

src/components/StatusIcon/StatusIcon.tsx

@@ -6,6 +6,7 @@ import {
   ExclamationCircleIcon,
   InfoCircleIcon,
   QuestionCircleIcon,
+  PauseCircleIcon,
 } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
 import {
@@ -20,12 +21,12 @@ import {
 
 import './StatusIcon.css';
 
-export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Unknown';
+export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Paused' | 'Unknown';
 
 type IconListType = {
   [key in StatusType]: {
     Icon: React.ComponentClass<SVGIconProps> | React.FunctionComponent<SpinnerProps>;
-    color: { name: string; value: string; var: string };
+    color?: { name: string; value: string; var: string };
   };
 };
 const iconList: IconListType = {
@@ -49,6 +50,9 @@ const iconList: IconListType = {
     Icon: Spinner,
     color: loadingColor,
   },
+  Paused: {
+    Icon: PauseCircleIcon,
+  },
   Unknown: {
     Icon: QuestionCircleIcon,
     color: unknownColor,
@@ -71,7 +75,7 @@ export const StatusIcon: React.FunctionComponent<IStatusIconProps> = ({
   const Icon = iconList[status].Icon;
   const icon = (
     <Icon
-      color={isDisabled ? disabledColor.value : iconList[status].color.value}
+      color={isDisabled ? disabledColor.value : iconList[status].color?.value || '#151515'} // TODO use --pf-global--Color--100 after upgrading PF, for some reason that is resolving to #000 in this version
       className={status === 'Loading' ? `${className} status-icon-loading-spinner` : className}
     />
   );