SOEOPSFY24-350 | add isExpended props and update timeline details

components/Timeline/TimelineDetails.tsx

@@ -2,7 +2,6 @@ import { HTMLAttributes } from "react";
 import { Container } from "../Container";
 import { Heading, Text } from "../Typography";
 import { FlexBox } from "../FlexBox";
-import * as styles from "./TimelineDetails.styles";
 import { cnb } from "cnbuilder";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 import { TimelineImage } from "./TimelineImage";
@@ -40,56 +39,64 @@ export const TimelineDetails = ({
     bgColor={bgColor}
     width="site"
     py={5}
-    className={styles.root}
+    className="overflow-hidden"
   >
     <FlexBox
       alignItems="start"
       justifyContent="between"
       gap
-      className={styles.wrapper}
+      className="relative mr-0 au-ml-auto flex-col lg:flex-row"
     >
-      <Container className={cnb(styles.contentWrapper)}>
+      <Container className="w-1/2 lg:rs-pr-9 ml-0 flex flex-col">
         {heading && (
-          <Heading leading="none" className={styles.heading}>
+          <Heading
+            align="left"
+            font="dm-sans"
+            size={3}
+            weight="normal"
+            className="2xl:whitespace-pre-line -mt-01em xl:max-w-1200"
+          >
             {heading}
           </Heading>
         )}
         {year && (
           <Text
-            font="serif"
-            variant="overview"
+            font="dm-mono"
             weight="normal"
-            className={styles.superhead}
+            mb="none"
+            size={2}
+            className="order-first mt-28 mb-38"
           >
             {year}
           </Text>
         )}
         {body && (
           <Text
-            font="serif"
-            variant="overview"
+            font="dm-sans"
+            variant="big"
             weight="normal"
-            className={styles.body}
+            className="max-w-[50ch] rs-mb-3 *:*:leading-snug"
           >
             {body}
           </Text>
         )}
         {cta}
       </Container>
-      {image && (
-        <div
-          className={cnb(styles.imageWrapper, {
+      <div
+        className={cnb(
+          "aspect-[1/1] group relative w-1/2 h-full perspective-600",
+          {
             "order-first": align === "left",
-          })}
-        >
-          <TimelineImage src={image} />
-        </div>
-      )}
-      <button className="group" onClick={onClose}>
+          },
+        )}
+      >
+        <TimelineImage size="full" src={image} />
+      </div>
+      <button className="absolute top-0 right-0 group" onClick={onClose}>
         <span className="sr-only">Close {heading} details</span>
         <XCircleIcon
           width={50}
-          className="text-black group-hocus:text-digital-red"
+          className="text-fog-dark group-hocus:text-digital-red"
         />
       </button>
     </FlexBox>

components/Timeline/TimelineImage.tsx

@@ -2,13 +2,15 @@ import Image from "next/image";
 import { cnb } from "cnbuilder";
 import * as styles from "./TimelineItem.styles";
 import * as types from "./TimelineItem.types";
+import { XMarkIcon } from "@heroicons/react/16/solid";
 
 interface TimelineImageProps {
   src: string;
   alt?: string;
   size?: types.SizeType;
-  trapezoidAngle?: types.TrapezoidType;
+  trapezoidAngle?: "left" | "right";
   className?: string;
+  isExpanded?: boolean;
 }
 
 export const TimelineImage = ({
@@ -17,30 +19,47 @@ export const TimelineImage = ({
   size = "medium",
   trapezoidAngle = "left",
   className,
+  isExpanded = false,
 }: TimelineImageProps) => {
   const imageSize = styles.size[size];
-  const trapezoidType = styles.trapezoid[trapezoidAngle];
+  const trapezoidType = styles.trapezoid(trapezoidAngle, isExpanded);
 
   return (
     <div
       className={cnb(
-        "group relative flex justify-center stretch-link",
+        "group relative flex justify-center stretch-link z-50",
         className,
       )}
     >
       <div
         className={cnb(
-          "aspect-[1/1] relative w-full perspective-1000 transform ease-in-out duration-1000",
+          "aspect-[1/1] relative h-full perspective-1000 transform ease-in-out duration-1000 flex items-center justify-center",
           trapezoidType,
           imageSize,
         )}
       >
+        {isExpanded && (
+          <>
+            <XMarkIcon
+              width={34}
+              className="absolute bg-stone-dark text-white rounded-full w-34 h-34 z-50"
+            />
+            <div
+              className={cnb(
+                "absolute top-0 left-0 bg-[#c4c4c4] opacity-80 w-full h-full z-10 overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000",
+                trapezoidType,
+                imageSize,
+              )}
+            />
+          </>
+        )}
         <Image
           alt={alt}
           src={src}
-          sizes="100vw"
           fill
-          className="object-cover overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000"
+          className={cnb(
+            "z-0 object-cover overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000",
+          )}
         />
       </div>
     </div>

components/Timeline/TimelineItem.styles.ts

@@ -1,12 +1,19 @@
+import { cnb } from "cnbuilder";
+
 export const size = {
   small: "w-200 md:w-250",
-  medium: "w-250 md:w-[340px]",
-  large: "w-250 md:w-[340px] lg:w-[420px]",
-  xlarge: "w-250 md:w-[420px] lg:w-600",
+  medium: "w-250 md:w-[300px] xl:w-[340px]",
+  large: "w-250 md:w-[300px] xl:w-[420px]",
+  xlarge: "w-250 md:w-[300px] lg:w-[420px] xl:w-600",
   full: "w-full",
 };
 
-export const trapezoid = {
-  left: "rotate-y-[15deg] hocus:rotate-y-[-15deg]",
-  right: "rotate-y-[-15deg] hocus:rotate-y-[15deg]",
-};
+export const trapezoid = (trapezoidAngle: string, isExpanded: boolean) =>
+  cnb({
+    "rotate-y-[15deg] hocus:rotate-y-[-15deg]":
+      trapezoidAngle === "left" && !isExpanded,
+    "rotate-y-[-15deg] hocus:rotate-y-[15deg]":
+      trapezoidAngle === "right" && !isExpanded,
+    "rotate-y-[-15deg]": trapezoidAngle === "left" && isExpanded,
+    "rotate-y-[15deg]": trapezoidAngle === "right" && isExpanded,
+  });

components/Timeline/TimelineItem.tsx

@@ -4,13 +4,15 @@ import * as types from "./TimelineItem.types";
 import { Heading, Text } from "../Typography";
 import { TimelineImage } from "./TimelineImage";
 import { HTMLAttributes, forwardRef } from "react";
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
 
 type TimelineItemProps = HTMLAttributes<HTMLButtonElement> & {
   heading: string;
   year: string;
   image: string;
   size?: types.SizeType;
-  trapezoid?: types.TrapezoidType;
+  trapezoid?: "left" | "right";
+  isExpanded?: boolean;
   className?: string;
   onClick?: () => void;
 };
@@ -25,17 +27,19 @@ export const TimelineItem = forwardRef<HTMLButtonElement, TimelineItemProps>(
       trapezoid = "left",
       className,
       onClick,
+      isExpanded,
       ...props
     },
     ref,
   ) => {
     const imageSize = styles.size[size];
+
     return (
       <button
         {...props}
         ref={ref}
         type="button"
-        className={cnb("flex flex-col", className, imageSize)}
+        className={cnb("group flex flex-col", className, imageSize)}
         onClick={onClick}
         role="button"
         tabIndex={0}
@@ -45,16 +49,21 @@ export const TimelineItem = forwardRef<HTMLButtonElement, TimelineItemProps>(
           alt={heading}
           size={size}
           trapezoidAngle={trapezoid}
+          isExpanded={isExpanded}
         />
-        <div className="flex flex-col items-start">
+        <div className="flex flex-col items-start md:px-28">
           <Heading
             align="left"
             font="dm-sans"
             size="base"
             weight="normal"
-            className="mt-18"
+            className="mt-18 leading-[2] transition duration-1000 text-stone-dark underline underline-offset-[5px] decoration-digital-red-light cursor-pointer decoration-4 group-hover:no-underline"
           >
             {heading}
+            <ArrowRightIcon
+              width={21}
+              className="ml-03em text-digital-red-light inline-block"
+            />
           </Heading>
           <Text
             font="dm-mono"

components/Timeline/TimelineItem.types.ts

@@ -1,4 +1,3 @@
 import * as styles from "./TimelineItem.styles";
 
 export type SizeType = keyof typeof styles.size;
-export type TrapezoidType = keyof typeof styles.trapezoid;

components/Timeline/TimelineOverview.tsx

@@ -8,7 +8,6 @@ import { SizeType } from "./TimelineItem.types";
 import { motion, AnimatePresence } from "framer-motion";
 import { useMediaQuery } from "usehooks-ts";
 import { TimelineItem as TimelineItemData } from "@/utilities/loadTimelineData";
-import { cnb } from "cnbuilder";
 import { ClipLoader } from "react-spinners";
 
 type TimelineProps = {
@@ -50,12 +49,15 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
 
   return (
     <Container width="site" pb={5} bgColor="fog-light" className="mb-50">
-      <div className="grid gap-[76px]">
+      <div className="grid rs-mb-10 sm:mb-0 sm:gap-[32px] md:gap-[76px]">
         {rows.map((row, rowIndex) => (
-          <div key={`row-${rowIndex}`}>
+          <div
+            key={`row-${rowIndex}`}
+            className="odd:children:children:even:rs-pt-6 even:children:children:odd:rs-pt-6"
+          >
             <div
               role="tablist"
-              className="flex flex-col md:flex-row md:justify-between"
+              className="flex flex-col items-center md:items-start md:flex-row md:justify-between"
             >
               {row.map((item, itemIndex) => {
                 const sizePattern: SizeType[] = ["large", "medium", "small"];
@@ -70,10 +72,10 @@ const TimelineOverview = ({ timelineData }: TimelineProps) => {
                     aria-selected={expandedUuid === item.uuid}
                     aria-controls={`tabpanel-${item.uuid}`}
                     key={item.uuid}
+                    isExpanded={expandedUuid === item.uuid}
                     size={size}
                     trapezoid={trapezoid}
                     onClick={() => handleToggle(item.uuid)}
-                    className={itemIndex % 2 === 0 ? "" : "rs-pt-7"}
                   />
                 );
               })}

components/Timeline/index.ts

@@ -3,6 +3,5 @@ export * from "./TimelineItem";
 export * from "./TimelineItem.styles";
 export * from "./TimelineItem.types";
 export * from "./TimelineDetails";
-export * from "./TimelineDetails.styles";
 export * from "./TimelineSidebar";
 export * from "./TimelineCard";