SOEOPSFY24-380 SOEOPSFY24-357 | add story poster card and adjust tex…

…tarea example
SU-SOE · Jan 8, 2025 · cda46fb · cda46fb
1 parent 08532b2
commit cda46fb
Show file tree

Hide file tree

Showing 38 changed files with 299 additions and 95 deletions.
diff --git a/app/example/story/chapters/page.tsx b/app/example/story/chapters/page.tsx
@@ -0,0 +1,111 @@
+import { Masthead } from "@/components/Masthead";
+import { StoryPosterCard } from "@/components/Story";
+
+const ExampleChaptersPage = async () => {
+  return (
+    <div>
+      <Masthead isLight />
+      <StoryPosterCard
+        bgColor="stone-dark"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        chapter="Chapter 1"
+        link="/"
+      />
+      <StoryPosterCard
+        hasBgImage
+        bgColor="stone-dark"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        chapter="Chapter 1"
+        link="/"
+      />
+      <StoryPosterCard
+        bgColor="red"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://i.ibb.co/bX4ysck/1926-The-largest-university-electrical-lab-of-its-time.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        hasBgImage
+        bgColor="red"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://i.ibb.co/bX4ysck/1926-The-largest-university-electrical-lab-of-its-time.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://i.ibb.co/bX4ysck/1926-The-largest-university-electrical-lab-of-its-time.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        isNarrow
+        bgColor="stone-dark"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact (Narrow Example)"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        isNarrow
+        hasBgImage
+        bgColor="stone-dark"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact (Narrow Example)"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        isNarrow
+        bgColor="red"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact (Narrow Example)"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        isNarrow
+        hasBgImage
+        bgColor="red"
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+      <StoryPosterCard
+        isNarrow
+        heading="The foundation of a new era in engineering"
+        superhead="100 Years of Impact (Narrow Example)"
+        body="The education of engineers had been a founding intention for the university, with an engineering curriculum in place since its inception."
+        src="https://ik.imagekit.io/centennial/1939%20-%20Model%20200A%20precision%20audio%20oscillator.jpg"
+        caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
+        link="/"
+      />
+    </div>
+  );
+};
+
+export default ExampleChaptersPage;
diff --git a/app/example/textarea/page.tsx b/app/example/textarea/page.tsx
@@ -118,7 +118,7 @@ const TextareaExamplePage = async () => {
           rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
           efficitur scelerisque urna et sollicitudin.
         </Text>
-        <Text as="div" className="big-paragraph">
+        <Text as="div">
           <ol>
             <li>Fusce sem enim, tempus nec massa id, mollis faucibus sem.</li>
             <li>

diff --git a/components/Story/ChapterLabel.tsx b/components/Story/ChapterLabel.tsx
@@ -0,0 +1,36 @@
+import { cnb } from "cnbuilder";
+import React from "react";
+import { Text } from "../Typography";
+
+type ChapterLabelProps = {
+  text: string;
+  isLight?: boolean;
+  className?: string;
+};
+
+export const ChapterLabel = ({
+  text,
+  isLight = false,
+  className,
+  ...props
+}: ChapterLabelProps) => {
+  return (
+    <Text
+      {...props}
+      as="div"
+      weight="bold"
+      size="small"
+      leading="snug"
+      className={cnb(
+        "pt-6 px-13 pb-8 rounded-xl w-fit",
+        {
+          "bg-stone-dark": isLight,
+          "bg-archway-dark": !isLight,
+        },
+        className,
+      )}
+    >
+      {text}
+    </Text>
+  );
+};
diff --git a/components/Story/StoryCard.tsx b/components/Story/StoryCard.tsx
@@ -63,7 +63,7 @@ export const StoryCard = ({
           size={isHeadingLarge ? 3 : 2}
           weight="normal"
           mb="none"
-          isInvertLinkStyle
+          linkType="story"
         >
           <a href={href}>{heading}</a>
         </Heading>

diff --git a/components/Story/StoryPosterCard.tsx b/components/Story/StoryPosterCard.tsx
@@ -4,10 +4,12 @@ import { FlexBox } from "../FlexBox";
 import Image from "next/image";
 import { Heading, Text } from "../Typography";
 import { cnb } from "cnbuilder";
+import { ChapterLabel } from "./ChapterLabel";
 
 type StoryPosterCardProps = HTMLAttributes<HTMLDivElement> & {
   heading: string;
   superhead: string;
+  chapter?: string;
   body: string;
   byline?: string;
   bgColor?: BgColorType;
@@ -16,25 +18,39 @@ type StoryPosterCardProps = HTMLAttributes<HTMLDivElement> & {
   isNarrow?: boolean;
   src: string;
   alt?: string;
+  link: string;
 };
 
 export const StoryPosterCard = ({
   heading,
   superhead,
+  chapter,
   body,
   byline,
   bgColor = "white",
   caption,
   hasBgImage = false,
-  // isNarrow = false,
+  isNarrow = false,
   src,
   alt,
+  link,
   ...props
 }: StoryPosterCardProps) => {
-  const pb = bgColor === "white" ? 10 : 8;
   return (
-    <Container {...props} width="site" mb={7} className="relative">
-      <Container bgColor={bgColor} width="site" pt={9} pb={pb}>
+    <Container
+      {...props}
+      width="site"
+      mb={7}
+      className="2xl:p-0 2xl:w-full 2xl:max-w-[1600px]"
+    >
+      <Container
+        bgColor={bgColor}
+        width="full"
+        className={cnb("relative rounded-[30px] overflow-hidden group", {
+          "rs-py-5 rs-px-2 lg:rs-px-4": isNarrow,
+          "rs-py-7 rs-px-4": !isNarrow,
+        })}
+      >
         {hasBgImage && (
           <div className="h-full w-full absolute top-0 left-0 z-0">
             <Image
@@ -55,16 +71,29 @@ export const StoryPosterCard = ({
         )}
         <FlexBox
           alignItems="center"
-          className="flex flex-col z-50 relative md:grid-gap w-full max-w-[1100px] mx-auto"
+          className="flex flex-col md:flex-row z-50 relative md:grid-gap w-full 2xl:mx-auto 2xl:max-w-1300"
         >
-          <div className="flex flex-col text-center rs-mb-8 rs-mt-7 items-center [&_p]:max-w-800 [&_h*]:max-w-1100">
-            <Heading size={6} weight="normal" mb="none">
-              {heading}
+          <div className="flex flex-col text-left [&_p]:max-w-800 [&_h*]:max-w-1100">
+            <Heading
+              size="f5"
+              weight="normal"
+              className="rs-mb-3 lg:rs-mb-5"
+              linkType="poster"
+            >
+              <a href={link} className="stretched-link">
+                {heading}
+              </a>
             </Heading>
+            {chapter && (
+              <ChapterLabel
+                text={chapter}
+                className="order-first mt-0 md:rs-mt-2"
+              />
+            )}
             <Text className="order-first" mb={2} font="dm-mono">
               {superhead}
             </Text>
-            <Text variant="overview" mb="none" className="rs-mt-5">
+            <Text variant="overview" mb="none">
               {body}
             </Text>
             {byline && (
@@ -73,23 +102,11 @@ export const StoryPosterCard = ({
               </Text>
             )}
           </div>
-          <FlexBox direction="col" className="w-full h-full">
-            <div className="w-full xl:max-h-[860px] overflow-hidden relative rounded-[30px] mb-10 aspect-[1/1]">
-              <Image src={src} alt={alt || ""} fill className="object-cover" />
-            </div>
-            {bgColor === "white" && (
-              <Text variant="caption" className="mt-13">
-                {caption}
-              </Text>
-            )}
-          </FlexBox>
+          <div className="w-full h-full md:max-w-[175px] lg:max-w-[260px] xl:max-w-[320px] 2xl:max-w-[485px] overflow-hidden relative rounded-[30px] mb-10 aspect-[1/1] border-5 border-transparent group-hocus:border-digital-red-xlight">
+            <Image src={src} alt={alt || ""} fill className="object-cover" />
+          </div>
         </FlexBox>
       </Container>
-      {bgColor !== "white" && (
-        <Text variant="caption" className="mt-13 cc">
-          {caption}
-        </Text>
-      )}
     </Container>
   );
 };
diff --git a/components/Typography/Heading.tsx b/components/Typography/Heading.tsx
@@ -6,20 +6,33 @@ type HeadingProps = Omit<TypographyProps, "as"> &
   React.HTMLAttributes<HTMLHeadingElement> & {
     as?: types.HeadingType;
     className?: string;
-    isInvertLinkStyle?: boolean;
+    linkType?: "story" | "poster" | "default";
   };
 
 // Convenience component for paragraphs
 export const Heading = ({
   as = "h2",
   weight = "medium",
   className,
-  isInvertLinkStyle = false,
+  linkType,
   ...rest
 }: HeadingProps) => {
-  const headingLinkClasses = isInvertLinkStyle
-    ? "[&_a]:transition [&_a]:duration-500 [&_a]:text-stone-dark [&_a]:group-hocus:underline [&_a]:underline-offset-[5px] [&_a]:group-hocus:decoration-digital-red-light [&_a]:group-hocus:cursor-pointer [&_a]:decoration-4"
-    : "[&_a]:transition [&_a]:duration-500 [&_a]:text-stone-dark [&_a]:underline [&_a]:underline-offset-[5px] [&_a]:decoration-digital-red-light [&_a]:cursor-pointer [&_a]:decoration-4";
+  let headingLinkClasses =
+    "[&_a]:transition [&_a]:duration-500 [&_a]:text-stone-dark [&_a]:underline [&_a]:underline-offset-[5px] [&_a]:decoration-digital-red-light [&_a]:cursor-pointer [&_a]:decoration-4";
+
+  switch (linkType) {
+    case "story":
+      headingLinkClasses =
+        "[&_a]:transition [&_a]:duration-500 [&_a]:text-stone-dark [&_a]:group-hocus:underline [&_a]:underline-offset-[5px] [&_a]:group-hocus:decoration-digital-red-light [&_a]:group-hocus:cursor-pointer [&_a]:decoration-4";
+      break;
+    case "poster":
+      headingLinkClasses =
+        "[&_a]:transition [&_a]:duration-500 [&_a]:text-white [&_a]:font-normal [&_a]:group-hocus:underline [&_a]:underline-offset-[5px] [&_a]:group-hocus:decoration-white [&_a]:group-hocus:cursor-pointer [&_a]:decoration-4";
+      break;
+    default:
+      break;
+  }
+
   return (
     <Text
       {...rest}

diff --git a/components/Typography/typography.styles.ts b/components/Typography/typography.styles.ts
@@ -37,6 +37,7 @@ export const fontSizes = {
   "quote-lg": "cen-quote-lg",
   "quote-md": "cen-quote-md",
   "quote-sm": "cen-quote-sm",
+  small: "text-17 md:text-18",
 };
 
 // Line heights

diff --git a/data/timeline/1900s-1950s/1990s.json b/data/timeline/1900s-1950s/1990s.json
@@ -15,19 +15,19 @@
     "year": "1936-1944",
     "heading": "Stanford Engineering's second Dean",
     "body": "A railroad car filled with equipment for thSamuel B. Morris, professor of civil engineering and the second dean of the School of Engineering from 1936 to 1944, adjusted course schedules and curriculum during the Great Depression and World War II to help students who needed to work or study during the summer. Hundreds of soldiers enrolled in 1943 as part of the Army Specialized Training Program.",
-    "image": "https://res.cloudinary.com/dsqi5touf/image/upload/v1734567370/1936-1944_-_Stanford_Engineering_s_second_Dean_otpanz.jpg"
+    "image": "https://ik.imagekit.io/centennial/1936-1944%20-%20Stanford%20Engineering's%20second%20Dean.jpg"
   },
   {
     "year": "1937",
     "heading": "Foundational technology in the burgeoning microwave industry",
     "body": "Type A klystron, 1937. The klystron was the first significantly powerful source of radio waves in the microwave range. As the foundational technology in the burgeoning microwave industry, it would be used in military radar detection, commercial air navigation, satellite communications, high-energy particle accelerators, and other technologies. With the klystron, Terman began the school’s decades-long tradition of inventions emerging from academia and making a successful transfer to the corporate world.",
-    "image": "https://res.cloudinary.com/dsqi5touf/image/upload/v1734567641/1937_-_Foundational_technology_in_the_burgeoning_microwave_industry_wn5tnx.jpg"
+    "image": "https://ik.imagekit.io/centennial/1937%20-%20Foundational%20technology%20in%20the%20burgeoning%20microwave%20industry.jpg"
   },
   {
     "year": "1939",
     "heading": "Inventors of the klystron",
     "body": "Type A klystron, 1937. The klystron was the first significantly powerful source of radio waves in the microwave range. As the foundational technology in the burgeoning microwave industry, it would be used in military radar detection, commercial air navigation, satellite communications, high-energy particle accelerators, and other technologies. With the klystron, Terman began the school’s decades-long tradition of inventions emerging from academia and making a successful transfer to the corporate world.",
-    "image": "https://res.cloudinary.com/dsqi5touf/image/upload/v1734567364/1939_-_Inventors_of_the_klystron_ocfvjf.jpg"
+    "image": "https://i.ibb.co/7vxYksK/1939-Inventors-of-the-klystron.jpg"
   },
   {
     "year": "1939",
@@ -45,7 +45,7 @@
     "year": "1943",
     "heading": "Training for war",
     "body": "Professor William G. Hoover demonstrates equipment to engineering students in the Army Specialized Training Program at Stanford, 1943. While keeping up with their regular course loads and research responsibilities, many faculty worked demanding hours to train these students for war. In 1941, preceding the attack on Pearl Harbor, Washington frequently called on Stanford to support defense activities, asking for help not only from the School of Engineering but also from the departments of physics and chem- istry and the School of Medicine, seeking any experts who might give the coun- try an edge in the coming conflict.",
-    "image": "https://res.cloudinary.com/dsqi5touf/image/upload/v1734567369/1943_-_Training_for_war_ooznx0.jpg"
+    "image": "https://i.ibb.co/CtK7rSn/1943-Training-for-war.jpg"
   },
   {
     "year": "1944",