Add argTypes for color-indicator (#13659)

ui/components/ui/color-indicator/color-indicator.stories.js

@@ -1,30 +1,59 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
 import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 import ColorIndicator from './color-indicator';
 
 export default {
   title: 'Components/UI/ColorIndicator',
   id: __filename,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: SIZES,
+      defaultValue: SIZES.LG,
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: ColorIndicator.TYPES,
+      defaultValue: ColorIndicator.TYPES.FILLED,
+    },
+    color: {
+      control: {
+        type: 'select',
+      },
+      options: COLORS,
+      defaultValue: COLORS.PRIMARY1,
+    },
+    borderColor: {
+      control: {
+        type: 'select',
+      },
+      options: { NONE: undefined, ...COLORS },
+      defaultValue: undefined,
+    },
+  },
 };
 
-export const DefaultStory = () => (
+export const DefaultStory = (args) => (
   <ColorIndicator
-    size={select('size', SIZES, SIZES.LG)}
-    type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
-    color={select('color', COLORS, COLORS.PRIMARY1)}
-    borderColor={select('borderColor', { NONE: undefined, ...COLORS })}
+    size={args.size}
+    type={args.type}
+    color={args.color}
+    borderColor={args.borderColor}
   />
 );
 
 DefaultStory.storyName = 'Default';
 
-export const WithIcon = () => (
+export const WithIcon = (args) => (
   <ColorIndicator
-    size={select('size', SIZES, SIZES.LG)}
-    type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
-    color={select('color', COLORS, COLORS.PRIMARY1)}
+    size={args.size}
+    type={args.type}
+    color={args.color}
     iconClassName="fa fa-question"
-    borderColor={select('borderColor', { NONE: undefined, ...COLORS })}
+    borderColor={args.borderColor}
   />
 );