From f411ab9d7e62931e9a37346db3b35ad8b5c54dd2 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Sun, 11 Aug 2024 12:40:44 +0600
Subject: [PATCH] Updated: Update a new varient in the timeline and fixed
 animation in the stepline component

---
 app/docs/components/timeline/Timeline.mdx     |  9 ++
 .../timeline/variant/DottedBorderTimeline.tsx | 93 +++++++++++++++++++
 app/src/components/Steps/StepLine.tsx         |  2 +-
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 app/docs/components/timeline/variant/DottedBorderTimeline.tsx

diff --git a/app/docs/components/timeline/Timeline.mdx b/app/docs/components/timeline/Timeline.mdx
index 35d50be8..be012f67 100644
--- 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
new file mode 100644
index 00000000..c46c1cf5
--- /dev/null
+++ 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
index f123014f..ac48f94b 100644
--- 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>