GIVCAMP-220 | Grid options and story card section layouts (#128)

* Tweak section light overlay; add width option for SbGrid * Option to right align section header * Add grid options to achieve story layouts; disable next image element warning; Update SbGrid and sbWysiwyg to use boundingWidth + width options * Bracket card update now that Sections content have full width instead of centered container width * Story card font size and spacing; layout tweaks * more tweak
SU-SWS · Oct 4, 2023 · 688270a · 688270a
1 parent 3b34e65
commit 688270a
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 46 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -42,6 +42,7 @@
     "import/no-unresolved": 0,
     "import/export": 0,
     "func-names": 0,
-    "semi": [1, "always"] // 1 is for warning
+    "semi": [1, "always"], // 1 is for warning
+    "@next/next/no-img-element": 0
   }
 }
diff --git a/components/BracketCard/BracketCard.styles.ts b/components/BracketCard/BracketCard.styles.ts
@@ -1,6 +1,6 @@
 import { cnb } from 'cnbuilder';
 
-export const root = 'group relative mx-auto';
+export const root = 'group relative mx-auto w-full';
 export const grid = (textOnLeft: boolean) => cnb(
   'flex -mt-[40vw] sm:mt-0 sm:ml-0 w-[calc(100%_+_7rem)] sm:w-full sm:grid sm:grid-cols-12 sm:absolute sm:top-0 sm:bottom-[4vw] 3xl:bottom-70',
   textOnLeft ? '-mr-70' : '-ml-70',

diff --git a/components/Grid/Grid.styles.ts b/components/Grid/Grid.styles.ts
@@ -50,6 +50,8 @@ export const gridNumCols = {
   },
 };
 
