✨ add image for text comp #2456 (#2459)

* ✨ add image for text comp

* 🐛 fix review comments

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

@@ -81,6 +81,7 @@ import gridColorTheme from './objects/grid/theme'
 import transcript from './objects/transcript'
 import anchorLinkList from './objects/anchorLinkList/anchorLinkList'
 import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference'
+import imageForText from './objects/imageForText'
 
 const {
   pageNotFound,
@@ -208,6 +209,7 @@ const RemainingSchemas = [
   transcript,
   anchorLinkList,
   anchorLinkReference,
+  imageForText,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

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

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

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -53,6 +53,7 @@ import {
   CampaignBannerData,
   DesignOptions,
   AnchorLinkListData,
+  ImageForTextData,
 } from '../../../types/index'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
 import Grid from '@sections/Grid/Grid'
@@ -61,6 +62,7 @@ import { BackgroundContainerProps } from '@components/Backgrounds'
 import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel'
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
 import { AnchorLinkList } from '@sections/AnchorLinkList'
+import ImageForText from '@sections/ImageForText/ImageForText'
 
 type DefaultComponent = {
   id?: string
@@ -350,6 +352,8 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => {
             className={topSpacingClassName}
           />
         )
+      case 'imageForText':
+        return <ImageForText key={c.id} data={c as ImageForTextData} />
       default:
         return null
     }

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

@@ -465,3 +465,10 @@ export type AnchorLinkListData = {
     anchorReference?: string
   }[]
 }
+export type ImageForTextData = {
+  type: 'imageForText'
+  id: string
+  image: ImageWithAlt
+  content?: PortableTextBlock[]
+  aspectRatio?: '16:9' | 'fullWidth'
+}