Taskbox add argTypes

lalalee · lalalee · commit 11d3c69d71d9 · 2020-09-19T15:46:56.000+08:00
diff --git a/src/app/components/task.stories.ts b/src/app/components/task.stories.ts
@@ -1,9 +1,21 @@
 // src/app/components/task.stories.ts
 import { action } from '@storybook/addon-actions';
+import { Story, Meta } from '@storybook/angular/types-6-0';
 import { TaskComponent } from './task.component';
+import { Task } from '../models/task.model';
+
 export default {
   title: 'Task',
   excludeStories: /.*Data$/,
+  argTypes: {
+    state: {
+        control: {
+          type: 'inline-radio',
+          options: ['Task_INBOX', 'TASK_PINNED', 'TASK_ARCHIVED'],
+        },
+    },
+    updated_at: { control: 'date' }
+  }  
 };
 
 export const actionsData = {
@@ -17,35 +29,23 @@ export const taskData = {
   state: 'Task_INBOX',
   updated_at: new Date(2019, 0, 1, 9, 0),
 };
-export const Default = () => ({
-  component: TaskComponent,
-  props: {
-    task: taskData,
-    onPinTask: actionsData.onPinTask,
-    onArchiveTask: actionsData.onArchiveTask,
-  },
-});
-// pinned task state
-export const Pinned = () => ({
-  component: TaskComponent,
-  props: {
-    task: {
-      ...taskData,
-      state: 'TASK_PINNED',
-    },
-    onPinTask: actionsData.onPinTask,
-    onArchiveTask: actionsData.onArchiveTask,
-  },
+
+const Template: Story<Task> = (args: Task) => ({
+    component: TaskComponent,
+    props: {
+        task: args,
+        onPinTask: actionsData.onPinTask,
+        onArchiveTask: actionsData.onArchiveTask,
+    }
 });
-// archived task state
-export const Archived = () => ({
-  component: TaskComponent,
-  props: {
-    task: {
-      ...taskData,
-      state: 'TASK_ARCHIVED',
-    },
-    onPinTask: actionsData.onPinTask,
-    onArchiveTask: actionsData.onArchiveTask,
-  },
-});
+
+export const Default = Template.bind({});
+Default.args = taskData;
+
+// Pinned Task State
+export const Pinned = Template.bind({});
+Pinned.args = Object.assign({}, taskData, {state: "TASK_PINNED"});
+
+// Archived Task State
+export const Archived = Template.bind({});
+Archived.args = Object.assign({}, taskData, {state: "TASK_ARCHIVED"});
