Merge pull request #64 from flotiq/feature/24513-faq-section-in-blog-…

…post

Ref. #24513 Faq section added to blog post

gatsby-node.js

@@ -28,6 +28,10 @@ exports.createPages = async ({ graphql, actions }) => {
                             }
                             bio
                         }
+                        faq {
+                            question
+                            answer
+                        }
                     }
                 }
                 totalCount

src/components/Faq/Faq.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+// :: Components
+import Accordion from 'react-bootstrap/Accordion';
+
+// :: Images
+import arrowDownIcon from '../../assets/arrow-down.svg';
+
+function Faq({ faqs}) {
+  if (!faqs || faqs.length === 0) {
+    return null
+  }
+  return (
+    <div className="mt-5">
+      <h2 className="text-center">Frequently Asked Questions</h2>
+      <div className="faqs mt-4">
+        <Accordion className="faq">
+          {faqs?.map(faq => (
+            <Accordion.Item className="border-bottom py-2 my-2" key={faq.question} eventKey={faq.question}>
+              <Accordion.Header as='h3' className="text-left font-bold faq__question">
+                {faq.question}
+                <img src={arrowDownIcon} alt="arrow icon" className="ml-5" />
+              </Accordion.Header>
+              <Accordion.Body className="faq__answer">
+                {faq.answer}
+              </Accordion.Body>
+            </Accordion.Item>
+          ))}
+        </Accordion>
+      </div>
+    </div>
+  );
+}
+export default Faq;

src/style/app.scss

@@ -20,6 +20,7 @@ $grid-gutter-width: 40px;
 @import './components/PostCard';
 @import './components/SharePostButtons';
 @import './components/TagPill';
+@import './components/Faq';
 
 @import './sections/FlotiqPlatform';
 @import './sections/Footer';

src/style/components/Faq.scss

@@ -0,0 +1,31 @@
+.faqs {
+  .faq {
+    &__question {
+      font-size: 1rem;
+    }
+
+    &__answer {
+      padding-bottom: .8rem;
+    }
+  }
+
+  .accordion-button {
+    width: 100%;
+    text-align: left;
+    font-weight: 600;
+    padding-bottom: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    img {
+      width: .8rem;
+      transform: rotate(180deg);
+      transition: transform .3s;
+    }
+
+    &.collapsed img {
+      transform: rotate(0deg);
+    }
+  }
+}

src/templates/post.js

@@ -1,24 +1,31 @@
-import {Content} from 'flotiq-components-react';
 import {graphql, Link} from 'gatsby';
 import {CommentCount, Disqus} from 'gatsby-plugin-disqus';
 import {GatsbyImage, getImage} from 'gatsby-plugin-image';
 import highlight from 'highlight.js';
 import moment from 'moment';
 import React, {useEffect, useRef, useState} from 'react';
-import {Col, Container, Row} from 'react-bootstrap';
 import {Helmet} from 'react-helmet';
 
-import Sygnet from '../assets/sygnet.svg';
+// :: Components
+import {Col, Container, Row} from 'react-bootstrap';
+import {Content} from 'flotiq-components-react';
+import Faq from "../components/Faq/Faq";
 import DiscoverMoreTopics from '../components/DiscoverMoreTopics/DiscoverMoreTopics';
 import JoinNewsletter from '../components/JoinNewsletter/JoinNewsletter';
 import PostCard from '../components/PostCard/PostCard';
 import SharePostButtons from '../components/SharePostButtons/SharePostButtons';
 import TagPill from '../components/TagPill/TagPill';
+
+// :: Images
+import Sygnet from '../assets/sygnet.svg';
+
+// :: Helpers
 import {getReadingTime} from '../helpers/readingTime';
 import Layout from '../layouts/layout';
 import blocksEmbed from "../helpers/blocksEmbed";
 
 
+
 const PostPage = ({data, pageContext}) => {
     const post = data.flotiqBlogPost;
     const [offset, setOffset] = useState(0);
@@ -176,11 +183,12 @@ const PostPage = ({data, pageContext}) => {
                         </Col>
                         <Col lg={10} md={10} sm={0} xs={0}>
                             <Content
-                                blocks={blocksEmbed(post.content.blocks)}
-                                quoteProps={{variant: 'light'}}
-                                tableProps={{additionalClasses: ['custom-table']}}
-                                highlight={highlight}
+                              blocks={blocksEmbed(post.content.blocks)}
+                              quoteProps={{variant: 'light'}}
+                              tableProps={{additionalClasses: ['custom-table']}}
+                              highlight={highlight}
                             />
+                            <Faq faqs={post.faq} />
                         </Col>
                         <Col lg={1} md={1} sm={0} xs={0}/>
                     </Row>
@@ -336,6 +344,10 @@ export const query = graphql`
                     }
                 }
             }
+            faq {
+                question
+                answer
+            }
         }
         relatedPostsFromTags: allFlotiqBlogPost(
             filter:{tags: {elemMatch: {tag: {eq:  $primaryTag } } }, status: {eq: "public"}, slug: {ne: $slug} }