fix(simple-select): change the test story format from mdx to js - FE-4332

src/components/drag-and-drop/drag-and-drop-test.stories.js

@@ -8,13 +8,6 @@ import { DraggableContext, WithDrag, WithDrop } from ".";
 export default {
   component: DraggableContext,
   title: "DraggableContext/Test",
-  argTypes: {
-    customDragLayer: {
-      table: {
-        disabled: true,
-      },
-    },
-  },
 };
 
 const Custom = () => {
@@ -67,10 +60,10 @@ const Custom = () => {
 
 Custom.storyName = "custom";
 Custom.argTypes = {
-  customDragLayer: { table: { disable: true } },
-  onDrag: { table: { disable: true } },
-  children: { table: { disable: true } },
-  autoScroll: { table: { disable: true } },
+  customDragLayer: { table: { disable: true }, control: false },
+  onDrag: { table: { disable: true }, control: false },
+  children: { table: { disable: true }, control: false },
+  autoScroll: { table: { disable: true }, control: false },
 };
 
 export { Custom };

src/components/select/simple-select/simple-select-test.stories.js

@@ -0,0 +1,75 @@
+// it's not mdx file because of https://github.com/storybookjs/storybook/issues/11542
+
+import React from "react";
+import { action } from "@storybook/addon-actions";
+
+import { Select, Option } from "..";
+
+export default {
+  component: Select,
+  title: "Design System/Select/Test",
+  parameters: {
+    info: { disable: true },
+    chromatic: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    value: {
+      table: {
+        disabled: true,
+      },
+    },
+  },
+};
+
+const Default = (args) => {
+  return (
+    <Select
+      name="simple"
+      id="simple"
+      label="label"
+      labelInline
+      onOpen={action("onOpen")}
+      onChange={action("onChange", { depth: 2 })}
+      onClick={action("onClick", { depth: 2 })}
+      onFocus={action("onFocus", { depth: 2 })}
+      onBlur={action("onBlur", { depth: 2 })}
+      onKeyDown={action("onKeyDown", { depth: 2 })}
+      {...args}
+    >
+      <Option text="Amber" value="1" />
+      <Option text="Black" value="2" />
+      <Option text="Blue" value="3" />
+      <Option text="Brown" value="4" />
+      <Option text="Green" value="5" />
+      <Option text="Orange" value="6" />
+      <Option text="Pink" value="7" />
+      <Option text="Purple" value="8" />
+      <Option text="Red" value="9" />
+      <Option text="White" value="10" />
+      <Option text="Yellow" value="11" />
+    </Select>
+  );
+};
+
+Default.storyName = "default";
+Default.argTypes = {
+  value: { table: { disable: true }, control: false },
+  disablePortal: { table: { disable: true }, control: false },
+  defaultValue: { table: { disable: true }, control: false },
+  children: { table: { disable: true }, control: false },
+  openOnFocus: { table: { disable: true }, control: false },
+  transparent: { table: { disable: true }, control: false },
+  tableHeader: { table: { disable: true }, control: false },
+  multiColumn: { table: { disable: true }, control: false },
+  onOpen: { table: { disable: true }, control: false },
+  isLoading: { table: { disable: true }, control: false },
+  onListScrollBottom: { table: { disable: true }, control: false },
+  tooltipPosition: { table: { disable: true }, control: false },
+};
+Default.args = {
+  mt: 0,
+};
+
+export { Default };