From e2915f6a98c3eb62ef5c1db62e46ebf1366e8986 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 4 Nov 2024 08:59:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=20Change=20footer=20headings=20?=
 =?UTF-8?q?to=20h2=20and=20some=20spacing=20#2579=20(#2585)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :art: initial

* :art: upgrade textwithicon and its array to tw and with title

* :art: remove inline styles

* :art: change to h2 and some spacing
---
 .../schemas/objects/textWithIconArray.tsx     | 18 +++++
 web/components/src/TextWithIcon/Media.tsx     | 14 ----
 web/components/src/TextWithIcon/Text.tsx      | 14 ----
 .../src/TextWithIcon/TextWithIcon.tsx         | 12 ---
 web/components/src/TextWithIcon/Title.tsx     | 18 -----
 web/components/src/TextWithIcon/index.ts      | 17 ----
 web/components/src/index.ts                   |  1 -
 web/core/TextWithIcon/TextWithIcon.tsx        | 51 ++++++++++++
 web/lib/queries/common/pageContentFields.ts   |  5 ++
 .../shared/SharedPageContent.tsx              |  2 +-
 web/pageComponents/shared/Footer.tsx          |  7 +-
 .../topicPages/TextWithIconArray.tsx          | 79 -------------------
 .../TextWithIconArray/TextWithIconArray.tsx   | 55 +++++++++++++
 web/types/types.ts                            |  2 +
 14 files changed, 135 insertions(+), 160 deletions(-)
 delete mode 100644 web/components/src/TextWithIcon/Media.tsx
 delete mode 100644 web/components/src/TextWithIcon/Text.tsx
 delete mode 100644 web/components/src/TextWithIcon/TextWithIcon.tsx
 delete mode 100644 web/components/src/TextWithIcon/Title.tsx
 delete mode 100644 web/components/src/TextWithIcon/index.ts
 create mode 100644 web/core/TextWithIcon/TextWithIcon.tsx
 delete mode 100644 web/pageComponents/topicPages/TextWithIconArray.tsx
 create mode 100644 web/sections/TextWithIconArray/TextWithIconArray.tsx

diff --git a/sanityv3/schemas/objects/textWithIconArray.tsx b/sanityv3/schemas/objects/textWithIconArray.tsx
index 855992956..13e615a3b 100644
--- a/sanityv3/schemas/objects/textWithIconArray.tsx
+++ b/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',
diff --git a/web/components/src/TextWithIcon/Media.tsx b/web/components/src/TextWithIcon/Media.tsx
deleted file mode 100644
index 21842bea8..000000000
--- a/web/components/src/TextWithIcon/Media.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-type MediaProps = HTMLAttributes<HTMLDivElement>
-
-const Img = styled.div`
-  align-self: center;
-  grid-area: media;
-  margin-bottom: var(--space-medium);
-`
-
-export const Media = ({ children, ...rest }: MediaProps) => {
-  return <Img {...rest}>{children}</Img>
-}
diff --git a/web/components/src/TextWithIcon/Text.tsx b/web/components/src/TextWithIcon/Text.tsx
deleted file mode 100644
index 2cab9f54b..000000000
--- a/web/components/src/TextWithIcon/Text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-type TextProps = HTMLAttributes<HTMLParagraphElement>
-
-const StyledText = styled.div`
-  p {
-    margin-bottom: 0;
-  }
-`
-
-export const Text = ({ children, ...rest }: TextProps) => {
-  return <StyledText {...rest}>{children}</StyledText>
-}
diff --git a/web/components/src/TextWithIcon/TextWithIcon.tsx b/web/components/src/TextWithIcon/TextWithIcon.tsx
deleted file mode 100644
index 2c8c722e7..000000000
--- a/web/components/src/TextWithIcon/TextWithIcon.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-type TextWithIconProps = HTMLAttributes<HTMLDivElement>
-
-const Container = styled.div`
-  text-align: center;
-`
-
-export const TextWithIcon = ({ children, ...rest }: TextWithIconProps) => {
-  return <Container {...rest}>{children}</Container>
-}
diff --git a/web/components/src/TextWithIcon/Title.tsx b/web/components/src/TextWithIcon/Title.tsx
deleted file mode 100644
index f61827243..000000000
--- a/web/components/src/TextWithIcon/Title.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { HTMLAttributes } from 'react'
-import { Heading } from '../Heading'
-import styled from 'styled-components'
-
-type TitleProps = HTMLAttributes<HTMLDivElement>
-
-const StyledTitle = styled(Heading)`
-  margin: 0;
-  text-align: center;
-`
-
-export const Title = ({ children, ...rest }: TitleProps) => {
-  return (
-    <StyledTitle size="xl" regular {...rest}>
-      {children}
-    </StyledTitle>
-  )
-}
diff --git a/web/components/src/TextWithIcon/index.ts b/web/components/src/TextWithIcon/index.ts
deleted file mode 100644
index 6a256b8c2..000000000
--- a/web/components/src/TextWithIcon/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TextWithIcon as TextWithIconWrapper } from './TextWithIcon'
-import { Media } from './Media'
-import { Title } from './Title'
-import { Text } from './Text'
-
-type TextWithIconProps = typeof TextWithIconWrapper & {
-  Media: typeof Media
-  Title: typeof Title
-  Text: typeof Text
-}
-
-const TextWithIcon = TextWithIconWrapper as TextWithIconProps
-TextWithIcon.Media = Media
-TextWithIcon.Title = Title
-TextWithIcon.Text = Text
-
-export { TextWithIcon }
diff --git a/web/components/src/index.ts b/web/components/src/index.ts
index 63a786766..26e7c653f 100644
--- a/web/components/src/index.ts
+++ b/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'
diff --git a/web/core/TextWithIcon/TextWithIcon.tsx b/web/core/TextWithIcon/TextWithIcon.tsx
new file mode 100644
index 000000000..11a718083
--- /dev/null
+++ b/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>
+    )
+  },
+)
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index 3fb169ec2..e27516cdd 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/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,
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
index b8b49294e..41fb27160 100644
--- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
+++ b/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'
@@ -63,6 +62,7 @@ import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarous
 import ImageCarousel from '@sections/ImageCarousel/ImageCarousel'
 import { AnchorLinkList } from '@sections/AnchorLinkList'
 import ImageForText from '@sections/ImageForText/ImageForText'
