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,104 @@
+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'
+import blocksToText from '../../helpers/blocksToText'
+
+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
+}
+
+const linkFields = getLinkSelectorFields('label', 'isLink')
+
+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.',
+    },
+    {
+      name: 'label',
+      title: 'Label',
+      description: 'The label that the link/button should have.',
+    },
+  ],
+  fields: [
+    {
+      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',
+      type: 'boolean',
+      title: 'Use a link',
+      description: 'Link to another piece of content',
+      initialValue: false,
+    },
+    ...linkFields,
+    {
+      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',
+    },
+    {
+      title: 'Background',
+      description: 'Pick a colour for the background. Default is white.',
+      name: 'background',
+      type: 'colorlist',
+      fieldset: 'design',
+    },
+  ],
+  preview: {
+    select: {
+      link: 'label',
+      ingress: 'ingress',
+    },
+    prepare({ link, ingress }: { link: string; ingress: PortableTextBlock[] }) {
+      return {
+        title: link || blocksToText(ingress) || '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),
+    },
+  ],
+  preview: {
+    select: {
+      group: 'group',
+    },
+    prepare() {
+      return {
+        title: 'Promo text tiles',
+        subtitle: `Promo text tile component`,
+        media: EdsIcon(collection_2),
+      }
+    },
+  },
+}

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/linkSelectorFields.ts

@@ -15,22 +15,26 @@ 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,
-}
+export const linkSelectorFields = /* groq */ `
+  {
+    "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

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

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}
     }
   }`

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

web/lib/queries/common/pageContentFields.ts

@@ -1,9 +1,10 @@
 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 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 +34,7 @@ const pageContentFields = /* groq */ `
       "extension": asset-> extension
     },
     "action": action[0]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
@@ -52,7 +53,7 @@ const pageContentFields = /* groq */ `
     ingress[]{..., ${markDefs}},
     text[]{..., ${markDefs}},
     "callToActions": action[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
@@ -194,7 +195,7 @@ const pageContentFields = /* groq */ `
     },
     frameTitle,
     "action": action[0]{
-      ${linkSelectorFields},
+      ${linkSelector},
     },
     url,
     "cookiePolicy": coalesce(cookiePolicy, 'none'),
@@ -515,6 +516,9 @@ const pageContentFields = /* groq */ `
   _type == "videoPlayerCarousel" => {
     ${videoPlayerCarouselFields}
   },
+  _type == "promoTextTileArray" => {
+    ${promoTextTileArrayFields}
+  },
 `
 
 export default pageContentFields

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

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