Merge pull request #4062 from appirio-tech/feature/fix_link_formatting_for_contentful_text

fixed issue with link type text's formatting.

Author: RishiRajSahu

src/components/FAQ/FAQItem.jsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
 import IconX from ' ../../assets/icons/ui-x-mark.svg'
 import IconCarretDown from '../../assets/icons/arrow-6px-carret-down-normal.svg'
+import { CONTENTFUL_NODE_TYPES } from '../../config/constants'
 import './FAQItem.scss'
 
 
@@ -25,6 +26,13 @@ class FAQItem extends Component  {
   render() {
     const {item} = this.props
     const {isOpen} = this.state
+    
+    const FormattedHyperLink = ({ value, url }) => <a href={url} target="_blank" className="hyperlink-style">{value}</a>
+    const options = {
+      renderNode: {/* eslint-disable no-unused-vars*/
+        [CONTENTFUL_NODE_TYPES.HYPERLINK]: (node, children) => <FormattedHyperLink value={node.content[0].value} url={node.data.uri}/>
+      }
+    }
     return (
       <div styleName={cn('accordion', { 'is-open': isOpen })}>
         <div styleName="header" onClick={this.toggle}>
@@ -33,7 +41,7 @@ class FAQItem extends Component  {
             {isOpen ? <IconX styleName="toggle-icon" /> : <IconCarretDown styleName="toggle-icon" />}
           </div>
         </div>
-        <div styleName="content">{documentToReactComponents(item.fields.answer)}</div>
+        <div styleName="content">{documentToReactComponents(item.fields.answer, options)}</div>
       </div>
     )
   }

src/components/FAQ/FAQItem.scss

@@ -62,6 +62,14 @@
   line-height: 20px;
   text-align: left;
   margin-bottom: 2 * $base-unit;
+
+  a {
+    cursor: pointer;
+    color: $tc-dark-blue;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .accordion.is-open .content {

src/config/constants.js

@@ -992,4 +992,12 @@ export const REPORT_SESSION_LENGTH = 25 * 60 // 25 minutes (5 minutes less than
  */
 export const DASHBOARD_FAQ_CONTENT_ID = process.env.DASHBOARD_FAQ_CONTENT_ID
 export const CONTENTFUL_DELIVERY_KEY = process.env.CONTENTFUL_DELIVERY_KEY
-export const CONTENTFUL_SPACE_ID = process.env.CONTENTFUL_SPACE_ID
+export const CONTENTFUL_SPACE_ID = process.env.CONTENTFUL_SPACE_ID
+
+
+/**
+ * Contentful node types
+ */
+export const CONTENTFUL_NODE_TYPES = {
+  HYPERLINK : 'hyperlink',
+}