🎨 allow two links in teaser and choose style

FeatureFlags.js

@@ -47,6 +47,7 @@ const MAGAZINE = [...GLOBAL_PROD, ...GLOBAL_DEV]
 /* Allows same slug for different languages */
 const SAME_SLUG = [...GLOBAL_DEV, 'japan', 'southkorea']
 const LINE_BREAK_TYPO = ['southkorea']
+const CAMPAIGN = [...GLOBAL_PROD, ...GLOBAL_DEV]
 
 /**
  * @param {string} dataset
@@ -72,4 +73,5 @@ export default (dataset) => ({
   IS_GLOBAL_PROD: GLOBAL_PROD.includes(dataset),
   IS_DEV: GLOBAL_DEV.includes(dataset),
   IS_SATELLITE: SATELLITES.includes(dataset),
+  HAS_CAMPAIGN_BLOCKS: CAMPAIGN.includes(dataset),
 })

sanityv3/schemas/documents/page.ts

@@ -74,8 +74,8 @@ export default {
         { type: 'videoPlayer' },
         { type: 'videoPlayerCarousel' },
         { type: 'table' },
-        { type: 'grid' },
-        { type: 'campaignBanner' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'grid' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'campaignBanner' },
         Flags.HAS_FORMS && { type: 'form' },
         Flags.HAS_NEWS && { type: 'newsList' },
         { type: 'stockValuesApi' },

sanityv3/schemas/objects/teaser.tsx

@@ -142,15 +142,21 @@ export default {
     },
     {
       name: 'action',
-      title: 'Link/action',
-      description: 'Select the link or downloadable file for the teaser',
+      title: 'Links/actions',
+      description: 'Select links or downloadable files for the teaser',
       type: 'array',
       of: [
         { type: 'linkSelector', title: 'Link' },
         { type: 'downloadableImage', title: 'Downloadable image' },
         { type: 'downloadableFile', title: 'Downloadable file' },
       ],
-      validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
+      validation: (Rule: Rule) => Rule.max(2).error('Only two action is permitted'),
+    },
+    {
+      title: 'Use resource link style',
+      description: 'Default is read more link style',
+      name: 'useResourceLinks',
+      type: 'boolean',
     },
     {
       name: 'image',

web/lib/queries/common/pageContentFields.ts

@@ -39,11 +39,12 @@ _type == "keyNumbers" =>{
       ...,
       "extension": asset-> extension
     },
-    "action": action[0]{
+    "actions": action[]{
       ${linkSelectorFields},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },
+    useResourceLinks
   },
 
   _type == "textTeaser" => {
@@ -566,7 +567,6 @@ _type == "keyNumbers" =>{
       "backgroundUtility":coalesce(backgroundColor.key, ""),
       }
     },
-
   },
 `
 

web/pageComponents/pageTemplates/TopicPage.tsx

@@ -1,3 +1,4 @@
+import { toPlainText } from '@portabletext/react'
 import useSharedTitleStyles from '../../lib/hooks/useSharedTitleStyles'
 import { HeroTypes, TopicPageSchema } from '../../types/types'
 import Seo from '../shared/Seo'
@@ -26,6 +27,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         {!data?.isCampaign && (
           <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
         )}
+        {data.isCampaign && <h1 className="sr-only">{toPlainText(data.title)}</h1>}
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
             background={titleStyles.background}

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -136,8 +136,6 @@ const applyPaddingTopIfApplicable = (currentComponent: ComponentProps, prevCompo
     (currentIsWhiteColorBackground && previousIsColorContainerAndNotWhite) ||
     previousComponentIsASpecialCaseAndNeedPT
   ) {
-    console.log('currentComponent?.type', currentComponent?.type)
-    console.log('previousComponentIsASpecialCaseAndNeedPT', previousComponentIsASpecialCaseAndNeedPT)
     return 'pt-16'
   }
   return ''

web/pageComponents/shared/Teaser.tsx

@@ -5,7 +5,7 @@ import { getUrlFromAction, urlFor } from '../../common/helpers'
 import Img from 'next/image'
 import Image from './SanityImage'
 import type { TeaserData, ImageWithAlt } from '../../types/types'
-import { ReadMoreLink } from '../../core/Link'
+import { ReadMoreLink, ResourceLink } from '../../core/Link'
 import { Heading } from '../../core/Typography'
 import { getLocaleFromName } from '../../lib/localization'
 
@@ -44,15 +44,13 @@ const TeaserImage = ({ image }: { image: ImageWithAlt }) => {
 }
 
 const Teaser = ({ data, anchor }: TeaserProps) => {
-  const { title, overline, text, image, action, designOptions, isBigText } = data
+  const { title, overline, text, image, actions, designOptions, isBigText, useResourceLinks } = data
   const { imageSize, imagePosition, ...restOptions } = designOptions
 
-  if ([title, overline, text, image?.asset, action].every((i) => !i)) {
+  if ([title, overline, text, image?.asset, actions].every((i) => !i)) {
     return null
   }
 
-  const url = action && getUrlFromAction(action)
-
   const isSvg = image?.extension === 'svg'
   return (
     <BackgroundContainer {...restOptions} id={anchor} renderFragmentWhenPossible>
@@ -80,14 +78,30 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
               {text && <IngressText value={text} />}
             </>
           )}
-          {action && url && (
-            <ReadMoreLink
-              href={url as string}
-              {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
-              type={action.type}
-            >
-              {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
-            </ReadMoreLink>
+          {actions && (
+            <div className="flex flex-col gap-8">
+              {actions?.map((action) => {
+                const url = action && getUrlFromAction(action)
+
+                return useResourceLinks ? (
+                  <ResourceLink
+                    href={url as string}
+                    {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
+                    type={action.type}
+                  >
+                    {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
+                  </ResourceLink>
+                ) : (
+                  <ReadMoreLink
+                    href={url as string}
+                    {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
+                    type={action.type}
+                  >
+                    {`${action.label} ${action.extension ? `(${action.extension.toUpperCase()})` : ''}`}
+                  </ReadMoreLink>
+                )
+              })}
+            </div>
           )}
         </Content>
       </StyledEnvisTeaser>

web/sections/Grid/Grid.tsx

@@ -36,9 +36,9 @@ const Grid = forwardRef<HTMLElement, GridProps>(function Grid({ data, anchor, cl
       {gridRows.map((row) => {
         return (
           <>
-            {row?.type === 'span3' && <Span3 data={row} />}
-            {row?.type === 'span2and1' && <Span2And1 data={row} />}
-            {row?.type === 'threeColumns' && <ThreeColumns data={row} />}
+            {row?.type === 'span3' && <Span3 key={row?.id} data={row} />}
+            {row?.type === 'span2and1' && <Span2And1 key={row?.id} data={row} />}
+            {row?.type === 'threeColumns' && <ThreeColumns key={row?.id} data={row} />}
           </>
         )
       })}

web/sections/Grid/Span3.tsx

@@ -8,7 +8,6 @@ export type Span3Props = {
 } & HTMLAttributes<HTMLDivElement>
 
 const Span3 = forwardRef<HTMLDivElement, Span3Props>(function Span3({ data, className = '', ...rest }, ref) {
-  console.log('data?.content', data?.content)
   return (
     <div
       ref={ref}

web/types/types.ts

@@ -320,8 +320,9 @@ export type TeaserData = {
   text: PortableTextBlock[]
   overline?: string
   isBigText?: boolean
+  useResourceLinks?: boolean
   image: ImageWithAlt
-  action?: LinkData
+  actions?: LinkData[]
   designOptions: DesignOptions & {
     imagePosition?: TeaserImagePosition
     imageSize?: TeaserImageSize
@@ -872,12 +873,14 @@ export type GridTextBlockData = {
 }
 
 export type CampaignBannerData = {
-  type: string
+  type: 'campaignBanner'
   id: string
   title: PortableTextBlock[]
   designOptions: DesignOptions
 }
 export type GridTeaserData = {
+  type: 'gridTeaser'
+  id: string
   image: ImageWithAlt
   rowType?: RowType
   content?: PortableTextBlock
@@ -889,3 +892,14 @@ export type GridTeaserData = {
   action?: LinkData
   theme?: number
 }
+export type PodcastTeaserData = {
+  id: string
+  type: 'podcastTeaser'
+  spotifyLink?: string
+  appleLink?: string
+  linkTitle?: string
+  podcastName?: PortableTextBlock[]
+  podcastEpisode?: PortableTextBlock[]
+  image: ImageWithAlt
+  designOptions: DesignOptions
+}