feat(StatusIcon): Declarative approach using union types (#49)

* Declarative approach using union types * Restore retun icon when no label * Follow standard naming for type * Simply use IconListType only * Fix import and exlamation icons assignation * Remove string enums
migtools · Jan 22, 2021 · db53606 · db53606
1 parent 8dfb8b9
commit db53606
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 96 deletions.
diff --git a/src/components/StatusIcon/StatusIcon.stories.mdx b/src/components/StatusIcon/StatusIcon.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import { StatusIcon, StatusType } from './StatusIcon';
+import { StatusIcon } from './StatusIcon';
 import GithubLink from '../../../.storybook/helpers/GithubLink';
 
 <Meta title="Components/StatusIcon" component={StatusIcon} />
@@ -15,48 +15,48 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
 
 <Canvas>
   <Story name="Basic">
-    <StatusIcon status={StatusType.Ok} />
+    <StatusIcon status="Ok" />
     <br />
-    <StatusIcon status={StatusType.Warning} />
+    <StatusIcon status="Warning" />
     <br />
-    <StatusIcon status={StatusType.Error} />
+    <StatusIcon status="Error" />
     <br />
-    <StatusIcon status={StatusType.Info} />
+    <StatusIcon status="Info" />
     <br />
-    <StatusIcon status={StatusType.Loading} />
+    <StatusIcon status="Loading" />
     <br />
-    <StatusIcon status={StatusType.Unknown} />
+    <StatusIcon status="Unknown" />
   </Story>
 </Canvas>
 
 ### Disabled
 
 <Canvas>
   <Story name="Disabled">
-    <StatusIcon status={StatusType.Ok} isDisabled />
+    <StatusIcon status="Ok" isDisabled />
     <br />
-    <StatusIcon status={StatusType.Warning} isDisabled />
+    <StatusIcon status="Warning" isDisabled />
     <br />
-    <StatusIcon status={StatusType.Error} isDisabled />
+    <StatusIcon status="Error" isDisabled />
     <br />
-    <StatusIcon status={StatusType.Info} isDisabled />
+    <StatusIcon status="Info" isDisabled />
     <br />
-    <StatusIcon status={StatusType.Loading} isDisabled />
+    <StatusIcon status="Loading" isDisabled />
     <br />
-    <StatusIcon status={StatusType.Unknown} isDisabled />
+    <StatusIcon status="Unknown" isDisabled />
   </Story>
 </Canvas>
 
 ### With label
 
 <Canvas>
   <Story name="With label">
-    <StatusIcon status={StatusType.Ok} label="Ready" />
-    <StatusIcon status={StatusType.Warning} label="Warning" />
-    <StatusIcon status={StatusType.Error} label="Error" />
-    <StatusIcon status={StatusType.Info} label="Info" />
-    <StatusIcon status={StatusType.Loading} label="Loading" />
-    <StatusIcon status={StatusType.Unknown} label="Unknown" />
+    <StatusIcon status="Ok" label="Ready" />
+    <StatusIcon status="Warning" label="Warning" />
+    <StatusIcon status="Error" label="Error" />
+    <StatusIcon status="Info" label="Info" />
+    <StatusIcon status="Loading" label="Loading" />
+    <StatusIcon status="Unknown" label="Unknown" />
   </Story>
 </Canvas>
 

diff --git a/src/components/StatusIcon/StatusIcon.test.tsx b/src/components/StatusIcon/StatusIcon.test.tsx
@@ -9,7 +9,7 @@ import {
   global_danger_color_100 as dangerColor,
   global_info_color_100 as infoColor,
 } from '@patternfly/react-tokens';
-import { StatusIcon, StatusType, IStatusIconProps } from './StatusIcon';
+import { StatusIcon, IStatusIconProps } from './StatusIcon';
 
 const checkColor = (props: IStatusIconProps, color: string) => {
   const { container } = render(<StatusIcon {...props} />);
@@ -32,85 +32,85 @@ const checkText = (props: IStatusIconProps, text: string) => {
 describe('StatusIcon', () => {
   describe('Ok status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Ok, label: 'Ready' }, 'Ready');
+      checkText({ status: 'Ok', label: 'Ready' }, 'Ready');
     });
     it('should have correct color', () => {
-      checkColor({ status: StatusType.Ok }, successColor.value);
+      checkColor({ status: 'Ok' }, successColor.value);
     });
     it('should have disabled color if disabled', () => {
-      checkColor({ status: StatusType.Ok, isDisabled: true }, disabledColor.value);
+      checkColor({ status: 'Ok', isDisabled: true }, disabledColor.value);
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Ok, className: 'foo' }, 'foo', 'svg');
+      checkClass({ status: 'Ok', className: 'foo' }, 'foo', 'svg');
     });
   });
 
   describe('Warning status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Warning, label: 'Warning' }, 'Warning');
+      checkText({ status: 'Warning', label: 'Warning' }, 'Warning');
     });
     it('should have correct color', () => {
-      checkColor({ status: StatusType.Warning }, warningColor.value);
+      checkColor({ status: 'Warning' }, warningColor.value);
     });
     it('should have disabled color if disabled', () => {
-      checkColor({ status: StatusType.Warning, isDisabled: true }, disabledColor.value);
+      checkColor({ status: 'Warning', isDisabled: true }, disabledColor.value);
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Warning, className: 'foo' }, 'foo', 'svg');
+      checkClass({ status: 'Warning', className: 'foo' }, 'foo', 'svg');
     });
   });
 
   describe('Error status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Error, label: 'Error' }, 'Error');
+      checkText({ status: 'Error', label: 'Error' }, 'Error');
     });
     it('should have correct color', () => {
-      checkColor({ status: StatusType.Error }, dangerColor.value);
+      checkColor({ status: 'Error' }, dangerColor.value);
     });
     it('should have disabled color if disabled', () => {
-      checkColor({ status: StatusType.Error, isDisabled: true }, disabledColor.value);
+      checkColor({ status: 'Error', isDisabled: true }, disabledColor.value);
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Error, className: 'foo' }, 'foo', 'svg');
+      checkClass({ status: 'Error', className: 'foo' }, 'foo', 'svg');
     });
   });
 
   describe('Info status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Info, label: 'Info' }, 'Info');
+      checkText({ status: 'Info', label: 'Info' }, 'Info');
     });
     it('should have correct color', () => {
-      checkColor({ status: StatusType.Info }, infoColor.value);
+      checkColor({ status: 'Info' }, infoColor.value);
     });
     it('should have disabled color if disabled', () => {
-      checkColor({ status: StatusType.Info, isDisabled: true }, disabledColor.value);
+      checkColor({ status: 'Info', isDisabled: true }, disabledColor.value);
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Info, className: 'foo' }, 'foo', 'svg');
+      checkClass({ status: 'Info', className: 'foo' }, 'foo', 'svg');
     });
   });
 
   describe('Loading status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Loading, label: 'Loading' }, 'Loading');
+      checkText({ status: 'Loading', label: 'Loading' }, 'Loading');
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Loading, className: 'foo' }, 'foo', 'span');
+      checkClass({ status: 'Loading', className: 'foo' }, 'foo', 'span');
     });
   });
 
   describe('Unknown status', () => {
     it('should have label if present', () => {
-      checkText({ status: StatusType.Unknown, label: 'Unknown' }, 'Unknown');
+      checkText({ status: 'Unknown', label: 'Unknown' }, 'Unknown');
     });
     it('should have correct color', () => {
-      checkColor({ status: StatusType.Unknown }, unknownColor.value);
+      checkColor({ status: 'Unknown' }, unknownColor.value);
     });
     it('should have disabled color if disabled', () => {
-      checkColor({ status: StatusType.Unknown, isDisabled: true }, disabledColor.value);
+      checkColor({ status: 'Unknown', isDisabled: true }, disabledColor.value);
     });
     it('should pass down a given className', () => {
-      checkClass({ status: StatusType.Unknown, className: 'foo' }, 'foo', 'svg');
+      checkClass({ status: 'Unknown', className: 'foo' }, 'foo', 'svg');
     });
   });
 });
diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx
@@ -1,31 +1,59 @@
 import * as React from 'react';
-import { Flex, FlexItem, Spinner } from '@patternfly/react-core';
+import { Flex, FlexItem, Spinner, SpinnerProps } from '@patternfly/react-core';
 import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
   ExclamationCircleIcon,
   InfoCircleIcon,
   QuestionCircleIcon,
 } from '@patternfly/react-icons';
+import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
 import {
   global_disabled_color_200 as disabledColor,
   global_success_color_100 as successColor,
   global_warning_color_100 as warningColor,
   global_Color_dark_200 as unknownColor,
-  global_danger_color_100 as dangerColor,
+  global_danger_color_100 as errorColor,
   global_info_color_100 as infoColor,
+  global_info_color_200 as loadingColor,
 } from '@patternfly/react-tokens';
 
 import './StatusIcon.css';
 
-export enum StatusType {
-  Ok = 'Ok',
-  Warning = 'Warning',
-  Error = 'Error',
-  Info = 'Info',
-  Loading = 'Loading',
-  Unknown = 'Unknown',
-}
+export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Unknown';
+
+type IconListType = {
+  [key in StatusType]: {
+    Icon: React.ComponentClass<SVGIconProps> | React.FunctionComponent<SpinnerProps>;
+    color: { name: string; value: string; var: string };
+  };
+};
+const iconList: IconListType = {
+  Ok: {
+    Icon: CheckCircleIcon,
+    color: successColor,
+  },
+  Warning: {
+    Icon: ExclamationTriangleIcon,
+    color: warningColor,
+  },
+  Error: {
+    Icon: ExclamationCircleIcon,
+    color: errorColor,
+  },
+  Info: {
+    Icon: InfoCircleIcon,
+    color: infoColor,
+  },
+  Loading: {
+    Icon: Spinner,
+    color: loadingColor,
+  },
+  Unknown: {
+    Icon: QuestionCircleIcon,
+    color: unknownColor,
+  },
+};
 
 export interface IStatusIconProps {
   status: StatusType;
@@ -40,50 +68,14 @@ export const StatusIcon: React.FunctionComponent<IStatusIconProps> = ({
   isDisabled = false,
   className = '',
 }: IStatusIconProps) => {
-  let icon: React.ReactElement | null = null;
-  if (status === StatusType.Ok) {
-    icon = (
-      <CheckCircleIcon
-        className={className}
-        color={isDisabled ? disabledColor.value : successColor.value}
-      />
-    );
-  }
-  if (status === StatusType.Warning) {
-    icon = (
-      <ExclamationTriangleIcon
-        className={className}
-        color={isDisabled ? disabledColor.value : warningColor.value}
-      />
-    );
-  }
-  if (status === StatusType.Error) {
-    icon = (
-      <ExclamationCircleIcon
-        className={className}
-        color={isDisabled ? disabledColor.value : dangerColor.value}
-      />
-    );
-  }
-  if (status === StatusType.Info) {
-    icon = (
-      <InfoCircleIcon
-        className={className}
-        color={isDisabled ? disabledColor.value : infoColor.value}
-      />
-    );
-  }
-  if (status === StatusType.Loading) {
-    icon = <Spinner className={`${className} status-icon-loading-spinner`} />;
-  }
-  if (status === StatusType.Unknown) {
-    icon = (
-      <QuestionCircleIcon
-        className={className}
-        color={isDisabled ? disabledColor.value : unknownColor.value}
-      />
-    );
-  }
+  const Icon = iconList[status].Icon;
+  const icon = (
+    <Icon
+      color={isDisabled ? disabledColor.value : iconList[status].color.value}
+      className={status === 'Loading' ? `${className} status-icon-loading-spinner` : className}
+    />
+  );
+
   if (label) {
     return (
       <Flex