From 715f4e518f8572026290b1a970a4d3438af5749a Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Wed, 11 Oct 2023 13:29:14 -0700
Subject: [PATCH] Add above sidebar region

---
 .../Storyblok/SbStoryMvp/SbAboveContent.tsx   |   3 +
 .../Storyblok/SbStoryMvp/SbStoryMvp.tsx       | 158 +++++++++---------
 2 files changed, 85 insertions(+), 76 deletions(-)

diff --git a/components/Storyblok/SbStoryMvp/SbAboveContent.tsx b/components/Storyblok/SbStoryMvp/SbAboveContent.tsx
index 65d4bd9a..29a40ccd 100644
--- a/components/Storyblok/SbStoryMvp/SbAboveContent.tsx
+++ b/components/Storyblok/SbStoryMvp/SbAboveContent.tsx
@@ -5,15 +5,18 @@ import { Container } from '@/components/Container';
 import { Grid } from '@/components/Grid';
 
 type SbAboveContentProps = {
+  aboveSidebar?: SbBlokData[];
   intro: SbBlokData[];
   sidebar?: SbBlokData[];
 }
 
 export const SbAboveContent = ({
+  aboveSidebar,
   intro,
   sidebar,
 }: SbAboveContentProps) => (
   <Container pt={9} className="relative overflow-hidden">
+    <CreateBloks blokSection={aboveSidebar} />
     <Grid md={12} gap="default">
       <div className="rs-mb-3 lg:mb-0 md:col-span-10 md:col-start-2 lg:col-span-7 xl:col-span-6 2xl:col-span-5 2xl:col-start-2">
         <CreateBloks blokSection={intro} />
diff --git a/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx b/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx
index dfa54d29..697a0599 100644
--- a/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx
+++ b/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx
@@ -19,6 +19,7 @@ import { getProcessedImage } from '@/utilities/getProcessedImage';
 type SbStoryMvpProps = {
   blok: {
     _uid: string;
+    aboveSidebar?: SbBlokData[];
     intro?: SbBlokData[];
     sidebar?: SbBlokData[];
     content?: SbBlokData[];
@@ -51,6 +52,7 @@ export const SbStoryMvp = ({
     tabColor,
     topics,
     // page regions
+    aboveSidebar,
     intro,
     sidebar,
     content,
@@ -58,36 +60,79 @@ export const SbStoryMvp = ({
   },
   blok,
   slug,
-}: SbStoryMvpProps) => (
-  <div {...storyblokEditable(blok)}>
-    <Masthead isLight={isLightHero} />
-    <main id="main-content">
-      <article>
-        {!(title?.includes('Whereas') || title?.includes('Progress') || title?.includes('Video') || title?.includes('Solve')) && (
-          <>
-            <StoryHeroMvp
-              title={title}
-              customHeading={customHeading}
-              headingFont={headingFont}
-              isSmallHeading={isSmallHeading}
-              dek={dek}
-              byline={byline}
-              publishedDate={publishedDate}
-              heroImage={heroImage}
-              aspectRatio={aspectRatio}
-              mobileImage={mobileImage}
-              mobileAspectRatio={mobileAspectRatio}
-              bgImage={bgImage}
-              addBgBlur={addBgBlur}
-              addDarkOverlay={addDarkOverlay}
-              isLeftImage={isLeftImage}
-              alt={alt}
-              caption={caption}
-              isLightHero={isLightHero}
-              isVerticalHero={isVerticalHero}
-              tabColor={tabColor}
-              topics={topics}
-            />
+}: SbStoryMvpProps) => {
+  const showAboveContent = !!getNumBloks(aboveSidebar) || !!getNumBloks(intro) || !!getNumBloks(sidebar);
+
+  return (
+    <div {...storyblokEditable(blok)}>
+      <Masthead isLight={isLightHero} />
+      <main id="main-content">
+        <article>
+          {!(title?.includes('Whereas') || title?.includes('Progress') || title?.includes('Video') || title?.includes('Solve')) && (
+            <>
+              <StoryHeroMvp
+                title={title}
+                customHeading={customHeading}
+                headingFont={headingFont}
+                isSmallHeading={isSmallHeading}
+                dek={dek}
+                byline={byline}
+                publishedDate={publishedDate}
+                heroImage={heroImage}
+                aspectRatio={aspectRatio}
+                mobileImage={mobileImage}
+                mobileAspectRatio={mobileAspectRatio}
+                bgImage={bgImage}
+                addBgBlur={addBgBlur}
+                addDarkOverlay={addDarkOverlay}
+                isLeftImage={isLeftImage}
+                alt={alt}
+                caption={caption}
+                isLightHero={isLightHero}
+                isVerticalHero={isVerticalHero}
+                tabColor={tabColor}
+                topics={topics}
+              />
+              <Image
+                width={2000}
+                height={40}
+                alt=""
+                loading="lazy"
+                src={getProcessedImage('https://a-us.storyblok.com/f/1005200/2000x40/c4777a4925/steve-johnson-cropped-2000x40-01.jpg') || ''}
+                className="w-full"
+              />
+            </>
+          )}
+          {showAboveContent && (
+            <SbAboveContent aboveSidebar={aboveSidebar} intro={intro} sidebar={sidebar} />
+          )}
+          {title?.includes('Solve') && (
+            <BrochureStory />
+          )}
+          {title?.includes('Progress') && (
+            <ProgressStory />
+          )}
+          {title?.includes('Video scrolling') && (
+            <VideoScrollStory />
+          )}
+          {title?.includes('Chatbot') && (
+            <ChatbotStory />
+          )}
+          {title?.includes('Whereas') && (
+            <MulticolumnStory />
+          )}
+          <CreateBloks blokSection={content} />
+          {title?.includes('bookshelf') && (
+            <Bookshelf />
+          )}
+          {title?.includes('Immersive featured') && (
+            <>
+              <ScrollyFullwidth />
+              <ScrollyTelling />
+              <ScrollyDataViz />
+            </>
+          )}
+          {getNumBloks(blok.ankle) > 0 && (
             <Image
               width={2000}
               height={40}
@@ -96,50 +141,11 @@ export const SbStoryMvp = ({
               src={getProcessedImage('https://a-us.storyblok.com/f/1005200/2000x40/c4777a4925/steve-johnson-cropped-2000x40-01.jpg') || ''}
               className="w-full"
             />
-          </>
-        )}
-        {getNumBloks(blok.intro) > 0 && (
-          <SbAboveContent intro={intro} sidebar={sidebar} />
-        )}
-        {title?.includes('Solve') && (
-          <BrochureStory />
-        )}
-        {title?.includes('Progress') && (
-          <ProgressStory />
-        )}
-        {title?.includes('Video scrolling') && (
-          <VideoScrollStory />
-        )}
-        {title?.includes('Chatbot') && (
-          <ChatbotStory />
-        )}
-        {title?.includes('Whereas') && (
-          <MulticolumnStory />
-        )}
-        <CreateBloks blokSection={content} />
-        {title?.includes('bookshelf') && (
-          <Bookshelf />
-        )}
-        {title?.includes('Immersive featured') && (
-          <>
-            <ScrollyFullwidth />
-            <ScrollyTelling />
-            <ScrollyDataViz />
-          </>
-        )}
-        {getNumBloks(blok.ankle) > 0 && (
-          <Image
-            width={2000}
-            height={40}
-            alt=""
-            loading="lazy"
-            src={getProcessedImage('https://a-us.storyblok.com/f/1005200/2000x40/c4777a4925/steve-johnson-cropped-2000x40-01.jpg') || ''}
-            className="w-full"
-          />
-        )}
-        <CreateBloks blokSection={ankle} />
-      </article>
-    </main>
-  </div>
-);
+          )}
+          <CreateBloks blokSection={ankle} />
+        </article>
+      </main>
+    </div>
+  );
+};