Merge branch 'dev' into feature/GIVCAMP-88_data-card

* dev: 1.2.2 GIVCAMP-294 | Basic Hero overlay options and image optimization (#243) HSTS set max-age to 31536000 (#242) 1.2.1 Icon animation (#240) GIVCAMP-304 | Add CTA region to Section and Homepage Theme/Story Section (#239)
SU-SWS · Mar 6, 2024 · 4aed440 · 4aed440
2 parents 9776dd4 + e2ad7fd
commit 4aed440
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 80 deletions.
diff --git a/components/Cta/Cta.styles.ts b/components/Cta/Cta.styles.ts
@@ -131,6 +131,7 @@ export const ctaIconMap: CtaIconMapType = {
 };
 
 export const iconAnimation = {
+  none: '',
   'top-right': 'group-hocus:translate-x-01em group-hocus:-translate-y-01em',
   down: 'group-hocus:translate-y-02em',
   up: 'group-hocus:-translate-y-02em',
@@ -152,6 +153,9 @@ export const iconLeftMarginDefault = 'ml-03em';
 export const iconLeftMargin: CtaIconLeftMarginType = {
   'arrow-right': 'ml-04em',
   back: 'ml-04em',
+  email: 'ml-05em',
+  external: 'ml-04em',
+  link: 'ml-05em',
   'triangle-right': 'ml-04em',
   'triangle-down': 'ml-04em',
   'triangle-up': 'ml-04em',

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/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx
@@ -73,13 +73,14 @@ export const iconBaseStyleDefault = 'w-1em';
 export const iconBaseStyle: IconBaseStyleType = {
   'arrow-left': 'w-09em -mt-01em',
   'arrow-right': 'w-09em -mt-01em',
-  'triangle-right': 'w-09em scale-x-[0.9] mt-01em',
-  'triangle-down': 'w-09em scale-x-[0.9] rotate-90 mt-01em',
-  'triangle-up': 'w-09em scale-x-[0.9] -rotate-90 mt-02em',
-  email: 'w-[1.2em]',
+  'triangle-right': 'w-09em scale-x-90 mt-01em',
+  'triangle-down': 'w-09em scale-x-90 rotate-90 mt-01em',
+  'triangle-up': 'w-09em scale-x-90 -rotate-90 mt-02em',
+  download: 'w-09em',
+  email: 'w-1em',
   external: 'w-08em',
   left: 'w-08em',
-  link: 'w-1em -mt-01em',
+  link: 'w-09em -mt-01em',
   more: 'w-08em',
   plus: 'w-08em',
   right: 'w-08em',

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/SbCta.tsx b/components/Storyblok/SbCta.tsx
@@ -1,8 +1,13 @@
 import { storyblokEditable } from '@storyblok/react/rsc';
-import { CtaLink, type CtaColorType, type CtaVariantType } from '../Cta';
+import {
+  CtaLink,
+  type CtaColorType,
+  type CtaVariantType,
+  type CtaCurveType,
+  type IconAnimationType,
+} from '../Cta';
 import { type IconType } from '../HeroIcon';
 import { type SbLinkType } from './Storyblok.types';
-import { type CtaCurveType } from '../Cta';
 
 type SbCtaType = {
   blok: {
@@ -14,6 +19,7 @@ type SbCtaType = {
     curve?: CtaCurveType;
     isLarge?: boolean;
     icon?: IconType;
+    animation?: IconAnimationType;
   };
 };
 
@@ -26,6 +32,7 @@ export const SbCta = ({
     curve,
     isLarge,
     icon,
+    animation,
   },
   blok,
 }: SbCtaType) => {
@@ -43,6 +50,7 @@ export const SbCta = ({
       color={color}
       srText={srText}
       icon={icon}
+      animate={animation}
     >
       {label}
     </CtaLink>

diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
@@ -2,10 +2,11 @@ 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';
 export const introWrapper = 'cc relative z-20';
 export const intro = 'intro-text *:leading-display *:md:leading-cozy *:text-shadow-sm rs-mt-7 max-w-1000';
 export const contentWrapper = 'relative z-20';
+export const cta = 'relative cc md:flex-row *:mx-auto rs-mt-6 gap-20 lg:gap-27 w-fit';