diff --git a/src/lib/components/Timeline/Timeline.spec.tsx b/src/lib/components/Timeline/Timeline.spec.tsx
new file mode 100644
index 000000000..b637a2293
--- /dev/null
+++ b/src/lib/components/Timeline/Timeline.spec.tsx
@@ -0,0 +1,101 @@
+import { render, screen } from '@testing-library/react';
+import type { FC } from 'react';
+import { describe, expect, it } from 'vitest';
+import { Timeline, TimelineProps } from './Timeline';
+
+describe.concurrent('Components / Timeline', () => {
+ describe('Rendering horizontal mode', () => {
+ it('should have className items-base', () => {
+ render();
+
+ expect(timeline()).toBeInTheDocument();
+ expect(timeline()).toHaveClass('items-base');
+ });
+
+ it('should remove margin-top when do not icon', () => {
+ render();
+
+ expect(timelinePoint()).toBeInTheDocument();
+ expect(timelinePoint().childNodes[0]).not.toHaveClass('mt-1.5');
+ });
+
+ it('should show icon when render', () => {
+ render();
+
+ expect(timelinePoint()).toBeInTheDocument();
+ expect(timelinePoint().childNodes[0]).toContainHTML('svg');
+ });
+ });
+ describe('Rendering vertical mode', () => {
+ it('should have margin-top when do not icon', () => {
+ render();
+
+ expect(timelinePoint()).toBeInTheDocument();
+ expect(timelinePoint().childNodes[0]).toHaveClass('mt-1.5');
+ });
+
+ it('should show icon when render', () => {
+ render();
+
+ expect(timelinePoint()).toBeInTheDocument();
+ expect(timelinePoint().childNodes[0]).toContainHTML('svg');
+ });
+ });
+});
+
+const TestTimelineNoIcon: FC = ({ horizontal, className }): JSX.Element => {
+ return (
+
+
+
+
+ February 2022
+ Application UI code in Tailwind CSS
+
+ Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+ E-commerce & Marketing pages.
+
+
+
+
+ );
+};
+
+const TestTimelineWithIcon: FC = ({ horizontal, className }): JSX.Element => {
+ return (
+
+
+
+
+ February 2022
+ Application UI code in Tailwind CSS
+
+ Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+ E-commerce & Marketing pages.
+
+
+
+
+ );
+};
+
+const IconSVG = () => (
+
+);
+
+const timeline = () => screen.getByTestId('timeline-component');
+const timelinePoint = () => screen.getByTestId('timeline-point');
diff --git a/src/lib/components/Timeline/Timeline.tsx b/src/lib/components/Timeline/Timeline.tsx
index 33b18875f..920826f8f 100644
--- a/src/lib/components/Timeline/Timeline.tsx
+++ b/src/lib/components/Timeline/Timeline.tsx
@@ -25,7 +25,10 @@ export interface FlowbiteTimelineTheme {
vertical: string;
};
marker: {
- base: string;
+ base: {
+ horizontal: string;
+ vertical: string;
+ };
icon: {
wrapper: string;
base: string;
diff --git a/src/lib/components/Timeline/TimelinePoint.tsx b/src/lib/components/Timeline/TimelinePoint.tsx
index dd63353a4..0e42fbf11 100644
--- a/src/lib/components/Timeline/TimelinePoint.tsx
+++ b/src/lib/components/Timeline/TimelinePoint.tsx
@@ -26,7 +26,9 @@ export const TimelinePoint: FC = ({ children, className, icon
) : (
-
+
)}
{horizontal && }
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index f4bc833e9..bce64a3b2 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -945,7 +945,7 @@ const theme: FlowbiteTheme = {
},
timeline: {
direction: {
- horizontal: 'items-center sm:flex',
+ horizontal: 'items-base sm:flex',
vertical: 'relative border-l border-gray-200 dark:border-gray-700',
},
item: {
@@ -959,7 +959,12 @@ const theme: FlowbiteTheme = {
vertical: '',
},
marker: {
- base: 'absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700',
+ base: {
+ horizontal:
+ 'absolute -left-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700',
+ vertical:
+ 'absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700',
+ },
icon: {
wrapper:
'absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-200 ring-8 ring-white dark:bg-blue-900 dark:ring-gray-900',