From 172a40ef74430ffbfedb6c7051f5e426eebc35b4 Mon Sep 17 00:00:00 2001
From: mkrds <mkordas@pgs-soft.com>
Date: Thu, 15 Dec 2022 19:02:32 +0100
Subject: [PATCH] refactor(batch-selection): refactor stories to TS

---
 ...s.mdx => batch-selection-test.stories.tsx} | 46 +++++------
 .../batch-selection.stories.mdx               | 76 ++-----------------
 .../batch-selection.stories.tsx               | 62 +++++++++++++++
 3 files changed, 85 insertions(+), 99 deletions(-)
 rename src/components/batch-selection/{batch-selection-test.stories.mdx => batch-selection-test.stories.tsx} (52%)
 create mode 100644 src/components/batch-selection/batch-selection.stories.tsx

diff --git a/src/components/batch-selection/batch-selection-test.stories.mdx b/src/components/batch-selection/batch-selection-test.stories.tsx
similarity index 52%
rename from src/components/batch-selection/batch-selection-test.stories.mdx
rename to src/components/batch-selection/batch-selection-test.stories.tsx
index 85cf13c288..7604c6fc8b 100644
--- a/src/components/batch-selection/batch-selection-test.stories.mdx
+++ b/src/components/batch-selection/batch-selection-test.stories.tsx
@@ -1,29 +1,27 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { action } from "@storybook/addon-actions";
-
-import BatchSelection from ".";
+import React from "react";
+import BatchSelection, { BatchSelectionProps } from ".";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 
-<Meta
-  title="Batch Selection/Test"
-  parameters={{
+export default {
+  title: "Batch Selection/Test",
+  parameters: {
     info: { disable: true },
     chromatic: {
       disable: true,
     },
-  }}
-  argTypes={{
+  },
+  argTypes: {
     colorTheme: {
       options: ["dark", "light", "white", "transparent"],
       control: {
         type: "select",
       },
     },
-  }}
-/>
+  },
+};
 
-export const BatchSelectionStory = (args) => (
+export const Default = (args: Omit<BatchSelectionProps, "children">) => (
   <BatchSelection {...args}>
     <IconButton onAction={() => {}}>
       <Icon type="csv" />
@@ -37,20 +35,10 @@ export const BatchSelectionStory = (args) => (
   </BatchSelection>
 );
 
-# Batch Selection
-
-### Default
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      disabled: false,
-      hidden: false,
-      selectedCount: 0,
-      colorTheme: "transparent",
-    }}
-  >
-    {BatchSelectionStory.bind({})}
-  </Story>
-</Canvas>
+Default.storyName = "default";
+Default.args = {
+  disabled: false,
+  hidden: false,
+  selectedCount: 0,
+  colorTheme: "transparent",
+};
diff --git a/src/components/batch-selection/batch-selection.stories.mdx b/src/components/batch-selection/batch-selection.stories.mdx
index 2abe894420..c3d725e9f4 100644
--- a/src/components/batch-selection/batch-selection.stories.mdx
+++ b/src/components/batch-selection/batch-selection.stories.mdx
@@ -3,8 +3,7 @@ import TranslationKeysTable from "../../../.storybook/utils/translation-keys-tab
 
 import BatchSelection from ".";
 import IconButton from "../icon-button";
-import Icon from "../icon";
-import Link from "../link";
+import * as stories from "./batch-selection.stories";
 
 <Meta title="Batch Selection" parameters={{ info: { disable: true } }} />
 
@@ -33,94 +32,31 @@ import IconButton from "carbon-react/lib/components/icon-button";
 ### Basic usage
 
 <Canvas>
-  <Story name="default">
-    <BatchSelection selectedCount={0}>
-      <span style={{ paddingRight: "5px" }}>
-        (<Link>Select All 38 items</Link>)
-      </span>
-      <IconButton onAction={() => {}}>
-        <Icon type="csv" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="bin" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="pdf" />
-      </IconButton>
-    </BatchSelection>
-  </Story>
+  <Story name="default" story={stories.Default} />
 </Canvas>
 
 ### On dark background
 
 <Canvas>
-  <Story name="dark">
-    <BatchSelection selectedCount={1} colorTheme="dark">
-      <IconButton onAction={() => {}}>
-        <Icon type="csv" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="bin" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="pdf" />
-      </IconButton>
-    </BatchSelection>
-  </Story>
+  <Story name="dark" story={stories.Dark} />
 </Canvas>
 
 ### On light background
 
 <Canvas>
-  <Story name="light">
-    <BatchSelection selectedCount={2} colorTheme="light">
-      <IconButton onAction={() => {}}>
-        <Icon type="csv" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="bin" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="pdf" />
-      </IconButton>
-    </BatchSelection>
-  </Story>
+  <Story name="light" story={stories.Light} />
 </Canvas>
 
 ### On white background
 
 <Canvas>
-  <Story name="white">
-    <BatchSelection selectedCount={3} colorTheme="white">
-      <IconButton onAction={() => {}}>
-        <Icon type="csv" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="bin" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="pdf" />
-      </IconButton>
-    </BatchSelection>
-  </Story>
+  <Story name="white" story={stories.White} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-  <Story name="disabled">
-    <BatchSelection selectedCount={4} disabled>
-      <IconButton onAction={() => {}}>
-        <Icon type="csv" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="bin" />
-      </IconButton>
-      <IconButton onAction={() => {}}>
-        <Icon type="pdf" />
-      </IconButton>
-    </BatchSelection>
-  </Story>
+  <Story name="disabled" story={stories.Disabled} />
 </Canvas>
 
 ## Props
diff --git a/src/components/batch-selection/batch-selection.stories.tsx b/src/components/batch-selection/batch-selection.stories.tsx
new file mode 100644
index 0000000000..587f6a96b9
--- /dev/null
+++ b/src/components/batch-selection/batch-selection.stories.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { ComponentStory } from "@storybook/react";
+
+import BatchSelection from ".";
+import IconButton from "../icon-button";
+import Icon from "../icon";
+import Button from "../button";
+
+export const Default = () => (
+  <BatchSelection selectedCount={0}>
+    <Button size="small" mx={1} buttonType="secondary">
+      Select All 38 items
+    </Button>
+    <IconButton onAction={() => {}}>
+      <Icon type="csv" />
+    </IconButton>
+    <IconButton onAction={() => {}}>
+      <Icon type="bin" />
+    </IconButton>
+    <IconButton onAction={() => {}}>
+      <Icon type="pdf" />
+    </IconButton>
+  </BatchSelection>
+);
+
+export const Themed: ComponentStory<typeof BatchSelection> = (args) => (
+  <BatchSelection {...args}>
+    <IconButton onAction={() => {}}>
+      <Icon type="csv" />
+    </IconButton>
+    <IconButton onAction={() => {}}>
+      <Icon type="bin" />
+    </IconButton>
+    <IconButton onAction={() => {}}>
+      <Icon type="pdf" />
+    </IconButton>
+  </BatchSelection>
+);
+
+export const Dark = Themed.bind({});
+Dark.args = {
+  selectedCount: 1,
+  colorTheme: "dark",
+};
+
+export const Light = Themed.bind({});
+Light.args = {
+  selectedCount: 2,
+  colorTheme: "light",
+};
+
+export const White = Themed.bind({});
+White.args = {
+  selectedCount: 3,
+  colorTheme: "white",
+};
+
+export const Disabled = Themed.bind({});
+Disabled.args = {
+  selectedCount: 4,
+  disabled: true,
+};