Updated: Update a new varient in the timeline and fixed animation in …

…the stepline component
StaticMania · Aug 11, 2024 · f411ab9 · f411ab9
1 parent 3acfb62
commit f411ab9
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 1 deletion.
diff --git a/app/docs/components/timeline/Timeline.mdx b/app/docs/components/timeline/Timeline.mdx
@@ -1,5 +1,6 @@
 import { DefaultTimeline, DefaultTimelineCode } from './variant/DefaultTimeline'
 import { DashedBorderTimeline, DashedBorderTimelineCode } from './variant/DashedBorderTimeline'
+import { DottedBorderTimeline, DottedBorderTimelineCode } from './variant/DottedBorderTimeline'
 import { TimelineWithImage, TimelineWithImageCode } from './variant/TimelineWithImage'
 
 import CodeHighlightPreview from '../../../components/CodeHighlightPreview'
@@ -24,6 +25,14 @@ The Dashed Border Timeline component represents a timeline with dashed borders.
   <DashedBorderTimeline />
 </CodeHighlightPreview>
 
+## Dotted Border Timeline
+
+The Dotted Border Timeline component represents a timeline with dotted borders.
+
+<CodeHighlightPreview code={DottedBorderTimelineCode}>
+  <DottedBorderTimeline />
+</CodeHighlightPreview>
+
 ## Timeline With Image
 
 The Image Timeline is a dynamic component that showcases a sequence of events along with corresponding images.

diff --git a/app/docs/components/timeline/variant/DottedBorderTimeline.tsx b/app/docs/components/timeline/variant/DottedBorderTimeline.tsx
@@ -0,0 +1,93 @@
+import { Timeline, TimelineContent, TimelineItem, TimelinePoint } from '../../../../src'
+
+const DottedBorderTimeline = () => {
+  return (
+    <div className="px-5 py-6">
+      <Timeline className="border-dotted">
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">
+              September 23,2022
+            </p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 1 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">
+              September 23,2022
+            </p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 2 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">
+              September 23,2022
+            </p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 3 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+      </Timeline>
+    </div>
+  )
+}
+
+export default DottedBorderTimeline
+
+const DottedBorderTimelineCode = {
+  'TimelineComponent.tsx': `
+  import { Timeline, TimelineContent, TimelineItem, TimelinePoint } from 'keep-react'
+  
+  export const TimelineComponent = () => {
+    return (
+      <Timeline className="border-dotted">
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">September 23,2022</p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 1 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">September 23,2022</p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 2 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+        <TimelineItem>
+          <TimelinePoint />
+          <TimelineContent>
+            <p className="text-body-5 font-normal leading-[1.4] text-metal-400 dark:text-metal-300">September 23,2022</p>
+            <h1 className="text-body-3 font-medium text-metal-900 dark:text-white">Step 3 Completed</h1>
+            <p className="text-body-4 font-normal text-metal-600 dark:text-metal-300">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, incidunt.
+            </p>
+          </TimelineContent>
+        </TimelineItem>
+      </Timeline>
+    )
+  }
+  `,
+}
+
+export { DottedBorderTimeline, DottedBorderTimelineCode }
diff --git a/app/src/components/Steps/StepLine.tsx b/app/src/components/Steps/StepLine.tsx
@@ -18,7 +18,7 @@ const StepLine = forwardRef<HTMLDivElement, StepLineProps>(({ className, complet
       <motion.div
         initial={{ width: '0%' }}
         animate={{ width: completed ? '100%' : '0%' }}
-        transition={{ duration: 0.4, ease: 'anticipate' }}
+        transition={{ duration: 0.3, type: 'tween' }}
         className={cn('absolute bottom-0 left-0 top-0 rounded-full bg-metal-900 dark:bg-white', className)}
       />
     </motion.div>