1889 As editors we see a need to have text promotion cards to link to other pages

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' },

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' },

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,

sanityv3/schemas/objects/promoTextTile.tsx

@@ -0,0 +1,97 @@
+import { label } from '@equinor/eds-icons'
+import type { PortableTextBlock, Rule, ValidationContext } 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'
+
+const ingressBlockContentType = configureBlockContent({
+  h1: false,
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+})
+
+export type PromoTextTile = {
+  _type: 'promoTextTile'
+  linkLabelAsTitle?: boolean
+  link?: LinkSelector
+  isLink?: boolean
+  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: 'ingress',
+      title: 'Promo Text',
+      description: 'Max 200 characters',
+      type: 'array',
+      of: [ingressBlockContentType],
+      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 200)),
+    },
+    {
+      name: 'isLink',
+      type: 'boolean',
+      title: 'Use a link',
+      description: 'Link to another piece of content',
+      initialValue: false,
+    },
+    {
+      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.',
+      name: 'background',
+      type: 'colorlist',
+      fieldset: 'design',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      linkLabelAsTitle: 'linkLabelAsTitle',
+      link: 'link.label',
+    },
+    prepare({ linkLabelAsTitle, link }: { title: PortableTextBlock[]; linkLabelAsTitle: boolean; link: string }) {
+      return {
+        title: linkLabelAsTitle || link || 'Promo Text Tile',
+        subtitle: `Promo text tile component`,
+        media: EdsIcon(label),
+      }
+    },
+  },
+}

sanityv3/schemas/objects/promoTextTileArray.tsx

@@ -0,0 +1,43 @@
+import { collection_2 } from '@equinor/eds-icons'
+import { EdsIcon } from '../../icons'
+import type { Rule } from 'sanity'
+import type { PromoTextTile } from './promoTextTile'
+
+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() {
+      return {
+        title: 'Promo tiles array',
+        subtitle: `Promo text tile array component`,
+        media: <div>{EdsIcon(collection_2)}</div>,
+      }
+    },
+  },
+}

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,
@@ -92,13 +93,13 @@ export default {
       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),
       }

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"
+    )
+  }
+`

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'
@@ -180,6 +181,20 @@ const pageContentFields = /* groq */ `
       },
     },
   },
+  _type == "promoTextTileArray"=>{
+    "type": _type,
+    "id": _key,
+    spacing,
+    "group": group[]{
+      "id": _key,
+      ingress[]{..., ${markDefs}},
+      linkLabelAsTitle,
+      "action": ${promoLinkReferenceFields},
+      "designOptions": {
+        "background": coalesce(background.title, 'none'),
+      },
+    },
+  },
   _type == "iframe" => {
     "type": _type,
     "id": _key,

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