GIVCAMP-294 | Basic Hero overlay options and image optimization (#243)

* Basic Hero gradient and better image processing * Make conditionals better
SU-SWS · Mar 6, 2024 · 192620b · 192620b
1 parent 2a4633c
commit 192620b
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 68 deletions.
diff --git a/components/Hero/BasicHero.styles.ts b/components/Hero/BasicHero.styles.ts
@@ -9,8 +9,12 @@ export const heroPaddings = {
 export type HeroPaddingType = keyof typeof heroPaddings;
 
 export const root = 'relative break-words bg-black-70';
+
+export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
+export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b via-50%' : '');
+
 export const contentWrapper = '*:mx-auto';
-export const superhead = 'relative z-10 xl:max-w-900 mx-auto rs-mb-0';
+export const superhead = 'relative z-10 xl:max-w-900 mx-auto rs-mb-0 text-shadow-sm';
 export const heading = (isDrukHeading: boolean, isSmallHeading: boolean) => cnb('relative z-10 max-w-1200 mx-auto mb-0 text-balance', {
   'fluid-type-7 md:fluid-type-8': isDrukHeading && isSmallHeading,
   'fluid-type-7 md:gc-splash': isDrukHeading && !isSmallHeading,

diff --git a/components/Hero/BasicHero.tsx b/components/Hero/BasicHero.tsx
@@ -3,6 +3,16 @@ import { Container } from '@/components/Container';
 import { Heading, SrOnlyText, Text } from '@/components/Typography';
 import { ImageOverlay } from '@/components/ImageOverlay';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
+import {
+  gradientFroms,
+  type GradientFromType,
+  gradientTos,
+  type GradientToType,
+  gradientVias,
+  type GradientViaType,
+  bgBlurs,
+  type BgBlurType,
+} from '@/utilities/datasource';
 import * as styles from './BasicHero.styles';
 
 /**
@@ -16,6 +26,10 @@ type BasicHeroProps = {
   subheading?: string;
   imageSrc?: string;
   imageFocus?: string;
+  gradientTop?: GradientToType;
+  gradientBottom?: GradientFromType;
+  gradientVia?: GradientViaType;
+  bgBlur?: BgBlurType;
   heroContent?: React.ReactNode;
   paddingType?: styles.HeroPaddingType;
 };
@@ -28,72 +42,113 @@ export const BasicHero = ({
   subheading,
   imageSrc,
   imageFocus,
+  gradientTop,
+  gradientBottom,
+  gradientVia,
+  bgBlur,
   heroContent,
   paddingType,
-}: BasicHeroProps) => (
-  <Container
-    width="full"
-    bgColor={imageSrc ? undefined : 'black'}
-    className={cnb(styles.root, styles.heroPaddings[paddingType])}
-  >
-    {imageSrc && (
-      <>
-        <ImageOverlay
-          imageSrc={getProcessedImage(imageSrc, '2000x1000', imageFocus)}
-          overlay="black-40"
-          className="z-0 hidden xl:block"
-          overlayClasses="hidden xl:block"
-        />
-        <ImageOverlay
-          imageSrc={getProcessedImage(imageSrc, '1200x900', imageFocus)}
-        overlay="black-40"
-          className="z-0 xl:hidden"
-          overlayClasses="xl:hidden"
+}: BasicHeroProps) => {
+  // To render a dark overlay, both a top and bottom gradient color must be selected
+  const hasBgGradient = !!gradientTop && !!gradientBottom;
+  const hasBgBlur = !!bgBlur && bgBlur !== 'none';
+
+  return (
+    <Container
+      width="full"
+      bgColor={imageSrc ? undefined : 'black'}
+      className={cnb(styles.root, styles.heroPaddings[paddingType])}
+    >
+      {!!imageSrc && (
+        <picture>
+          <source
+            srcSet={getProcessedImage(imageSrc, hasBgBlur ? '1000x500' : '2000x1000', imageFocus)}
+            media="(min-width: 1200px)"
+            // Exact height and width don't matter as long as aspect ratio is the same as the image
+            width={2000}
+            height={1000}
+          />
+          <source
+            srcSet={getProcessedImage(imageSrc, hasBgBlur ? '600x400' : '1200x800', imageFocus)}
+            media="(min-width: 768px)"
+            width={1200}
+            height={800}
+          />
+          <source
+            srcSet={getProcessedImage(imageSrc, hasBgBlur ? '400x300' : '800x600', imageFocus)}
+            media="(min-width: 461px)"
+            width={800}
+            height={600}
+          />
+          <source
+            srcSet={getProcessedImage(imageSrc, hasBgBlur ? '240x240' : '480x480', imageFocus)}
+            media="(max-width: 460px)"
+            width={480}
+            height={480}
+          />
+          <img
+            src={getProcessedImage(imageSrc, hasBgBlur ? '1000x500' : '2000x1000', imageFocus)}
+            alt=""
+            width={2000}
+            height={1000}
+            className={styles.bgImage}
+          />
+        </picture>
+      )}
+      {!!imageSrc && (hasBgBlur || hasBgGradient) && (
+        <div
+          className={cnb(
+            styles.overlay(hasBgGradient),
+            bgBlurs[bgBlur],
+            gradientFroms[gradientTop],
+            gradientVias[gradientVia],
+            gradientTos[gradientBottom],
+          )}
         />
-      </>
-    )}
-    <Container className={styles.contentWrapper}>
-      {superhead && (
-        <Text
-          size={3}
-          font="serif"
-          weight="bold"
-          align="center"
-          leading="tight"
-          color="white"
-          aria-hidden
-          className={styles.superhead}
-        >
-          {superhead}
-        </Text>
       )}
-      <Heading
-        as="h1"
-        font={isDrukHeading ? 'druk' : 'serif'}
-        weight={isDrukHeading ? 'black' : 'bold'}
-        align="center"
-        leading={isDrukHeading ? 'none' : 'tight'}
-        color="white"
-        className={styles.heading(isDrukHeading, isSmallHeading)}
-      >
-        {superhead && <SrOnlyText>{`${superhead}: `}</SrOnlyText>}{title}
-      </Heading>
-      {subheading && (
-        <Text
-          size={2}
+      <Container className={styles.contentWrapper}>
+        {superhead && (
+          <Text
+            size={3}
+            font="serif"
+            weight="bold"
+            align="center"
+            leading="tight"
+            color="white"
+            aria-hidden
+            className={styles.superhead}
+          >
+            {superhead}
+          </Text>
+        )}
+        <Heading
+          as="h1"
+          font={isDrukHeading ? 'druk' : 'serif'}
+          weight={isDrukHeading ? 'black' : 'bold'}
           align="center"
-          leading="display"
+          leading={isDrukHeading ? 'none' : 'tight'}
           color="white"
-          className={styles.subhead}
+          className={styles.heading(isDrukHeading, isSmallHeading)}
         >
-          {subheading}
-        </Text>
-      )}
-      {!!heroContent && (
-        <div className={styles.content}>
-          {heroContent}
-        </div>
-      )}
+          {superhead && <SrOnlyText>{`${superhead}: `}</SrOnlyText>}{title}
+        </Heading>
+        {subheading && (
+          <Text
+            size={2}
+            align="center"
+            leading="display"
+            color="white"
+            className={styles.subhead}
+          >
+            {subheading}
+          </Text>
+        )}
+        {!!heroContent && (
+          <div className={styles.content}>
+            {heroContent}
+          </div>
+        )}
+      </Container>
     </Container>
-  </Container>
-);
+  );
+};
diff --git a/components/MomentPoster/MomentPoster.styles.ts b/components/MomentPoster/MomentPoster.styles.ts
@@ -4,7 +4,7 @@ export const root = 'relative overflow-hidden';
 export const wrapper = 'relative w-full z-10';
 
 export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
-export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-t via-50%' : '');
+export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b via-50%' : '');
 
 export const contentWrapper = 'lg:rs-pr-9 ml-0';
 

diff --git a/components/MomentPoster/MomentPoster.tsx b/components/MomentPoster/MomentPoster.tsx
@@ -100,9 +100,9 @@ export const MomentPoster = ({
           className={cnb(
             styles.overlay(hasBgGradient),
             bgBlurs[bgBlur],
-            gradientFroms[gradientBottom],
+            gradientFroms[gradientTop],
             gradientVias[gradientVia],
-            gradientTos[gradientTop],
+            gradientTos[gradientBottom],
           )}
         />
       )}

diff --git a/components/Storyblok/SbBasicPage.tsx b/components/Storyblok/SbBasicPage.tsx
@@ -5,6 +5,12 @@ import { Masthead } from '@/components/Masthead';
 import { getNumBloks } from '@/utilities/getNumBloks';
 import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
 import { type HeroPaddingType } from '@/components/Hero/BasicHero.styles';
+import {
+  type GradientFromType,
+  type GradientToType,
+  type GradientViaType,
+  BgBlurType,
+} from '@/utilities/datasource';
 
 type SbBasicPageProps = {
   blok: {
@@ -14,6 +20,10 @@ type SbBasicPageProps = {
     isSmallHeading?: boolean;
     hero?: SbBlokData[];
     heroImage?: SbImageType;
+    gradientTop?: GradientToType;
+    gradientBottom?: GradientFromType;
+    gradientVia?: GradientViaType;
+    bgBlur?: BgBlurType;
     paddingType?: HeroPaddingType;
     superhead?: string;
     subheading?: string;
@@ -30,6 +40,10 @@ export const SbBasicPage = ({
     isSmallHeading,
     hero,
     heroImage: { filename, focus } = {},
+    gradientTop,
+    gradientBottom,
+    gradientVia,
+    bgBlur,
     paddingType,
     superhead,
     subheading,
@@ -56,6 +70,10 @@ export const SbBasicPage = ({
             subheading={subheading}
             imageSrc={filename}
             imageFocus={focus}
+            gradientTop={gradientTop}
+            gradientBottom={gradientBottom}
+            gradientVia={gradientVia}
+            bgBlur={bgBlur}
             heroContent={HeroContent}
             paddingType={paddingType}
           />

diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
@@ -2,7 +2,7 @@ import { cnb } from 'cnbuilder';
 
 export const root = 'relative overflow-hidden';
 export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
-export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-t' : '');
+export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b' : '');
 export const header = 'relative overflow-hidden cc 3xl:px-100 4xl:px-[calc((100%-1800px)/2)] z-20';
 export const superhead = 'text-shadow-sm';
 export const heading = 'fluid-type-7 md:gc-splash mb-0 whitespace-pre-line';

diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
@@ -97,8 +97,8 @@ export const SbHomepageThemeSection = ({
               className={cnb(
                 styles.overlay(hasBgGradient),
                 bgBlurs[bgBlur],
-                gradientFroms[gradientBottom],
-                gradientTos[gradientTop],
+                gradientFroms[gradientTop],
+                gradientTos[gradientBottom],
               )}
             />
           )}