Fix/timeline vertical

src/components/Timeline/Timeline.spec.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { describe, expect, it } from 'vitest';
 import type { TimelineProps } from './Timeline';
 import { Timeline } from './Timeline';
+import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite';
 
 describe.concurrent('Components / Timeline', () => {
   describe('Rendering horizontal mode', () => {
@@ -26,7 +27,28 @@ describe.concurrent('Components / Timeline', () => {
       expect(timelinePoint()).toBeInTheDocument();
       expect(timelinePoint().childNodes[0]).toContainHTML('svg');
     });
+
+    it('should use `horizontal` classes of content if provided', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(horizontalContentClass);
+    });
+
+    it('should not use `vertical` classes of content if provided', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).not.toHaveClass(verticalContentClass);
+    });
   });
+
   describe('Rendering vertical mode', () => {
     it('should have margin-top when do not icon', () => {
       render(<TestTimelineNoIcon horizontal={false} />);
@@ -41,6 +63,48 @@ describe.concurrent('Components / Timeline', () => {
       expect(timelinePoint()).toBeInTheDocument();
       expect(timelinePoint().childNodes[0]).toContainHTML('svg');
     });
+
+    it('should use `vertical` classes of content if provided', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(verticalContentClass);
+    });
+
+    it('should not use `horizontal` classes of content if provided', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).not.toHaveClass(horizontalContentClass);
+    });
+  });
+
+  describe('Theme', () => {
+    it('should use `base` classes of content in horizontal mode', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(baseContentClass);
+    });
+
+    it('should use `base` classes of content in vertical mode', () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(baseContentClass);
+    });
   });
 });
 
@@ -100,3 +164,22 @@ const IconSVG = () => (
 
 const timeline = () => screen.getByTestId('timeline-component');
 const timelinePoint = () => screen.getByTestId('timeline-point');
+const timelineContent = () => screen.getByTestId('timeline-content');
+
+const baseContentClass = 'dummy-base-content';
+const verticalContentClass = 'dummy-vertical-content';
+const horizontalContentClass = 'dummy-horizontal-content';
+
+const theme: CustomFlowbiteTheme = {
+  timeline: {
+    item: {
+      content: {
+        root: {
+          base: baseContentClass,
+          vertical: verticalContentClass,
+          horizontal: horizontalContentClass,
+        },
+      },
+    },
+  },
+};

src/components/Timeline/TimelineContent.tsx

@@ -14,6 +14,8 @@ import type { FlowbiteTimelineTitleTheme } from './TimelineTitle';
 export interface FlowbiteTimelineContentTheme {
   root: {
     base: string;
+    vertical?: string;
+    horizontal?: string;
   };
   time: FlowbiteTimelineTitleTheme;
   title: FlowbiteTimelineTimeTheme;
@@ -37,7 +39,16 @@ export const TimelineContent: FC<TimelineContentProps> = ({
 
   return (
     <TimelineContentContext.Provider value={{ theme }}>
-      <div data-testid="timeline-content" className={twMerge(horizontal && theme.root.base, className)} {...props}>
+      <div
+        data-testid="timeline-content"
+        className={twMerge(
+          theme.root.base,
+          horizontal && theme.root.horizontal,
+          !horizontal && theme.root.vertical,
+          className,
+        )}
+        {...props}
+      >
         {children}
       </div>
     </TimelineContentContext.Provider>