Merge branch 'padms/2280'

web/pageComponents/pageTemplates/Event.tsx

@@ -13,7 +13,7 @@ import type { EventSchema } from '../../types/types'
 import { EventJsonLd } from 'next-seo'
 import Blocks from '../../pageComponents/shared/portableText/Blocks'
 import { twMerge } from 'tailwind-merge'
-import CallToActions from '@sections/CallToActions'
+import RelatedContent from 'pageComponents/shared/RelatedContent'
 
 export default function Event({ data }: { data: EventSchema }): JSX.Element {
   const { title } = data
@@ -84,17 +84,15 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
           {contactList && <ContactList data={contactList} className="my-12" />}
 
           {relatedLinks?.links && relatedLinks.links.length > 0 && (
-            <CallToActions
+            <RelatedContent
+              data={relatedLinks}
               className={twMerge(`
               px-layout-lg
               max-w-viewport
-              my-3xl
+          
               mx-auto
               pb-page-content
               `)}
-              callToActions={relatedLinks.links}
-              overrideButtonStyle={true}
-              splitList={false}
             />
           )}
         </article>

web/pageComponents/pageTemplates/News.tsx

@@ -14,8 +14,8 @@ import { metaTitleSuffix } from '../../languages'
 import type { NewsSchema } from '../../types/types'
 import { toPlainText } from '@portabletext/react'
 import Blocks from '../shared/portableText/Blocks'
-import CallToActions from '@sections/CallToActions'
 import { twMerge } from 'tailwind-merge'
+import RelatedContent from 'pageComponents/shared/RelatedContent'
 
 const NewsLayout = styled.div`
   --banner-paddingHorizontal: clamp(16px, calc(-69.1942px + 22.7184vw), 367px);
@@ -222,15 +222,14 @@ const NewsPage = ({ data: news }: ArticleProps) => {
             {iframe && <BasicIFrame data={iframe} />}
 
             {relatedLinks?.links && relatedLinks.links.length > 0 && (
-              <CallToActions
+              <RelatedContent
+                data={relatedLinks}
                 className={twMerge(`
-                  px-layout-lg
-                  max-w-viewport
-                  my-3xl
-                  `)}
-                callToActions={relatedLinks.links}
-                overrideButtonStyle={true}
-                splitList={false}
+             px-layout-lg
+             max-w-viewport
+             my-3xl
+             mx-auto
+             `)}
               />
             )}
 

web/pageComponents/shared/RelatedContent.tsx

@@ -0,0 +1,43 @@
+import { Fragment, HTMLAttributes } from 'react'
+import { Heading, List } from '@components'
+import type { RelatedLinksData, LinkData } from '../../types/types'
+import { ResourceLink } from '@core/Link'
+import { getUrlFromAction } from '../../common/helpers'
+import { getLocaleFromName } from '../../lib/localization'
+
+const { Item } = List
+
+type RelatedContentProps = {
+  data: RelatedLinksData
+} & HTMLAttributes<HTMLDivElement>
+
+const RelatedContent = ({ data, ...rest }: RelatedContentProps) => {
+  return (
+    <aside {...rest}>
+      <Heading className="pb-4 text-left" size="xl" level="h2">
+        {data.title}
+      </Heading>
+      <List unstyled>
+        {data.links.length > 0 &&
+          data.links.map((item: LinkData) => {
+            const url = getUrlFromAction(item)
+            return (
+              <Fragment key={item.id}>
+                <Item>
+                  <ResourceLink
+                    href={url as string}
+                    {...(item.link?.lang && { locale: getLocaleFromName(item.link?.lang) })}
+                    type={item.type}
+                  >
+                    {`${item.label} ${item.extension ? `(${item.extension.toUpperCase()})` : ''}`}
+                  </ResourceLink>
+                </Item>
+              </Fragment>
+            )
+          })}
+      </List>
+    </aside>
+  )
+}
+
+export default RelatedContent