+export const rtl = '[direction:rtl] children:[direction:ltr]';
+
 export const gridGaps = {
   default: 'grid-gap',
   card: 'grid-gap gap-y-50 xl:gap-y-70',
@@ -92,7 +94,7 @@ export const gridAlignItems = {
 };
 
 // Styles for the alternating grid
-export const alternatingGridWrapper = 'relative mx-auto';
+export const alternatingGridWrapper = 'relative mx-auto cc';
 
 export const centerline = 'hidden md:block w-2 absolute top-0 left-1/2 -ml-1 h-full origin-top bg-current';
 

diff --git a/components/Grid/Grid.tsx b/components/Grid/Grid.tsx
@@ -12,6 +12,7 @@ import * as types from './Grid.types';
 export type GridProps = HTMLAttributes<HTMLElement> & {
   as?: types.GridElementType;
   gap?: types.GridGapType;
+  rtl?: boolean;
   xs?: types.GridNumColsType;
   sm?: types.GridNumColsType;
   md?: types.GridNumColsType;
@@ -30,6 +31,7 @@ export type GridProps = HTMLAttributes<HTMLElement> & {
 export const Grid = ({
   as: AsComponent = 'div',
   gap,
+  rtl,
   xs,
   sm,
   md,
@@ -52,6 +54,7 @@ export const Grid = ({
     className={cnb(
       'grid',
       gap ? styles.gridGaps[gap] : '',
+      rtl ? styles.rtl : '',
       xs ? styles.gridNumCols.xs[xs] : '',
       sm ? styles.gridNumCols.sm[sm] : '',
       md ? styles.gridNumCols.md[md] : '',

diff --git a/components/ImageOverlay.tsx b/components/ImageOverlay.tsx
@@ -11,7 +11,7 @@ export const overlays = {
   'black-gradient-dark': 'bg-gradient-to-b from-transparent via-black-true/30 to-black-true/80',
   'black-top-bottom': 'bg-gradient-to-b from-gc-black via-transparent via-40% to-gc-black',
   'black-top-sm': 'bg-gradient-to-b from-gc-black via-periwinkle via-20% to-transparent',
-  'white-70': 'bg-white/70',
+  'white-90': 'bg-white/90',
 };
 export type OverlayType = keyof typeof overlays | '';
 

diff --git a/components/Storyblok/SbGrid.tsx b/components/Storyblok/SbGrid.tsx
@@ -1,11 +1,16 @@
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { Grid, type GridGapType, type GridNumColsType } from '../Grid';
+import { WidthBox, type WidthType } from '../WidthBox';
 import { CreateBloks } from '../CreateBloks';
 
 type SbGridProps = {
   blok: {
     _uid: string;
     gap?: GridGapType;
+    boundingWidth?: 'site' | 'full';
+    width?: WidthType;
+    align?: 'left' | 'center';
+    rtl?: boolean;
     items: SbBlokData[];
     /**
      * Currently we're only providing 1-4 columns in Storyblok even though GridNumColsType also supports 6 and 12
@@ -23,6 +28,10 @@ type SbGridProps = {
 export const SbGrid = ({
   blok: {
     gap,
+    boundingWidth = 'full',
+    width,
+    align,
+    rtl,
     items,
     xs,
     sm,
@@ -33,16 +42,23 @@ export const SbGrid = ({
   },
   blok,
 }: SbGridProps) => (
-  <Grid
-    xs={xs}
-    sm={sm}
-    md={md}
-    lg={lg}
-    xl={xl}
-    xxl={xxl}
-    gap={gap}
+  <WidthBox
     {...storyblokEditable(blok)}
+    boundingWidth={boundingWidth}
+    width={width}
+    align={align}
   >
-    <CreateBloks blokSection={items} />
-  </Grid>
+    <Grid
+      xs={xs}
+      sm={sm}
+      md={md}
+      lg={lg}
+      xl={xl}
+      xxl={xxl}
+      gap={gap}
+      rtl={rtl}
+    >
+      <CreateBloks blokSection={items} />
+    </Grid>
+  </WidthBox>
 );
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
@@ -21,6 +21,7 @@ type SbSectionProps = {
     isSmallHeading?: boolean;
     headingLevel?: HeadingType;
     subheading?: string;
+    rightAlignHeader?: boolean;
     barColor?: {
       value?: PaletteAccentHexColorType;
     }
@@ -39,6 +40,7 @@ export const SbSection = ({
     isSmallHeading,
     headingLevel,
     subheading,
+    rightAlignHeader,
     barColor: { value: barColorValue } = {},
     bgColor,
     bgImage: { filename, focus } = {},
@@ -56,25 +58,27 @@ export const SbSection = ({
     className="relative overflow-hidden"
   >
     {filename && (
-      <ImageOverlay imageSrc={getProcessedImage(filename, '2000x1600', focus)} overlay={bgColor === 'black' ? 'black-70' : 'white-70'} />
+      <ImageOverlay imageSrc={getProcessedImage(filename, '2000x1600', focus)} overlay={bgColor === 'black' ? 'black-70' : 'white-90'} />
     )}
     {(heading || superhead) && (
-      <FlexBox className="relative z-10">
+      <FlexBox className={cnb('relative z-10', rightAlignHeader ? 'mr-0 ml-auto' : 'ml-0')}>
         {barColorValue && (
           <div className={cnb(
-            'block w-8 md:w-20 lg:w-40',
+            'block w-10 sm:w-14 md:w-20 lg:w-30 xl:w-40',
+            rightAlignHeader ? 'order-last' : 'order-first',
             accentBgColors[paletteAccentColors[barColorValue]],
           )}
           />
         )}
         <div className={cnb(
-          'cc whitespace-pre-line w-full 3xl:max-w-3/5',
-          barColorValue ? '-ml-8 md:-ml-20 lg:-ml-40' : '',
+          'cc whitespace-pre-line w-full 3xl:max-w-[90%]',
+          barColorValue && !rightAlignHeader ? '-ml-10 sm:-ml-14 md:-ml-20 lg:-ml-30 xl:-ml-40' : '',
+          barColorValue && rightAlignHeader ? '-mr-10 sm:-mr-14 md:-mr-20 lg:-mr-30 xl:-mr-40' : '',
           superhead ? '' : '-mt-05em',
         )}
         >
           {superhead && (
-            <Text size={2} leading="tight" font="serif" weight="semibold" aria-hidden>
+            <Text size={2} leading="tight" font="serif" weight="semibold" align={rightAlignHeader ? 'right' : 'left'} aria-hidden>
               {superhead}
             </Text>
           )}
@@ -85,6 +89,7 @@ export const SbSection = ({
               leading="none"
               uppercase
               font="druk"
+              align={rightAlignHeader ? 'right' : 'left'}
               className="mb-0"
             >
               {superhead && <SrOnlyText>{`${superhead}:`}</SrOnlyText>}{heading}
@@ -98,15 +103,16 @@ export const SbSection = ({
         <Paragraph
           variant="overview"
           weight="normal"
+          align={rightAlignHeader ? 'right' : 'left'}
           color={bgColor === 'black' ? 'black-20' : 'black-80'}
           noMargin
-          className="relative z-10 max-w-prose ml-0 rs-mt-3"
+          className={cnb('relative z-10 max-w-prose ml-0 rs-mt-3', rightAlignHeader ? 'mr-0 ml-auto' : 'ml-0')}
         >
           {subheading}
         </Paragraph>
       </Container>
     )}
-    <Container className="rs-mt-8">
+    <Container pt={8} width="full">
       <CreateBloks blokSection={content} isDarkTheme={bgColor === 'black'} />
     </Container>
   </Container>

diff --git a/components/Storyblok/SbWysiwyg.tsx b/components/Storyblok/SbWysiwyg.tsx
@@ -12,6 +12,7 @@ type SbWysiwygProps = {
     // TODO: I might remove this option and just pass down the color from the parent
     isLightText?: boolean;
     textAlign?: TextAlignType;
+    boundingWidth?: 'site' | 'full';
     width?: WidthType;
     spacingTop?: PaddingType;
     spacingBottom?: PaddingType;
@@ -24,7 +25,8 @@ export const SbWysiwyg = ({
     content,
     isLightText,
     textAlign,
-    width = 'full',
+    boundingWidth = 'full',
+    width,
     spacingTop,
     spacingBottom,
   },
@@ -33,6 +35,7 @@ export const SbWysiwyg = ({
 }: SbWysiwygProps) => (
   <WidthBox
     {...storyblokEditable(blok)}
+    boundingWidth={boundingWidth}
     width={width}
     pt={spacingTop}
     pb={spacingBottom}

diff --git a/components/VerticalCard/VerticalCard.styles.tsx b/components/VerticalCard/VerticalCard.styles.tsx
@@ -1,15 +1,15 @@
 import { cnb } from 'cnbuilder';
 
-export const root = '@container relative z-10 sm:max-w-500 md:max-w-full mx-auto';
+export const root = '@container relative z-10 max-w-[32rem] sm:max-w-400 md:max-w-full mx-auto';
 
-export const cardWrapper = 'relative group @200:text-15 @xs:!type-0';
+export const cardWrapper = 'relative group @200:text-17 @320:!type-0';
 
 export const imageWrapper = 'transition-all aspect-w-1 aspect-h-1 overflow-hidden';
 
 export const image = 'object-cover w-full h-full group-hocus-within:scale-105 transition-transform';
 
 export const heading = (hasTabColor: boolean) => cnb('rs-mt-1 pr-18 rs-mb-neg1 text-current', {
-  '@200:border-l-[1.2rem] @xs:border-l-[1.8rem] @200:px-12 @xs:px-18': hasTabColor,
+  '@200:border-l-[1.2rem] @xs:border-l-[1.8rem] @200:px-16 @320:pr-30 @xs:pl-20 @xs:pr-36': hasTabColor,
 });
 
 export const headingLink = 'stretched-link no-underline !font-bold !leading-tight';

diff --git a/components/VerticalCard/VerticalCard.tsx b/components/VerticalCard/VerticalCard.tsx
@@ -69,7 +69,7 @@ export const VerticalCard = ({
         {heading && (
           <Heading
             as={headingLevel}
-            size={isSmallHeading ? 3 : 4}
+            size={isSmallHeading ? 2 : 3}
             leading="tight"
             className={cnb(styles.heading(!!tabColor), accentBorderColors[tabColor])}
           >

diff --git a/components/WidthBox/WidthBox.styles.ts b/components/WidthBox/WidthBox.styles.ts
@@ -1,7 +1,7 @@
 export const widthClasses = {
   4: {
-    column: 'sm:col-span-10 md:col-span-8 lg:col-span-6 2xl:col-span-4',
-    columnStart: 'sm:col-start-2 md:col-start-3 lg:col-start-4 2xl:col-start-5',
+    column: 'sm:col-span-8 md:col-span-6 2xl:col-span-4',
+    columnStart: 'sm:col-start-3 md:col-start-4 2xl:col-start-5',
   },
   6: {
     column: 'sm:col-span-12 md:col-span-10 lg:col-span-8 xl:col-span-6',
@@ -15,4 +15,8 @@ export const widthClasses = {
     column: 'sm:col-span-12 xl:col-span-10',
     columnStart: 'xl:col-start-2',
   },
+  12: {
+    column: '',
+    columnStart: '',
+  },
 };
diff --git a/components/WidthBox/WidthBox.tsx b/components/WidthBox/WidthBox.tsx
@@ -5,35 +5,39 @@ import * as styles from './WidthBox.styles';
 
 /**
  * For use as a wrapper container that sets a width in terms of number of columns.
- * E.g., Full (edge-to-edge), site container width (12 of 12 columns), 10 of 12, 8 of 12 columns etc.
+ * There is a bounding width of either full (edge-to-edge) or site container width (centered container),
+ * Within this bounding outer container, the children can span 12, 10, 8, 6 or 4 out of 12 column.
  * */
 
 type FullWidthBoxProps = Omit<ContainerProps, 'width'> & {
-  width: 'full' | 'site';
+  boundingWidth?: 'full' | 'site';
+  width?: '12';
   align?: 'center';
 };
 
 type NonFullWidthBoxProps = GridProps & {
-  width: '10' | '8' | '6' | '4';
+  boundingWidth?: 'full' | 'site';
+  width?: '12' | '10' | '8' | '6' | '4';
   align?: 'left' | 'center';
 };
 
-export type WidthType = FullWidthBoxProps['width'] | NonFullWidthBoxProps['width'];
+export type WidthType = NonFullWidthBoxProps['width'];
 type WidthBoxProps = FullWidthBoxProps | NonFullWidthBoxProps;
 
 export const WidthBox = ({
-  width = 'full',
+  boundingWidth = 'full',
+  width = '12',
   align = 'center',
   children,
   className,
   ...props
 }: WidthBoxProps) => {
   // If it is edge-to-edge or takes up 12 of 12 column, no need to use a grid
-  if (width === 'full' || width === 'site') {
+  if ((boundingWidth === 'full' || boundingWidth === 'site') && width === '12') {
     return (
       <Container
         {...props as FullWidthBoxProps}
-        width={width}
+        width={boundingWidth}
         className={className}
       >
         {children}
@@ -42,15 +46,17 @@ export const WidthBox = ({
   }
 
   return (
-    <Grid {...props as NonFullWidthBoxProps} gap="default" sm={12} className={cnb('cc', className)}>
-      <div
-        className={cnb(
-          styles.widthClasses[width]?.column || '',
-          align === 'center' ? styles.widthClasses[width]?.columnStart : '',
-        )}
-      >
-        {children}
-      </div>
-    </Grid>
+    <Container width={boundingWidth}>
+      <Grid {...props as NonFullWidthBoxProps} gap="default" sm={12} className={className}>
+        <div
+          className={cnb(
+            styles.widthClasses[width]?.column || '',
+            align === 'center' ? styles.widthClasses[width]?.columnStart : '',
+          )}
+        >
+          {children}
+        </div>
+      </Grid>
+    </Container>
   );
 };