Merge pull request #5460 from topcoder-platform/FAQ-theme

Faq theme

Author: luizrrodrigues

.circleci/config.yml

@@ -283,7 +283,7 @@ workflows:
           filters:
             branches:
               only:                
-                - gig-application-update
+                - FAQ-theme
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

src/assets/images/minimal-down-white.svg

@@ -5,9 +5,14 @@
 import React from 'react';
 import PT from 'prop-types';
 import MarkdownRenderer from 'components/MarkdownRenderer';
+import { themr } from 'react-css-super-themr';
+import defaultTheme from './themes/item.scss';
+import darkTheme from './themes/item-dark.scss';
 
-import './item.scss';
-
+const THEMES = {
+  Default: defaultTheme,
+  'Dark mode': darkTheme,
+};
 class DropdownItem extends React.Component {
   constructor(props) {
     super(props);
@@ -24,24 +29,24 @@ class DropdownItem extends React.Component {
   }
 
   render() {
-    const { data } = this.props;
+    const { data, baseTheme } = this.props;
     const { isActive } = this.state;
     return (
-      <div styleName="container" id={data.sys.id}>
+      <div className={THEMES[baseTheme].container} id={data.sys.id}>
         <div
           tabIndex={0}
           role="button"
           onKeyPress={e => (e.key === 'Enter' ? null : null)}
-          styleName={isActive ? 'question active' : 'question'}
+          className={isActive ? THEMES[baseTheme]['question-active'] : THEMES[baseTheme].question}
           onClick={() => this.toggleActive()}
         >
-          <div styleName="text">
+          <div className={THEMES[baseTheme].text}>
             {data.fields.title}
           </div>
-          <div styleName={isActive ? 'toggle-arrow active' : 'toggle-arrow'} />
+          <div className={isActive ? THEMES[baseTheme]['toggle-arrow-active'] : THEMES[baseTheme]['toggle-arrow']} />
         </div>
         <div
-          styleName={isActive ? 'answer active' : 'answer'}
+          className={isActive ? THEMES[baseTheme]['answer-active'] : THEMES[baseTheme].answer}
         >
           <MarkdownRenderer markdown={data.fields.text} {...this.props} />
         </div>
@@ -55,6 +60,7 @@ DropdownItem.defaultProps = {
   spaceName: null,
   environment: null,
   isActive: false,
+  baseTheme: 'Default',
 };
 
 DropdownItem.propTypes = {
@@ -63,6 +69,7 @@ DropdownItem.propTypes = {
   preview: PT.bool,
   spaceName: PT.string,
   environment: PT.string,
+  baseTheme: PT.string,
 };
 
-export default DropdownItem;
+export default themr('DropdownItem', defaultTheme)(DropdownItem);

src/shared/components/Contentful/Dropdown/DropdownItem.jsx

@@ -10,14 +10,21 @@ import React from 'react';
 import { fixStyle } from 'utils/contentful';
 import DropdownItem from './DropdownItem';
 
-import defaultTheme from './default.scss';
+import defaultTheme from './themes/default.scss';
+import darkTheme from './themes/dark.scss';
+
+const THEMES = {
+  Default: defaultTheme,
+  'Dark mode': darkTheme,
+};
 
 function DropdownItemsLoader(props) {
   const {
     ids,
     preview,
     spaceName,
     environment,
+    baseTheme,
   } = props;
 
   return (
@@ -34,6 +41,7 @@ function DropdownItemsLoader(props) {
             spaceName={spaceName}
             environment={environment}
             key={item.sys.id}
+            baseTheme={baseTheme}
           />
         ))
       )}
@@ -53,6 +61,7 @@ DropdownItemsLoader.propTypes = {
   preview: PT.bool,
   spaceName: PT.string,
   environment: PT.string,
+  baseTheme: PT.string.isRequired,
 };
 
 /* Loads the dropdown entry. */
@@ -69,20 +78,23 @@ export default function DropdownLoader(props) {
       render={(data) => {
         const { fields } = Object.values(data.entries.items)[0];
         if (!fields) return null;
+        let { theme } = fields;
+        theme = theme || 'Default';
         return (
           <div
-            className={defaultTheme.container}
+            className={THEMES[theme].container}
             style={fixStyle(fields.extraStylesForContainer)}
           >
             <div
-              className={defaultTheme.contentWrapper}
+              className={THEMES[theme].contentWrapper}
               style={fixStyle(fields.extraStylesForContentWrapper)}
             >
               <DropdownItemsLoader
                 ids={_.map(fields.items, 'sys.id')}
                 preview={preview}
                 spaceName={spaceName}
                 environment={environment}
+                baseTheme={theme}
               />
             </div>
           </div>

src/shared/components/Contentful/Dropdown/index.jsx

@@ -0,0 +1,18 @@
+@import "~styles/mixins";
+
+.container {
+  padding: 0;
+
+  @include xs-to-sm {
+    padding: 0 15px;
+  }
+}
+
+.contentWrapper {
+  display: flex;
+  margin: 0 auto;
+  max-width: $screen-md;
+  color: #fff;
+  flex-direction: column;
+  border-top: 1px solid rgba(212, 212, 212, 0.4);
+}

src/shared/components/Contentful/Dropdown/themes/dark.scss

@@ -12,7 +12,7 @@
   display: flex;
   margin: 0 auto;
   max-width: $screen-md;
-  color: black;
+  color: #2a2a2a;
   flex-direction: column;
   border-top: 1px solid #d4d4d4;
 }

src/shared/components/Contentful/Dropdown/default.scss renamed to src/shared/components/Contentful/Dropdown/themes/default.scss

@@ -0,0 +1,74 @@
+@import "~styles/mixins";
+@import "~components/Contentful/default";
+
+.container {
+  width: 100%;
+}
+
+.question,
+.question-active {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 82px;
+  outline: none;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(212, 212, 212, 0.4);
+}
+
+.question-active {
+  border-bottom: none;
+  height: 81px;
+}
+
+.answer,
+.answer-active {
+  @include gui-kit-content;
+  @include gui-kit-headers;
+
+  display: none;
+  padding: 5px 70px 24px 0;
+  color: #fff;
+
+  @include xs-to-sm {
+    padding-right: 0;
+  }
+
+  p {
+    color: #fff;
+  }
+}
+
+.answer-active {
+  display: block;
+  border-bottom: 1px solid rgba(212, 212, 212, 0.4);
+}
+
+.text {
+  color: #fff;
+  font-family: BarlowCondensed, sans-serif;
+  font-size: 31px;
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+  font-weight: 500;
+
+  @include xs-to-sm {
+    max-width: 350px;
+    flex: 1;
+    margin-right: 20px;
+    font-size: 21px;
+  }
+}
+
+.toggle-arrow,
+.toggle-arrow-active {
+  background-image: url(assets/images/minimal-down-white.svg);
+  background-repeat: no-repeat;
+  align-self: right;
+  width: 24px;
+  height: 15px;
+}
+
+.toggle-arrow-active {
+  transform: scale(1, -1);
+}

src/shared/components/Contentful/Dropdown/themes/item-dark.scss

@@ -5,34 +5,41 @@
   width: 100%;
 }
 
-.question {
+.question,
+.question-active {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 82px;
   outline: none;
   cursor: pointer;
   border-bottom: 1px solid #d4d4d4;
+}
 
-  &.active {
-    border-bottom: none;
-  }
+.question-active {
+  border-bottom: none;
+  height: 81px;
 }
 
-.answer {
+.answer,
+.answer-active {
   @include gui-kit-content;
   @include gui-kit-headers;
 
   display: none;
   padding: 5px 70px 24px 0;
   color: #2a2a2a;
 
-  &.active {
-    display: block;
-    border-bottom: 1px solid #d4d4d4;
+  @include xs-to-sm {
+    padding-right: 0;
   }
 }
 
+.answer-active {
+  display: block;
+  border-bottom: 1px solid #d4d4d4;
+}
+
 .text {
   color: #2a2a2a;
   font-family: BarlowCondensed, sans-serif;
@@ -43,17 +50,21 @@
 
   @include xs-to-sm {
     max-width: 350px;
+    flex: 1;
+    margin-right: 20px;
+    font-size: 21px;
   }
 }
 
-.toggle-arrow {
+.toggle-arrow,
+.toggle-arrow-active {
   background-image: url(assets/images/minimal-down.svg);
   background-repeat: no-repeat;
   align-self: right;
   width: 24px;
   height: 13px;
+}
 
-  &.active {
-    transform: scale(1, -1);
-  }
+.toggle-arrow-active {
+  transform: scale(1, -1);
 }