timeline comp storybook changes

eea · Jan 21, 2022 · 1f42686 · 1f42686
1 parent c86b405
commit 1f42686
Showing 1 changed file with 76 additions and 54 deletions.
diff --git a/src/customizations/components/theme/Timeline/Timeline.stories.js b/src/customizations/components/theme/Timeline/Timeline.stories.js
@@ -9,16 +9,16 @@ export default {
 
 function TimelineEEA({ items }) {
   return (
-    <div className="eeaTimeline">
+    <>
       {items.map((item, index) => (
         <Timeline {...item} key={index}></Timeline>
       ))}
-    </div>
+    </>
   );
 }
 
 const Template = (args) => (
-  <div className="eeaTimeline">
+  <div className="eea-timeline">
     <Timeline {...args}></Timeline>
   </div>
 );
@@ -27,124 +27,146 @@ export const Default = Template.bind({});
 Default.args = {
   direction: 'right',
   icon: 'user',
+  time: 'Date and time',
   title: 'Title',
   description: 'description',
-  color: 'red',
+  color: 'blue',
   tags: [],
   lineHeight: 1,
 };
 
 Default.argTypes = {
   direction: {
     description: 'side of the timeline in whick item appears',
-    type: {
-      summary: 'string',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   icon: {
     description: 'timeline item icon',
-    type: {
-      summary: 'string',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   title: {
     description: 'timeline item heading',
-    type: {
-      summary: 'string',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   description: {
     description: 'timeline item main content',
-    type: {
-      summary: 'string',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   color: {
     description: 'timeline item color',
-    type: {
-      summary: 'string',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   tags: {
     description: 'timeline item content tags',
-    type: {
-      summary: 'array',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
   lineHeight: {
     description:
       'The height of middle line going through icons. The number refers to the number of timeline cards',
-    type: {
-      summary: 'number',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'number',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
 };
 
-export const Multiple = (args) => <TimelineEEA {...args}></TimelineEEA>;
+export const Multiple = (args) => (
+  <div className="eea-timeline">
+    <TimelineEEA {...args}></TimelineEEA>;
+  </div>
+);
+
 Multiple.args = {
   items: [
     {
       direction: 'left',
-      icon: 'user',
+      icon: 'time',
       time: 'Date and time',
       title: 'Title 1',
       description: 'description 1',
-      color: 'red',
+      color: 'blue',
       tags: [],
-      lineHeight: 3,
+      lineHeight: 2,
     },
     {
       direction: 'right',
-      icon: 'user',
+      icon: 'check circle',
       time: 'Date and time',
       title: 'Title 2',
       description: 'description 2',
-      color: 'yellow',
+      color: 'green',
       tags: [],
-      lineHeight: 3,
+      lineHeight: 2,
     },
     {
       direction: 'left',
-      icon: 'user',
+      icon: 'minus circle',
       time: 'Date and time',
       title: 'Title 3',
       description: 'description 3',
-      color: 'violet',
+      color: 'red',
       tags: [],
-      lineHeight: 3,
+      lineHeight: 2,
     },
   ],
 };
 
 Multiple.argTypes = {
   items: {
     description: 'array of different timeline item objects',
-    type: {
-      summary: 'array',
-    },
-    defaultValue: {
-      summary: ' "" ',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
     },
   },
 };