From c8f5b8a341865e9d357b6ca11af3fbc23e869a72 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Wed, 3 Aug 2022 11:33:27 +0300
Subject: [PATCH] pass direction as an arg in the list demo

---
 .../primitives/dnd/sortable-list.stories.tsx  | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx b/packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx
index bfca46e3f6..526c2baa6d 100644
--- a/packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx
+++ b/packages/design-system/src/components/primitives/dnd/sortable-list.stories.tsx
@@ -38,11 +38,11 @@ const Item = ({
 };
 
 export const SortableList = ({
-  direction = "vertical",
-  reversed = false,
+  direction,
+  reversed,
 }: {
-  direction?: "horizontal" | "vertical" | "wrap";
-  reversed?: boolean;
+  direction: "horizontal" | "vertical" | "wrap";
+  reversed: boolean;
 }) => {
   const [data, setData] = useState([
     { id: "0", text: "First" },
@@ -183,18 +183,14 @@ export const SortableList = ({
   );
 };
 
-export const SortableListHorizontal = (args: Args) => (
-  <SortableList direction="horizontal" {...args} />
-);
-
-export const SortableListWrap = (args: Args) => (
-  <SortableList direction="wrap" {...args} />
-);
-
-type Args = { reversed: boolean };
-
 export default {
   args: {
+    direction: "vertical",
     reversed: false,
   },
+  argTypes: {
+    direction: {
+      control: { type: "select", options: ["horizontal", "vertical", "wrap"] },
+    },
+  },
 } as ComponentMeta<typeof SortableList>;