From d2c292bead3f3a5ae2b47aba25d7696c93f4a325 Mon Sep 17 00:00:00 2001
From: Tom McGuire <Mcgtom10@gmail.com>
Date: Fri, 18 Feb 2022 08:00:07 -0800
Subject: [PATCH] Add argTypes for color-indicator (#13659)

---
 .../color-indicator.stories.js                | 51 +++++++++++++++----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/ui/components/ui/color-indicator/color-indicator.stories.js b/ui/components/ui/color-indicator/color-indicator.stories.js
index c5e480439..a458afcd7 100644
--- a/ui/components/ui/color-indicator/color-indicator.stories.js
+++ b/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}
   />
 );