Tweak section light overlay; add width option for SbGrid

SU-SWS · Oct 3, 2023 · 6b8e543 · 6b8e543
1 parent 3b34e65
commit 6b8e543
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
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,13 @@
 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;
+    width?: WidthType;
     items: SbBlokData[];
     /**
      * Currently we're only providing 1-4 columns in Storyblok even though GridNumColsType also supports 6 and 12
@@ -23,6 +25,7 @@ type SbGridProps = {
 export const SbGrid = ({
   blok: {
     gap,
+    width = 'full',
     items,
     xs,
     sm,
@@ -33,16 +36,20 @@ export const SbGrid = ({
   },
   blok,
 }: SbGridProps) => (
-  <Grid
-    xs={xs}
-    sm={sm}
-    md={md}
-    lg={lg}
-    xl={xl}
-    xxl={xxl}
-    gap={gap}
+  <WidthBox
     {...storyblokEditable(blok)}
+    width={width}
   >
-    <CreateBloks blokSection={items} />
-  </Grid>
+    <Grid
+      xs={xs}
+      sm={sm}
+      md={md}
+      lg={lg}
+      xl={xl}
+      xxl={xxl}
+      gap={gap}
+    >
+      <CreateBloks blokSection={items} />
+    </Grid>
+  </WidthBox>
 );
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
@@ -7,6 +7,7 @@ import {
 } from '../Typography';
 import { Container, type BgColorType } from '../Container';
 import { ImageOverlay } from '../ImageOverlay';
+import { WidthBox, type WidthType } from '../WidthBox';
 import { accentBgColors, type PaddingType } from '@/utilities/datasource';
 import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin';
 import { type SbImageType } from './Storyblok.types';
@@ -56,7 +57,7 @@ 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">
@@ -106,7 +107,7 @@ export const SbSection = ({
         </Paragraph>
       </Container>
     )}
-    <Container className="rs-mt-8">
+    <Container pt={8} width="full">
       <CreateBloks blokSection={content} isDarkTheme={bgColor === 'black'} />
     </Container>
   </Container>