feat(timeline): add interactive title

Author: PixeledCode

packages/paste-core/components/timeline/src/TimelineItem.tsx

@@ -1,5 +1,8 @@
 import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
 import { css, styled } from "@twilio-paste/styling-library";
+import { Text } from "@twilio-paste/text";
+import { Truncate } from "@twilio-paste/truncate";
 import React from "react";
 
 import { TimelineGroupContext } from "./TimelineContext";
@@ -9,7 +12,18 @@ import type { TimelineItemProps } from "./types";
 
 const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
   (
-    { children, icon, timestamp, title, collapsible = false, collapsibleHeading, element = "TIMELINE_ITEM", ...props },
+    {
+      children,
+      icon,
+      timestamp,
+      title,
+      collapsible = false,
+      collapsibleHeading,
+      element = "TIMELINE_ITEM",
+      onClick,
+      disabled,
+      ...props
+    },
     ref,
   ) => {
     const isGrouped = React.useContext(TimelineGroupContext);
@@ -63,18 +77,39 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
           columnGap="space10"
           paddingBottom="space60"
         >
-          <Box
-            element={`${element}_TITLE`}
-            as="span"
-            color="colorText"
-            paddingY="space10"
-            fontWeight="fontWeightSemibold"
-            lineHeight="lineHeight20"
-            fontSize="fontSize30"
-            letterSpacing="-0.28px"
-          >
-            {title}
-          </Box>
+          {onClick ? (
+            <Button
+              element={`${element}_TITLE_INTERACTIVE`}
+              variant="reset"
+              size="reset"
+              onClick={onClick}
+              textDecoration="underline"
+              paddingY="space10"
+              fontWeight="fontWeightSemibold"
+              lineHeight="lineHeight20"
+              fontSize="fontSize30"
+              letterSpacing="-0.28px"
+              _hover={{ color: "colorTextLink" }}
+              _focus={{ color: "colorTextLink", boxShadow: "shadowFocus" }}
+              _disabled={{ color: "colorTextWeaker" }}
+              disabled={disabled}
+            >
+              <Truncate title={title}>{title}</Truncate>
+            </Button>
+          ) : (
+            <Box
+              element={`${element}_TITLE`}
+              as="span"
+              color="colorText"
+              paddingY="space10"
+              fontWeight="fontWeightSemibold"
+              lineHeight="lineHeight20"
+              fontSize="fontSize30"
+              letterSpacing="-0.28px"
+            >
+              {title}
+            </Box>
+          )}
 
           {collapsible ? (
             <TimelineItemCollapsible element={element} timestamp={timestamp ? timestamp : collapsibleHeading}>
@@ -94,7 +129,7 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
                   {timestamp}
                 </Box>
               ) : null}
-              <Box element={`${element}_CONTENT`}>{children}</Box>
+              {children ? <Box element={`${element}_CONTENT`}>{children}</Box> : null}
             </>
           )}
         </Box>

packages/paste-core/components/timeline/src/types.ts

@@ -66,6 +66,24 @@ export type TimelineItemProps = {
    * @memberof TimelineItemProps
    */
   element?: BoxProps["element"];
+
+  /**
+   * Add an action to the timeline item.
+   *
+   * @default undefined
+   * @type {React.MouseEventHandler<HTMLButtonElement>}
+   * @memberof TimelineItemProps
+   */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * If true, the timeline item will be disabled
+   *
+   * @type {boolean}
+   * @memberof TimelineItemProps
+   * @default false
+   */
+  disabled?: boolean;
 } & HTMLPasteProps<"li">;
 
 export type TimelineItemIconProps = {

packages/paste-core/components/timeline/stories/index.stories.tsx

@@ -103,6 +103,38 @@ export const TimelineGrouped = (): React.ReactNode => {
   );
 };
 
+export const TimelineInteractive = (): React.ReactNode => {
+  return (
+    <Box maxWidth="200px">
+      <Timeline>
+        <TimelineItemGroup timestamp="Today – Wednesday, April 9, 2025">
+          <TimelineItem title="Invoice billing issue for March cycle resolved" timestamp="9:12 AM" onClick={() => {}} />
+          <TimelineItem
+            title="Clarification on service tier limits for standard accounts"
+            timestamp="11:26 AM"
+            onClick={() => {}}
+          />
+          <TimelineItem title="New user onboarding questions and setup steps" timestamp="1:45 PM" onClick={() => {}} />
+        </TimelineItemGroup>
+        <TimelineItemGroup timestamp="Yesterday – Tuesday, April 8, 2025">
+          <TimelineItem
+            title="Account verification delay and next steps discussed"
+            timestamp="10:15 AM"
+            onClick={() => {}}
+          />
+          <TimelineItem title="Custom domain setup assistance provided" timestamp="4:38 PM" onClick={() => {}} />
+          <TimelineItem
+            title="Request to add additional admins to workspace"
+            timestamp="6:09 PM"
+            onClick={() => {}}
+            disabled
+          />
+        </TimelineItemGroup>
+      </Timeline>
+    </Box>
+  );
+};
+
 const allItems = [
   { date: "August 10, 2024", text: "Event title" },
   { date: "August 11, 2024", text: "Event title" },