Merge branch 'bose/2456' into staging

sanityv3/schemas/documents/page.ts

@@ -74,6 +74,7 @@ export default {
         { type: 'videoPlayer' },
         { type: 'videoPlayerCarousel' },
         { type: 'table' },
+        { type: 'imageForText' },
         Flags.HAS_CAMPAIGN_BLOCKS && { type: 'grid' },
         Flags.HAS_CAMPAIGN_BLOCKS && { type: 'campaignBanner' },
         Flags.HAS_FORMS && { type: 'form' },

sanityv3/schemas/index.ts

@@ -79,6 +79,7 @@ import gridTeaser from './objects/grid/cellTypes/gridTeaser'
 import threeColumns from './objects/grid/rowTypes/3columns'
 import gridColorTheme from './objects/grid/theme'
 import transcript from './objects/transcript'
+import imageForText from './objects/imageForText'
 import anchorLinkList from './objects/anchorLinkList/anchorLinkList'
 import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference'
 
@@ -206,6 +207,7 @@ const RemainingSchemas = [
   threeColumns,
   gridColorTheme,
   transcript,
+  imageForText,
   anchorLinkList,
   anchorLinkReference,
 ]

sanityv3/schemas/objects/imageForText.tsx

@@ -0,0 +1,67 @@
+import { info_circle } from '@equinor/eds-icons'
+import { PortableTextBlock, Rule } from 'sanity'
+import { EdsIcon } from '../../icons'
+import { configureBlockContent } from '../editors/blockContentType'
+import type { ImageWithAlt } from './imageWithAlt'
+
+const blockContentType = configureBlockContent({
+  h2: true,
+  h3: true,
+  h4: true,
+  internalLink: false,
+  externalLink: false,
+  lists: false,
+  attachment: false,
+  smallText: false,
+})
+
+export type ImageForText = {
+  _type: 'imageForText'
+  content?: PortableTextBlock[]
+  image?: ImageWithAlt
+}
+
+export default {
+  title: 'Image for text',
+  name: 'imageForText',
+  type: 'object',
+  fields: [
+    {
+      name: 'content',
+      title: 'Content',
+      type: 'array',
+      of: [blockContentType],
+      validation: (Rule: Rule) => Rule.required(),
+    },
+    {
+      name: 'image',
+      title: 'Image',
+      type: 'imageWithAlt',
+      validation: (Rule: Rule) => Rule.required(),
+    },
+    {
+      name: 'aspectRatio',
+      type: 'string',
+      description: '',
+      title: 'Aspect ratio',
+      options: {
+        list: [
+          { title: '16:9', value: '16:9' },
+          { title: 'Full width 16:9', value: 'fullWidth' },
+        ],
+      },
+      initialValue: '16:9',
+    },
+  ],
+  preview: {
+    select: {
+      imageUrl: 'image.asset.url',
+    },
+    prepare({ imageUrl }: { title: string; imageUrl: string }) {
+      return {
+        title: 'Image for text',
+        media: imageUrl ? <img src={imageUrl} alt="" style={{ height: '100%' }} /> : EdsIcon(info_circle),
+      }
+    },
+  },
+}

web/lib/queries/common/pageContentFields.ts

@@ -579,6 +579,16 @@ _type == "keyNumbers" =>{
       }
     },
   },
+  _type == "imageForText" => {
+    "type": _type,
+    "id": _key,
+    "content": content[]{..., ${markDefs}},
+    "aspectRatio": coalesce(aspectRatio, '16:9'),
+    "image": image {
+      ...,
+      "extension": asset-> extension
+    },
+  },
   _type == "anchorLinkList" => {
     "type": _type,
     "id": _key,

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -52,6 +52,7 @@ import {
   GridData,
   CampaignBannerData,
   DesignOptions,
+  ImageForTextData,
   AnchorLinkListData,
 } from '../../../types/types'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
@@ -60,6 +61,7 @@ import { CampaignBanner } from '@sections/CampaignBanner'
 import { BackgroundContainerProps } from '@components/Backgrounds'
 import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
+import ImageForText from '@sections/ImageForText/ImageForText'
 import { AnchorLinkList } from '@sections/AnchorLinkList'
 
 type DefaultComponent = {
@@ -341,6 +343,8 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
         return <Grid key={c.id} data={c as GridData} anchor={anchorReference} className={topSpacingClassName} />
       case 'campaignBanner':
         return <CampaignBanner key={c.id} data={c as CampaignBannerData} />
+      case 'imageForText':
+        return <ImageForText key={c.id} data={c as ImageForTextData} />
       case 'anchorLinkList':
         return (
           <AnchorLinkList

web/sections/ImageForText/ImageForText.tsx

@@ -0,0 +1,34 @@
+import { ImageForTextData } from '../../types/types'
+import { forwardRef } from 'react'
+import Image, { Ratios } from '../../pageComponents/shared/SanityImage'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+
+type ImageForTextProps = {
+  data: ImageForTextData
+  anchor?: string
+}
+
+const ImageForText = forwardRef<HTMLDivElement, ImageForTextProps>(function ImageForText({ anchor, data }, ref) {
+  const { content, image, aspectRatio } = data
+
+  return (
+    <div ref={ref} id={anchor} className={`${aspectRatio === 'fullWidth' ? 'w-full' : 'px-layout-lg'}`}>
+      <div className="">
+        <Image
+          image={image}
+          maxWidth={2000}
+          {...(aspectRatio === 'fullWidth' && { aspectRatio: Ratios.THREE_TO_TEN })}
+          sizes={
+            aspectRatio === 'fullWidth'
+              ? '100vw'
+              : '(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)'
+          }
+          aria-hidden
+        />
+      </div>
+      {content && <Blocks value={content} className="sr-only" />}
+    </div>
+  )
+})
+
+export default ImageForText

web/types/types.ts

@@ -914,6 +914,13 @@ export type GridTeaserData = {
   action?: LinkData
   theme?: number
 }
+export type ImageForTextData = {
+  type: 'imageForText'
+  id: string
+  image: ImageWithAlt
+  content?: PortableTextBlock[]
+  aspectRatio?: '16:9' | 'fullWidth'
+}
 export type AnchorLinkListData = {
   id: string
   type: 'anchorLinkList'