Adds FAQ at BSIC Incubator page in Blockchain community

Author: birdofpreyru

src/shared/actions/page/communities/blockchain/bsic-incubator.js

@@ -0,0 +1,37 @@
+/**
+ * Actions powering the UI state of Cognitive community's Resources page.
+ */
+
+import { createActions } from 'redux-actions';
+
+/**
+ * Payload creator for the action that hides (closes) all FAQ items.
+ */
+function closeAllFaqItems() {
+  return null;
+}
+
+/**
+ * Payload creator for the action that toggles (shows/hides) the specified FAQ
+ * item.
+ * @param {Number} index 0-based index of FAQ item in the page.
+ * @param {Boolean} show Whether the item should be shown or hidden.
+ * @param {Boolean} closeOthers Tells, whether other FAQ items should be closed.
+ * @return {Object} payload.
+ */
+function toggleFaqItem(index, show, closeOthers) {
+  return { closeOthers, index, show };
+}
+
+export default createActions({
+  PAGE: {
+    COMMUNITIES: {
+      BLOCKCHAIN: {
+        BSIC_INCUBATOR: {
+          CLOSE_ALL_FAQ_ITEMS: closeAllFaqItems,
+          TOGGLE_FAQ_ITEM: toggleFaqItem,
+        },
+      },
+    },
+  },
+});

src/shared/components/tc-communities/communities/blockchain/BsicHackathon/FaqItem/index.jsx

@@ -0,0 +1,43 @@
+import PT from 'prop-types';
+import React from 'react';
+
+import Carret from 'assets/images/communities/cognitive/resources/carret.svg';
+
+import './style.scss';
+
+export default function FaqItem({
+  children,
+  open,
+  question,
+  toggle,
+}) {
+  return (
+    <div styleName="container">
+      <div
+        onClick={() => toggle(!open)}
+        role="button"
+        styleName="question"
+        tabIndex={0}
+      >
+        {question}
+        <Carret
+          transform={open ? null : 'scale(1, -1)'}
+        />
+      </div>
+      { open ? <div styleName="answer">{children}</div> : null }
+    </div>
+  );
+}
+
+FaqItem.defaultProps = {
+  children: null,
+  open: false,
+  question: '',
+};
+
+FaqItem.propTypes = {
+  children: PT.node,
+  open: PT.bool,
+  question: PT.string,
+  toggle: PT.func.isRequired,
+};

src/shared/components/tc-communities/communities/blockchain/BsicHackathon/FaqItem/style.scss

@@ -0,0 +1,52 @@
+@import "~styles/mixins";
+
+.answer {
+  @include tc-body-md;
+
+  background: $tc-gray-neutral-light;
+  padding: 10px 20px;
+
+  a {
+    color: $tc-dark-blue;
+
+    &:visited {
+      color: $tc-purple;
+    }
+  }
+
+  h3 {
+    margin: 20px 0 0;
+  }
+
+  p {
+    margin: 10px 0;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  li {
+    list-style-type: disc;
+    margin-left: 20px;
+  }
+}
+
+.container {
+  margin: 10px 0;
+}
+
+.question {
+  @include tc-body-lg;
+
+  align-items: center;
+  background: $tc-dark-blue;
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  outline: none;
+  padding: 15px 20px;
+  position: relative;
+}