diff --git a/sanityv3/schemas/objects/factbox.tsx b/sanityv3/schemas/objects/factbox.tsx index 23e2191b3..375db22aa 100644 --- a/sanityv3/schemas/objects/factbox.tsx +++ b/sanityv3/schemas/objects/factbox.tsx @@ -54,6 +54,12 @@ export default { type: 'array', of: [blockContentType], }, + { + name: 'isSingleColumn', + type: 'boolean', + title: 'Single column layout', + description: 'Toggle to use a single-column layout instead of the default two-column layout. This will have no effect if image is selected', + }, { name: 'image', title: 'Image', @@ -108,4 +114,4 @@ export default { } }, }, -} +} \ No newline at end of file diff --git a/web/components/src/Fact/index.ts b/web/components/src/Fact/index.ts index d769e4187..5752b848b 100644 --- a/web/components/src/Fact/index.ts +++ b/web/components/src/Fact/index.ts @@ -4,9 +4,6 @@ import { Image } from './Image' import { Content } from './Content' export type FactImagePosition = 'left' | 'right' -// @TODO: Color mapping must be more generic than this!!! -// Find a better way to do this. -// Create a proper type for colors type FactBoxCompoundProps = typeof FactBoxWrapper & { Image: typeof Image diff --git a/web/pageComponents/shared/portableText/components/news/Fact.tsx b/web/pageComponents/shared/portableText/components/news/Fact.tsx index 6d56ecd36..4f8b790ed 100644 --- a/web/pageComponents/shared/portableText/components/news/Fact.tsx +++ b/web/pageComponents/shared/portableText/components/news/Fact.tsx @@ -15,6 +15,7 @@ type FactboxProps = { image: ImageWithAlt imagePosition: FactImagePosition dynamicHeight: boolean + isSingleColumn?: boolean } type BlockProps = { @@ -25,7 +26,7 @@ type BlockProps = { export const Fact = (block: BlockProps) => { const { value, className } = block - const { title, content, background, image, imagePosition, dynamicHeight } = value + const { title, content, background, image, imagePosition, dynamicHeight, isSingleColumn } = value const bgTitle = (background ? background?.title : 'White') as BackgroundColours if (!content || content.length === 0) { @@ -36,7 +37,7 @@ export const Fact = (block: BlockProps) => { const plainText = content ? toPlainText(content as PortableTextBlock[]) : '' - const hasColumns = !imageSrc && plainText.length > 800 + const hasColumns = !imageSrc && !isSingleColumn && plainText.length > 800 const hasImage = imageSrc ? true : false const hasBgColor = bgTitle !== 'White'