SOEOPSFY24-357 | update vert story card superhead and adjust example …

…page
SU-SOE · Jan 9, 2025 · 77943c7 · 77943c7
1 parent 595d250
commit 77943c7
Show file tree

Hide file tree

Showing 36 changed files with 195 additions and 102 deletions.
diff --git a/app/example/story/chapters/page.tsx → app/example/story/card/page.tsx b/app/example/story/chapters/page.tsx → app/example/story/card/page.tsx
@@ -1,10 +1,94 @@
+import { Container } from "@/components/Container";
+import { FlexBox } from "@/components/FlexBox";
+import { ThreeCol, TwoCol } from "@/components/Layout";
 import { Masthead } from "@/components/Masthead";
-import { StoryPosterCard } from "@/components/Story";
+import { StoryCard, StoryFeature, StoryPosterCard } from "@/components/Story";
+import { Heading, Text } from "@/components/Typography";
 
-const ExampleChaptersPage = async () => {
+const ExampleCardPage = async () => {
   return (
     <div>
       <Masthead isLight />
+
+      <Container width="site" py={6}>
+        <StoryCard
+          isHorizontal
+          bgColor="blue"
+          heading="Untangling the web of racial inequality"
+          body="Lorem ipsum dolor sit amet consectetur. Cursus aliquet neque at aliquet penatibus commodo."
+          imageUrl="https://placecats.com/neo_banana/300/200"
+          href="/"
+        />
+      </Container>
+      <ThreeCol>
+        <StoryCard
+          bgColor="blue"
+          heading="Lorem ipsum dolor sit amet consect hendrerit"
+          superhead="Change makers"
+          body="Quisque ante nunc, luctus nec aliquet in, gravida sed dui. Mauris posuere luctus varius."
+          imageUrl="https://placecats.com/neo_banana/300/200"
+          href="/"
+          chapter="Chapter 1"
+        />
+        <StoryCard
+          heading="Lorem ipsum dolor sit amet consect hendrerit"
+          superhead="Change makers"
+          body="Quisque ante nunc, luctus nec aliquet in, gravida sed dui. Mauris posuere luctus varius."
+          imageUrl="https://placecats.com/neo_banana/300/200"
+          href="/"
+        />
+        <StoryCard
+          heading="Lorem ipsum dolor sit amet consect hendrerit"
+          superhead="Change makers"
+          body="Quisque ante nunc, luctus nec aliquet in, gravida sed dui. Mauris posuere luctus varius."
+          imageUrl="https://placecats.com/neo_banana/300/200"
+          href="/"
+        />
+      </ThreeCol>
+      <StoryFeature>
+        <TwoCol className="rs-mb-8 items-center">
+          <FlexBox direction="col">
+            <Heading size="f4" weight="normal" className="rs-mr-8">
+              Fundamental work in science and transformational breakthroughs for
+              one hundred years.
+            </Heading>
+            <Text className="order-first" mb={2} font="dm-mono">
+              Stories
+            </Text>
+          </FlexBox>
+          <StoryCard
+            superhead="Impact"
+            heading="Lorem ipsum dolor sit amet consect hendrerit"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+            className="max-w-full"
+            chapter="1985 - 1994"
+          />
+        </TwoCol>
+        <ThreeCol>
+          <StoryCard
+            superhead="Change makers"
+            heading="The Foundation of a New Era in Engineering"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+            chapter="Innovation"
+          />
+          <StoryCard
+            superhead="Change makers"
+            heading="Computation, outer space, the nanoscale, and the fragility of planet Earth"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+            chapter="1985 - 1994"
+          />
+          <StoryCard
+            superhead="Change makers"
+            heading="Mae Jemison: “We each get a chance to choose our own path”"
+            imageUrl="https://placecats.com/neo_banana/300/200"
+            href="/"
+            chapter="1985 - 1994"
+          />
+        </ThreeCol>
+      </StoryFeature>
       <StoryPosterCard
         bgColor="stone-dark"
         heading="The foundation of a new era in engineering"
@@ -108,4 +192,4 @@ const ExampleChaptersPage = async () => {
   );
 };
 
-export default ExampleChaptersPage;
+export default ExampleCardPage;
diff --git a/components/Story/ChapterLabel.tsx b/components/Story/ChapterLabel.tsx
@@ -21,8 +21,9 @@ export const ChapterLabel = ({
       weight="bold"
       size="small"
       leading="snug"
+      mb="none"
       className={cnb(
-        "pt-6 px-13 pb-8 rounded-xl w-fit",
+        "text-white pt-6 px-13 pb-8 rounded-xl w-fit",
         {
           "bg-stone-dark": isLight,
           "bg-archway-dark": !isLight,

diff --git a/components/Story/StoryCard.tsx b/components/Story/StoryCard.tsx
@@ -4,11 +4,13 @@ import { BgColorType } from "@/components/Container/Container.types";
 import { cnb } from "cnbuilder";
 import { Heading, Text } from "@/components/Typography";
 import * as styles from "@/components/Container/Container.styles";
+import { ChapterLabel } from "./ChapterLabel";
 
 type StoryCardProps = HTMLAttributes<HTMLDivElement> & {
   heading: string;
   superhead?: string;
   body?: string;
+  chapter?: string;
   href: string;
   headerTag?: "h2" | "h3";
   isHeadingLarge?: boolean;
@@ -23,6 +25,7 @@ export const StoryCard = ({
   heading,
   superhead,
   body,
+  chapter,
   href,
   headerTag = "h2",
   isHeadingLarge = false,
@@ -40,7 +43,7 @@ export const StoryCard = ({
     <CardWrapper
       {...props}
       className={cnb(
-        "overflow-hidden rs-mb-5 w-full h-fit rounded-[25px] shadow-lg lg:mb-0 lg:max-w-[920px] xl:max-w-[980px] stretched-link group transition duration-500 hocus:shadow-2xl",
+        "relative overflow-hidden rs-mb-5 w-full h-fit rounded-[25px] shadow-lg lg:mb-0 lg:max-w-[920px] xl:max-w-[980px] group transition duration-500 hocus:shadow-2xl hocus:outline hocus:outline-4 hocus:outline-digital-red-xlight",
         { "flex flex-col md:flex-row items-center": isHorizontal },
         bgColor && styles.bgColors[bgColor],
         className,
@@ -65,10 +68,12 @@ export const StoryCard = ({
           mb="none"
           linkType="story"
         >
-          <a href={href}>{heading}</a>
+          <a href={href} className="stretched-link">
+            {heading}
+          </a>
         </Heading>
         {superhead && (
-          <Text className="order-first" size="base" mb="base" font="dm-mono">
+          <Text className="order-first" size="small" mb="base" font="dm-mono">
             {superhead}
           </Text>
         )}
@@ -77,6 +82,7 @@ export const StoryCard = ({
             {body}
           </Text>
         )}
+        {chapter && <ChapterLabel text={chapter} className="rs-mt-1" />}
       </div>
     </CardWrapper>
   );

diff --git a/components/Story/StoryPosterCard.tsx b/components/Story/StoryPosterCard.tsx
@@ -46,10 +46,13 @@ export const StoryPosterCard = ({
       <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,
-        })}
+        className={cnb(
+          "relative rounded-[30px] overflow-hidden group transition duration-500",
+          {
+            "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">
@@ -87,7 +90,7 @@ export const StoryPosterCard = ({
             {chapter && (
               <ChapterLabel
                 text={chapter}
-                className="order-first mt-0 md:rs-mt-2"
+                className="order-first mt-0 md:rs-mt-2 rs-mb-2"
               />
             )}
             <Text className="order-first" mb={2} font="dm-mono">

diff --git a/components/Timeline/Timeline.styles.ts b/components/Timeline/Timeline.styles.ts
@@ -40,7 +40,7 @@ export const bgColors = {
 export const size = {
   small: "w-200 md:w-250",
   medium: "w-250 md:w-[300px] xl:w-[340px]",
-  large: "w-250 md:w-[300px] xl:w-[420px]",
+  large: "w-250 md:w-[300px] lg:w-[340px] xl:w-[420px]",
   xlarge: "w-250 md:w-[300px] lg:w-[340px] xl:w-[420px] 2xl:w-600",
   full: "w-full",
 };

diff --git a/components/Timeline/TimelineCard.tsx b/components/Timeline/TimelineCard.tsx
@@ -66,9 +66,8 @@ export const TimelineCard = ({
   const animationType =
     animation || align === "left" ? "slideInFromLeft" : "slideInFromRight";
   return (
-    <AnimateInView animation={animationType} className={className}>
+    <AnimateInView {...props} animation={animationType} className={className}>
       <AsComponent
-        {...props}
         className={cnb(
           "h-fit relative",
           bgColor ? styles.bgColors[bgColor] : "",

diff --git a/components/Timeline/TimelineFeature.tsx b/components/Timeline/TimelineFeature.tsx
@@ -19,7 +19,7 @@ export const TimelineFeature = async ({ anchors }: TimelineFeatureProps) => {
   );
 
   return (
-    <Container width="site" py={5}>
+    <Container width="site" py={5} id="featured-timeline">
       <Slideshow>
         {featureTimelineData.length > 0 ? (
           featureTimelineData.map((item, idx) => (

diff --git a/components/Typography/Heading.tsx b/components/Typography/Heading.tsx
@@ -23,7 +23,7 @@ export const Heading = ({
   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";
+        "[&_a]:transition [&_a]:duration-500 [&_a]:font-normal [&_a]:text-stone-dark [&_a]:group-hocus:underline [&_a]:underline-offset-[5px] [&_a]:group-hocus:decoration-stone-dark [&_a]:group-hocus:cursor-pointer [&_a]:decoration-2";
       break;
     case "poster":
       headingLinkClasses =