From bf6794450d104da4f3163027bac124f1b4f5da36 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Fri, 20 Oct 2023 11:48:52 +0200
Subject: [PATCH 01/22] =?UTF-8?q?=E2=9C=A8=20WIP:=20text=20promo=20compone?=
 =?UTF-8?q?nt=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/documents/magazine.ts        |   1 +
 sanityv3/schemas/documents/page.ts            |   1 +
 sanityv3/schemas/index.js                     |   4 +
 sanityv3/schemas/objects/promoTextTile.tsx    | 107 ++++++++++++++++
 .../schemas/objects/promoTextTileArray.tsx    |  52 ++++++++
 web/lib/queries/common/pageContentFields.ts   |  30 +++++
 .../shared/SharedPageContent.tsx              |   5 +
 .../topicPages/PromoTextTileArray.tsx         | 115 ++++++++++++++++++
 .../topicPages/PromoTileArray.tsx             |   2 +-
 .../topicPages/PromoTileButton.tsx            |  17 ++-
 web/types/types.ts                            |  17 +++
 11 files changed, 348 insertions(+), 3 deletions(-)
 create mode 100644 sanityv3/schemas/objects/promoTextTile.tsx
 create mode 100644 sanityv3/schemas/objects/promoTextTileArray.tsx
 create mode 100644 web/pageComponents/topicPages/PromoTextTileArray.tsx

diff --git a/sanityv3/schemas/documents/magazine.ts b/sanityv3/schemas/documents/magazine.ts
index 9f8b825fc..4f8a5251a 100644
--- a/sanityv3/schemas/documents/magazine.ts
+++ b/sanityv3/schemas/documents/magazine.ts
@@ -157,6 +157,7 @@ export default {
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },
         { type: 'accordion' },
         { type: 'promoTileArray' },
+        { type: 'promoTextTileArray' },
         { type: 'promotion' },
         { type: 'iframe' },
         { type: 'imageCarousel' },
diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts
index 799f4df1c..2788c6100 100644
--- a/sanityv3/schemas/documents/page.ts
+++ b/sanityv3/schemas/documents/page.ts
@@ -59,6 +59,7 @@ export default {
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },
         { type: 'accordion' },
         { type: 'promoTileArray' },
+        { type: 'promoTextTileArray' },
         { type: 'promotion' },
         { type: 'table' },
         { type: 'stockValuesApi' },
diff --git a/sanityv3/schemas/index.js b/sanityv3/schemas/index.js
index dfb745a4c..150791e4a 100644
--- a/sanityv3/schemas/index.js
+++ b/sanityv3/schemas/index.js
@@ -56,7 +56,9 @@ import menuLink from './objects/menuLink'
 import newsList from './objects/newsList'
 import positionedInlineImage from './objects/positionedInlineImage'
 import promoTile from './objects/promoTile'
+import promoTextTile from './objects/promoTextTile'
 import promoTileArray from './objects/promoTileArray'
+import promoTextTileArray from './objects/promoTextTileArray'
 import promoteEvents from './objects/promotion/promoteEvents'
 import promoteMagazine from './objects/promotion/promoteMagazine'
 import promoteNews from './objects/promotion/promoteNews'
@@ -131,7 +133,9 @@ const RemainingSchemas = [
   textWithIconArray,
   linkSelector,
   promoTile,
+  promoTextTile,
   promoTileArray,
+  promoTextTileArray,
   stockValuesApi,
   iframe,
   basicIframe,
diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
new file mode 100644
index 000000000..c35a7c3c9
--- /dev/null
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -0,0 +1,107 @@
+import { label } from '@equinor/eds-icons'
+import type { PortableTextBlock, Rule, ValidationContext } from 'sanity'
+import type { ColorSelectorValue } from '../components/ColorSelector'
+import blocksToText from '../../helpers/blocksToText'
+import { EdsIcon } from '../../icons'
+import CompactBlockEditor from '../components/CompactBlockEditor'
+import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
+import type { LinkSelector } from './linkSelector'
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { configureTitleBlockContent, configureBlockContent } from '../editors'
+
+const titleContentType = configureTitleBlockContent()
+
+const blockContentType = configureBlockContent({
+  h1: false,
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+})
+
+export type PromoTextTile = {
+  _type: 'promoTextTile'
+  title: any[]
+  linkLabelAsTitle?: boolean
+  link?: LinkSelector
+  background?: ColorSelectorValue
+}
+
+export default {
+  title: 'Promo text tile',
+  name: 'promoTextTile',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Design options',
+      name: 'design',
+      description: 'Some options for design',
+      options: {
+        collapsible: true,
+        collapsed: false,
+      },
+    },
+    {
+      name: 'link',
+      title: 'Link',
+      description: 'Select either an internal link or external URL.',
+    },
+  ],
+  fields: [
+    {
+      name: 'linkLabelAsTitle',
+      title: 'Use link label as link title',
+      type: 'boolean',
+      initialValue: false,
+    },
+    {
+      name: 'title',
+      type: 'array',
+      inputComponent: CompactBlockEditor,
+      of: [titleContentType],
+      title: 'Title',
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], context: ValidationContext) => {
+          const { parent } = context as { parent: PromoTextTile }
+          if (parent?.linkLabelAsTitle || value) return true
+          return 'Required'
+        }),
+    },
+    {
+      name: 'text',
+      title: 'Text content',
+      type: 'array',
+      of: [blockContentType],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(),
+    },
+    {
+      name: 'link',
+      type: 'linkSelector',
+    },
+    {
+      title: 'Background',
+      description: 'Pick a colour for the background. Default is white.',
+      name: 'background',
+      type: 'colorlist',
+      fieldset: 'design',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      linkLabelAsTitle: 'linkLabelAsTitle',
+      link: 'link.label',
+    },
+    prepare({ title, linkLabelAsTitle, link }: { title: any[]; linkLabelAsTitle: boolean; link: string }) {
+      return {
+        title: linkLabelAsTitle ? link : blocksToText(title as any[]),
+        subtitle: `Promo text tile component`,
+        media: EdsIcon(label),
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/promoTextTileArray.tsx b/sanityv3/schemas/objects/promoTextTileArray.tsx
new file mode 100644
index 000000000..3f32b37be
--- /dev/null
+++ b/sanityv3/schemas/objects/promoTextTileArray.tsx
@@ -0,0 +1,52 @@
+import { collection_2 } from '@equinor/eds-icons'
+import { EdsIcon } from '../../icons'
+import type { PortableTextBlock, Rule } from 'sanity'
+import type { PromoTextTile } from './promoTextTile'
+import blocksToText from '../../helpers/blocksToText'
+
+export type PromoTextTileArray = {
+  _type: 'promoTextTileArray'
+  group: PromoTextTile[]
+}
+
+export default {
+  type: 'object',
+  name: 'promoTextTileArray',
+  title: 'Promo text tiles',
+  fields: [
+    {
+      name: 'spacing',
+      type: 'boolean',
+      title: 'Space between other components',
+      initialValue: false,
+    },
+    {
+      type: 'array',
+      name: 'group',
+      description: 'Add promo tiles as one or a pair',
+      title: 'Promo text tiles',
+      of: [{ type: 'promoTextTile' }],
+      validation: (Rule: Rule) => Rule.required().min(1).max(2),
+    },
+  ].filter((e) => e),
+  preview: {
+    select: {
+      group: 'group',
+    },
+    prepare({ group }: { group: PromoTextTile[] }) {
+      const getTitle = (promoTextTile: PromoTextTile) => {
+        return promoTextTile.linkLabelAsTitle
+          ? promoTextTile.link?.label
+          : blocksToText(promoTextTile.title as PortableTextBlock[])
+      }
+      const firstTitle = group[0] ? getTitle(group[0]) : ''
+      const secondTitle = group[1] ? getTitle(group[1]) : ''
+
+      return {
+        title: firstTitle + (group[1] ? ' | ' + secondTitle : ''),
+        subtitle: 'Promo tiles component',
+        media: <div>{EdsIcon(collection_2)}</div>,
+      }
+    },
+  },
+}
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index 43cf55fdd..9fb8bf2d0 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -180,6 +180,36 @@ const pageContentFields = /* groq */ `
       },
     },
   },
+  _type == "promoTextTileArray"=>{
+    "type": _type,
+    "id": _key,
+    "useHorizontalScroll": useHorizontalScroll,
+    spacing,
+    "group": group[]{
+      "id": _key,
+      title,
+      linkLabelAsTitle,
+      text[]{..., ${markDefs}},
+      "action": {
+        "label": link.label,
+        "ariaLabel": link.ariaLabel,
+        "anchorReference": link.anchorReference,
+        "link": select(
+          link.linkToOtherLanguage == true =>
+            link.referenceToOtherLanguage->${linkReferenceFields},
+            link.reference->${linkReferenceFields},
+        ),
+        "href": link.url,
+        "type": select(
+          defined(link.url) => "externalUrl",
+          "internalUrl"
+        ),
+      },
+      "designOptions": {
+        "background": coalesce(background.title, 'none'),
+      },
+    },
+  },
   _type == "iframe" => {
     "type": _type,
     "id": _key,
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
index 30d90d0f7..f42f073ec 100644
--- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
@@ -7,6 +7,7 @@ import TextWithIconArray from '../../topicPages/TextWithIconArray'
 import PageQuote from '../../topicPages/PageQuote'
 import AccordionBlock from '../../topicPages/Accordion/AccordionBlock'
 import PromoTileArray from '../../topicPages/PromoTileArray'
+import PromoTextTileArray from '../../topicPages/PromoTextTileArray'
 import IFrame from '../../topicPages/IFrame'
 import Promotion from '../../topicPages/Promotion'
 import Form from '../../topicPages/Form/Form'
@@ -33,6 +34,7 @@ import {
   QuoteData,
   AccordionData,
   PromoTileArrayData,
+  PromoTextTileArrayData,
   IFrameData,
   PromotionData,
   FormData,
@@ -58,6 +60,7 @@ type ComponentProps =
   | QuoteData
   | AccordionData
   | PromoTileArrayData
+  | PromoTextTileArrayData
   | IFrameData
   | PromotionData
   | FormData
@@ -97,6 +100,8 @@ export const PageContent = ({ data }: PageContentProps) => {
         return <AccordionBlock key={c.id} data={c as AccordionData} anchor={anchorReference} />
       case 'promoTileArray':
         return <PromoTileArray key={c.id} data={c as PromoTileArrayData} anchor={anchorReference} />
+      case 'promoTextTileArray':
+        return <PromoTextTileArray key={c.id} data={c as PromoTextTileArrayData} anchor={anchorReference} />
       case 'iframe':
         return <IFrame key={c.id} data={c as IFrameData} anchor={anchorReference} />
       case 'promotion':
diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
new file mode 100644
index 000000000..9d877496d
--- /dev/null
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -0,0 +1,115 @@
+import { BackgroundContainer, Card } from '@components'
+import { tokens } from '@equinor/eds-tokens'
+import { PortableTextBlock } from '@portabletext/types'
+import { CSSProperties } from 'react'
+import styled from 'styled-components'
+import type { PromoTextTileArrayData, PromoTextTileData } from '../../types/types'
+import PromotileTitleText from '../shared/portableText/PromoTileTitleText'
+import { PromoTileButton } from './PromoTileButton'
+
+const { Header, Action, Text } = Card
+
+const Container = styled.div<{ isMultipleCards: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ isMultipleCards }) =>
+    isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
+  grid-gap: var(--space-medium);
+  padding: var(--space-3xLarge) var(--layout-paddingHorizontal-large);
+  max-width: var(--maxViewportWidth);
+  margin: auto;
+  height: 100%;
+`
+
+const StyledBackgroundContainer = styled(BackgroundContainer)`
+  border-radius: ${tokens.shape.corners.borderRadius};
+  box-shadow: var(--card-box-shadow);
+`
+
+const StyledAction = styled(Action)`
+  flex-grow: 1;
+`
+
+const StyledCard = styled(Card)<{ alignLeft: boolean }>`
+  width: 100%;
+  --card-maxWidth: 280px;
+  flex-direction: row;
+  height: 300px;
+  overflow: hidden;
+  justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
+`
+
+const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex-start' : 'center') : 'center')};
+  justify-content: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex-start' : 'center') : 'center')};
+  text-align: center;
+  margin-bottom: var(--space-medium);
+  height: 100%;
+`
+
+const TitleWrapper = styled.div`
+  margin-bottom: var(--space-medium);
+`
+
+const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; anchor?: string }) => {
+  if (!data.group) return null
+  const isMultipleCards = data.group.length > 1
+
+  const isSingleCard = data.group.length === 1
+
+  return (
+    <div className="background-none" id={anchor}>
+      <Container isMultipleCards={isMultipleCards}>
+        {data.group.map((tile: PromoTextTileData) => {
+          const { id, designOptions, action, linkLabelAsTitle, text, title } = tile
+          const { background } = designOptions
+
+          const hasLink = !!tile.action // Check if link is present
+          return (
+            <StyledBackgroundContainer
+              style={data?.spacing ? { marginTop: '50px', marginBottom: '50px' } : {}}
+              disableContainerWrapper={true}
+              background={background}
+              key={id}
+            >
+              <StyledCard
+                type="promo"
+                textOnly={true}
+                alignLeft={isMultipleCards}
+                style={
+                  {
+                    padding: 'var(--space-medium) 0 0 0',
+                    '--card-maxWidth': isSingleCard ? '100%' : '280px',
+                  } as CSSProperties
+                }
+              >
+                <ContentWrapper alignLeft={isMultipleCards} hasLink={hasLink}>
+                  <TitleWrapper>
+                    <Header>
+                      <PromotileTitleText value={title} />
+                    </Header>
+                  </TitleWrapper>
+                  <Text>
+                    <PromotileTitleText value={text} />
+                  </Text>
+                  {action.label && (
+                    <StyledAction>
+                      {linkLabelAsTitle ? (
+                        <PromoTileButton action={action} template="text" hasImage={true} />
+                      ) : (
+                        <PromoTileButton action={action} hasImage={false} template="icon" />
+                      )}
+                    </StyledAction>
+                  )}
+                </ContentWrapper>
+              </StyledCard>
+            </StyledBackgroundContainer>
+          )
+        })}
+      </Container>
+    </div>
+  )
+}
+
+export default PromoTextTileArray
diff --git a/web/pageComponents/topicPages/PromoTileArray.tsx b/web/pageComponents/topicPages/PromoTileArray.tsx
index 0df5dff34..b205f0f24 100644
--- a/web/pageComponents/topicPages/PromoTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTileArray.tsx
@@ -97,7 +97,7 @@ const PromoTileArray = ({ data, anchor }: { data: PromoTileArrayData; anchor?: s
 
           const Content = () =>
             linkLabelAsTitle ? (
-              <PromoTileButton action={action} template="icon" hasImage={hasImage} />
+              <PromoTileButton action={action} template="text" hasImage={hasImage} />
             ) : (
               <>
                 {<>{richTitle(title, hasImage)}</>}
diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx
index 999401385..89cdac90a 100644
--- a/web/pageComponents/topicPages/PromoTileButton.tsx
+++ b/web/pageComponents/topicPages/PromoTileButton.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components'
 type Props = {
   action: LinkData
   hasImage: boolean
-  template?: 'default' | 'icon'
+  template?: 'default' | 'icon' | 'text'
 }
 
 const StyledLink = styled(Link)`
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
   padding: 0 var(--space-medium);
 `
 
-const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
+const TextButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
   const url = getUrlFromAction(action)
   if (!url) {
     console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`)
@@ -47,8 +47,21 @@ const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: bool
   )
 }
 
