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