diff --git a/studio/schemas/objects/factbox.tsx b/studio/schemas/objects/factbox.tsx
index 375db22aa..cf14d51e6 100644
--- a/studio/schemas/objects/factbox.tsx
+++ b/studio/schemas/objects/factbox.tsx
@@ -1,10 +1,13 @@
import { info_circle } from '@equinor/eds-icons'
-import { PortableTextBlock } from 'sanity'
+import { useEffect } from 'react'
+import type { PortableTextBlock } from 'sanity'
+import { type BooleanInputProps, set, useFormValue } from 'sanity'
+import blocksToText from '../../helpers/blocksToText'
import { EdsIcon, LeftAlignedImage, RightAlignedImage } from '../../icons'
import { RadioIconSelector } from '../components'
+import type { ColorSelectorValue } from '../components/ColorSelector'
import { configureBlockContent } from '../editors/blockContentType'
import type { ImageWithAlt } from './imageWithAlt'
-import type { ColorSelectorValue } from '../components/ColorSelector'
const imageAlignmentOptions = [
{ value: 'left', icon: LeftAlignedImage },
@@ -21,12 +24,32 @@ const blockContentType = configureBlockContent({
smallText: false,
})
+function SingleColumnLayoutInput(props: BooleanInputProps) {
+ const { onChange, path, value } = props
+ const parentPath = path.slice(0, -1)
+ const content = useFormValue([...parentPath, 'content']) as
+ | PortableTextBlock[]
+ | undefined
+
+ const text = Array.isArray(content) ? blocksToText(content) || '' : ''
+ const isReadOnly = text.length < 800
+
+ useEffect(() => {
+ if (isReadOnly && value === false) {
+ onChange(set(true))
+ }
+ }, [isReadOnly, onChange, value])
+
+ return props.renderDefault(props)
+}
+
export type Factbox = {
_type: 'factbox'
title?: string
content?: PortableTextBlock[]
image?: ImageWithAlt
background?: ColorSelectorValue
+ isSingleColumn?: boolean
imagePosition?: string
dynamicHeight?: boolean
}
@@ -35,6 +58,9 @@ export default {
title: 'Factbox',
name: 'factbox',
type: 'object',
+ initialValue: {
+ isSingleColumn: true,
+ },
fieldsets: [
{
title: 'Design options',
@@ -54,12 +80,6 @@ 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',
@@ -72,19 +92,45 @@ export default {
type: 'colorlist',
fieldset: 'design',
},
+ {
+ name: 'isSingleColumn',
+ type: 'boolean',
+ title: 'Single column layout',
+ description:
+ 'Enabled by default. You can turn this off once content reaches 800 characters. This will have no effect if image is selected',
+ initialValue: true,
+ components: {
+ input: SingleColumnLayoutInput,
+ },
+ readOnly: ({ parent }: { parent: any }) => {
+ const content = parent?.content
+ if (!content || !Array.isArray(content)) {
+ return true
+ }
+ const text = blocksToText(content) || ''
+ return text.length < 800
+ },
+ },
{
name: 'imagePosition',
title: 'Image position',
- description: 'Select which side of the factbox the image should be displayed at on larger screens.',
+ description:
+ 'Select which side of the factbox the image should be displayed at on larger screens.',
type: 'string',
fieldset: 'design',
components: {
- input: function ImagePosition({ onChange, value }: { onChange: any; value: string }) {
+ input: function ImagePosition({
+ onChange,
+ value,
+ }: {
+ onChange: any
+ value: string
+ }) {
return (
@@ -110,8 +156,12 @@ export default {
return {
title: title,
subtitle: 'Factbox',
- media: imageUrl ?
: EdsIcon(info_circle),
+ media: imageUrl ? (
+
+ ) : (
+ EdsIcon(info_circle)
+ ),
}
},
},
-}
\ No newline at end of file
+}