GIVCAMP-233 | Add dark overlay for blurry poster; minor updates (#130)

* Option to add dark overlay on desktop for blurry poster * fixups for blurry poster * linter comma
SU-SWS · Oct 5, 2023 · 2e824d5 · 2e824d5
1 parent 53b5025
commit 2e824d5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -1,7 +1,10 @@
 import { cnb } from 'cnbuilder';
 
 export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden break-words';
-export const blurWrapper = 'w-full h-full backdrop-blur-md';
+export const blurWrapper = (addDarkOverlay: boolean) => cnb(
+  'w-full h-full backdrop-blur-md bg-gradient-to-b from-black-true/40',
+  addDarkOverlay ? 'lg:from-black-true/30' : 'lg:bg-none',
+);
 
 export const grid = 'w-full rs-py-8';
 
@@ -19,8 +22,8 @@ export const headingInnerWrapper = (imageOnLeft: boolean) => cnb('w-full border-
 });
 export const heading = (imageOnLeft: boolean, isSmallHeading: boolean) => cnb('mb-0 -mt-01em fluid-type-7', {
   '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft,
-  'mt-01em md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading,
-  'mt-01em md:fluid-type-9': !isSmallHeading,
+  'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading,
+  'md:fluid-type-9': !isSmallHeading,
 });
 
 export const customHeading = (imageOnLeft: boolean) => cnb('flex flex-wrap gap-x-[1em] items-center mb-0 -mt-05em lg:-mt-08em children:inline-block', {

diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -20,6 +20,7 @@ type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & {
   heading?: string;
   customHeading?: SbTypographyProps[];
   isSmallHeading?: boolean;
+  addDarkOverlay?: boolean;
   body?: string;
   byline?: string;
   publishedDate?: string;
@@ -37,6 +38,7 @@ export const BlurryPoster = ({
   customHeading,
   headingLevel = 'h2',
   isSmallHeading,
+  addDarkOverlay,
   body,
   byline,
   publishedDate,
@@ -57,7 +59,7 @@ export const BlurryPoster = ({
 
   return (
     <Container {...props} bgColor="black" width="full" className={styles.root} style={bgImageStyle}>
-      <div className={styles.blurWrapper}>
+      <div className={styles.blurWrapper(addDarkOverlay)}>
         <Grid lg={2} className={styles.grid}>
           <div className={styles.contentWrapper(imageOnLeft)}>
             <FlexBox className={styles.headingWrapper(imageOnLeft)}>
@@ -66,7 +68,7 @@ export const BlurryPoster = ({
                 className={cnb(styles.headingInnerWrapper(imageOnLeft), accentBorderColors[tabColor])}
               >
                 {/* Render all Druk font heading if custom heading is not entered */}
-                {heading && !customHeading && (
+                {heading && !customHeading?.length && (
                   <Heading
                     font="druk"
                     color="white"
@@ -77,7 +79,7 @@ export const BlurryPoster = ({
                   </Heading>
                 )}
                 {/* Render custom mixed typography heading if entered */}
-                {customHeading && (
+                {!!customHeading?.length && (
                   <Heading size="base" leading="none" className={styles.customHeading(imageOnLeft)}>
                     {customHeading.map(({text, font, italic}) => (
                       <Text

diff --git a/components/Storyblok/SbBlurryPoster.tsx b/components/Storyblok/SbBlurryPoster.tsx
@@ -13,6 +13,7 @@ type SbBlurryPosterProps = {
     headingLevel?: HeadingType;
     isSmallHeading?: boolean;
     imageOnLeft?: boolean;
+    addDarkOverlay?: boolean;
     body: string;
     byline?: string;
     publishedDate?: string;
@@ -32,6 +33,7 @@ export const SbBlurryPoster = ({
     headingLevel,
     isSmallHeading,
     imageOnLeft,
+    addDarkOverlay,
     body,
     byline,
     publishedDate,
@@ -52,6 +54,7 @@ export const SbBlurryPoster = ({
       headingLevel={headingLevel}
       isSmallHeading={isSmallHeading}
       imageOnLeft={imageOnLeft}
+      addDarkOverlay={addDarkOverlay}
       body={body}
       byline={byline}
       publishedDate={publishedDate}