Timeline variant enhancement

src/timeline/timeline.style.tsx

@@ -1,60 +1,99 @@
 import styled, { css } from "styled-components";
+import { TickCircleFillIcon } from "@lifesg/react-icons";
 import { Color } from "../color";
 import { MediaQuery } from "../media";
 import { Text } from "../text";
-import { TimelineStatusProps } from "./types";
+import { TimelineStatusProps, Variant } from "./types";
 
 // =============================================================================
 // STYLE INTERFACES, transient props are denoted with $
 // See more https://styled-components.com/docs/api#transient-props
 // =============================================================================
 
-interface CircleIndicatorStyleProps {
-    $filled?: boolean | undefined;
-}
-
 interface TimelineWrapperStyleProps {
     $startCol?: number | undefined;
     $colSpan?: number | undefined;
 }
 
+interface VariantStyleProps {
+    $variant: Variant;
+}
+
 // =============================================================================
 // STYLE INTERFACES
 // =============================================================================
-
-export const CircleIndicator = styled.div<CircleIndicatorStyleProps>`
-    width: 1rem;
-    height: 1rem;
-    margin-top: 0.5rem;
+export const CircleIndicator = styled.div<VariantStyleProps>`
+    overflow: hidden;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: 4px;
     border-radius: 50%;
