fix: timeline-horizontal

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(<TestTimelineNoIcon horizontal={true} />);
+
+      expect(timeline()).toBeInTheDocument();
+      expect(timeline()).toHaveClass('items-base');
+    });
+
+    it('should remove margin-top when do not icon', () => {
+      render(<TestTimelineNoIcon horizontal={true} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).not.toHaveClass('mt-1.5');
+    });
+
+    it('should show icon when render', () => {
+      render(<TestTimelineWithIcon horizontal={true} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).toContainHTML('svg');
+    });
+  });
+  describe('Rendering vertical mode', () => {
+    it('should have margin-top when do not icon', () => {
+      render(<TestTimelineNoIcon horizontal={false} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).toHaveClass('mt-1.5');
+    });
+
+    it('should show icon when render', () => {
+      render(<TestTimelineWithIcon horizontal={false} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).toContainHTML('svg');
+    });
+  });
+});
+
+const TestTimelineNoIcon: FC<TimelineProps> = ({ horizontal, className }): JSX.Element => {
+  return (
+    <Timeline horizontal={horizontal} className={className}>
+      <Timeline.Item>
+        <Timeline.Point />
+        <Timeline.Content>
+          <Timeline.Time>February 2022</Timeline.Time>
+          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
+          <Timeline.Body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+            E-commerce & Marketing pages.
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+    </Timeline>
+  );
+};
+
+const TestTimelineWithIcon: FC<TimelineProps> = ({ horizontal, className }): JSX.Element => {
+  return (
+    <Timeline horizontal={horizontal} className={className}>
+      <Timeline.Item>
+        <Timeline.Point icon={IconSVG} />
+        <Timeline.Content>
+          <Timeline.Time>February 2022</Timeline.Time>
+          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
+          <Timeline.Body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+            E-commerce & Marketing pages.
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+    </Timeline>
+  );
+};
+
+const IconSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-4 w-4 text-gray-500"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M
+      5 13l4 4L19 7"
+    />
+  </svg>
+);
+
+const timeline = () => screen.getByTestId('timeline-component');
+const timelinePoint = () => screen.getByTestId('timeline-point');

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;

src/lib/components/Timeline/TimelinePoint.tsx

@@ -26,7 +26,9 @@ export const TimelinePoint: FC<TimelnePointProps> = ({ children, className, icon
           <Icon aria-hidden className={classNames(theme.marker.icon.base)} />
         </span>
       ) : (
-        <div className={classNames(theme.marker.base)}></div>
+        <div
+          className={classNames(horizontal && theme.marker.base.horizontal, !horizontal && theme.marker.base.vertical)}
+        ></div>
       )}
       {horizontal && <div className={classNames(theme.line)} />}
     </div>

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',