Change all published date days to numeric instead of forced 2 digit; …

…Vertical Poster styles
SU-SWS · Oct 4, 2023 · 03a6743 · 03a6743
1 parent e571c58
commit 03a6743
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 55 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -51,7 +51,7 @@ export const BlurryPoster = ({
   const date = publishedDate && new Date(publishedDate);
   const formattedDate = date && date.toLocaleDateString('en-US', {
     month: 'long',
-    day: '2-digit',
+    day: 'numeric',
     year: 'numeric',
   });
 

diff --git a/components/Hero/StoryHero.tsx b/components/Hero/StoryHero.tsx
@@ -54,7 +54,7 @@ export const StoryHero = ({
   const formattedDate = date && date.toLocaleDateString('en-US', {
     weekday: 'long',
     month: 'long',
-    day: '2-digit',
+    day: 'numeric',
     year: 'numeric',
   });
 

diff --git a/components/Storyblok/SbVerticalPoster.tsx b/components/Storyblok/SbVerticalPoster.tsx
@@ -11,6 +11,7 @@ type SbVerticalPosterProps = {
     customHeading?: SbTypographyProps[];
     headingLevel?: HeadingType;
     isSmallHeading?: boolean;
+    subheading?: string;
     imageOnLeft?: boolean;
     body: string;
     byline?: string;
@@ -27,6 +28,7 @@ export const SbVerticalPoster = ({
     customHeading,
     headingLevel,
     isSmallHeading,
+    subheading,
     imageOnLeft,
     body,
     byline,
@@ -46,6 +48,7 @@ export const SbVerticalPoster = ({
       customHeading={customHeading}
       headingLevel={headingLevel}
       isSmallHeading={isSmallHeading}
+      subheading={subheading}
       imageOnLeft={imageOnLeft}
       body={body}
       byline={byline}

diff --git a/components/VerticalPoster/VerticalPoster.styles.ts b/components/VerticalPoster/VerticalPoster.styles.ts
@@ -1,31 +1,22 @@
 import { cnb } from 'cnbuilder';
 
-export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden break-words';
+export const root = 'relative overflow-hidden break-words';
 export const blurWrapper = 'w-full h-full backdrop-blur-md';
 
-export const grid = 'w-full rs-py-8';
+export const grid = 'w-full';
 
-export const contentWrapper = (imageOnLeft: boolean) => cnb('relative z-10', {
+export const contentWrapper = (imageOnLeft: boolean) => cnb('relative px-[6vw] py-[8vw]', {
   '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('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', {
-  '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)] 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,
+export const headingWrapper = '-mt-1em rs-mb-5';
+export const heading = (isSmallHeading: boolean) => cnb('mb-0 fluid-type-7', {
   '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,
 });
 
-export const customHeading = (imageOnLeft: 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,
-});
+export const customHeading = 'flex flex-col mb-0 children:block';
 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,
@@ -34,17 +25,12 @@ export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolea
   '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-60': imageOnLeft,
-  '3xl:pl-[calc(100%-750px)] lg:pr-60': !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 imageWrapper = (imageOnLeft: boolean) => cnb('w-full bg-gc-black bg-no-repeat bg-cover bg-center px-[6vw] py-[8vw] mt-30 md:mt-50 lg:mt-0 shrink-0', {
+  'lg:order-first': imageOnLeft,
+  '': !imageOnLeft,
 });
 export const imageInnerWrapper = 'h-full w-full';
-export const image = 'h-full w-full object-cover object-center hidden lg:block';
+export const image = 'h-full w-full max-h-[100rem] object-cover object-center hidden lg:block';
 export const imageMobile = 'h-full w-full object-cover object-center lg:hidden';
diff --git a/components/VerticalPoster/VerticalPoster.tsx b/components/VerticalPoster/VerticalPoster.tsx
@@ -17,6 +17,7 @@ type VerticalPosterProps = HTMLAttributes<HTMLDivElement> & {
   imageOnLeft?: boolean;
   headingLevel?: HeadingType;
   heading?: string;
+  subheading?: string;
   customHeading?: SbTypographyProps[];
   isSmallHeading?: boolean;
   body?: string;
@@ -35,6 +36,7 @@ export const VerticalPoster = ({
   customHeading,
   headingLevel = 'h2',
   isSmallHeading,
+  subheading,
   body,
   byline,
   publishedDate,
@@ -48,34 +50,31 @@ export const VerticalPoster = ({
   const date = publishedDate && new Date(publishedDate);
   const formattedDate = date && date.toLocaleDateString('en-US', {
     month: 'long',
-    day: '2-digit',
+    day: 'numeric',
     year: 'numeric',
   });
 
   return (
-    <Container {...props} bgColor="black" width="full" className={styles.root} style={bgImageStyle}>
+    <Container {...props} bgColor="white" width="full" className={styles.root}>
       <div className={styles.blurWrapper}>
         <Grid lg={2} className={styles.grid}>
-          <div className={styles.contentWrapper(imageOnLeft)}>
-            <FlexBox className={styles.headingWrapper(imageOnLeft)}>
-              <AnimateInView
-                animation={imageOnLeft ? 'slideInFromRight' : 'slideInFromLeft'}
-                className={cnb(styles.headingInnerWrapper(imageOnLeft))}
-              >
+          <FlexBox direction="col" alignItems="center" justifyContent="center" className={styles.contentWrapper(imageOnLeft)}>
+            <FlexBox className={styles.headingWrapper}>
+              <AnimateInView animation='slideUp'>
                 {/* Render all Druk font heading if custom heading is not entered */}
                 {heading && !customHeading && (
                   <Heading
                     font="druk"
-                    color="white"
+                    align="center"
                     leading="none"
-                    className={styles.heading(imageOnLeft, isSmallHeading)}
+                    className={styles.heading(isSmallHeading)}
                   >
                     {heading}
                   </Heading>
                 )}
                 {/* Render custom mixed typography heading if entered */}
                 {customHeading && (
-                  <Heading size="base" leading="none" className={styles.customHeading(imageOnLeft)}>
+                  <Heading size="base" align="center" leading="none" className={styles.customHeading}>
                     {customHeading.map(({text, font, italic}) => (
                       <Text
                         as="span"
@@ -93,24 +92,35 @@ export const VerticalPoster = ({
                 )}
               </AnimateInView>
             </FlexBox>
-            <div className={styles.bodyWrapper(imageOnLeft)}>
-              {body && (
-                <Paragraph variant="overview" weight="normal" 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)}>
+            {subheading && (
+              <Text font="serif" italic size={2} align="center">
+                {subheading}
+              </Text>
+            )}
+            {body && (
+              <Paragraph
+                variant="overview"
+                align="center"
+                weight="normal"
+                leading="display"
+                className="rs-mt-3"
+              >
+                {body}
+              </Paragraph>
+            )}
+            {byline && (
+              <Text align="center">{byline}</Text>
+            )}
+            {date && (
+              <time dateTime={publishedDate} className="text-center">{formattedDate}</time>
+            )}
+            {cta && (
+              <div className={styles.cta}>
+                {cta}
+              </div>
+            )}
+          </FlexBox>
+          <div className={styles.imageWrapper(imageOnLeft)} style={bgImageStyle}>
             {imageSrc && (
               <AnimateInView animation="zoomSharpen" duration={1} className={styles.imageInnerWrapper}>
                 <img