Timeline

A customizable timeline that allows users to view events in a visually pleasing manner chronologically.

() => {
  return <Timeline events={data.simpleEvents} variant="simple" />;
};

Prop	Type	Default	Description
variant	"simple" \| "complex"	"simple"	The variant prop determines the complexity of the timeline. If the variant is set to "simple", the timeline will only display the title of the event. If the variant is set to "complex", the timeline will display the title, description, time frame, and button of the event.
position	"left" \| "right"	"right"	An extension of the position prop from MUI. In MUI, the position prop determines the position of the timeline content relative to the center line. In prism, it also determines whether the entire timeline is left aligned or right aligned. The timeline will be aligned opposite of where the content is positioned. If position is right, the content will appear on the right side of the center line, but the timeline itself will hug the left side of the div.
events	{ title: string, description?: string, timeFrame?: number, timeFrameUnit?: string, button?: () => JSX.Element, timelineItemFooter?: () => JSX.Element, position?: Position, dotVariant?: "filled" \| "outlined", tags?: { title: string, infoText?:string }[]}[]		An array of events to be displayed on the timeline. An events array is required.

() => {
  return <Timeline events={data.events} position="right" variant="complex" />;
};

() => {
  return <Timeline events={data.events} position="left" variant="complex" />;
};

() => {
  return <Timeline events={data.simpleOutlinedEvents} position="right" variant="simple" />;
};