+import TextWithIconArray from '@sections/TextWithIconArray/TextWithIconArray'
 
 type DefaultComponent = {
   id?: string
diff --git a/web/pageComponents/shared/Footer.tsx b/web/pageComponents/shared/Footer.tsx
index 72c5f3030..474aadb2f 100644
--- a/web/pageComponents/shared/Footer.tsx
+++ b/web/pageComponents/shared/Footer.tsx
@@ -3,7 +3,6 @@ import { Facebook, Instagram, Linkedin, Twitter, Youtube } from '../../icons'
 import type { FooterLinkData, SomeType, FooterColumns } from '../../types/index'
 import { default as NextLink } from 'next/link'
 
-
 function getSomeSvg(someType: SomeType) {
   const iconMap = {
     facebook: <Facebook width={12} />,
@@ -32,9 +31,9 @@ const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer({ footerD
     <footer className="min-h-12 clear-both text-white-100 bg-slate-blue-95 py-4 px-0" ref={ref} {...rest}>
       <div className="flex flex-row flex-wrap my-0 mx-auto justify-between px-layout-sm pb-2 max-w-screen-2xl max-md:flex-col">
         {footerData?.footerColumns?.map(({ header, linkList }) => (
-          <section className="flex flex-col max-md:py-4 max-md:w-4/5" key={header}> 
-            <h3 className="text-md font-medium text-white-100 px-0 py-2 leading-1">{header}</h3>
-            <div className="grid grid-cols-2 gap-y-2 gap-x-4 items-start md:flex md:flex-col md:grid-y-0">
+          <section className="flex flex-col max-md:py-4 max-md:w-4/5" key={header}>
+            <h2 className="text-md font-medium text-white-100 px-0 py-2 leading-planetary">{header}</h2>
+            <div className="grid grid-cols-2 gap-y-2 gap-x-8 items-start md:flex md:flex-col md:grid-y-0">
               {linkList?.map((link: FooterLinkData) => {
                 const { id, type, someType, label, url } = link
                 const icon = type === 'someLink' && someType ? getSomeSvg(someType) : null
diff --git a/web/pageComponents/topicPages/TextWithIconArray.tsx b/web/pageComponents/topicPages/TextWithIconArray.tsx
deleted file mode 100644
index 2198469bb..000000000
--- a/web/pageComponents/topicPages/TextWithIconArray.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { TextWithIcon, BackgroundContainer } from '@components'
-import { urlFor } from '../../common/helpers'
-import styled from 'styled-components'
-import Img from 'next/image'
-
-import IngressText from '../shared/portableText/IngressText'
-import type { TextWithIconArrayData, TextWithIconItem, ImageWithAlt } from '../../types/index'
-import { twMerge } from 'tailwind-merge'
-
-const Container = styled.div<{ items: number }>`
-  --max-content-width: 1440px;
-  display: grid;
-  justify-content: center;
-  grid-template-columns: repeat(auto-fit, minmax(calc(13 * var(--space-medium)), calc(18 * var(--space-medium))));
-  grid-gap: var(--space-xxLarge);
-  max-width: var(--max-content-width);
-
-  @media (min-width: 750px) {
-    grid-template-columns: ${({ items }) => (items === 2 || items === 4 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)')};
-  }
-
-  @media (min-width: 1300px) {
-    ${({ items }) =>
-      items === 4 && {
-        gridTemplateColumns: 'repeat(4, 1fr)',
-      }}
-  }
-`
-
-const { Title, Media, Text } = TextWithIcon
-
-type TextWithIconArrayProps = {
-  data: TextWithIconArrayData
-  anchor?: string
-  className?: string
-}
-
-const getImgSrc = (img: ImageWithAlt): string => urlFor(img).size(150, 150).auto('format').toString() || ''
-
-const TextWithIconArray = ({ data, anchor, className }: TextWithIconArrayProps) => {
-  const { designOptions, group } = data
-
-  if (!group) return null
-
-  return (
-    <BackgroundContainer {...designOptions} id={anchor} renderFragmentWhenPossible>
-      <Container items={group.length} className={twMerge(`pb-page-content px-6 mx-auto`, className)}>
-        {group.map((item: TextWithIconItem) => {
-          const { icon, title, text, id } = item
-          const altTag = icon?.isDecorative ? '' : icon?.alt || ''
-          return (
-            <TextWithIcon key={id}>
-              {icon && icon.asset && (
-                <Media>
-                  <Img
-                    src={getImgSrc(icon)}
-                    width="150"
-                    height="150"
-                    alt={altTag}
-                    role={icon?.isDecorative ? 'presentation' : undefined}
-                    style={{ width: '150px', height: '150px', margin: 'auto' }}
-                  />
-                </Media>
-              )}
-              {title && <Title>{title}</Title>}
-              {text && (
-                <Text>
-                  <IngressText value={text} centered={true} />
-                </Text>
-              )}
-            </TextWithIcon>
-          )
-        })}
-      </Container>
-    </BackgroundContainer>
-  )
-}
-
-export default TextWithIconArray
diff --git a/web/sections/TextWithIconArray/TextWithIconArray.tsx b/web/sections/TextWithIconArray/TextWithIconArray.tsx
new file mode 100644
index 000000000..056a9af40
--- /dev/null
+++ b/web/sections/TextWithIconArray/TextWithIconArray.tsx
@@ -0,0 +1,55 @@
+import { BackgroundContainer } from '@components'
+import type { TextWithIconArrayData, TextWithIconItem } from '../../types/index'
+import { twMerge } from 'tailwind-merge'
+import { TextWithIcon } from '@core/TextWithIcon/TextWithIcon'
+import { Heading } from '@core/Typography'
+
+type TextWithIconArrayProps = {
+  data: TextWithIconArrayData
+  anchor?: string
+  className?: string
+  listClassName?: string
+}
+
+const TextWithIconArray = ({ data, anchor, className = '', listClassName = '' }: TextWithIconArrayProps) => {
+  const { designOptions, group, title, hideTitle } = data
+
+  if (!group) return null
+
+  return (
+    <BackgroundContainer
+      {...designOptions}
+      id={anchor}
+      className={twMerge(
+        `
+        px-layout-sm 
+        pb-page-content
+        mx-auto
+        flex
+        flex-col
+        items-center`,
+        className,
+      )}
+    >
+      {title && <Heading value={title} variant="h2" className={`${hideTitle ? 'sr-only' : ''}`} />}
+      <ul
+        className={twMerge(
+          `w-full flex flex-col gap-12 lg:grid ${group.length % 2 === 0 ? 'lg:grid-cols-2' : 'lg:grid-cols-3'}`,
+          listClassName,
+        )}
+      >
+        {group.map((item: TextWithIconItem) => {
+          const { icon, title, text, id } = item
+          return (
+            <li key={id}>
+              {/*@ts-ignore: TODO check why  content?: PortableTextBlock[] does not match text: PortableTextBlock[]  */}
+              <TextWithIcon image={icon} title={title} content={text} />
+            </li>
+          )
+        })}
+      </ul>
+    </BackgroundContainer>
+  )
+}
+
+export default TextWithIconArray
diff --git a/web/types/types.ts b/web/types/types.ts
index ab92f6ce1..34a03d1fd 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -186,6 +186,8 @@ export type TextWithIconItem = {
 export type TextWithIconArrayData = {
   type: string
   id: string
+  title?: PortableTextBlock[]
+  hideTitle?: boolean
   group: TextWithIconItem[]
   designOptions: DesignOptions
 }