diff --git a/components/ImageOverlay.tsx b/components/ImageOverlay.tsx index 3e12b7b0..6b61a28b 100644 --- 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 index 82fdd318..5f78e5ab 100644 --- 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) => ( - - - + + + + ); diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx index ddb43f5e..5965f03d 100644 --- 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 && ( - + )} {(heading || superhead) && ( @@ -106,7 +107,7 @@ export const SbSection = ({ )} - +