Merge branch 'bose/2580' into staging

sanityv3/schemas/objects/textWithIconArray.tsx

@@ -1,7 +1,11 @@
 import { view_module } from '@equinor/eds-icons'
 import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
+import CompactBlockEditor from '../components/CompactBlockEditor'
 import { SchemaType } from '../../types'
+import { configureTitleBlockContent } from '../editors'
+
+const titleContentType = configureTitleBlockContent()
 
 export default {
   type: 'object',
@@ -14,6 +18,20 @@ export default {
     },
   ],
   fields: [
+    {
+      name: 'title',
+      type: 'array',
+      inputComponent: CompactBlockEditor,
+      of: [titleContentType],
+      title: 'Title',
+      description: 'The list of icon/text should have a heading, can be hidden below',
+    },
+    {
+      name: 'hideTitle',
+      type: 'boolean',
+      title: 'Hide title',
+      description: 'Hides title, but is available for screen readers and gives an meaningful heading for the list',
+    },
     {
       type: 'array',
       name: 'group',

web/components/src/index.ts

@@ -10,7 +10,6 @@ export * from './Teaser'
 export * from './Eyebrow'
 export * from './Backgrounds'
 export * from './FigureCaption'
-export * from './TextWithIcon'
 export * from './Accordion'
 export * from './Menu'
 export * from './Heading'

web/core/TextWithIcon/TextWithIcon.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributes, forwardRef } from 'react'
+import envisTwMerge from '../../twMerge'
+import { IconData } from '@equinor/eds-icons'
+import { TransformableIcon } from '../../icons/TransformableIcon'
+import { ImageWithAlt } from '../../types'
+import Img from 'next/image'
+import { urlFor } from '../../common/helpers'
+import { PortableTextBlock } from '@portabletext/types'
+import { Typography } from '@core/Typography'
+import Blocks from '../../pageComponents/shared/portableText/Blocks'
+
+export type TextWithIconProps = {
+  title?: string
+  content?: PortableTextBlock[]
+  iconData?: IconData
+  image?: ImageWithAlt
+  /** Icondata or imageUrl styling */
+  iconClassName?: string
+} & HTMLAttributes<HTMLDivElement>
+
+export const TextWithIcon = forwardRef<HTMLDivElement, TextWithIconProps>(
+  ({ title, content, iconData, className = '', image, iconClassName = '', ...rest }, ref) => {
+    return (
+      <div ref={ref} className={envisTwMerge(`flex flex-col gap-2 items-center`, className)} {...rest}>
+        {iconData && <TransformableIcon iconData={iconData} className={iconClassName} />}
+        {image && image?.asset && (
+          <Img
+            src={urlFor(image).size(150, 150).auto('format').toString()}
+            width="150"
+            height="150"
+            alt={image?.isDecorative ? '' : image?.alt || ''}
+            role={image?.isDecorative ? 'presentation' : undefined}
+            className={envisTwMerge(
+              `size-[150px]
+              m-auto
+              self-center
+              `,
+              iconClassName,
+            )}
+          />
+        )}
+        {title && (
+          <Typography as="h2" variant="h3">
+            {title}
+          </Typography>
+        )}
+        {content && <Blocks value={content} className="text-pretty text-center" />}
+      </div>
+    )
+  },
+)

web/lib/queries/common/pageContentFields.ts

@@ -119,6 +119,11 @@ _type == "keyNumbers" =>{
   _type == "textWithIconArray"=>{
     "type": _type,
     "id": _key,
+    title[]{
+        ...,
+        ${markDefs},
+      },
+    hideTitle,
     "group": group[]{
       "id": _key,
       title,

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -3,7 +3,6 @@ import TextBlock from '../../topicPages/TextBlock'
 import FullWidthImage from '../../topicPages/FullWidthImage'
 import FullWidthVideo from '../../topicPages/FullWidthVideo'
 import Figure from '../../topicPages/Figure'
-import TextWithIconArray from '../../topicPages/TextWithIconArray'
 import PageQuote from '../../topicPages/PageQuote'
 import AccordionBlock from '../../topicPages/Accordion/AccordionBlock'
 import PromoTileArray from '../../../sections/PromoTiles/PromoTileArray'
@@ -64,6 +63,7 @@ import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarous
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
 import ImageForText from '@sections/ImageForText/ImageForText'
 import { AnchorLinkList } from '@sections/AnchorLinkList'
+import TextWithIconArray from '@sections/TextWithIconArray/TextWithIconArray'
 import { StickyTextBlocks } from '@sections/StickyTextBlocks'
 
 type DefaultComponent = {