✨Introduce singlecolumn option for news #2772 (#2775)

equinor · Feb 3, 2025 · 6146e1e · 6146e1e
1 parent 5c7e1de
commit 6146e1e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git 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 {
       }
     },
   },
-}
+}
diff --git 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
@@ -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'