Contentful

.circleci/config.yml

@@ -202,14 +202,15 @@ workflows:
           filters:
             branches:
               only:
-                - hot-fix-hall-of-fame
+                - develop
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
           filters:
             branches:
               only:
                 - develop
+                - feature-contentful
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

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

@@ -321,6 +321,15 @@ exports[`Matches shallow shapshot 1`] = `
               Talk to Sales
             </a>
           </li>
+          <li
+            className="src-shared-components-TopcoderFooter-___style__link___3-nzm"
+          >
+            <a
+              href="https://www.topcoder-dev.com/community/terms"
+            >
+              Terms
+            </a>
+          </li>
         </ul>
       </div>
       <div

src/shared/components/Contentful/Article/Article.jsx

@@ -250,7 +250,7 @@ export default class Article extends React.Component {
                                 {subData.entries.items[rec.sys.id].fields.title}
                               </a>
                             ) : (
-                              <a href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${subData.entries.items[rec.sys.id].fields.title}`}>
+                              <a href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${subData.entries.items[rec.sys.id].fields.slug || subData.entries.items[rec.sys.id].fields.title}`}>
                                 {subData.entries.items[rec.sys.id].fields.title}
                               </a>
                             )
@@ -278,7 +278,7 @@ export default class Article extends React.Component {
                               Read More <ReadMoreArrow />
                             </a>
                           ) : (
-                            <a href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${subData.entries.items[rec.sys.id].fields.title}`} className={theme.readMore}>
+                            <a href={`${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${subData.entries.items[rec.sys.id].fields.slug || subData.entries.items[rec.sys.id].fields.title}`} className={theme.readMore}>
                               Read More <ReadMoreArrow />
                             </a>
                           )

src/shared/components/Contentful/ArticleCard/ArticleCard.jsx

@@ -67,7 +67,7 @@ class ArticleCard extends React.Component {
     // determine if article cards will redirect to external link or article details page
     const articlePageUrl = article.externalArticle && article.contentUrl
       ? article.contentUrl
-      : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${article.title}`;
+      : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${article.slug || article.title}`;
     const articlePageTarget = article.externalArticle && article.contentUrl
       ? '_blank'
       : '_self';

src/shared/components/Contentful/ContentBlock/themes/TCO19.scss

@@ -13,6 +13,10 @@
   }
 }
 
+strong a {
+  font-weight: 600 !important;
+}
+
 .container {
   align-content: center;
   background: white;

src/shared/components/Contentful/ContentBlock/themes/TCO20.scss

@@ -27,6 +27,10 @@
   }
 }
 
+strong a {
+  font-weight: 600 !important;
+}
+
 .content {
   flex: 1;
   padding: 0;
@@ -48,6 +52,24 @@
 
   @include gui-kit-headers;
 
+  a {
+    @include roboto-regular;
+
+    font-size: 16px;
+    line-height: 24px;
+    color: #0d61bf;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+      color: #0d61bf;
+    }
+
+    &:visited {
+      color: #8231a9;
+    }
+  }
+
   p {
     @include tc-body-md;
 
@@ -163,24 +185,6 @@
   sub {
     bottom: -0.25em;
   }
-
-  a {
-    @include roboto-regular;
-
-    font-size: 16px;
-    line-height: 24px;
-    color: #0d61bf;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-      color: #0d61bf;
-    }
-
-    &:visited {
-      color: #8231a9;
-    }
-  }
 }
 
 .image {

src/shared/components/Contentful/ContentBlock/themes/default.scss

@@ -63,3 +63,7 @@ pre {
     white-space: pre;
   }
 }
+
+strong a {
+  font-weight: 600 !important;
+}

src/shared/components/Contentful/ContentBlock/themes/general.scss

@@ -26,6 +26,10 @@
   }
 }
 
+strong a {
+  font-weight: 600 !important;
+}
+
 .content {
   flex: 1;
   padding: 0;

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

@@ -55,6 +55,7 @@ export class SearchBarInner extends Component {
     this.getDropdownPopup = this.getDropdownPopup.bind(this);
     this.getSuggestionList = this.getSuggestionList.bind(this);
     this.handleSearchChange = this.handleSearchChange.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
     // using debounce to avoid processing or requesting too much
     this.updateSuggestionListWithNewSearch = _.debounce(
       this.updateSuggestionListWithNewSearch.bind(this), 400,
@@ -66,6 +67,10 @@ export class SearchBarInner extends Component {
     this.apiService = getService({ spaceName: 'EDU' });
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
   /**
    * Set the search field ref
    */
@@ -164,13 +169,13 @@ export class SearchBarInner extends Component {
                     className={theme['group-cell']}
                     onClick={() => {
                       window.location.href = (item.externalArticle && item.contentUrl)
-                        ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`;
+                        ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.slug || item.title}`;
                     }}
                     onKeyPress={_.noop}
                   >
                     <a
                       className={theme.articleLink}
-                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.slug || item.title}`}
                       target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
                       onClick={(e) => {
                         e.nativeEvent.stopImmediatePropagation();
@@ -215,13 +220,13 @@ export class SearchBarInner extends Component {
                     className={theme['group-cell']}
                     onClick={() => {
                       window.location.href = (item.externalArticle && item.contentUrl)
-                        ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`;
+                        ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.slug || item.title}`;
                     }}
                     onKeyPress={_.noop}
                   >
                     <a
                       className={theme.articleLink}
-                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.slug || item.title}`}
                       target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
                       onClick={(e) => {
                         e.nativeEvent.stopImmediatePropagation();
@@ -267,7 +272,7 @@ export class SearchBarInner extends Component {
                   >
                     <a
                       className={theme.forumLink}
-                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.title}`}
+                      href={(item.externalArticle && item.contentUrl) ? item.contentUrl : `${config.TC_EDU_BASE_PATH}${config.TC_EDU_ARTICLES_PATH}/${item.slug || item.title}`}
                       target={(item.externalArticle && item.contentUrl) ? '_blank' : '_self'}
                     >
                       <span className={theme['cell-text']}>
@@ -317,6 +322,13 @@ export class SearchBarInner extends Component {
     ));
   }
 
+  handleClickOutside(e) {
+    if (this.popupSearchResultRef && !this.popupSearchResultRef.contains(e.target)) {
+      this.setState({ isShowSuggestion: false });
+      document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+  }
+
   /**
    * Update size of popup search result
    */
@@ -453,14 +465,10 @@ export class SearchBarInner extends Component {
             ref={this.setSearchFieldRef}
             type="text"
             placeholder="Search..."
-            onBlur={() => {
-              _.delay(() => {
-                this.setState({ isShowSuggestion: false });
-              }, 100);
-            }}
             onFocus={(e) => {
               this.updateSuggestionListWithNewSearch(e.target.value);
               this.setState({ isShowSuggestion: true, isShowFilterPopup: false });
+              document.addEventListener('mousedown', this.handleClickOutside);
             }}
             onChange={this.handleSearchChange}
           />