Feature contentful

.circleci/config.yml

@@ -190,7 +190,7 @@ workflows:
             branches:
               only:
                 - develop
-                - smp-1
+                - feature-contentful
       # Production builds are exectuted only on tagged commits to the
       # master branch.
       - "build-prod":

__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap

@@ -28,7 +28,7 @@ exports[`Matches shallow shapshot 1`] = `
       className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
     >
       <a
-        href="https://help.topcoder-dev.com"
+        href="https://www.topcoder.com/thrive/tracks?track=Topcoder"
       >
         HELP CENTER
       </a>

config/default.js

@@ -113,7 +113,7 @@ module.exports = {
     BLOG_FEED: 'https://www.topcoder.com/blog/feed/',
     COMMUNITY: 'https://community.topcoder-dev.com',
     FORUMS: 'https://apps.topcoder-dev.com/forums',
-    HELP: 'https://help.topcoder-dev.com',
+    HELP: 'https://www.topcoder.com/thrive/tracks?track=Topcoder',
 
     COMMUNITIES: {
       BLOCKCHAIN: 'https://blockchain.topcoder-dev.com',

config/production.js

@@ -29,7 +29,7 @@ module.exports = {
     BASE: 'https://www.topcoder.com',
     COMMUNITY: 'https://community.topcoder.com',
     FORUMS: 'https://apps.topcoder.com/forums',
-    HELP: 'https://help.topcoder.com',
+    HELP: 'https://www.topcoder.com/thrive/tracks?track=Topcoder',
     MEMBER: 'https://member.topcoder.com',
     ONLINE_REVIEW: 'https://software.topcoder.com',
     PAYMENT_TOOL: 'https://payment.topcoder.com',

package.json

@@ -89,6 +89,7 @@
     "react-anchor-link-smooth-scroll": "^1.0.11",
     "react-color": "^2.13.8",
     "react-css-super-themr": "^2.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dates": "^18.2.2",
     "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",

src/shared/components/Contentful/SearchBar/SearchBar.jsx

@@ -153,7 +153,11 @@ export class SearchBarInner extends Component {
                     key={`${item.title}-${item.content}-${item.featuredImage}`}
                     className={theme['group-cell']}
                   >
-                    <a className={theme.articleLink} href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}>
+                    <a
+                      className={theme.articleLink}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
+                    >
                       {
                         item.featuredImage ? (
                           <img
@@ -189,7 +193,11 @@ export class SearchBarInner extends Component {
                     key={`${item.title}-${item.content}-${item.featuredImage}`}
                     className={theme['group-cell']}
                   >
-                    <a className={theme.articleLink} href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}>
+                    <a
+                      className={theme.articleLink}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
+                    >
                       {
                         item.featuredImage ? (
                           <div className={theme['cell-image']}>
@@ -227,7 +235,11 @@ export class SearchBarInner extends Component {
                     key={`${item.title}-${item.content}-${item.featuredImage}`}
                     className={theme['group-cell']}
                   >
-                    <a className={theme.forumLink} href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}>
+                    <a
+                      className={theme.forumLink}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
+                    >
                       <span className={theme['cell-text']}>
                         {item.title}
                       </span>
@@ -360,6 +372,8 @@ export class SearchBarInner extends Component {
           featuredImage: featuredImage.fields.file.url,
           tags: fields.tags,
           contentAuthor: contentAuthor.fields,
+          externalArticle: fields.externalArticle,
+          contentUrl: fields.contentUrl,
         };
       }),
       'type',

src/shared/components/Contentful/Tabs/Tabs.jsx

@@ -22,13 +22,17 @@ import zurichTheme from './themes/zurich.scss';
 import tabsGroup from './themes/tabsGroup.scss';
 import tabsGroupChildren from './themes/tabsGroupChildren.scss';
 import underlineTheme from './themes/underline.scss';
+import verticalTheme from './themes/vertical.scss';
+import pillsTheme from './themes/pills.scss';
 
 export const TAB_THEMES = {
   Default: defaultTheme,
   Zurich: zurichTheme,
   'Tabs Group': tabsGroup,
   'Tabs Group Children': tabsGroupChildren,
   Underline: underlineTheme,
+  Vertical: verticalTheme,
+  Pills: pillsTheme,
 };
 
 export default class TabsItemsLoader extends Component {

src/shared/components/Contentful/Tabs/themes/pills.scss

@@ -0,0 +1,69 @@
+@import '~styles/mixins';
+
+$text-color-black: #262628;
+
+.container {
+  @include roboto-regular;
+
+  max-width: $screen-lg;
+  margin: auto;
+}
+
+.tablist {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: row; /* Safari */
+  flex-direction: row;
+  -webkit-justify-content: center; /* Safari */
+  justify-content: center;
+  list-style-type: none;
+  border-bottom: none;
+
+  @include xs-to-sm {
+    -webkit-flex-direction: column; /* Safari */
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.tab {
+  text-align: center;
+  margin: 0 10px;
+  color: $text-color-black;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 30px;
+  cursor: pointer;
+  border-radius: 15px;
+  padding: 0 15px;
+
+  @include xs-to-sm {
+    margin: 2px;
+  }
+
+  &:hover {
+    background: #d4d4d4;
+  }
+
+  &.selected {
+    background-color: #7f7f7f;
+    box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
+    color: $tc-white;
+  }
+
+  p {
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.tabpannel {
+  display: none;
+}
+
+.selectedTabPanel {
+  display: block;
+}

src/shared/components/Contentful/Tabs/themes/vertical.scss

@@ -0,0 +1,72 @@
+@import '~styles/mixins';
+
+$text-color-black: #262628;
+$selected-color: #43d7b0;
+$gray-border-color: #e9e9e9;
+
+.container {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  max-width: $screen-lg;
+  margin: auto;
+}
+
+.tablist {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: column; /* Safari */
+  flex-direction: column;
+  list-style-type: none;
+  border-right: 5px solid $gray-border-color;
+  margin-right: 58px;
+  padding: 7px 0;
+}
+
+.tab {
+  text-align: left;
+  color: $text-color-black;
+  font-size: 16px;
+  line-height: 45px;
+  font-weight: 400;
+  cursor: pointer;
+  padding-right: 30px;
+
+  &:hover,
+  &.selected {
+    font-weight: 700;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 5px;
+      background: $selected-color;
+      height: 100%;
+      right: -5px;
+      top: 0;
+      display: flex;
+      position: absolute;
+      border-radius: 5px;
+      border-top: 1px solid white;
+      border-bottom: 1px solid white;
+    }
+  }
+
+  p {
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.tabpannel {
+  display: none;
+}
+
+.selectedTabPanel {
+  display: block;
+  flex: 1;
+}

src/shared/components/Dashboard/Announcement/index.jsx

@@ -77,7 +77,7 @@ export default function Announcement({
         <div
           styleName="text"
         >
-          {text}
+          {publicTitle || title}
         </div>
       </div>
     );