refactor(Timeline):change timeline icons

eea · Mar 17, 2022 · b2fe0bf · b2fe0bf
1 parent bb09d71
commit b2fe0bf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/ui/Timeline/Timeline.jsx b/src/ui/Timeline/Timeline.jsx
@@ -36,7 +36,7 @@ Timeline.Content = (args) => (
 
 Timeline.Icon = (args) => (
   <Grid.Column width={2} className="line">
-    <Icon name={args.icon} color={args.color} inverted circular />
+    <Icon className={args.icon} color={args.color} inverted circular />
   </Grid.Column>
 );
 

diff --git a/src/ui/Timeline/Timeline.stories.jsx b/src/ui/Timeline/Timeline.stories.jsx
@@ -73,7 +73,7 @@ const TemplateReversed = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  icon: 'user',
+  icon: 'ri-user-3-fill',
   time: 'Date and time',
   title: 'Title',
   description: 'description',
@@ -83,7 +83,7 @@ Default.args = {
 
 Default.argTypes = {
   icon: {
-    description: 'timeline item icon',
+    description: 'timeline item icon class',
     table: {
       type: {
         summary: 'string',
@@ -152,7 +152,7 @@ Default.argTypes = {
 
 export const DefaultReversed = TemplateReversed.bind({});
 DefaultReversed.args = {
-  icon: 'user',
+  icon: 'ri-user-3-fill',
   time: 'Date and time',
   title: 'Title',
   description: 'description',
@@ -162,7 +162,7 @@ DefaultReversed.args = {
 
 DefaultReversed.argTypes = {
   icon: {
-    description: 'timeline item icon',
+    description: 'timeline item icon class',
     table: {
       type: {
         summary: 'string',
@@ -234,23 +234,23 @@ export const Multiple = (args) => <TimelineEEA {...args}></TimelineEEA>;
 Multiple.args = {
   items: [
     {
-      icon: 'time',
+      icon: 'ri-time-line',
       time: 'Date and time',
       title: 'Title 1',
       description: 'description 1',
       color: 'blue',
       tags: [],
     },
     {
-      icon: 'check circle',
+      icon: 'ri-checkbox-circle-line',
       time: 'Date and time',
       title: 'Title 2',
       description: 'description 2',
       color: 'green',
       tags: [],
     },
     {
-      icon: 'minus circle',
+      icon: 'ri-indeterminate-circle-line',
       time: 'Date and time',
       title: 'Title 3',
       description: 'description 3',
@@ -281,23 +281,23 @@ export const MultipleReversed = (args) => (
 MultipleReversed.args = {
   items: [
     {
-      icon: 'time',
+      icon: 'ri-time-line',
       time: 'Date and time',
       title: 'Title 1',
       description: 'description 1',
       color: 'blue',
       tags: [],
     },
     {
-      icon: 'check circle',
+      icon: 'ri-checkbox-circle-line',
       time: 'Date and time',
       title: 'Title 2',
       description: 'description 2',
       color: 'green',
       tags: [],
     },
     {
-      icon: 'minus circle',
+      icon: 'ri-indeterminate-circle-line',
       time: 'Date and time',
       title: 'Title 3',
       description: 'description 3',