🎨 Change footer headings to h2 and some spacing #2579 (#2585)

* 🎨 initial

* 🎨 upgrade textwithicon and its array to tw and with title

* 🎨 remove inline styles

* 🎨 change to h2 and some spacing

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'
@@ -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

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

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

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
 }