+
     ${(props) => {
-        if (props.$filled) {
-            return css`
-                border: none;
-                background-color: ${Color.Accent.Light[1]};
-            `;
+        switch (props.$variant) {
+            case "current":
+                return css`
+                    background-color: ${Color.Accent.Light[1]};
+                `;
+            case "upcoming-active":
+                return css`
+                    border: 4px solid ${Color.Accent.Light[1]};
+                `;
+            case "upcoming-inactive":
+                return css`
+                    border: 4px solid ${Color.Neutral[4]};
+                `;
+            case "completed":
+                return css`
+                    svg {
+                        display: block;
+                    }
+                `;
         }
-
-        return css`
-            border: 3.2px solid ${Color.Accent.Light[1]};
-            background-color: transparent;
-        `;
     }}
 `;
 
-export const LineIndicator = styled.div`
-    width: 0.25rem;
+export const TickCircleIcon = styled(TickCircleFillIcon)`
+    display: none;
+    width: 100%;
+    height: 100%;
+    transform: scale(1.2);
+
+    path {
+        fill: ${Color.Validation.Green.Icon};
+    }
+`;
+
+export const LineIndicator = styled.div<VariantStyleProps>`
+    width: 4px;
     flex-grow: 1;
     margin-top: 0.5rem;
     border-radius: 2px;
-    background-color: ${Color.Accent.Light[1]};
+
+    ${(props) => {
+        switch (props.$variant) {
+            case "current":
+            case "upcoming-active":
+                return css`
+                    background-color: ${Color.Accent.Light[1]};
+                `;
+            case "upcoming-inactive":
+                return css`
+                    background-color: ${Color.Neutral[4]};
+                `;
+            case "completed":
+                return css`
+                    background-color: ${Color.Validation.Green.Icon};
+                `;
+        }
+    }}
 `;
 
 export const TimelineIndicators = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 2rem;
+    margin-right: 1rem;
 `;
 
 export const TimelineWrapper = styled.div<TimelineWrapperStyleProps>`
@@ -81,6 +120,10 @@ export const TimelineTitle = styled(Text.H3)`
 // default is 2-8-2 on desktop
 export const TimelineItem = styled.div`
     display: flex;
+
+    :first-of-type ${CircleIndicator} {
+        margin-top: 0;
+    }
 `;
 
 export const TimelineItemContent = styled.div`

src/timeline/timeline.tsx

@@ -2,6 +2,7 @@ import { Text } from "../text";
 import {
     CircleIndicator,
     LineIndicator,
+    TickCircleIcon,
     TimelineIndicators,
     TimelineItem,
     TimelineItemContent,
@@ -36,6 +37,7 @@ export const Timeline = ({
 
         return <>{content}</>;
     };
+
     const renderTitle = (title: string | JSX.Element): JSX.Element => {
         if (typeof title === "string") {
             return (
@@ -50,6 +52,7 @@ export const Timeline = ({
 
         return <>{title}</>;
     };
+
     const renderStatusPills = (
         statuses: TimelineStatusProps[]
     ): JSX.Element[] => {
@@ -68,21 +71,27 @@ export const Timeline = ({
             );
         });
     };
+
     const renderItems = () =>
         items.map((item: TimelineItemProps, index) => {
-            const { title, content, statuses } = item;
+            const { title, content, statuses, variant: _variant } = item;
             const circleIndicatorTestId = baseIndicatorTestId
                 ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`
                 : "circleindicator";
+            const variant =
+                (!_variant && index === 0 ? "current" : _variant) ||
+                "upcoming-active";
 
             return (
                 <TimelineItem key={`timeline-item-${index}`}>
                     <TimelineIndicators>
                         <CircleIndicator
                             data-testid={circleIndicatorTestId}
-                            $filled={index === 0}
-                        />
-                        <LineIndicator />
+                            $variant={variant}
+                        >
+                            <TickCircleIcon />
+                        </CircleIndicator>
+                        <LineIndicator $variant={variant} />
                     </TimelineIndicators>
                     <TimelineItemContent className="timeline-item-content">
                         {renderTitle(title)}

src/timeline/types.ts

@@ -1,3 +1,9 @@
+export type Variant =
+    | "completed"
+    | "current"
+    | "upcoming-active"
+    | "upcoming-inactive";
+
 export interface TimelineStatusProps {
     type: "dark" | "light";
     label: string;
@@ -7,6 +13,7 @@ export interface TimelineItemProps {
     title: string | JSX.Element;
     content: string | JSX.Element;
     statuses?: TimelineStatusProps[] | undefined;
+    variant?: Variant | undefined;
 }
 
 export interface TimelineProps {

stories/timeline/props-table.tsx

@@ -79,6 +79,21 @@ const DATA: ApiTableSectionProps[] = [
                 ),
                 propTypes: ["TimelineStatusProps[]"],
             },
+            {
+                name: "variant",
+                description: (
+                    <>
+                        The variant includes 4 different types, each
+                        representing a unique styling
+                    </>
+                ),
+                propTypes: [
+                    `"completed"`,
+                    `"current"`,
+                    `"upcoming-active`,
+                    `"upcoming-inactive"`,
+                ],
+            },
         ],
     },
     {

stories/timeline/timeline.stories.mdx

@@ -108,6 +108,70 @@ There are a variety of contents available to be specified for each `Timeline` it
     </Story>
 </Canvas>
 
+<Heading3>Variations</Heading3>
+
+The `Timeline` component comes in 4 variants, a completed, current, upcoming-active and upcoming-inactive.
+
+<Canvas>
+    <Story name="Variants">
+        <StoryContainer>
+            <Timeline
+                title="What's next"
+                items={[
+                    {
+                        title: "Item 1",
+                        variant: "completed",
+                        content: (
+                            <Text.Body>
+                                An example with <code>completed</code> variant
+                            </Text.Body>
+                        ),
+                    },
+                    {
+                        title: "Item 2",
+                        variant: "current",
+                        content: (
+                            <Text.Body>
+                                An example with <code>current</code> variant
+                            </Text.Body>
+                        ),
+                    },
+                    {
+                        title: "Item 3",
+                        variant: "upcoming-active",
+                        content: (
+                            <Text.Body>
+                                An example with <code>upcoming-active</code>{" "}
+                                variant
+                            </Text.Body>
+                        ),
+                    },
+                    {
+                        title: "Item 4",
+                        variant: "upcoming-inactive",
+                        content: (
+                            <Text.Body>
+                                An example with <code>upcoming-inactive</code>{" "}
+                                variant
+                            </Text.Body>
+                        ),
+                    },
+                    {
+                        title: "Item 5",
+                        variant: "upcoming-inactive",
+                        content: (
+                            <Text.Body>
+                                An example with <code>upcoming-inactive</code>{" "}
+                                variant
+                            </Text.Body>
+                        ),
+                    },
+                ]}
+            />
+        </StoryContainer>
+    </Story>
+</Canvas>
+
 <Secondary>Component API</Secondary>
 
 <PropsTable />