WIP horizontal hero

SU-SWS · Oct 6, 2023 · 9698460 · 9698460
1 parent fcef750
commit 9698460
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 22 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -11,50 +11,70 @@ export const blurWrapper = (addDarkOverlay: boolean, type: 'hero' | 'poster', bg
 
 export const grid = 'w-full';
 
-export const contentWrapper = (imageOnLeft: boolean) => cnb('relative z-10', {
+export const contentWrapper = (imageOnLeft?: boolean) => cnb('relative z-10', {
   'lg:order-last': imageOnLeft,
   'lg:order-first': !imageOnLeft,
 });
 
-export const headingWrapper = (imageOnLeft: boolean, headingFont?: 'druk' | 'serif') => cnb('lg:rs-mt-7 rs-mb-5', {
+export const headingWrapper = (
+  imageOnLeft?: boolean,
+  headingFont?: 'druk' | 'serif',
+  isTwoCol?: boolean,
+) => cnb('lg:rs-mt-7 rs-mb-5', {
   '' : imageOnLeft,
-  'lg:mr-0 lg:w-[120%] lg:-ml-[20%] 3xl:w-auto 3xl:-ml-200': imageOnLeft && headingFont === 'druk',
+  'lg:mr-0 lg:w-[120%] lg:-ml-[20%] 3xl:w-auto 3xl:-ml-200': imageOnLeft && headingFont === 'druk' && isTwoCol,
 });
-export const headingInnerWrapper = (imageOnLeft: boolean, headingFont?: 'druk' | 'serif') => cnb('w-full border-l-[1rem] sm:border-l-[1.4rem] md:border-l-[2rem] pl-10 pr-20 sm:pl-16 sm:pr-30 md:pl-30 md:pr-50', {
+export const headingInnerWrapper = (
+  imageOnLeft?: boolean,
+  headingFont?: 'druk' | 'serif',
+  isTwoCol?: boolean,
+) => cnb('w-full border-l-[1rem] sm:border-l-[1.4rem] md:border-l-[2rem]', {
   'lg:border-l-0 lg:border-r-[3rem] xl:border-r-[4rem] lg:pl-0 lg:pr-50 xl:pr-60': imageOnLeft,
-  'lg:border-l-[3rem] xl:border-l-[4rem] lg:pl-50 xl:pl-60 lg:pr-0 3xl:pl-[calc(100%-750px-40px)]': !imageOnLeft,
-  'lg:w-[140%] xl:w-[120%]': !imageOnLeft && headingFont === 'druk',
+  'pl-10 pr-20 sm:pl-16 sm:pr-30 md:pl-30 md:pr-50': isTwoCol,
+  'cc lg:border-l-[3rem] xl:border-l-[4rem]' : !isTwoCol,
+  'lg:border-l-[3rem] xl:border-l-[4rem] lg:pl-50 xl:pl-60 lg:pr-0 3xl:pl-[calc(100%-750px-40px)]': !imageOnLeft && isTwoCol,
+  'lg:w-[140%] xl:w-[120%]': !imageOnLeft && headingFont === 'druk' && isTwoCol,
   'lg:pl-40 2xl:pl-60': imageOnLeft && headingFont === 'serif',
   'lg:pr-40 2xl:pr-60': !imageOnLeft && headingFont === 'serif',
 });
-export const heading = (imageOnLeft: boolean, isSmallHeading: boolean, headingFont?: 'druk' | 'serif') => cnb('mb-0 -mt-01em', {
-  '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk',
+export const heading = (
+  imageOnLeft?: boolean,
+  isSmallHeading?: boolean,
+  headingFont?: 'druk' | 'serif',
+  isTwoCol?: boolean,
+) => cnb('mb-0 -mt-01em', {
+  '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk' && isTwoCol,
   'fluid-type-7 md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading && headingFont === 'druk',
   'fluid-type-7 md:fluid-type-9': !isSmallHeading && headingFont === 'druk',
   'fluid-type-6' : headingFont === 'serif' && !isSmallHeading,
   'fluid-type-5' : headingFont === 'serif' && isSmallHeading,
 });
 
-export const customHeading = (imageOnLeft: boolean, headingFont?: 'druk' | 'serif') => cnb('flex flex-wrap gap-x-[1em] items-center mb-0 -mt-05em lg:-mt-08em children:inline-block', {
-  '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk',
+export const customHeading = (
+  imageOnLeft?: boolean,
+  headingFont?: 'druk' | 'serif',
+  isTwoCol?: boolean,
+) => cnb('flex flex-wrap gap-x-[1em] items-center mb-0 -mt-05em lg:-mt-08em children:inline-block', {
+  '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft && headingFont === 'druk' && isTwoCol,
 });
-export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
+export const customHeadingText = (font?: 'druk' | 'serif', isSmallHeading?: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
   'fluid-type-7': font === 'druk',
   'md:fluid-type-9' : font === 'druk' && !isSmallHeading,
   'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]' : font === 'druk' && isSmallHeading,
   'mx-01em md:mx-03em mt-01em fluid-type-4 md:fluid-type-5 font-semibold md:font-normal': font === 'serif',
   'md:type-4 3xl:fluid-type-5' : font === 'serif' && isSmallHeading,
 });
 
-export const bodyWrapper = (imageOnLeft: boolean) => cnb('cc w-full', {
-  '3xl:pr-[calc(100%-750px)] lg:pl-40 2xl:pl-60': imageOnLeft,
-  '3xl:pl-[calc(100%-750px)] lg:pr-40 2xl:pr-60': !imageOnLeft,
+export const bodyWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('cc w-full', {
+  '3xl:pr-[calc(100%-750px)] lg:pl-40 2xl:pl-60': imageOnLeft && isTwoCol,
+  '3xl:pl-[calc(100%-750px)] lg:pr-40 2xl:pr-60': !imageOnLeft && isTwoCol,
+  'children:max-w-prose': !isTwoCol,
 });
 
 export const cta = 'rs-mt-4';
 
-export const imageWrapper = (imageOnLeft: boolean) => cnb('w-full mt-30 md:mt-50 lg:mt-0 shrink-0 cc', {
-  'lg:order-first 3xl:pl-[calc(100%-750px)] lg:pr-0': imageOnLeft,
+export const imageWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb('w-full mt-30 md:mt-50 lg:mt-0 shrink-0 cc', {
+  'lg:order-first 3xl:pl-[calc(100%-750px)] lg:pr-0': imageOnLeft && isTwoCol,
   ' 3xl:pr-[calc(100%-750px)] lg:pl-0': !imageOnLeft,
 });
 export const imageInnerWrapper = 'h-full w-full';

diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -18,6 +18,10 @@ import * as styles from './BlurryPoster.styles';
 
 type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & {
   type?: 'hero' | 'poster';
+  /**
+   * Use two col layout except for story heroes with horizontal foreground image or no foreground image
+   */
+  isTwoCol?: boolean;
   bgImageSrc?: string;
   bgImageFocus?: string;
   bgColor?: 'black' | 'white';
@@ -39,6 +43,7 @@ type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & {
 
 export const BlurryPoster = ({
   type = 'poster',
+  isTwoCol = true,
   bgImageSrc,
   bgImageFocus,
   bgColor = 'black',
@@ -70,20 +75,20 @@ export const BlurryPoster = ({
   return (
     <Container {...props} bgColor={bgColor} width="full" className={styles.root} style={bgImageStyle}>
       <div className={styles.blurWrapper(addDarkOverlay, type, bgColor)}>
-        <Grid lg={2} pt={type === 'hero' ? 9 : 8} pb={8} className={styles.grid}>
+        <Grid lg={isTwoCol ? 2 : 1} pt={type === 'hero' ? 9 : 8} pb={8} className={styles.grid}>
           <div className={styles.contentWrapper(imageOnLeft)}>
-            <FlexBox className={styles.headingWrapper(imageOnLeft, headingFont)}>
+            <FlexBox className={styles.headingWrapper(imageOnLeft, headingFont, isTwoCol)}>
               <AnimateInView
                 animation={imageOnLeft ? 'slideInFromRight' : 'slideInFromLeft'}
-                className={cnb(styles.headingInnerWrapper(imageOnLeft, headingFont), accentBorderColors[tabColor])}
+                className={cnb(styles.headingInnerWrapper(imageOnLeft, headingFont, isTwoCol), accentBorderColors[tabColor])}
               >
                 {/* Render all Druk font heading if custom heading is not entered */}
                 {heading && !customHeading?.length && (
                   <Heading
                     as={headingLevel}
                     font={headingFont}
                     leading={headingFont === 'druk' ? 'none' : 'display'}
-                    className={styles.heading(imageOnLeft, isSmallHeading, headingFont)}
+                    className={styles.heading(imageOnLeft, isSmallHeading, headingFont, isTwoCol)}
                   >
                     {heading}
                   </Heading>
@@ -94,7 +99,7 @@ export const BlurryPoster = ({
                     as={headingLevel}
                     size="base"
                     leading="none"
-                    className={styles.customHeading(imageOnLeft, headingFont)}
+                    className={styles.customHeading(imageOnLeft, headingFont, isTwoCol)}
                   >
                     {customHeading.map(({text, font, italic}) => (
                       <Text
@@ -113,7 +118,7 @@ export const BlurryPoster = ({
                 )}
               </AnimateInView>
             </FlexBox>
-            <div className={styles.bodyWrapper(imageOnLeft)}>
+            <div className={styles.bodyWrapper(imageOnLeft, isTwoCol)}>
               {body && (
                 <Paragraph
                   variant="overview"

diff --git a/components/Hero/StoryHeroMvp.tsx b/components/Hero/StoryHeroMvp.tsx
@@ -120,6 +120,7 @@ export const StoryHeroMvp = ({
     >
       <BlurryPoster
         type="hero"
+        isTwoCol={useTwoColLayout}
         heading={title}
         customHeading={customHeading}
         headingLevel="h1"