Stubbed out carousel display

src/components/global/page-header.tsx

@@ -19,16 +19,6 @@ const PageHeader = async () => {
 
   return (
     <header className="shadow-lg">
-      <div className="bg-cardinal-red">
-        <div className="centered py-3">
-          <a
-            className="font-stanford no-underline font-regular text-20 hocus:underline text-white hocus:text-white leading-none"
-            href="https://www.stanford.edu"
-          >
-            Stanford University
-          </a>
-        </div>
-      </div>
       {globalMessageConfig && <GlobalMessage {...globalMessageConfig}/>}
       <div className="relative shadow">
         <div className="centered min-h-50 pr-24 lg:pr-0">

src/components/nodes/pages/stanford-page/stanford-page-page.tsx

@@ -5,6 +5,7 @@ import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordPage} from "@lib/gql/__generated__/drupal.d";
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
 import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph";
+import SupCarouselParagraph from "@components/paragraphs/sup-carousel/sup-carousel-paragraph";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordPage
@@ -24,6 +25,9 @@ const StanfordPagePage = ({node, ...props}: Props) => {
           {node.suPageBanner.__typename === "ParagraphStanfordPageTitleBanner" &&
             <PageTitleBannerParagraph paragraph={node.suPageBanner} pageTitle={node.title}/>
           }
+          {node.suPageBanner.__typename === "ParagraphSupCarousel" &&
+            <SupCarouselParagraph paragraph={node.suPageBanner} isTopBanner/>
+          }
         </header>
       }
 

src/components/paragraphs/paragraph.tsx

@@ -11,6 +11,7 @@ import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
 import {Suspense} from "react";
 import PreBuiltParagraph from "@components/paragraphs/sup-pre-built/pre-built-paragraph";
 import FileListParagraph from "@components/paragraphs/sup-file-list/file-list-paragraph";
+import SupCarouselParagraph from "@components/paragraphs/sup-carousel/sup-carousel-paragraph";
 
 type Props = {
   /**
@@ -49,6 +50,8 @@ const Paragraph = async ({paragraph}: Props) => {
       return <FileListParagraph paragraph={paragraph} {...itemProps}/>
     case "ParagraphSupPreBuilt":
       return <PreBuiltParagraph paragraph={paragraph} {...itemProps}/>
+    case "ParagraphSupCarousel":
+      return <SupCarouselParagraph paragraph={paragraph} {...itemProps}/>
   }
   console.warn(`Unknown paragraph ${paragraph.__typename}. Item ${paragraph.id}.`);
 }

src/components/paragraphs/sup-carousel/sup-carousel-paragraph.tsx

@@ -0,0 +1,70 @@
+import {HtmlHTMLAttributes} from "react";
+import {ParagraphSupCarousel, ParagraphSupCarouselSlide} from "@lib/gql/__generated__/drupal.d";
+import Slideshow from "@components/elements/slideshow";
+import {H2} from "@components/elements/headers";
+import Wysiwyg from "@components/elements/wysiwyg";
+import Link from "@components/elements/link";
+import Image from "next/image";
+import {clsx} from "clsx";
+import {twMerge} from "tailwind-merge";
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  paragraph: ParagraphSupCarousel
+  /**
+   * If the paragraph is configured in the "Top Banner" on Basic Pages.
+   */
+  isTopBanner?: boolean
+}
+
+const SupCarouselParagraph = ({paragraph, isTopBanner, ...props}: Props) => {
+  return (
+    <div
+      {...props}
+      className={twMerge(clsx({"relative pt-[300px] -mb-[300px] -top-[300px] bg-blue-50": isTopBanner}), props?.className)}
+    >
+      {paragraph.supCarouselSlides.length === 1 && <Slide slideParagraph={paragraph.supCarouselSlides[0]}/>}
+
+      {paragraph.supCarouselSlides.length > 1 &&
+        <Slideshow slideshowProps={{slidesToShow: 1}}>
+          {paragraph.supCarouselSlides.map(slide => <div key={slide.id}><Slide key={slide.id} slideParagraph={slide}/>
+          </div>)}
+        </Slideshow>
+      }
+    </div>
+  )
+}
+
+const Slide = ({slideParagraph}: { slideParagraph: ParagraphSupCarouselSlide }) => {
+  const slideTitle = slideParagraph.supSlideTitle || slideParagraph.supSlideBook?.title
+  const image = slideParagraph.supSupImage?.mediaImage || slideParagraph.supSlideBook?.supBookImage?.mediaImage;
+
+  return (
+    <article aria-labelledby={slideParagraph.id} className="centered-container">
+      <div className="xl:flex gap-10 xl:w-2/3 mx-auto">
+        {image &&
+          <div className="relative aspect-[9/16] w-1/3">
+            <Image
+              className="object-cover"
+              src={image.url}
+              alt={image.alt || ""}
+              fill
+            />
+          </div>
+        }
+        <div>
+          <div className="flex flex-col">
+            {slideTitle && <H2 id={slideParagraph.id}>{slideTitle}</H2>}
+            {slideParagraph.supSlideEyebrow && <div className="order-first">{slideParagraph.supSlideEyebrow}</div>}
+          </div>
+
+          {slideParagraph.supSlideSubtitle && <div>{slideParagraph.supSlideSubtitle}</div>}
+          {slideParagraph.supSlideBody && <Wysiwyg html={slideParagraph.supSlideBody.processed}/>}
+          {slideParagraph.supSlideButton?.url &&
+            <Link href={slideParagraph.supSlideButton.url}>{slideParagraph.supSlideButton.title}</Link>
+          }
+        </div>
+      </div>
+    </article>
+  )
+}
+export default SupCarouselParagraph

src/lib/gql/fragments-fields.drupal.gql

@@ -35,6 +35,11 @@ fragment FragmentSupAward on SupAward {
     supYear
 }
 
+fragment FragmentLink on Link {
+    title
+    url
+}
+
 fragment FragmentNameType on NameType {
     title
     given

src/lib/gql/fragments-node.drupal.gql

@@ -116,6 +116,7 @@ fragment FragmentNodeStanfordPage on NodeStanfordPage {
     suPageBanner {
         ...FragmentParagraphStanfordBanner
         ...FragmentParagraphStanfordPageTitleBanner
+        ...FragmentParagraphSupCarousel
     }
     suPageComponents {
         ...FragmentParagraphUnion

src/lib/gql/fragments-paragraph.drupal.gql

@@ -182,6 +182,37 @@ fragment FragmentParagraphSupFileList on ParagraphSupFileList {
 
 fragment FragmentParagraphSupCarouselSlide on ParagraphSupCarouselSlide {
     ...FragmentParagraphInterface
+    supSlideBody {
+        processed
+    }
+    supSlideBodySize
+    supSlideBook {
+        ... on NodeSupBook {
+            id
+            title
+            path
+            supBookAuthors {
+                ...FragmentNameType
+            }
+            supBookImage {
+                ...FragmentMediaImage
+            }
+        }
+    }
+    supSlideButton {
+        ...FragmentLink
+    }
+    supSlideColor
+    supSlideEyebrow
+    supSlideHide
+    supSlideOrientation
+    supSlideSubtitle
+    supSlideTitle
+    supSlideTitleSize
+    supSlideTopHero
+    supSupImage {
+        ...FragmentMediaImage
+    }
 }
 
 fragment FragmentParagraphSupCarousel on ParagraphSupCarousel {
@@ -206,4 +237,5 @@ fragment FragmentParagraphUnion on ParagraphUnion {
     ...FragmentParagraphSupPreBuilt
     ...FragmentParagraphSupCarousel
     ...FragmentParagraphSupFileList
+    ...FragmentParagraphSupCarouselSlide
 }