🎨 merged promotiles and promotions v2

Author: BorghildSelle

studio/schemas/objects/anchorLinkList/anchorLinkReference.tsx

@@ -1,7 +1,7 @@
 import { anchor } from '@equinor/eds-icons'
-import { EdsIcon } from '../../../icons'
+import type { Rule } from 'sanity'
+import { EdsBlockEditorIcon, EdsIcon } from '../../../icons'
 import { AnchorLinkDescription } from '../anchorReferenceField'
-import { Rule } from 'sanity'
 
 export type AnchorLinkReference = {
   _type: 'anchorLinkReference'
@@ -11,7 +11,7 @@ export default {
   title: 'Anchor Link Reference',
   name: 'anchorLinkReference',
   type: 'object',
-
+  icon: EdsBlockEditorIcon(anchor),
   fields: [
     {
       name: 'title',

studio/schemas/objects/commonFields/commonFields.tsx

@@ -26,6 +26,9 @@ export const ingress = {
   name: 'ingress',
   title: 'Ingress',
   type: 'array',
+  components: {
+    input: CompactBlockEditor,
+  },
   of: [configureBlockContent({ variant: 'ingress' })],
 }
 

studio/schemas/objects/imageWithAlt.tsx

@@ -1,9 +1,4 @@
-import type {
-  CustomValidatorResult,
-  Reference,
-  Rule,
-  ValidationContext,
-} from 'sanity'
+import type { Reference } from 'sanity'
 
 export type ImageWithAlt = {
   _type: string
@@ -21,39 +16,12 @@ export default {
     collapsed: false,
   },
   fields: [
-    {
-      name: 'isDecorative',
-      type: 'boolean',
-      title: 'Image is decorative',
-      description:
-        'If this image is purely decorative you can disable the alt tag input here. Please note that this makes the image invisible for screen reader users.',
-    },
     {
       name: 'alt',
       type: 'string',
-      title: 'Alt text',
-      description: 'Alt attribute text description for image',
-      validation: (Rule: Rule) =>
-        Rule.custom(
-          (
-            value: string,
-            context: ValidationContext,
-          ): CustomValidatorResult => {
-            const { parent } = context as { parent: ImageWithAlt }
-
-            // Only  make the alt tag required if an image has been selected
-            if (!parent?.asset) return true
-
-            // Alt tag should only be required if the image is not decorative
-            if (!parent?.isDecorative && !value) {
-              return 'Alt attribute is required'
-            }
-
-            return true
-          },
-        ),
-      hidden: ({ parent }: { parent: ImageWithAlt }) =>
-        parent?.isDecorative === true,
+      title: 'Alternative text for screen readers',
+      description:
+        'Recommended. Describe whats seen in the image. Leave empty if purely decorative.',
     },
   ],
 }

studio/schemas/objects/linkSelector/common.ts

@@ -110,6 +110,7 @@ export const externalLink = {
     prepare({ href }: { href: string }) {
       return {
         title: href || 'Add external link',
+        media: EdsBlockEditorIcon(external_link),
       }
     },
   },

studio/schemas/objects/linkSelector/linkSelector.tsx

@@ -1,4 +1,4 @@
-import type { Rule, ValidationContext } from 'sanity'
+import type { Rule } from 'sanity'
 import singleItemArray from '../singleItemArray'
 import {
   anchorReference,
@@ -22,9 +22,19 @@ const linkSelector = (
   includeLabels = true,
 ) => ({
   name: 'linkSelector',
+  title: 'Link',
   type: 'object',
   hidden: hidden,
   fields: [
+    includeLabels && {
+      name: 'label',
+      title: 'Link label',
+      type: 'string',
+      validation: (Rule: Rule) =>
+        Rule.custom((value: string) => {
+          return value ? true : 'You must add a label'
+        }),
+    },
     singleItemArray(
       {
         name: 'link',
@@ -44,23 +54,6 @@ const linkSelector = (
       },
       true,
     ),
-    includeLabels && {
-      name: 'label',
-      title: 'Label',
-      description:
-        'Leave empty if you want to use referenced page title. Required for external and social media links',
-      type: 'string',
-      validation: (Rule: Rule) =>
-        Rule.custom((value: string, ctx: ValidationContext) => {
-          if (
-            ctx.parent?.link?.[0]?._type === 'link' ||
-            ctx?.parent?.link?.[0]?._type === 'socialMediaLink'
-          ) {
-            return value ? true : 'You must add a label'
-          }
-          return true
-        }),
-    },
     anchorReference,
   ].filter(e => e),
 })

studio/schemas/objects/promoteV2/promotionV2.tsx

@@ -1,8 +1,8 @@
 import { Card, Flex, Grid, Radio, Text } from '@sanity/ui'
 import { useCallback } from 'react'
-import { HiOutlineViewColumns } from 'react-icons/hi2'
 import { LuText } from 'react-icons/lu'
 import { MdImage } from 'react-icons/md'
+import { RiMegaphoneLine } from 'react-icons/ri'
 import {
   type Image,
   type PortableTextBlock,
@@ -12,14 +12,22 @@ import {
   set,
   type ValidationContext,
 } from 'sanity'
+import { capitalizeFirstLetter } from '@/helpers/formatters'
 import blocksToText from '../../../helpers/blocksToText'
+import anchorLinkReference from '../anchorLinkList/anchorLinkReference'
 import {
   hideTitle,
   ingress,
   layoutGrid,
   theme,
   title,
 } from '../commonFields/commonFields'
+import {
+  externalLink,
+  homepageLink,
+  internalReference,
+  internalReferenceOtherLanguage,
+} from '../linkSelector/common'
 
 type PromotionLayoutInputProps = {
   options: any[]
@@ -125,50 +133,125 @@ export default {
           name: 'promotedItem',
           title: 'Promoted item',
           fields: [
-            /*             {
-              title: 'Page to be promoted',
-              name: 'reference',
-              description: 'Select the page you want to promote',
-              type: 'reference',
-              to: [...routes].filter(e => e),
-              options: {
-                filter: topicPromotionFilter,
-                disableNew: true,
-              },
-            }, */
             {
               name: 'link',
-              type: 'linkSelector',
-              validation: (Rule: Rule) => Rule.required(),
+              type: 'array',
+              of: [
+                externalLink,
+                internalReference,
+                internalReferenceOtherLanguage,
+                homepageLink,
+                anchorLinkReference,
+              ],
+              validation: (Rule: Rule) => Rule.length(1).required(),
+            },
+            {
+              name: 'label',
+              title: 'Link label',
+              description:
+                'Required when external, leave empty if you want to use referenced title',
+              type: 'string',
+              validation: (Rule: Rule) =>
+                Rule.custom((value: string, ctx: ValidationContext) => {
+                  if (ctx.parent?.link?.[0]?._type === 'link') {
+                    return value ? true : 'You must add a label'
+                  }
+                  return true
+                }),
             },
             {
               name: 'image',
               title: 'Image',
               type: 'imageWithAlt',
               hidden: ({ parent }: DocumentType) => {
-                return parent?.link?.[0]?._type !== 'link'
+                return (
+                  parent?.link?.[0]?._type !== 'link' &&
+                  parent?.link?.[0]?._type !== 'anchorLinkReference'
+                )
               },
+              validation: (Rule: Rule) =>
+                Rule.custom((value: string, ctx: ValidationContext) => {
+                  if (
+                    ctx.parent?.link?.[0]?._type === 'link' ||
+                    ctx.parent?.link?.[0]?._type === 'anchorLinkReference'
+                  ) {
+                    return value ? true : 'You must add an image'
+                  }
+                  return true
+                }),
             },
           ],
           preview: {
             select: {
-              topicTitle: 'reference.content.title',
-              topicMedia: 'reference.content.heroFigure.image',
+              referenceNewsMagTitle: 'link.0.title',
+              referenceNewsMedia: 'link.0.heroImage.image',
+              referenceMagMedia: 'link.0.heroFigure.image',
+              referenceTopicTitle: 'link.0.content.title',
+              referenceTopicMedia: 'link.0.content.heroFigure.image',
+              customImage: 'image',
+              link: 'link',
+              label: 'label',
+              type: 'link.0._type',
             },
             prepare({
-              topicTitle,
-              topicMedia,
+              referenceNewsMagTitle,
+              referenceNewsMedia,
+              referenceMagMedia,
+              referenceTopicTitle,
+              referenceTopicMedia,
+              customImage,
+              link,
+              label,
+              type,
             }: {
-              topicTitle: PortableTextBlock[]
-              topicMedia: Image
+              referenceNewsMagTitle?: PortableTextBlock[]
+              referenceNewsMedia?: Image
+              referenceMagMedia?: Image
+              referenceTopicTitle?: PortableTextBlock[]
+              referenceTopicMedia?: Image
+              customImage?: Image
+              link?: any
+              label?: string
+              type?: string
             }) {
-              const plainTitle = topicTitle
-                ? blocksToText(topicTitle)
-                : 'Untitled'
+              let promoType = type ?? 'not set'
+
+              if (type?.includes('route')) {
+                promoType = 'internal route'
+              }
+              if (type?.includes('anchorLinkReference')) {
+                promoType = 'anchor link'
+              }
+              if (type === 'link') {
+                promoType = 'external link'
+              }
+              const referenceTitle =
+                referenceTopicTitle ?? referenceNewsMagTitle
+              let title = label ?? 'Missing title'
+              if (
+                link?.[0]?._type === 'anchorLinkReference' &&
+                typeof label === 'undefined'
+              ) {
+                title = link?.[0]?.title
+              }
+              if (
+                link?.[0]?._type !== 'link' &&
+                link?.[0]?._type !== 'anchorLinkReference' &&
+                typeof label === 'undefined' &&
+                referenceTitle
+              ) {
+                title = blocksToText(referenceTitle) ?? 'Missing title'
+              }
 
               return {
-                title: plainTitle,
-                media: topicMedia,
+                title: title,
+                subtitle: `${capitalizeFirstLetter(promoType)}`,
+                media:
+                  customImage ??
+                  referenceTopicMedia ??
+                  referenceNewsMedia ??
+                  referenceMagMedia ??
+                  RiMegaphoneLine,
               }
             },
           },
@@ -203,9 +286,11 @@ export default {
           if (Number(ctx.parent?.promoteList?.length) < Number(value)) {
             return 'Fewer promotions than grid columns. Please select lower grid columns'
           }
-          //@ts-ignore:todo
+
           if (
+            //@ts-ignore:todo
             ctx.parent?.layoutDirection === 'row' &&
+            //@ts-ignore:todo
             ctx.parent?.layoutGrid !== 'sm'
           ) {
             if (value === '4') {
@@ -253,7 +338,7 @@ export default {
       return {
         title: plainTitle,
         subtitle: subTitle,
-        media: HiOutlineViewColumns,
+        media: RiMegaphoneLine,
       }
     },
   },