feat: turn FAQ answers RichText (#253)

* feat: turn FAQ answers in RichText

* fix: add target="_blank" to RichText links

* bump version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

src/components/Campaign/Faq/index.tsx

@@ -19,6 +19,7 @@ import Image from 'next/image'
 import { isEntryTypeFaqEntry } from '@/lib/typeGuards'
 import { trackEvent } from '@/services/analytics/trackEvent'
 import { SOCIAL_LOGIN_EVENTS } from '@/services/analytics/events/socialLogin'
+import RichText from '@/components/Campaign/RichText'
 
 type FaqEntry = Entry<TypeFaqSkeleton, undefined, string>
 
@@ -80,8 +81,8 @@ const Faq = (props: FaqEntry) => {
                   >
                     <Typography variant="h4">{item.question}</Typography>
                   </AccordionSummary>
-                  <AccordionDetails>
-                    <Typography>{item.answer}</Typography>
+                  <AccordionDetails className={css.details}>
+                    <RichText {...item.answer} />
                   </AccordionDetails>
                 </Accordion>
               )

src/components/Campaign/Faq/styles.module.css

@@ -45,6 +45,14 @@
   padding: 0 0 32px;
 }
 
+.details p {
+  margin: 0;
+}
+
+.details a {
+  text-decoration: underline;
+}
+
 @media (min-width: 900px) {
   .bg {
     position: absolute;

src/components/Campaign/Hero/styles.module.css

@@ -7,7 +7,7 @@
 .spot {
   position: absolute;
   right: -35px;
-  top: -110px;
+  top: 410px;
   z-index: -1;
   width: 800px;
   height: 800px;
@@ -64,6 +64,10 @@
 }
 
 @media (min-width: 900px) {
+  .spot {
+    top: -110px;
+  }
+
   .heroFooter {
     margin-top: 100px;
     flex-direction: row;

src/components/Campaign/RichText/index.tsx

@@ -1,8 +1,21 @@
-import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
-import type { Document as ContentfulDocument } from '@contentful/rich-text-types'
+import { documentToReactComponents, type RenderNode, type Options } from '@contentful/rich-text-react-renderer'
+import { INLINES, type Document as ContentfulDocument, type Hyperlink } from '@contentful/rich-text-types'
+
+const options: Options = {
+  renderNode: {
+    [INLINES.HYPERLINK]: (node: Hyperlink) => {
+      const text = node.content.find((item) => item.nodeType === 'text')?.value
+      return (
+        <a href={node.data.uri} target="_blank" rel="noreferrer">
+          {text}
+        </a>
+      )
+    },
+  } as unknown as RenderNode,
+}
 
 const RichText = (props: ContentfulDocument) => {
-  return <>{documentToReactComponents(props)}</>
+  return <>{documentToReactComponents(props, options)}</>
 }
 
 export default RichText

src/contentful/types/TypeFaqEntry.ts

@@ -2,7 +2,7 @@ import type { ChainModifiers, Entry, EntryFieldTypes, EntrySkeletonType, LocaleC
 
 export interface TypeFaqEntryFields {
   question: EntryFieldTypes.Symbol
-  answer: EntryFieldTypes.Text
+  answer: EntryFieldTypes.RichText
   slug?: EntryFieldTypes.Symbol
 }