refactor: Update stories to remove files referencing the same "kind"

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds

modules/_labs/color-picker/react/stories/stories_VisualTesting.tsx

@@ -1,25 +1,37 @@
 /// <reference path="../../../../../typings.d.ts" />
 /** @jsx jsx */
 import {jsx} from '@emotion/core';
+import React from 'react';
 import {colors} from '@workday/canvas-kit-react-core';
 import {StaticStates} from '@workday/canvas-kit-labs-react-core';
-import {ComponentStatesTable, withSnapshotsEnabled} from '../../../../../utils/storybook';
+import {ComponentStatesTable, withSnapshotsEnabled, Story} from '../../../../../utils/storybook';
 import ColorPicker from '../lib/ColorPicker';
 
-export default withSnapshotsEnabled({
+export default {
   title: 'Testing/React/Labs/Color Picker',
   component: ColorPicker,
-  parameters: {
-    chromatic: {
-      pauseAnimationAtEnd: true,
-    },
-  },
-});
+};
+
+export const InputInteraction = () => {
+  const textAreaRef = React.useRef(null);
+  const [color, setColor] = React.useState('');
+  const handleColorChange = (c: string) => {
+    setColor(c);
+    textAreaRef.current?.focus();
+  };
+  return (
+    <div className="App">
+      <ColorPicker showCustomHexInput onColorChange={handleColorChange} />
+      <label htmlFor="test">Text Area</label>
+      <textarea id="test" style={{color: color}} ref={textAreaRef} />
+    </div>
+  );
+};
 
 // eslint-disable-next-line no-empty-function
 const noop = () => {};
 
-export const ColorPickerStates = () => (
+export const ColorPickerStates = withSnapshotsEnabled(() => (
   <StaticStates>
     <ComponentStatesTable
       rowProps={[
@@ -48,4 +60,10 @@ export const ColorPickerStates = () => (
       {props => <ColorPicker {...props} onColorChange={noop} />}
     </ComponentStatesTable>
   </StaticStates>
-);
+));
+
+ColorPickerStates.parameters = {
+  chromatic: {
+    pauseAnimationAtEnd: true,
+  },
+};