GIVCAMP-201 | Blurry poster options and responsive (#124)

* Blurry poster tab WIP * keep tweaking * centered container stuff * More tab padding update * I think we're almost there * More finetuning * Clean up
SU-SWS · Sep 30, 2023 · 840edbb · 840edbb
1 parent f40532a
commit 840edbb
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 50 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -1,17 +1,38 @@
 import { cnb } from 'cnbuilder';
 
-export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden';
+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 heading = (imageOnLeft: boolean) => cnb('lg:rs-mt-7 rs-mb-5 lg:w-[140%]', {
-  'lg:ml-[-40%]': imageOnLeft,
+export const grid = 'w-full rs-py-8';
+
+export const contentWrapper = (imageOnLeft: boolean) => cnb('relative z-10', {
+  'lg:order-last': imageOnLeft,
+  'lg:order-first': !imageOnLeft,
+});
+
+export const headingWrapper = (imageOnLeft: boolean) => cnb('lg:rs-mt-7 rs-mb-5', {
+  'lg:w-[120%] lg:-ml-[20%] 3xl:w-auto 3xl:-ml-200 lg:mr-0' : imageOnLeft,
+});
+export const headingInnerWrapper = (imageOnLeft: boolean) => cnb('pl-10 pr-20 sm:pl-30 sm:pr-20 md:pl-30 md:pr-50', {
+  'border-l-[1rem] 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,
+  'border-l-[1rem] md:border-l-[2rem] lg:border-l-[3rem] xl:border-l-[4rem] lg:pl-50 xl:pl-60 lg:pr-0 3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[120%]': !imageOnLeft,
+});
+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,
+  'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading,
+  'md:fluid-type-9': !isSmallHeading,
 });
 
-export const contentWrapper = (imageOnLeft: boolean) => cnb('z-10', {
-  'order-last lg:rs-pl-4': imageOnLeft,
-  'order-first lg:rs-pr-2': !imageOnLeft,
+export const bodyWrapper = (imageOnLeft: boolean) => cnb('cc w-full', {
+  '3xl:pr-[calc(100%-750px)] lg:pl-60': imageOnLeft,
+  '3xl:pl-[calc(100%-750px)] lg:pr-60': !imageOnLeft,
 });
 
-export const imageWrapper = (imageOnLeft: boolean) => cnb('', {
-  'order-first': imageOnLeft,
+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,
+  ' 3xl:pr-[calc(100%-750px)] lg:pl-0': !imageOnLeft,
 });
+export const image = 'h-full w-full object-cover object-center hidden lg:block';
+export const imageMobile = 'h-full w-full object-cover object-center lg:hidden';
diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -1,12 +1,14 @@
 import { HTMLAttributes } from 'react';
+import { cnb } from 'cnbuilder';
 import { Container } from '../Container';
 import { Grid } from '../Grid';
+import { FlexBox } from '../FlexBox';
 import {
   Heading, Paragraph, Text, type HeadingType,
 } from '../Typography';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import * as styles from './BlurryPoster.styles';
-import { image } from '../Banner';
+import { accentBorderColors, type AccentColorType } from '@/utilities/datasource';
 
 type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & {
   bgImageSrc?: string;
@@ -15,12 +17,12 @@ type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & {
   headingLevel?: HeadingType;
   heading?: string;
   isSmallHeading?: boolean;
-  customHeading?: React.ReactNode;
   body?: string;
   byline?: string;
   publishedDate?: string;
   imageSrc?: string;
   imageFocus?: string;
+  tabColor?: AccentColorType;
   cta?: React.ReactNode;
 };
 
@@ -31,12 +33,12 @@ export const BlurryPoster = ({
   heading,
   headingLevel = 'h2',
   isSmallHeading,
-  customHeading,
   body,
   byline,
   publishedDate,
   imageSrc,
   imageFocus,
+  tabColor,
   cta,
   className,
   ...props
@@ -52,45 +54,54 @@ export const BlurryPoster = ({
   return (
     <Container {...props} bgColor="black" width="full" className={styles.root} style={bgImageStyle}>
       <div className={styles.blurWrapper}>
-        <Grid lg={2} className="cc rs-py-8">
+        <Grid lg={2} className={styles.grid}>
           <div className={styles.contentWrapper(imageOnLeft)}>
-            {heading &&  (
-              <Heading
-                size={isSmallHeading ? 'f8' : 'f9'}
-                font="druk"
-                color="white"
-                leading="none"
-                className={styles.heading(imageOnLeft)}
-              >
-                {heading}
-              </Heading>
-            )}
-            {customHeading && (
-              <div className="rs-mt-7 rs-mb-5">
-                {customHeading}
-              </div>
-            )}
-            {body && (
-              <Paragraph size={2} color="white" leading="display">{body}</Paragraph>
-            )}
-            {byline && (
-              <Text>{byline}</Text>
-            )}
-            {date && (
-              <time dateTime={publishedDate}>{formattedDate}</time>
-            )}
-            {cta && (
-              <div className="rs-mt-4">
-                {cta}
-              </div>
-            )}
+            <FlexBox className={styles.headingWrapper(imageOnLeft)}>
+              {heading &&  (
+                <div className={cnb(styles.headingInnerWrapper(imageOnLeft), accentBorderColors[tabColor])}>
+                  <Heading
+                    font="druk"
+                    color="white"
+                    leading="none"
+                    className={styles.heading(imageOnLeft, isSmallHeading)}
+                  >
+                    {heading}
+                  </Heading>
+                </div>
+              )}
+            </FlexBox>
+            <div className={styles.bodyWrapper(imageOnLeft)}>
+              {body && (
+                <Paragraph size={2} color="white" leading="display">{body}</Paragraph>
+              )}
+              {byline && (
+                <Text>{byline}</Text>
+              )}
+              {date && (
+                <time dateTime={publishedDate}>{formattedDate}</time>
+              )}
+              {cta && (
+                <div className={styles.cta}>
+                  {cta}
+                </div>
+              )}
+            </div>
           </div>
           <div className={styles.imageWrapper(imageOnLeft)}>
-            <img
-              src={getProcessedImage(imageSrc, '1200x1600', imageFocus)}
-              alt=""
-              className="h-full w-full object-cover object-center"
-            />
+            {imageSrc && (
+              <>
+                <img
+                  src={getProcessedImage(imageSrc, '900x1200', imageFocus)}
+                  alt=""
+                  className={styles.image}
+                />
+                <img
+                  src={getProcessedImage(imageSrc, '800x400', imageFocus)}
+                  alt=""
+                  className={styles.imageMobile}
+                />
+              </>
+            )}
           </div>
         </Grid>
       </div>

diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx
@@ -94,7 +94,7 @@ export const HomepageSplitHero = () => {
               <span className="italic">We’re</span> all in this <span className="italic">together</span>.
             </Heading>
           </AnimateInView>
-          <AnimateInView delay={0.2} animation="slideUp" className="max-w-1200 rs-ml-0">
+          <AnimateInView delay={0.2} animation="slideUp" className="max-w-1200 xl:ml-08em">
             <Paragraph size={2} weight="normal" leading="snug" className="max-w-1000 ml-0 mr-auto">
               Sustaining a thriving planet. Accelerating solutions and empowering the next generation of leaders.
             </Paragraph>

diff --git a/components/Storyblok/SbBlurryPoster.tsx b/components/Storyblok/SbBlurryPoster.tsx
@@ -3,6 +3,7 @@ import { BlurryPoster } from '../BlurryPoster';
 import { CreateBloks } from '../CreateBloks';
 import { type HeadingType } from '../Typography';
 import { type SbImageType } from './Storyblok.types';
+import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin';
 
 type SbBlurryPosterProps = {
   blok: {
@@ -17,6 +18,9 @@ type SbBlurryPosterProps = {
     cta?: SbBlokData[];
     image?: SbImageType;
     bgImage?: SbImageType;
+    tabColor?: {
+      value?: PaletteAccentHexColorType;
+    }
   }
 };
 
@@ -32,6 +36,7 @@ export const SbBlurryPoster = ({
     cta,
     image: { filename, focus } = {},
     bgImage: { filename: bgImageSrc, focus: bgImageFocus } = {},
+    tabColor: { value: tabColorValue } = {},
   },
   blok,
 }: SbBlurryPosterProps) => {
@@ -52,6 +57,7 @@ export const SbBlurryPoster = ({
       imageFocus={focus}
       bgImageSrc={bgImageSrc}
       bgImageFocus={bgImageFocus}
+      tabColor={paletteAccentColors[tabColorValue]}
     />
   );
 };
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
@@ -1,5 +1,5 @@
 import { cnb } from 'cnbuilder';
-import { storyblokEditable } from '@storyblok/react/rsc';
+import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { CreateBloks } from '../CreateBloks';
 import { FlexBox } from '../FlexBox';
 import {
@@ -12,7 +12,7 @@ import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities
 type SbSectionProps = {
   blok: {
     _uid: string;
-    content?: any[];
+    content?: SbBlokData[];
     superhead?: string;
     heading?: string;
     headingLevel?: HeadingType;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -30,5 +30,6 @@ export default {
     require('@tailwindcss/container-queries'),
     require(`${dir}/base/gc-base.js`)(),
     require(`${dir}/components/gc-typography.js`)(),
+    require(`${dir}/components/layout.js`)(),
   ],
 } satisfies Config;
diff --git a/tailwind/plugins/components/layout.js b/tailwind/plugins/components/layout.js
@@ -0,0 +1,45 @@
+/**
+ * Half centered container.
+ */
+module.exports = function () {
+  return function ({ addComponents, theme }) {
+    // Find and set the padding based on the screen margins
+    const screens = theme('screens');
+    const paddingLeft = {};
+    const paddingRight = {};
+
+    // Create padding for each screen size which equals to the screen margin setting.
+    const keys = Object.keys(screens);
+    keys.forEach((key) => {
+      paddingLeft[`@screen ${key}`] = {
+        paddingLeft: theme(`decanter.screenMargins.${key}`),
+      };
+    });
+    keys.forEach((key) => {
+      paddingRight[`@screen ${key}`] = {
+        paddingRight: theme(`decanter.screenMargins.${key}`),
+      };
+    });
+
+    const components = {
+      '.cc-left': {
+        paddingLeft: theme('decanter.screenMargins.xs'),
+        marginLeft: 0,
+        ...paddingLeft,
+        '@media only screen and (min-width: 1700px)': {
+          paddingLeft: 'calc(100% - 750px)',
+        },
+      },
+      '.cc-right': {
+        paddingRight: theme('decanter.screenMargins.xs'),
+        marginRight: 0,
+        ...paddingRight,
+        '@media only screen and (min-width: 1700px)': {
+          paddingRight: 'calc(100% - 750px)',
+        },
+      },
+    };
+
+    addComponents(components);
+  };
+};