+const IconButtonLink = ({ action }: { action: LinkData; hasImage: boolean }) => {
+  const url = getUrlFromAction(action)
+  if (!url) {
+    console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`)
+    return null
+  }
+  const locale = getLocaleFromName(action.link?.lang)
+
+  return <StyledLink underline={false} variant="contentLink" locale={locale} href={url} aria-label={action.ariaLabel} />
+}
+
 export const PromoTileButton = ({ action, template = 'default', hasImage }: Props) => {
   switch (template) {
+    case 'text':
+      return <TextButtonLink action={action} hasImage={hasImage} />
     case 'icon':
       return <IconButtonLink action={action} hasImage={hasImage} />
     default:
diff --git a/web/types/types.ts b/web/types/types.ts
index 1ad4bc52b..1932866f6 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -403,6 +403,15 @@ export type PromoTileData = {
   linkLabelAsTitle?: boolean
 }
 
+export type PromoTextTileData = {
+  id: string
+  title: PortableTextBlock[]
+  text: PortableTextBlock[]
+  action: LinkData
+  designOptions: DesignOptions
+  linkLabelAsTitle?: boolean
+}
+
 export type PromoTileArrayData = {
   type: string
   id: string
@@ -410,6 +419,14 @@ export type PromoTileArrayData = {
   useHorizontalScroll: boolean
 }
 
+export type PromoTextTileArrayData = {
+  type: string
+  id: string
+  group: PromoTextTileData[]
+  useHorizontalScroll: boolean
+  spacing?: boolean
+}
+
 export type MenuLinkData = {
   label: string
   href?: string

From b3d0ca5eec60fcc64a03c83a62ff594f9a5d6cf6 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Thu, 2 Nov 2023 18:21:26 +0100
Subject: [PATCH 02/22] =?UTF-8?q?=E2=9C=A8=20WIP:=20cleanup=20text=20promo?=
 =?UTF-8?q?=20component=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx | 18 ++++++++++--------
 sanityv3/schemas/objects/promoTile.tsx     | 14 +++++++-------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index c35a7c3c9..c4cc9325e 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -6,7 +6,6 @@ import { EdsIcon } from '../../icons'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
 import type { LinkSelector } from './linkSelector'
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { configureTitleBlockContent, configureBlockContent } from '../editors'
 
 const titleContentType = configureTitleBlockContent()
@@ -51,16 +50,12 @@ export default {
     },
   ],
   fields: [
-    {
-      name: 'linkLabelAsTitle',
-      title: 'Use link label as link title',
-      type: 'boolean',
-      initialValue: false,
-    },
     {
       name: 'title',
       type: 'array',
-      inputComponent: CompactBlockEditor,
+      components: {
+        input: CompactBlockEditor,
+      },
       of: [titleContentType],
       title: 'Title',
       validation: (Rule: Rule) =>
@@ -78,6 +73,13 @@ export default {
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(),
     },
+    {
+      name: 'linkLabelAsTitle',
+      title: 'Toggle link button text',
+      description: 'This will add the link label as the button text',
+      type: 'boolean',
+      initialValue: false,
+    },
     {
       name: 'link',
       type: 'linkSelector',
diff --git a/sanityv3/schemas/objects/promoTile.tsx b/sanityv3/schemas/objects/promoTile.tsx
index 531a5f115..0e1668d13 100644
--- a/sanityv3/schemas/objects/promoTile.tsx
+++ b/sanityv3/schemas/objects/promoTile.tsx
@@ -6,14 +6,13 @@ import { EdsIcon } from '../../icons'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import type { ImageWithAlt } from './imageWithAlt'
 import type { LinkSelector } from './linkSelector'
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { configureTitleBlockContent } from '../editors'
 
 const titleContentType = configureTitleBlockContent()
 
 export type PromoTile = {
   _type: 'promoTile'
-  title: any[]
+  title: PortableTextBlock[]
   linkLabelAsTitle?: boolean
   image?: ImageWithAlt
   link?: LinkSelector
@@ -50,7 +49,9 @@ export default {
     {
       name: 'title',
       type: 'array',
-      inputComponent: CompactBlockEditor,
+      components: {
+        input: CompactBlockEditor,
+      },
       of: [titleContentType],
       title: 'Title',
       hidden: ({ parent }: { parent: PromoTile }) => parent?.linkLabelAsTitle,
@@ -88,19 +89,18 @@ export default {
     },
     prepare({
       title,
-      imageUrl,
       linkLabelAsTitle,
       link,
     }: {
-      title: any[]
+      title: PortableTextBlock[]
       imageUrl: string
       linkLabelAsTitle: boolean
       link: string
     }) {
       return {
-        title: linkLabelAsTitle ? link : blocksToText(title as any[]),
+        title: linkLabelAsTitle ? link : blocksToText(title),
         subtitle: `Promo tile component`,
-        media: imageUrl ? <img src={imageUrl} alt="" style={{ height: '100%' }} /> : EdsIcon(label),
+        media: EdsIcon(label),
       }
     },
   },

From 7d82fd7aab6ed029275b3a9b5e2e118444249ba0 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 7 Nov 2023 10:57:04 +0100
Subject: [PATCH 03/22] =?UTF-8?q?=E2=9C=A8=20WIP:=20cleanup=20text=20promo?=
 =?UTF-8?q?=20component=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index c4cc9325e..b9bb65a32 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -23,7 +23,7 @@ const blockContentType = configureBlockContent({
 
 export type PromoTextTile = {
   _type: 'promoTextTile'
-  title: any[]
+  title: string
   linkLabelAsTitle?: boolean
   link?: LinkSelector
   background?: ColorSelectorValue

From d5700ed7136c8efcfcfee6b18b2f8e2f34acc4d8 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 7 Nov 2023 11:00:54 +0100
Subject: [PATCH 04/22] =?UTF-8?q?Revert=20"=E2=9C=A8=20WIP:=20cleanup=20te?=
 =?UTF-8?q?xt=20promo=20component=20#1889"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 7d82fd7aab6ed029275b3a9b5e2e118444249ba0.
---
 sanityv3/schemas/objects/promoTextTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index b9bb65a32..c4cc9325e 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -23,7 +23,7 @@ const blockContentType = configureBlockContent({
 
 export type PromoTextTile = {
   _type: 'promoTextTile'
-  title: string
+  title: any[]
   linkLabelAsTitle?: boolean
   link?: LinkSelector
   background?: ColorSelectorValue

From 67ea37426975f57799a532ad70bb60724c55c3cf Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 7 Nov 2023 11:04:59 +0100
Subject: [PATCH 05/22] =?UTF-8?q?=E2=9C=A8=20WIP:=20cleanup=20text=20promo?=
 =?UTF-8?q?=20component=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index c4cc9325e..aebb2f084 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -23,7 +23,7 @@ const blockContentType = configureBlockContent({
 
 export type PromoTextTile = {
   _type: 'promoTextTile'
-  title: any[]
+  title: PortableTextBlock[]
   linkLabelAsTitle?: boolean
   link?: LinkSelector
   background?: ColorSelectorValue
@@ -98,9 +98,17 @@ export default {
       linkLabelAsTitle: 'linkLabelAsTitle',
       link: 'link.label',
     },
-    prepare({ title, linkLabelAsTitle, link }: { title: any[]; linkLabelAsTitle: boolean; link: string }) {
+    prepare({
+      title,
+      linkLabelAsTitle,
+      link,
+    }: {
+      title: PortableTextBlock[]
+      linkLabelAsTitle: boolean
+      link: string
+    }) {
       return {
-        title: linkLabelAsTitle ? link : blocksToText(title as any[]),
+        title: linkLabelAsTitle ? link : blocksToText(title),
         subtitle: `Promo text tile component`,
         media: EdsIcon(label),
       }

From 2f09be2be455ff249aa166947b1a60f32328b88c Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 7 Nov 2023 11:55:26 +0100
Subject: [PATCH 06/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20action=20f?=
 =?UTF-8?q?rom=20contentfields=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../actions/promoLinkReferenceFields.ts       | 19 +++++++++++++++++++
 web/lib/queries/common/pageContentFields.ts   | 18 ++----------------
 2 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 web/lib/queries/common/actions/promoLinkReferenceFields.ts

diff --git a/web/lib/queries/common/actions/promoLinkReferenceFields.ts b/web/lib/queries/common/actions/promoLinkReferenceFields.ts
new file mode 100644
index 000000000..2ae3ce68c
--- /dev/null
+++ b/web/lib/queries/common/actions/promoLinkReferenceFields.ts
@@ -0,0 +1,19 @@
+import { linkReferenceFields } from '../actions/linkSelectorFields'
+
+export const promoLinkReferenceFields = /* groq */ `
+ {
+    "label": link.label,
+    "ariaLabel": link.ariaLabel,
+    "anchorReference": link.anchorReference,
+    "link": select(
+      link.linkToOtherLanguage == true =>
+        link.referenceToOtherLanguage->${linkReferenceFields},
+        link.reference->${linkReferenceFields},
+    ),
+    "href": link.url,
+    "type": select(
+      defined(link.url) => "externalUrl",
+      "internalUrl"
+    )
+  }
+`
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index 9fb8bf2d0..d263b6300 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -4,6 +4,7 @@ import { videoPlayerFields } from '../videoPlayerFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
 import linkSelectorFields, { linkReferenceFields } from './actions/linkSelectorFields'
+import { promoLinkReferenceFields } from './actions/promoLinkReferenceFields'
 import markDefs from './blockEditorMarks'
 import { eventPromotionFields, futureEventsQuery, pastEventsQuery } from './eventPromotion'
 import { imageCarouselFields } from './imageCarouselFields'
@@ -189,22 +190,7 @@ const pageContentFields = /* groq */ `
       "id": _key,
       title,
       linkLabelAsTitle,
-      text[]{..., ${markDefs}},
-      "action": {
-        "label": link.label,
-        "ariaLabel": link.ariaLabel,
-        "anchorReference": link.anchorReference,
-        "link": select(
-          link.linkToOtherLanguage == true =>
-            link.referenceToOtherLanguage->${linkReferenceFields},
-            link.reference->${linkReferenceFields},
-        ),
-        "href": link.url,
-        "type": select(
-          defined(link.url) => "externalUrl",
-          "internalUrl"
-        ),
-      },
+      "action": ${promoLinkReferenceFields},
       "designOptions": {
         "background": coalesce(background.title, 'none'),
       },

From 32b83cae5cbe181080f099199e63aa5accdfaefc Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 8 Nov 2023 15:25:35 +0100
Subject: [PATCH 07/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20title,=20ad?=
 =?UTF-8?q?d=20link=20toggle=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx    | 59 ++++++-------------
 web/lib/queries/common/pageContentFields.ts   |  3 +-
 .../topicPages/PromoTextTileArray.tsx         | 20 ++-----
 web/types/types.ts                            |  1 -
 4 files changed, 24 insertions(+), 59 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index aebb2f084..d2d16af09 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -6,26 +6,22 @@ import { EdsIcon } from '../../icons'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
 import type { LinkSelector } from './linkSelector'
-import { configureTitleBlockContent, configureBlockContent } from '../editors'
+import { configureBlockContent } from '../editors'
+import { getLinkSelectorFields } from './linkSelector'
 
-const titleContentType = configureTitleBlockContent()
-
-const blockContentType = configureBlockContent({
+const ingressContentType = configureBlockContent({
   h1: false,
   h2: false,
   h3: false,
   h4: false,
-  internalLink: false,
-  externalLink: false,
   attachment: false,
-  lists: false,
 })
 
 export type PromoTextTile = {
   _type: 'promoTextTile'
-  title: PortableTextBlock[]
   linkLabelAsTitle?: boolean
   link?: LinkSelector
+  isLink?: boolean
   background?: ColorSelectorValue
 }
 
@@ -50,40 +46,31 @@ export default {
     },
   ],
   fields: [
-    {
-      name: 'title',
-      type: 'array',
-      components: {
-        input: CompactBlockEditor,
-      },
-      of: [titleContentType],
-      title: 'Title',
-      validation: (Rule: Rule) =>
-        Rule.custom((value: PortableTextBlock[], context: ValidationContext) => {
-          const { parent } = context as { parent: PromoTextTile }
-          if (parent?.linkLabelAsTitle || value) return true
-          return 'Required'
-        }),
-    },
     {
       name: 'text',
-      title: 'Text content',
+      title: 'Ingress',
       type: 'array',
-      of: [blockContentType],
+      of: [ingressContentType],
       validation: (Rule: Rule) =>
         Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(),
     },
     {
-      name: 'linkLabelAsTitle',
-      title: 'Toggle link button text',
-      description: 'This will add the link label as the button text',
+      name: 'isLink',
       type: 'boolean',
+      title: 'Use a link',
+      description: 'Link to another piece of content',
       initialValue: false,
     },
     {
-      name: 'link',
-      type: 'linkSelector',
+      name: 'linkLabelAsTitle',
+      title: 'Toggle button text',
+      description: 'This will add the text to link',
+      type: 'boolean',
+      initialValue: false,
+      hidden: ({ parent }: { parent: PromoTextTile }) => !parent.isLink,
     },
+    ...getLinkSelectorFields(undefined, 'isLink'),
+
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',
@@ -98,17 +85,9 @@ export default {
       linkLabelAsTitle: 'linkLabelAsTitle',
       link: 'link.label',
     },
-    prepare({
-      title,
-      linkLabelAsTitle,
-      link,
-    }: {
-      title: PortableTextBlock[]
-      linkLabelAsTitle: boolean
-      link: string
-    }) {
+    prepare({ linkLabelAsTitle, link }: { title: PortableTextBlock[]; linkLabelAsTitle: boolean; link: string }) {
       return {
-        title: linkLabelAsTitle ? link : blocksToText(title),
+        title: linkLabelAsTitle && link,
         subtitle: `Promo text tile component`,
         media: EdsIcon(label),
       }
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index d263b6300..ba1157c59 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -184,11 +184,10 @@ const pageContentFields = /* groq */ `
   _type == "promoTextTileArray"=>{
     "type": _type,
     "id": _key,
-    "useHorizontalScroll": useHorizontalScroll,
     spacing,
     "group": group[]{
       "id": _key,
-      title,
+      text,
       linkLabelAsTitle,
       "action": ${promoLinkReferenceFields},
       "designOptions": {
diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 9d877496d..48b0982b7 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -1,6 +1,5 @@
 import { BackgroundContainer, Card } from '@components'
 import { tokens } from '@equinor/eds-tokens'
-import { PortableTextBlock } from '@portabletext/types'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
 import type { PromoTextTileArrayData, PromoTextTileData } from '../../types/types'
@@ -48,24 +47,18 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
   height: 100%;
 `
 
-const TitleWrapper = styled.div`
-  margin-bottom: var(--space-medium);
-`
-
 const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; anchor?: string }) => {
   if (!data.group) return null
   const isMultipleCards = data.group.length > 1
 
-  const isSingleCard = data.group.length === 1
-
   return (
     <div className="background-none" id={anchor}>
       <Container isMultipleCards={isMultipleCards}>
         {data.group.map((tile: PromoTextTileData) => {
-          const { id, designOptions, action, linkLabelAsTitle, text, title } = tile
+          const { id, designOptions, action, linkLabelAsTitle, text } = tile
           const { background } = designOptions
+          console.log('text', text)
 
-          const hasLink = !!tile.action // Check if link is present
           return (
             <StyledBackgroundContainer
               style={data?.spacing ? { marginTop: '50px', marginBottom: '50px' } : {}}
@@ -80,16 +73,11 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                 style={
                   {
                     padding: 'var(--space-medium) 0 0 0',
-                    '--card-maxWidth': isSingleCard ? '100%' : '280px',
+                    '--card-maxWidth': !isMultipleCards ? '100%' : '280px',
                   } as CSSProperties
                 }
               >
-                <ContentWrapper alignLeft={isMultipleCards} hasLink={hasLink}>
-                  <TitleWrapper>
-                    <Header>
-                      <PromotileTitleText value={title} />
-                    </Header>
-                  </TitleWrapper>
+                <ContentWrapper alignLeft={isMultipleCards} hasLink={!!tile.action}>
                   <Text>
                     <PromotileTitleText value={text} />
                   </Text>
diff --git a/web/types/types.ts b/web/types/types.ts
index 1932866f6..48b0f5d1f 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -405,7 +405,6 @@ export type PromoTileData = {
 
 export type PromoTextTileData = {
   id: string
-  title: PortableTextBlock[]
   text: PortableTextBlock[]
   action: LinkData
   designOptions: DesignOptions

From 1cd82c84eed44c6ea37402a4f45051933f95fb33 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 8 Nov 2023 15:36:11 +0100
Subject: [PATCH 08/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Removed=20one=20too?=
 =?UTF-8?q?=20many=20lines=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/sanityv3/schemas/objects/promoTile.tsx b/sanityv3/schemas/objects/promoTile.tsx
index 0e1668d13..927d8bec8 100644
--- a/sanityv3/schemas/objects/promoTile.tsx
+++ b/sanityv3/schemas/objects/promoTile.tsx
@@ -89,6 +89,7 @@ export default {
     },
     prepare({
       title,
+      imageUrl,
       linkLabelAsTitle,
       link,
     }: {
@@ -100,7 +101,7 @@ export default {
       return {
         title: linkLabelAsTitle ? link : blocksToText(title),
         subtitle: `Promo tile component`,
-        media: EdsIcon(label),
+        media: imageUrl ? <img src={imageUrl} alt="" style={{ height: '100%' }} /> : EdsIcon(label),
       }
     },
   },

From 22acdf79e43f0a1659b4ab2ee894f4d36d2bcdfa Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 8 Nov 2023 15:56:50 +0100
Subject: [PATCH 09/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20padding=20and?=
 =?UTF-8?q?=20bigger=20fontsize=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topicPages/PromoTextTileArray.tsx         | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 48b0982b7..8d80ff106 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -6,17 +6,17 @@ import type { PromoTextTileArrayData, PromoTextTileData } from '../../types/type
 import PromotileTitleText from '../shared/portableText/PromoTileTitleText'
 import { PromoTileButton } from './PromoTileButton'
 
-const { Header, Action, Text } = Card
+const { Action, Text } = Card
 
 const Container = styled.div<{ isMultipleCards: boolean }>`
   display: grid;
-  grid-template-columns: ${({ isMultipleCards }) =>
-    isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
   grid-gap: var(--space-medium);
   padding: var(--space-3xLarge) var(--layout-paddingHorizontal-large);
   max-width: var(--maxViewportWidth);
   margin: auto;
   height: 100%;
+  grid-template-columns: ${({ isMultipleCards }) =>
+    isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
 `
 
 const StyledBackgroundContainer = styled(BackgroundContainer)`
@@ -35,6 +35,9 @@ const StyledCard = styled(Card)<{ alignLeft: boolean }>`
   height: 300px;
   overflow: hidden;
   justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
+  @media (max-width: 750px) {
+    justify-content: center;
+  }
 `
 
 const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
@@ -45,6 +48,10 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
   text-align: center;
   margin-bottom: var(--space-medium);
   height: 100%;
+  @media (max-width: 750px) {
+    justify-content: center;
+    align-items: center;
+  }
 `
 
 const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; anchor?: string }) => {
@@ -72,14 +79,23 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                 alignLeft={isMultipleCards}
                 style={
                   {
-                    padding: 'var(--space-medium) 0 0 0',
+                    padding: 'var(--space-medium)',
                     '--card-maxWidth': !isMultipleCards ? '100%' : '280px',
+                    fontSize: 'var(--typeScale-5)',
                   } as CSSProperties
                 }
               >
                 <ContentWrapper alignLeft={isMultipleCards} hasLink={!!tile.action}>
                   <Text>
-                    <PromotileTitleText value={text} />
+                    <PromotileTitleText
+                      style={
+                        {
+                          '--card-title-fontSize': 'var(--typeScale-3)',
+                          '--card-title-fontWeight': '400',
+                        } as CSSProperties
+                      }
+                      value={text}
+                    />
                   </Text>
                   {action.label && (
                     <StyledAction>

From 826c1dd444f064b66a12d6e5de7f9aa104c2a1b9 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 8 Nov 2023 16:42:57 +0100
Subject: [PATCH 10/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Change=20from=20text?=
 =?UTF-8?q?=20to=20ingress=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx    | 19 ++++++++++---------
 .../schemas/objects/promoTextTileArray.tsx    | 17 ++++-------------
 web/lib/queries/common/pageContentFields.ts   |  2 +-
 .../topicPages/PromoTextTileArray.tsx         | 17 +++++++++++------
 web/types/types.ts                            |  2 +-
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index d2d16af09..23328b667 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -1,20 +1,21 @@
 import { label } from '@equinor/eds-icons'
 import type { PortableTextBlock, Rule, ValidationContext } from 'sanity'
 import type { ColorSelectorValue } from '../components/ColorSelector'
-import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
-import CompactBlockEditor from '../components/CompactBlockEditor'
 import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
 import type { LinkSelector } from './linkSelector'
 import { configureBlockContent } from '../editors'
 import { getLinkSelectorFields } from './linkSelector'
 
-const ingressContentType = configureBlockContent({
+const ingressBlockContentType = configureBlockContent({
   h1: false,
   h2: false,
   h3: false,
   h4: false,
+  internalLink: false,
+  externalLink: false,
   attachment: false,
+  lists: false,
 })
 
 export type PromoTextTile = {
@@ -47,12 +48,12 @@ export default {
   ],
   fields: [
     {
-      name: 'text',
-      title: 'Ingress',
+      name: 'ingress',
+      title: 'Promo Text',
+      description: 'Max 200 characters',
       type: 'array',
-      of: [ingressContentType],
-      validation: (Rule: Rule) =>
-        Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(),
+      of: [ingressBlockContentType],
+      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 200)),
     },
     {
       name: 'isLink',
@@ -87,7 +88,7 @@ export default {
     },
     prepare({ linkLabelAsTitle, link }: { title: PortableTextBlock[]; linkLabelAsTitle: boolean; link: string }) {
       return {
-        title: linkLabelAsTitle && link,
+        title: linkLabelAsTitle || link || 'Promo Text Tile',
         subtitle: `Promo text tile component`,
         media: EdsIcon(label),
       }
diff --git a/sanityv3/schemas/objects/promoTextTileArray.tsx b/sanityv3/schemas/objects/promoTextTileArray.tsx
index 3f32b37be..70bdd9e63 100644
--- a/sanityv3/schemas/objects/promoTextTileArray.tsx
+++ b/sanityv3/schemas/objects/promoTextTileArray.tsx
@@ -1,8 +1,7 @@
 import { collection_2 } from '@equinor/eds-icons'
 import { EdsIcon } from '../../icons'
-import type { PortableTextBlock, Rule } from 'sanity'
+import type { Rule } from 'sanity'
 import type { PromoTextTile } from './promoTextTile'
-import blocksToText from '../../helpers/blocksToText'
 
 export type PromoTextTileArray = {
   _type: 'promoTextTileArray'
@@ -33,18 +32,10 @@ export default {
     select: {
       group: 'group',
     },
-    prepare({ group }: { group: PromoTextTile[] }) {
-      const getTitle = (promoTextTile: PromoTextTile) => {
-        return promoTextTile.linkLabelAsTitle
-          ? promoTextTile.link?.label
-          : blocksToText(promoTextTile.title as PortableTextBlock[])
-      }
-      const firstTitle = group[0] ? getTitle(group[0]) : ''
-      const secondTitle = group[1] ? getTitle(group[1]) : ''
-
+    prepare() {
       return {
-        title: firstTitle + (group[1] ? ' | ' + secondTitle : ''),
-        subtitle: 'Promo tiles component',
+        title: 'Promo tiles array',
+        subtitle: `Promo text tile array component`,
         media: <div>{EdsIcon(collection_2)}</div>,
       }
     },
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index ba1157c59..f37f80c4a 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -187,7 +187,7 @@ const pageContentFields = /* groq */ `
     spacing,
     "group": group[]{
       "id": _key,
-      text,
+      ingress[]{..., ${markDefs}},
       linkLabelAsTitle,
       "action": ${promoLinkReferenceFields},
       "designOptions": {
diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 8d80ff106..b8e1af423 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import type { PromoTextTileArrayData, PromoTextTileData } from '../../types/types'
 import PromotileTitleText from '../shared/portableText/PromoTileTitleText'
 import { PromoTileButton } from './PromoTileButton'
+import { PortableTextBlock } from '@portabletext/types'
 
 const { Action, Text } = Card
 
@@ -19,9 +20,14 @@ const Container = styled.div<{ isMultipleCards: boolean }>`
     isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
 `
 
-const StyledBackgroundContainer = styled(BackgroundContainer)`
+const StyledBackgroundContainer = styled(BackgroundContainer)<{ isSpacing?: boolean }>`
   border-radius: ${tokens.shape.corners.borderRadius};
   box-shadow: var(--card-box-shadow);
+  ${({ isSpacing }) =>
+    isSpacing && {
+      marginTop: '50px',
+      marginBottom: '50px',
+    }}
 `
 
 const StyledAction = styled(Action)`
@@ -62,13 +68,12 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
     <div className="background-none" id={anchor}>
       <Container isMultipleCards={isMultipleCards}>
         {data.group.map((tile: PromoTextTileData) => {
-          const { id, designOptions, action, linkLabelAsTitle, text } = tile
+          const { id, designOptions, action, linkLabelAsTitle, ingress } = tile
           const { background } = designOptions
-          console.log('text', text)
 
           return (
             <StyledBackgroundContainer
-              style={data?.spacing ? { marginTop: '50px', marginBottom: '50px' } : {}}
+              isSpacing={data?.spacing}
               disableContainerWrapper={true}
               background={background}
               key={id}
@@ -94,7 +99,7 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                           '--card-title-fontWeight': '400',
                         } as CSSProperties
                       }
-                      value={text}
+                      value={ingress as PortableTextBlock[]}
                     />
                   </Text>
                   {action.label && (
@@ -102,7 +107,7 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                       {linkLabelAsTitle ? (
                         <PromoTileButton action={action} template="text" hasImage={true} />
                       ) : (
-                        <PromoTileButton action={action} hasImage={false} template="icon" />
+                        <PromoTileButton action={action} template="icon" hasImage={false} />
                       )}
                     </StyledAction>
                   )}
diff --git a/web/types/types.ts b/web/types/types.ts
index 48b0f5d1f..cbb5b1458 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -405,7 +405,7 @@ export type PromoTileData = {
 
 export type PromoTextTileData = {
   id: string
-  text: PortableTextBlock[]
+  ingress: PortableTextBlock[]
   action: LinkData
   designOptions: DesignOptions
   linkLabelAsTitle?: boolean

From 620e79997bd2153e3179c119e67fb50ec8c0f04b Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Mon, 13 Nov 2023 14:59:20 +0100
Subject: [PATCH 11/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20Add=20a=20better?=
 =?UTF-8?q?=20toggling=20of=20spacing=20and=20aligning=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topicPages/PromoTextTileArray.tsx         | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index b8e1af423..279af7e13 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -9,7 +9,7 @@ import { PortableTextBlock } from '@portabletext/types'
 
 const { Action, Text } = Card
 
-const Container = styled.div<{ isMultipleCards: boolean }>`
+const Container = styled.div<{ isMultipleCards: boolean; isSpacing?: boolean }>`
   display: grid;
   grid-gap: var(--space-medium);
   padding: var(--space-3xLarge) var(--layout-paddingHorizontal-large);
@@ -18,11 +18,6 @@ const Container = styled.div<{ isMultipleCards: boolean }>`
   height: 100%;
   grid-template-columns: ${({ isMultipleCards }) =>
     isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
-`
-
-const StyledBackgroundContainer = styled(BackgroundContainer)<{ isSpacing?: boolean }>`
-  border-radius: ${tokens.shape.corners.borderRadius};
-  box-shadow: var(--card-box-shadow);
   ${({ isSpacing }) =>
     isSpacing && {
       marginTop: '50px',
@@ -30,6 +25,11 @@ const StyledBackgroundContainer = styled(BackgroundContainer)<{ isSpacing?: bool
     }}
 `
 
+const StyledBackgroundContainer = styled(BackgroundContainer)`
+  border-radius: ${tokens.shape.corners.borderRadius};
+  box-shadow: var(--card-box-shadow);
+`
+
 const StyledAction = styled(Action)`
   flex-grow: 1;
 `
@@ -41,7 +41,7 @@ const StyledCard = styled(Card)<{ alignLeft: boolean }>`
   height: 300px;
   overflow: hidden;
   justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
-  @media (max-width: 750px) {
+  @media (max-width: 1004px) {
     justify-content: center;
   }
 `
@@ -54,7 +54,7 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
   text-align: center;
   margin-bottom: var(--space-medium);
   height: 100%;
-  @media (max-width: 750px) {
+  @media (max-width: 1004px) {
     justify-content: center;
     align-items: center;
   }
@@ -66,18 +66,13 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
 
   return (
     <div className="background-none" id={anchor}>
-      <Container isMultipleCards={isMultipleCards}>
+      <Container isMultipleCards={isMultipleCards} isSpacing={data?.spacing}>
         {data.group.map((tile: PromoTextTileData) => {
           const { id, designOptions, action, linkLabelAsTitle, ingress } = tile
           const { background } = designOptions
 
           return (
-            <StyledBackgroundContainer
-              isSpacing={data?.spacing}
-              disableContainerWrapper={true}
-              background={background}
-              key={id}
-            >
+            <StyledBackgroundContainer disableContainerWrapper={true} background={background} key={id}>
               <StyledCard
                 type="promo"
                 textOnly={true}

From b2f928f29af62fe8610dc274e96a946dbb9cd527 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 14 Nov 2023 14:20:25 +0100
Subject: [PATCH 12/22] =?UTF-8?q?=F0=9F=90=9B=20Working=20links=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx       | 14 +++++++++-----
 .../common/actions/promoLinkReferenceFields.ts   | 16 ++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index 23328b667..7744fc947 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -45,15 +45,20 @@ export default {
       title: 'Link',
       description: 'Select either an internal link or external URL.',
     },
+    {
+      name: 'label',
+      title: 'Label',
+      description: 'The label that the link/button should have.',
+    },
   ],
   fields: [
     {
       name: 'ingress',
       title: 'Promo Text',
-      description: 'Max 200 characters',
+      description: 'Max 100 characters',
       type: 'array',
       of: [ingressBlockContentType],
-      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 200)),
+      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 100)),
     },
     {
       name: 'isLink',
@@ -70,8 +75,7 @@ export default {
       initialValue: false,
       hidden: ({ parent }: { parent: PromoTextTile }) => !parent.isLink,
     },
-    ...getLinkSelectorFields(undefined, 'isLink'),
-
+    ...getLinkSelectorFields('label', 'isLink'),
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',
@@ -84,7 +88,7 @@ export default {
     select: {
       title: 'title',
       linkLabelAsTitle: 'linkLabelAsTitle',
-      link: 'link.label',
+      link: 'label',
     },
     prepare({ linkLabelAsTitle, link }: { title: PortableTextBlock[]; linkLabelAsTitle: boolean; link: string }) {
       return {
diff --git a/web/lib/queries/common/actions/promoLinkReferenceFields.ts b/web/lib/queries/common/actions/promoLinkReferenceFields.ts
index 2ae3ce68c..8a4ec50c9 100644
--- a/web/lib/queries/common/actions/promoLinkReferenceFields.ts
+++ b/web/lib/queries/common/actions/promoLinkReferenceFields.ts
@@ -2,17 +2,17 @@ import { linkReferenceFields } from '../actions/linkSelectorFields'
 
 export const promoLinkReferenceFields = /* groq */ `
  {
-    "label": link.label,
-    "ariaLabel": link.ariaLabel,
-    "anchorReference": link.anchorReference,
+    "label": label,
+    "ariaLabel": ariaLabel,
+    "anchorReference": anchorReference,
     "link": select(
-      link.linkToOtherLanguage == true =>
-        link.referenceToOtherLanguage->${linkReferenceFields},
-        link.reference->${linkReferenceFields},
+      linkToOtherLanguage == true =>
+        referenceToOtherLanguage->${linkReferenceFields},
+        reference->${linkReferenceFields},
     ),
-    "href": link.url,
+    "href": url,
     "type": select(
-      defined(link.url) => "externalUrl",
+      defined(url) => "externalUrl",
       "internalUrl"
     )
   }

From 36a4c4e254e3b0585613f389f828c7f51acb801d Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 14 Nov 2023 23:57:03 +0100
Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20for=20tile=20#188?=
 =?UTF-8?q?9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTileArray.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTileArray.tsx b/sanityv3/schemas/objects/promoTextTileArray.tsx
index 70bdd9e63..4c2f13ebf 100644
--- a/sanityv3/schemas/objects/promoTextTileArray.tsx
+++ b/sanityv3/schemas/objects/promoTextTileArray.tsx
@@ -34,8 +34,8 @@ export default {
     },
     prepare() {
       return {
-        title: 'Promo tiles array',
-        subtitle: `Promo text tile array component`,
+        title: 'Promo text tiles',
+        subtitle: `Promo text tile component`,
         media: <div>{EdsIcon(collection_2)}</div>,
       }
     },

From 173f3b37f2a7902668f5eb1dc8c9f3c34cb61af5 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 14 Nov 2023 23:59:25 +0100
Subject: [PATCH 14/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20promotile?=
 =?UTF-8?q?buttonlogic=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topicPages/PromoTextTileArray.tsx         |  4 +-
 .../topicPages/PromoTileButton.tsx            | 59 ++++++++++---------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 279af7e13..7ac9ca212 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -100,9 +100,9 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                   {action.label && (
                     <StyledAction>
                       {linkLabelAsTitle ? (
-                        <PromoTileButton action={action} template="text" hasImage={true} />
+                        <PromoTileButton action={action} template="unstyledText" hasImage={true} />
                       ) : (
-                        <PromoTileButton action={action} template="icon" hasImage={false} />
+                        <PromoTileButton action={action} template="icon" hasImage={true} />
                       )}
                     </StyledAction>
                   )}
diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx
index 89cdac90a..ae2df7299 100644
--- a/web/pageComponents/topicPages/PromoTileButton.tsx
+++ b/web/pageComponents/topicPages/PromoTileButton.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components'
 type Props = {
   action: LinkData
   hasImage: boolean
-  template?: 'default' | 'icon' | 'text'
+  template?: 'default' | 'icon' | 'unstyledText' | 'text'
 }
 
 const StyledLink = styled(Link)`
@@ -21,49 +21,52 @@ const Wrapper = styled.div`
   padding: 0 var(--space-medium);
 `
 
-const TextButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
+const generateLink = (action: LinkData, hasImage?: boolean, wrapper?: boolean, template?: string) => {
   const url = getUrlFromAction(action)
+
   if (!url) {
     console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`)
     return null
   }
+
   const locale = getLocaleFromName(action.link?.lang)
 
-  return (
-    <Wrapper>
-      <StyledLink underline={false} variant="contentLink" locale={locale} href={url} aria-label={action.ariaLabel}>
-        <Card.Title
-          style={
-            {
-              '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
-              '--card-title-fontWeight': hasImage ? '450' : '400',
-            } as CSSProperties
-          }
-        >
-          {action.label}
-        </Card.Title>
-      </StyledLink>
-    </Wrapper>
+  if (template === 'icon') {
+    return (
+      <StyledLink underline={false} variant="contentLink" locale={locale} href={url} aria-label={action.ariaLabel} />
+    )
+  }
+
+  const linkContent = (
+    <Card.Title
+      style={
+        {
+          '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
+          '--card-title-fontWeight': hasImage ? '450' : '400',
+        } as CSSProperties
+      }
+    >
+      {action.label}
+    </Card.Title>
   )
-}
 
-const IconButtonLink = ({ action }: { action: LinkData; hasImage: boolean }) => {
-  const url = getUrlFromAction(action)
-  if (!url) {
-    console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`)
-    return null
-  }
-  const locale = getLocaleFromName(action.link?.lang)
+  const linkElement = (
+    <StyledLink underline={false} variant="contentLink" locale={locale} href={url} aria-label={action.ariaLabel}>
+      {linkContent}
+    </StyledLink>
+  )
 
-  return <StyledLink underline={false} variant="contentLink" locale={locale} href={url} aria-label={action.ariaLabel} />
+  return wrapper ? <Wrapper>{linkElement}</Wrapper> : linkElement
 }
 
 export const PromoTileButton = ({ action, template = 'default', hasImage }: Props) => {
   switch (template) {
+    case 'unstyledText':
+      return generateLink(action, hasImage)
     case 'text':
-      return <TextButtonLink action={action} hasImage={hasImage} />
+      return generateLink(action, hasImage, true)
     case 'icon':
-      return <IconButtonLink action={action} hasImage={hasImage} />
+      return generateLink(action, hasImage, false, template)
     default:
       return <ButtonLink action={action} />
   }

From 5f46bac6cf4e204dd6393676fb7cc2b7b61afaeb Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 15 Nov 2023 11:05:05 +0100
Subject: [PATCH 15/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Small=20refactor=20f?=
 =?UTF-8?q?or=20double=20linkreferences=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../actions/promoLinkReferenceFields.ts       | 19 -------------------
 web/lib/queries/common/pageContentFields.ts   |  3 +--
 2 files changed, 1 insertion(+), 21 deletions(-)
 delete mode 100644 web/lib/queries/common/actions/promoLinkReferenceFields.ts

diff --git a/web/lib/queries/common/actions/promoLinkReferenceFields.ts b/web/lib/queries/common/actions/promoLinkReferenceFields.ts
deleted file mode 100644
index 8a4ec50c9..000000000
--- a/web/lib/queries/common/actions/promoLinkReferenceFields.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { linkReferenceFields } from '../actions/linkSelectorFields'
-
-export const promoLinkReferenceFields = /* groq */ `
- {
-    "label": label,
-    "ariaLabel": ariaLabel,
-    "anchorReference": anchorReference,
-    "link": select(
-      linkToOtherLanguage == true =>
-        referenceToOtherLanguage->${linkReferenceFields},
-        reference->${linkReferenceFields},
-    ),
-    "href": url,
-    "type": select(
-      defined(url) => "externalUrl",
-      "internalUrl"
-    )
-  }
-`
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index f37f80c4a..d6edd626d 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -4,7 +4,6 @@ import { videoPlayerFields } from '../videoPlayerFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
 import linkSelectorFields, { linkReferenceFields } from './actions/linkSelectorFields'
-import { promoLinkReferenceFields } from './actions/promoLinkReferenceFields'
 import markDefs from './blockEditorMarks'
 import { eventPromotionFields, futureEventsQuery, pastEventsQuery } from './eventPromotion'
 import { imageCarouselFields } from './imageCarouselFields'
@@ -189,7 +188,7 @@ const pageContentFields = /* groq */ `
       "id": _key,
       ingress[]{..., ${markDefs}},
       linkLabelAsTitle,
-      "action": ${promoLinkReferenceFields},
+      "action": ${linkSelectorFields},
       "designOptions": {
         "background": coalesce(background.title, 'none'),
       },

From 1dadce0d4a05a6f1731820d24271a8cf773b6834 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Wed, 15 Nov 2023 14:13:41 +0100
Subject: [PATCH 16/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Restructure=20code?=
 =?UTF-8?q?=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx    | 11 +++---
 .../common/actions/linkSelectorFields.ts      | 36 ++++++++++---------
 web/lib/queries/common/eventContentFields.ts  |  4 +--
 web/lib/queries/common/heroFields.ts          |  4 +--
 web/lib/queries/common/newsSubqueries.ts      |  4 +--
 web/lib/queries/common/pageContentFields.ts   | 10 +++---
 web/lib/queries/iframeCarouselFields.ts       |  4 +--
 web/lib/queries/magazine.ts                   |  4 +--
 web/lib/queries/videoPlayerFields.ts          |  4 +--
 9 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index 7744fc947..805c80696 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -26,6 +26,8 @@ export type PromoTextTile = {
   background?: ColorSelectorValue
 }
 
+const linkFields = getLinkSelectorFields('label', 'isLink')
+
 export default {
   title: 'Promo text tile',
   name: 'promoTextTile',
@@ -67,15 +69,16 @@ export default {
       description: 'Link to another piece of content',
       initialValue: false,
     },
+    ...getLinkSelectorFields('label', 'isLink'),
     {
-      name: 'linkLabelAsTitle',
-      title: 'Toggle button text',
-      description: 'This will add the text to link',
+      name: 'showLinkLabel',
+      title: 'Show link label',
+      description: 'This will add the text to the button',
       type: 'boolean',
       initialValue: false,
       hidden: ({ parent }: { parent: PromoTextTile }) => !parent.isLink,
+      fieldset: 'label',
     },
-    ...getLinkSelectorFields('label', 'isLink'),
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',
diff --git a/web/lib/queries/common/actions/linkSelectorFields.ts b/web/lib/queries/common/actions/linkSelectorFields.ts
index 14d3c7f1d..5d3232b5b 100644
--- a/web/lib/queries/common/actions/linkSelectorFields.ts
+++ b/web/lib/queries/common/actions/linkSelectorFields.ts
@@ -16,21 +16,25 @@ export const linkReferenceFields = /* groq */ `
 `
 
 const linkSelectorFields = /* groq */ `
-_type == "linkSelector" => {
-  "id": _key,
-  "type": select(
-    defined(url) => "externalUrl", "internalUrl"
-  ),
-  label,
-  ariaLabel,
-  "link": select(
-    linkToOtherLanguage == true =>
-      referenceToOtherLanguage->${linkReferenceFields},
-      reference->${linkReferenceFields},
-  ),
-  "href": url,
-  anchorReference,
-}
+  {
+    "id": _key,
+    "type": select(
+      defined(url) => "externalUrl", "internalUrl"
+    ),
+    label,
+    ariaLabel,
+    "link": select(
+      linkToOtherLanguage == true =>
+        referenceToOtherLanguage->${linkReferenceFields},
+        reference->${linkReferenceFields},
+    ),
+    "href": url,
+    anchorReference,
+  }
+`
+
+const linkSelector = /* groq */ `
+  _type == "linkSelector" => ${linkSelectorFields}
 `
 
-export default linkSelectorFields
+export default linkSelector
diff --git a/web/lib/queries/common/eventContentFields.ts b/web/lib/queries/common/eventContentFields.ts
index 1a2d9aea2..2bcfd1076 100644
--- a/web/lib/queries/common/eventContentFields.ts
+++ b/web/lib/queries/common/eventContentFields.ts
@@ -1,5 +1,5 @@
 import markDefs from './blockEditorMarks'
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
 
@@ -76,7 +76,7 @@ export const eventContentFields = /* groq */ `
     title,
     heroImage,
     "links": links[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
diff --git a/web/lib/queries/common/heroFields.ts b/web/lib/queries/common/heroFields.ts
index d45e7b81d..3a5618601 100644
--- a/web/lib/queries/common/heroFields.ts
+++ b/web/lib/queries/common/heroFields.ts
@@ -1,4 +1,4 @@
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 
 export const heroFields = /* groq */ `{
     "type": coalesce(heroType, 'default'),
@@ -16,6 +16,6 @@ export const heroFields = /* groq */ `{
       "ratio": heroLoopingVideoRatio,
     },
     "link": heroLink[0]{
-      ${linkSelectorFields}
+      ${linkSelector}
     }
   }`
diff --git a/web/lib/queries/common/newsSubqueries.ts b/web/lib/queries/common/newsSubqueries.ts
index bf029a457..261f0133e 100644
--- a/web/lib/queries/common/newsSubqueries.ts
+++ b/web/lib/queries/common/newsSubqueries.ts
@@ -1,6 +1,6 @@
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 import markDefs from './blockEditorMarks'
 
 export const iframeForNewsQuery = /* groq */ `iframe {
@@ -43,7 +43,7 @@ export const relatedLinksForNewsQuery = /* groq */ `relatedLinks {
     title,
     heroImage,
     "links": links[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     }
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index d6edd626d..df84af7c1 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -3,7 +3,7 @@ import { videoPlayerCarouselFields } from '../videoPlayerCarouselFields'
 import { videoPlayerFields } from '../videoPlayerFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
-import linkSelectorFields, { linkReferenceFields } from './actions/linkSelectorFields'
+import linkSelector, { linkReferenceFields } from './actions/linkSelectorFields'
 import markDefs from './blockEditorMarks'
 import { eventPromotionFields, futureEventsQuery, pastEventsQuery } from './eventPromotion'
 import { imageCarouselFields } from './imageCarouselFields'
@@ -33,7 +33,7 @@ const pageContentFields = /* groq */ `
       "extension": asset-> extension
     },
     "action": action[0]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
@@ -52,7 +52,7 @@ const pageContentFields = /* groq */ `
     ingress[]{..., ${markDefs}},
     text[]{..., ${markDefs}},
     "callToActions": action[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
@@ -188,7 +188,7 @@ const pageContentFields = /* groq */ `
       "id": _key,
       ingress[]{..., ${markDefs}},
       linkLabelAsTitle,
-      "action": ${linkSelectorFields},
+      "action": ${linkSelector},
       "designOptions": {
         "background": coalesce(background.title, 'none'),
       },
@@ -208,7 +208,7 @@ const pageContentFields = /* groq */ `
     },
     frameTitle,
     "action": action[0]{
-      ${linkSelectorFields},
+      ${linkSelector},
     },
     url,
     "cookiePolicy": coalesce(cookiePolicy, 'none'),
diff --git a/web/lib/queries/iframeCarouselFields.ts b/web/lib/queries/iframeCarouselFields.ts
index 7a55acf15..2c606aacf 100644
--- a/web/lib/queries/iframeCarouselFields.ts
+++ b/web/lib/queries/iframeCarouselFields.ts
@@ -1,11 +1,11 @@
-import linkSelectorFields from './common/actions/linkSelectorFields'
+import linkSelector from './common/actions/linkSelectorFields'
 
 export const iframeCarouselFields = /* groq */ `
     "id": _key,
     "type": _type,
     title,
     items[]{..., "action": action[0]{
-      ${linkSelectorFields},
+      ${linkSelector},
     },},
     "designOptions": {
       "background": coalesce(background.title, 'none'),
diff --git a/web/lib/queries/magazine.ts b/web/lib/queries/magazine.ts
index d4e12998c..6ce8fd0fc 100644
--- a/web/lib/queries/magazine.ts
+++ b/web/lib/queries/magazine.ts
@@ -1,7 +1,7 @@
 import { heroFields } from './common/heroFields'
 import pageContentFields from './common/pageContentFields'
 import slugsForNewsAndMagazine from './slugsForNewsAndMagazine'
-import linkSelectorFields from './common/actions/linkSelectorFields'
+import linkSelector from './common/actions/linkSelectorFields'
 import downloadableFileFields from './common/actions/downloadableFileFields'
 import downloadableImageFields from './common/actions/downloadableImageFields'
 import markDefs from './common/blockEditorMarks'
@@ -23,7 +23,7 @@ const footerComponentFields = /* groq */ `
     "extension": asset-> extension
   },
   "action": action[0]{
-    ${linkSelectorFields},
+    ${linkSelector},
     ${downloadableFileFields},
     ${downloadableImageFields},
   },
diff --git a/web/lib/queries/videoPlayerFields.ts b/web/lib/queries/videoPlayerFields.ts
index bd09c9a95..14412d284 100644
--- a/web/lib/queries/videoPlayerFields.ts
+++ b/web/lib/queries/videoPlayerFields.ts
@@ -1,4 +1,4 @@
-import linkSelectorFields from './common/actions/linkSelectorFields'
+import linkSelector from './common/actions/linkSelectorFields'
 import markDefs from './common/blockEditorMarks'
 
 export const videoPlayerFields = /* groq */ `
@@ -10,7 +10,7 @@ export const videoPlayerFields = /* groq */ `
     ${markDefs},
   },
   "action": action[0] {
-    ${linkSelectorFields},
+    ${linkSelector},
   },
   "video": {
     "title": videoFile->video.title,

From 0486a21cfc85df7201179fb527e300b74d462fd1 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 15 Nov 2023 15:18:42 +0100
Subject: [PATCH 17/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Restructure=20code?=
 =?UTF-8?q?=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/actions/linkSelectorFields.ts       |  2 +-
 web/lib/queries/common/pageContentFields.ts    | 18 ++++--------------
 web/lib/queries/promoTextTileArrayFields.ts    | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 web/lib/queries/promoTextTileArrayFields.ts

diff --git a/web/lib/queries/common/actions/linkSelectorFields.ts b/web/lib/queries/common/actions/linkSelectorFields.ts
index 5d3232b5b..8300adbb9 100644
--- a/web/lib/queries/common/actions/linkSelectorFields.ts
+++ b/web/lib/queries/common/actions/linkSelectorFields.ts
@@ -15,7 +15,7 @@ export const linkReferenceFields = /* groq */ `
   }
 `
 
-const linkSelectorFields = /* groq */ `
+export const linkSelectorFields = /* groq */ `
   {
     "id": _key,
     "type": select(
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index df84af7c1..789483c21 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -1,6 +1,7 @@
 import { iframeCarouselFields } from '../iframeCarouselFields'
 import { videoPlayerCarouselFields } from '../videoPlayerCarouselFields'
 import { videoPlayerFields } from '../videoPlayerFields'
+import { promoTextTileArrayFields } from '../promoTextTileArrayFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
 import linkSelector, { linkReferenceFields } from './actions/linkSelectorFields'
@@ -180,20 +181,6 @@ const pageContentFields = /* groq */ `
       },
     },
   },
-  _type == "promoTextTileArray"=>{
-    "type": _type,
-    "id": _key,
-    spacing,
-    "group": group[]{
-      "id": _key,
-      ingress[]{..., ${markDefs}},
-      linkLabelAsTitle,
-      "action": ${linkSelector},
-      "designOptions": {
-        "background": coalesce(background.title, 'none'),
-      },
-    },
-  },
   _type == "iframe" => {
     "type": _type,
     "id": _key,
@@ -529,6 +516,9 @@ const pageContentFields = /* groq */ `
   _type == "videoPlayerCarousel" => {
     ${videoPlayerCarouselFields}
   },
+  _type == "promoTextTileArray" => {
+    ${promoTextTileArrayFields}
+  },
 `
 
 export default pageContentFields
diff --git a/web/lib/queries/promoTextTileArrayFields.ts b/web/lib/queries/promoTextTileArrayFields.ts
new file mode 100644
index 000000000..4b121dd3e
--- /dev/null
+++ b/web/lib/queries/promoTextTileArrayFields.ts
@@ -0,0 +1,17 @@
+import { linkSelectorFields } from './common/actions/linkSelectorFields'
+import markDefs from './common/blockEditorMarks'
+
+export const promoTextTileArrayFields = /* groq */ `
+    "id": _key,
+    "type": _type,
+    spacing,
+    "group": group[]{
+        "id": _key,
+        ingress[]{..., ${markDefs}},
+        linkLabelAsTitle,
+        "action": ${linkSelectorFields},
+        "designOptions": {
+            "background": coalesce(background.title, 'none'),
+        },
+    },
+`

From 142d4c371bfa37019e0ba7362b2678c537e8d743 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Mon, 20 Nov 2023 14:58:32 +0100
Subject: [PATCH 18/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20type=20an?=
 =?UTF-8?q?d=20preview=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx           | 12 ++++++------
 sanityv3/schemas/objects/promoTextTileArray.tsx      |  4 ++--
 web/lib/queries/promoTextTileArrayFields.ts          |  2 +-
 web/pageComponents/topicPages/PromoTextTileArray.tsx |  4 ++--
 web/types/types.ts                                   |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index 805c80696..76706a2e5 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -6,6 +6,7 @@ import { validateCharCounterEditor } from '../validations/validateCharCounterEdi
 import type { LinkSelector } from './linkSelector'
 import { configureBlockContent } from '../editors'
 import { getLinkSelectorFields } from './linkSelector'
+import blocksToText from '../../helpers/blocksToText'
 
 const ingressBlockContentType = configureBlockContent({
   h1: false,
@@ -60,7 +61,7 @@ export default {
       description: 'Max 100 characters',
       type: 'array',
       of: [ingressBlockContentType],
-      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 100)),
+      validation: (Rule: Rule) => Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 100)),
     },
     {
       name: 'isLink',
@@ -69,7 +70,7 @@ export default {
       description: 'Link to another piece of content',
       initialValue: false,
     },
-    ...getLinkSelectorFields('label', 'isLink'),
+    ...linkFields,
     {
       name: 'showLinkLabel',
       title: 'Show link label',
@@ -89,13 +90,12 @@ export default {
   ],
   preview: {
     select: {
-      title: 'title',
-      linkLabelAsTitle: 'linkLabelAsTitle',
       link: 'label',
+      ingress: 'ingress',
     },
-    prepare({ linkLabelAsTitle, link }: { title: PortableTextBlock[]; linkLabelAsTitle: boolean; link: string }) {
+    prepare({ link, ingress }: { link: string; ingress: PortableTextBlock[] }) {
       return {
-        title: linkLabelAsTitle || link || 'Promo Text Tile',
+        title: link || blocksToText(ingress) || 'Promo Text Tile',
         subtitle: `Promo text tile component`,
         media: EdsIcon(label),
       }
diff --git a/sanityv3/schemas/objects/promoTextTileArray.tsx b/sanityv3/schemas/objects/promoTextTileArray.tsx
index 4c2f13ebf..f23ab0871 100644
--- a/sanityv3/schemas/objects/promoTextTileArray.tsx
+++ b/sanityv3/schemas/objects/promoTextTileArray.tsx
@@ -27,7 +27,7 @@ export default {
       of: [{ type: 'promoTextTile' }],
       validation: (Rule: Rule) => Rule.required().min(1).max(2),
     },
-  ].filter((e) => e),
+  ],
   preview: {
     select: {
       group: 'group',
@@ -36,7 +36,7 @@ export default {
       return {
         title: 'Promo text tiles',
         subtitle: `Promo text tile component`,
-        media: <div>{EdsIcon(collection_2)}</div>,
+        media: EdsIcon(collection_2),
       }
     },
   },
diff --git a/web/lib/queries/promoTextTileArrayFields.ts b/web/lib/queries/promoTextTileArrayFields.ts
index 4b121dd3e..dc4b315ef 100644
--- a/web/lib/queries/promoTextTileArrayFields.ts
+++ b/web/lib/queries/promoTextTileArrayFields.ts
@@ -8,7 +8,7 @@ export const promoTextTileArrayFields = /* groq */ `
     "group": group[]{
         "id": _key,
         ingress[]{..., ${markDefs}},
-        linkLabelAsTitle,
+        showLinkLabel,
         "action": ${linkSelectorFields},
         "designOptions": {
             "background": coalesce(background.title, 'none'),
diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 7ac9ca212..d3be91d13 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -68,7 +68,7 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
     <div className="background-none" id={anchor}>
       <Container isMultipleCards={isMultipleCards} isSpacing={data?.spacing}>
         {data.group.map((tile: PromoTextTileData) => {
-          const { id, designOptions, action, linkLabelAsTitle, ingress } = tile
+          const { id, designOptions, action, showLinkLabel, ingress } = tile
           const { background } = designOptions
 
           return (
@@ -99,7 +99,7 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                   </Text>
                   {action.label && (
                     <StyledAction>
-                      {linkLabelAsTitle ? (
+                      {showLinkLabel ? (
                         <PromoTileButton action={action} template="unstyledText" hasImage={true} />
                       ) : (
                         <PromoTileButton action={action} template="icon" hasImage={true} />
diff --git a/web/types/types.ts b/web/types/types.ts
index cbb5b1458..e3ee4feb6 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -408,7 +408,7 @@ export type PromoTextTileData = {
   ingress: PortableTextBlock[]
   action: LinkData
   designOptions: DesignOptions
-  linkLabelAsTitle?: boolean
+  showLinkLabel?: boolean
 }
 
 export type PromoTileArrayData = {

From af315fccd0f3171c6ef27f979af52bd571ab3fcd Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Mon, 20 Nov 2023 15:40:17 +0100
Subject: [PATCH 19/22] =?UTF-8?q?=F0=9F=94=A5=20Remove=20redundant=20css?=
 =?UTF-8?q?=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pageComponents/topicPages/PromoTextTileArray.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index d3be91d13..ed2bb6a5e 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -15,7 +15,6 @@ const Container = styled.div<{ isMultipleCards: boolean; isSpacing?: boolean }>`
   padding: var(--space-3xLarge) var(--layout-paddingHorizontal-large);
   max-width: var(--maxViewportWidth);
   margin: auto;
-  height: 100%;
   grid-template-columns: ${({ isMultipleCards }) =>
     isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
   ${({ isSpacing }) =>
@@ -37,7 +36,6 @@ const StyledAction = styled(Action)`
 const StyledCard = styled(Card)<{ alignLeft: boolean }>`
   width: 100%;
   --card-maxWidth: 280px;
-  flex-direction: row;
   height: 300px;
   overflow: hidden;
   justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
@@ -50,9 +48,6 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex-start' : 'center') : 'center')};
-  justify-content: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex-start' : 'center') : 'center')};
-  text-align: center;
-  margin-bottom: var(--space-medium);
   height: 100%;
   @media (max-width: 1004px) {
     justify-content: center;

From 70ec668f215f73fce3cc9ceda3254ec781b7cc55 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 21 Nov 2023 14:25:31 +0100
Subject: [PATCH 20/22] =?UTF-8?q?=F0=9F=94=A5=20Remove=20redundant=20css?=
 =?UTF-8?q?=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topicPages/PromoTextTileArray.tsx         | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index ed2bb6a5e..135245a27 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -29,29 +29,24 @@ const StyledBackgroundContainer = styled(BackgroundContainer)`
   box-shadow: var(--card-box-shadow);
 `
 
-const StyledAction = styled(Action)`
-  flex-grow: 1;
-`
-
 const StyledCard = styled(Card)<{ alignLeft: boolean }>`
+  justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
   width: 100%;
   --card-maxWidth: 280px;
   height: 300px;
+  text-align: center;
   overflow: hidden;
-  justify-content: ${({ alignLeft }) => (alignLeft ? 'flex-start' : 'center')};
-  @media (max-width: 1004px) {
-    justify-content: center;
-  }
 `
 
 const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
-  display: flex;
-  flex-direction: column;
+  display: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex' : 'inline-grid') : 'inline-grid')};
   align-items: ${({ hasLink, alignLeft }) => (hasLink ? (alignLeft ? 'flex-start' : 'center') : 'center')};
+  flex-direction: column;
   height: 100%;
+  justify-items: center;
   @media (max-width: 1004px) {
-    justify-content: center;
     align-items: center;
+    display: inline-grid;
   }
 `
 
@@ -93,13 +88,13 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                     />
                   </Text>
                   {action.label && (
-                    <StyledAction>
+                    <Action>
                       {showLinkLabel ? (
                         <PromoTileButton action={action} template="unstyledText" hasImage={true} />
                       ) : (
                         <PromoTileButton action={action} template="icon" hasImage={true} />
                       )}
-                    </StyledAction>
+                    </Action>
                   )}
                 </ContentWrapper>
               </StyledCard>

From b69f9f71e2cb3a3e9aee761570465f4e36f934b7 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Fri, 1 Dec 2023 10:23:55 +0100
Subject: [PATCH 21/22] =?UTF-8?q?=F0=9F=90=9B=20Limit=20gridtemplate=20col?=
 =?UTF-8?q?umns=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pageComponents/topicPages/PromoTextTileArray.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index 135245a27..daade8ebd 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -16,7 +16,7 @@ const Container = styled.div<{ isMultipleCards: boolean; isSpacing?: boolean }>`
   max-width: var(--maxViewportWidth);
   margin: auto;
   grid-template-columns: ${({ isMultipleCards }) =>
-    isMultipleCards ? 'repeat(auto-fill, minmax(280px, 1fr))' : '1fr'};
+    isMultipleCards ? 'repeat(auto-fit, minmax(min(100%, 280px), 1fr));' : '1fr'};
   ${({ isSpacing }) =>
     isSpacing && {
       marginTop: '50px',

From f6630327507bcf946980427c20261e85e1bf2281 Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Fri, 8 Dec 2023 16:15:35 +0100
Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=94=A5=20size=20adjustment,=20break?=
 =?UTF-8?q?line=20added=20and=20remove=20char=20limit=20#1889?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/promoTextTile.tsx    |  5 +--
 web/components/src/Text/Text.tsx              |  3 +-
 .../portableText/PromoTextTileIngress.tsx     | 39 +++++++++++++++++++
 .../topicPages/PromoTextTileArray.tsx         | 20 ++++------
 4 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 web/pageComponents/shared/portableText/PromoTextTileIngress.tsx

diff --git a/sanityv3/schemas/objects/promoTextTile.tsx b/sanityv3/schemas/objects/promoTextTile.tsx
index 76706a2e5..96e38b368 100644
--- a/sanityv3/schemas/objects/promoTextTile.tsx
+++ b/sanityv3/schemas/objects/promoTextTile.tsx
@@ -1,8 +1,7 @@
 import { label } from '@equinor/eds-icons'
-import type { PortableTextBlock, Rule, ValidationContext } from 'sanity'
+import type { PortableTextBlock } from 'sanity'
 import type { ColorSelectorValue } from '../components/ColorSelector'
 import { EdsIcon } from '../../icons'
-import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
 import type { LinkSelector } from './linkSelector'
 import { configureBlockContent } from '../editors'
 import { getLinkSelectorFields } from './linkSelector'
@@ -58,10 +57,8 @@ export default {
     {
       name: 'ingress',
       title: 'Promo Text',
-      description: 'Max 100 characters',
       type: 'array',
       of: [ingressBlockContentType],
-      validation: (Rule: Rule) => Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 100)),
     },
     {
       name: 'isLink',
diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx
index ec17c2c3b..98a1b8fef 100644
--- a/web/components/src/Text/Text.tsx
+++ b/web/components/src/Text/Text.tsx
@@ -41,7 +41,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
 `
 
 export type TextProps = {
-  size?: 'regular' | 'md' | 'small' | 'lg'
+  size?: 'regular' | 'md' | 'small' | 'lg' | 'ml'
   lineHeight?: '1' | '2' | '2_5' | '3'
   bold?: boolean
   italic?: boolean
@@ -53,6 +53,7 @@ export type TextProps = {
 /* Should be easy enough to change later on */
 const sizes = {
   lg: 'var(--typeScale-4_5)',
+  ml: 'var(--typeScale-3)',
   regular: 'var(--typeScale-1)',
   md: 'var(--typeScale-2)',
   small: 'var(--typeScale-0)',
diff --git a/web/pageComponents/shared/portableText/PromoTextTileIngress.tsx b/web/pageComponents/shared/portableText/PromoTextTileIngress.tsx
new file mode 100644
index 000000000..5ca4fbdf0
--- /dev/null
+++ b/web/pageComponents/shared/portableText/PromoTextTileIngress.tsx
@@ -0,0 +1,39 @@
+import { PortableText, PortableTextProps, PortableTextReactComponents } from '@portabletext/react'
+import isEmpty from './helpers/isEmpty'
+import { Sub, Sup, Strikethrough } from './components'
+
+import type { PortableTextBlock } from '@portabletext/types'
+
+import { Text } from '@components'
+
+const defaultComponents = (centered: boolean) => {
+  return {
+    block: {
+      normal: ({ children }: PortableTextBlock) => {
+        if (isEmpty(children)) return null
+        return (
+          <Text size="ml" centered={centered} style={{ margin: 0 }}>
+            <>{children}</>
+          </Text>
+        )
+      },
+    },
+    marks: { sub: Sub, sup: Sup, s: Strikethrough },
+  }
+}
+
+type IngressTextProps = {
+  centered?: boolean
+} & PortableTextProps
+
+const PromotileTitleText = ({ value, components = {}, centered = false, ...props }: IngressTextProps) => {
+  return (
+    <PortableText
+      value={value}
+      components={{ ...defaultComponents(centered), ...components } as PortableTextReactComponents}
+      {...props}
+    />
+  )
+}
+
+export default PromotileTitleText
diff --git a/web/pageComponents/topicPages/PromoTextTileArray.tsx b/web/pageComponents/topicPages/PromoTextTileArray.tsx
index daade8ebd..7d8c11d47 100644
--- a/web/pageComponents/topicPages/PromoTextTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTextTileArray.tsx
@@ -3,16 +3,17 @@ import { tokens } from '@equinor/eds-tokens'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
 import type { PromoTextTileArrayData, PromoTextTileData } from '../../types/types'
-import PromotileTitleText from '../shared/portableText/PromoTileTitleText'
 import { PromoTileButton } from './PromoTileButton'
 import { PortableTextBlock } from '@portabletext/types'
+import PromoTextTileIngress from '../shared/portableText/PromoTextTileIngress'
+import useWindowSize from '../../lib/hooks/useWindowSize'
 
 const { Action, Text } = Card
 
 const Container = styled.div<{ isMultipleCards: boolean; isSpacing?: boolean }>`
   display: grid;
   grid-gap: var(--space-medium);
-  padding: var(--space-3xLarge) var(--layout-paddingHorizontal-large);
+  padding: var(--space-large) var(--layout-paddingHorizontal-large);
   max-width: var(--maxViewportWidth);
   margin: auto;
   grid-template-columns: ${({ isMultipleCards }) =>
@@ -34,7 +35,6 @@ const StyledCard = styled(Card)<{ alignLeft: boolean }>`
   width: 100%;
   --card-maxWidth: 280px;
   height: 300px;
-  text-align: center;
   overflow: hidden;
 `
 
@@ -44,6 +44,7 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
   flex-direction: column;
   height: 100%;
   justify-items: center;
+
   @media (max-width: 1004px) {
     align-items: center;
     display: inline-grid;
@@ -51,6 +52,7 @@ const ContentWrapper = styled.div<{ alignLeft: boolean; hasLink: boolean }>`
 `
 
 const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; anchor?: string }) => {
+  const { width } = useWindowSize()
   if (!data.group) return null
   const isMultipleCards = data.group.length > 1
 
@@ -69,21 +71,15 @@ const PromoTextTileArray = ({ data, anchor }: { data: PromoTextTileArrayData; an
                 alignLeft={isMultipleCards}
                 style={
                   {
-                    padding: 'var(--space-medium)',
-                    '--card-maxWidth': !isMultipleCards ? '100%' : '280px',
+                    padding: 'var(--space-large) 0 var(--space-xLarge) 0',
                     fontSize: 'var(--typeScale-5)',
                   } as CSSProperties
                 }
               >
                 <ContentWrapper alignLeft={isMultipleCards} hasLink={!!tile.action}>
                   <Text>
-                    <PromotileTitleText
-                      style={
-                        {
-                          '--card-title-fontSize': 'var(--typeScale-3)',
-                          '--card-title-fontWeight': '400',
-                        } as CSSProperties
-                      }
+                    <PromoTextTileIngress
+                      centered={!isMultipleCards || Boolean(width && width < 1004)}
                       value={ingress as PortableTextBlock[]}
                     />
                   </Text>