Remove string enums

migtools · Jan 21, 2021 · 89d7d3c · 89d7d3c
1 parent 4e50d92
commit 89d7d3c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 62 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
@@ -20,16 +20,7 @@ import {
 
 import './StatusIcon.css';
 
-export enum StatusType {
-  Ok = 'Ok',
-  Warning = 'Warning',
-  Error = 'Error',
-  Info = 'Info',
-  Loading = 'Loading',
-  Unknown = 'Unknown',
-}
-
-export type StatusIconType = keyof typeof StatusType;
+export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Unknown';
 
 type IconListType = {
   [key in StatusType]: {
@@ -38,34 +29,34 @@ type IconListType = {
   };
 };
 const iconList: IconListType = {
-  [StatusType.Ok]: {
+  Ok: {
     Icon: CheckCircleIcon,
     color: successColor,
   },
-  [StatusType.Warning]: {
+  Warning: {
     Icon: ExclamationTriangleIcon,
     color: warningColor,
   },
-  [StatusType.Error]: {
+  Error: {
     Icon: ExclamationCircleIcon,
     color: errorColor,
   },
-  [StatusType.Info]: {
+  Info: {
     Icon: InfoCircleIcon,
     color: infoColor,
   },
-  [StatusType.Loading]: {
+  Loading: {
     Icon: Spinner,
     color: loadingColor,
   },
-  [StatusType.Unknown]: {
+  Unknown: {
     Icon: QuestionCircleIcon,
     color: unknownColor,
   },
 };
 
 export interface IStatusIconProps {
-  status: StatusIconType;
+  status: StatusType;
   label?: React.ReactNode;
   isDisabled?: boolean;
   className?: string;
@@ -81,9 +72,7 @@ export const StatusIcon: React.FunctionComponent<IStatusIconProps> = ({
   const icon = (
     <Icon
       color={isDisabled ? disabledColor.value : iconList[status].color.value}
-      className={
-        status === StatusType.Loading ? `${className} status-icon-loading-spinner` : className
-      }
+      className={status === 'Loading' ? `${className} status-icon-loading-spinner` : className}
     />
   );