Contentful updates (TCO19 press release)

.circleci/config.yml

@@ -174,7 +174,7 @@ workflows:
           filters:
             branches:
               only: 
-                - develop-from-master-23may
+                - develop
                 - hot-fixes-4
       # This is alternate dev env for parallel testing
       - "build-test":

__tests__/shared/components/Contentful/Image/__snapshots__/Image.jsx.snap

@@ -22,7 +22,6 @@ exports[`Matches shallow shapshot 1`] = `
     wrapper={[Function]}
   />
   <img
-    alt=""
     src="https://www.topcoder.com"
     style={
       Object {

src/server/tc-communities/tco20/metadata.json

@@ -3,6 +3,7 @@
     "tags": ["TCO", "TCO20"]
   },
   "communityId": "tco20",
+  "hidden": true,
   "communityName": "TCO20",
   "groupIds": [],
   "hideSearch": true,

src/shared/components/Contentful/BlogPost/BlogPost.jsx

@@ -75,7 +75,7 @@ function BlogPost({
         {
           heroImage ? (
             <div className={theme.image}>
-              <img alt="" src={heroImage.file.url} />
+              <img alt={blogPost.title} src={heroImage.file.url} />
             </div>
           ) : null
         }

src/shared/components/Contentful/BlogPost/ListView/index.jsx

@@ -25,7 +25,7 @@ function BlogListView({
           heroImage ? (
             <div className={theme.imageWrapper}>
               <Link to={readMoreLink}>
-                <img alt="" src={heroImage.file.url} />
+                <img alt={blogPost.title} src={heroImage.file.url} />
               </Link>
             </div>
           ) : null

src/shared/components/Contentful/ContentBlock/ContentBlock.jsx

@@ -38,7 +38,7 @@ function ContentBlock({
         {
           background ? (
             <div className={theme.image}>
-              <img alt="" src={background.file.url} />
+              <img alt={contentBlock.alt || contentBlock.name} src={background.file.url} />
             </div>
           ) : null
         }

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

@@ -86,11 +86,16 @@
   }
 
   a {
-    color: #0d61bf !important;
+    color: #0d61bf;
     text-decoration: underline;
 
     &:visited {
-      color: #8231a9 !important;
+      color: #8231a9;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: #0d61bf;
     }
   }
 

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

@@ -2,6 +2,12 @@
 
 .container {
   width: 100%;
+
+  :global {
+    .slider-control-bottomcenter {
+      z-index: 999999;
+    }
+  }
 }
 
 .singleContent {

src/shared/components/Contentful/Image/Image.jsx

@@ -81,7 +81,7 @@ export class ImageInner extends React.Component {
         )}
         <img
           src={imageUrl}
-          alt=""
+          alt={image.alt || image.name}
           style={imgStyle}
         />
       </div>

src/shared/components/Contentful/MemberCard/MemberCard.jsx

@@ -35,7 +35,7 @@ export function MemberCardInner({
     >
       { imageUrl && (
         <div className={theme.imageWrapper}>
-          <img src={imageUrl} alt="profile" />
+          <img src={imageUrl} alt={`${memberName}'s profile`} />
         </div>
       )}
       <div className={theme.info}>

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

@@ -10,6 +10,7 @@ import PT from 'prop-types';
 import React from 'react';
 import { removeTrailingSlash } from 'utils/url';
 import { isActive, target } from 'utils/contentful';
+import { isomorphy } from 'topcoder-react-utils';
 
 import NavMenu from './Menu';
 
@@ -18,6 +19,7 @@ const THEMES = {
   Default: require('./themes/default.scss'),
   'TCO19 - Header Menu': require('./themes/tco19-header.scss'),
   'TCO19 - Footer Menu': require('./themes/tco19-footer.scss'),
+  'TCO20 - Footer Menu': require('./themes/tco20-footer.scss'),
 };
 /* eslint-enable global-require */
 
@@ -65,23 +67,93 @@ function MenuItemsLoader(props) {
               </div>
             );
           }
-          if (menuItem.fields.childRoutes && menuItem.fields.excludeFromNavigationMenus !== true && isActive(baseUrl, menuItem, 'childRoutes')) {
-            return (
-              <div className={themeToUse.submenu} key={menuItem.sys.id}>
-                <MenuItemsLoader
-                  menuId={menuItem.sys.id}
-                  ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+          if (menuItem.fields.childRoutes && menuItem.fields.excludeFromNavigationMenus !== true) {
+            if (menuItem.fields.url && menuItem.fields.url !== '/' && isActive(baseUrl, menuItem, 'childRoutes')) {
+              return (
+                <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                  <MenuItemsLoader
+                    menuId={menuItem.sys.id}
+                    ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                    preview={preview}
+                    themeName={themeName}
+                    theme={themeToUse}
+                    baseUrl={target(baseUrl, menuItem)}
+                    parentBaseUrl={baseUrl}
+                    parentItems={_.values(data.entries.items)}
+                    activeParentItem={menuItem}
+                    level={level + 1}
+                  />
+                </div>
+              );
+            }
+            if (!menuItem.fields.url || menuItem.fields.url === '/') {
+              // need to load the submenu to see if it matches for the location
+              // this is special case when we have sub menus under root "/"" path
+              // all other cases are covered by above rule.
+
+              // get the current location 1st
+              let location = '';
+              if (isomorphy.isClientSide()) {
+                location = window.location.pathname;
+                location = location.toLowerCase();
+                location = _.replace(location, '/__community__/tco19', '');
+              } else {
+                // TODO: should probably get the current URL from the web framework
+              }
+              // When we are at home/root just load the menu directly
+              if (!location || location === '/') {
+                return (
+                  <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                    <MenuItemsLoader
+                      menuId={menuItem.sys.id}
+                      ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                      preview={preview}
+                      themeName={themeName}
+                      theme={themeToUse}
+                      baseUrl={target(baseUrl, menuItem)}
+                      parentBaseUrl={baseUrl}
+                      parentItems={_.values(data.entries.items)}
+                      activeParentItem={menuItem}
+                      level={level + 1}
+                    />
+                  </div>
+                );
+              }
+              // In all other cases we need to load the menu items
+              // to check if some matches against location path
+              return (
+                <ContentfulLoader
+                  entryIds={_.map(menuItem.fields.childRoutes, 'sys.id')}
                   preview={preview}
-                  themeName={themeName}
-                  theme={themeToUse}
-                  baseUrl={target(baseUrl, menuItem)}
-                  parentBaseUrl={baseUrl}
-                  parentItems={_.values(data.entries.items)}
-                  activeParentItem={menuItem}
-                  level={level + 1}
+                  spaceName={spaceName}
+                  environment={environment}
+                  key={menuItem.sys.id}
+                  render={(childRoutesData) => {
+                    const links = _.values(childRoutesData.entries.items).map(childItem => `/${childItem.fields.url}`);
+                    if (links.some(link => location.startsWith(link))) {
+                      return (
+                        <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                          <MenuItemsLoader
+                            menuId={menuItem.sys.id}
+                            ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                            preview={preview}
+                            themeName={themeName}
+                            theme={themeToUse}
+                            baseUrl={target(baseUrl, menuItem)}
+                            parentBaseUrl={baseUrl}
+                            parentItems={_.values(data.entries.items)}
+                            activeParentItem={menuItem}
+                            level={level + 1}
+                          />
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                  renderPlaceholder={LoadingIndicator}
                 />
-              </div>
-            );
+              );
+            }
           }
           return null;
         }));

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

@@ -3,6 +3,10 @@
 .outerContainer {
   width: 100%;
 
+  @include lg {
+    padding-left: 30px;
+  }
+
   .menuContainer {
     display: flex;
     width: 100%;

src/shared/components/Contentful/Menu/themes/tco19-header.scss

@@ -4,6 +4,10 @@
   width: 100%;
   background-color: $tc-black;
 
+  @include lg {
+    padding-left: 30px;
+  }
+
   .menuContainer {
     display: flex;
     width: 100%;

src/shared/components/Contentful/Menu/themes/tco20-footer.scss

@@ -0,0 +1,60 @@
+@import '~styles/mixins';
+
+.outerContainer {
+  @include xs-to-sm {
+    margin-bottom: 1em !important;
+    margin-left: 35px;
+  }
+
+  .title {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 25px;
+    text-align: left;
+    text-transform: uppercase;
+    margin-bottom: 5px;
+  }
+
+  .menuContainer {
+    display: flex;
+    align-items: left;
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      list-style-type: none;
+      text-align: left;
+      padding: 0;
+    }
+  }
+
+  a.menuItemLink {
+    text-decoration: none;
+    padding: 0;
+
+    @include roboto-regular;
+
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+  }
+}
+
+.submenu {
+  display: none;
+
+  .outerContainer {
+    margin-left: 1em;
+  }
+
+  .menuContainer {
+    display: flex;
+    align-items: left;
+
+    .container {
+      flex-direction: column !important;
+    }
+  }
+}

src/shared/components/buttons/outline/tco/tco07.scss

@@ -3,6 +3,7 @@
   font-size: 15px !important;
   font-weight: 500 !important;
   background-color: #ee9e0b !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco09.scss

@@ -4,6 +4,7 @@
   font-weight: 500 !important;
   background-color: #5f9ab4 !important;
   text-transform: uppercase !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco10.scss

@@ -3,6 +3,7 @@
   font-size: 15px !important;
   font-weight: 500 !important;
   background-color: #006dea !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco11.scss

@@ -3,6 +3,7 @@
   font-size: 15px !important;
   font-weight: 500 !important;
   background-color: #00566b !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco12.scss

@@ -3,6 +3,7 @@
   font-size: 15px !important;
   font-weight: 500 !important;
   background-color: #ff8300 !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco13.scss

@@ -4,6 +4,7 @@
   font-weight: 500 !important;
   background-color: #0e477a !important;
   text-transform: uppercase !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco14.scss

@@ -4,6 +4,7 @@
   font-weight: 500 !important;
   background-color: #43abe4 !important;
   text-transform: uppercase !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco16.scss

@@ -3,6 +3,7 @@
   font-size: 15px !important;
   font-weight: 500 !important;
   background-color: #ff6000 !important;
+  text-decoration: none !important;
 
   &:hover {
     background-image: none !important;

src/shared/components/buttons/outline/tco/tco18.scss

@@ -2,4 +2,5 @@
   color: #fafafb !important;
   font-size: 15px !important;
   font-weight: 500 !important;
+  text-decoration: none !important;
 }

src/shared/components/buttons/outline/tco/tco19-lg.scss

@@ -23,4 +23,5 @@ $tco-disabled-background: #e9e9e9;
   background-color: $tco-disabled-background !important;
   border-radius: 20px !important;
   border: none !important;
+  text-decoration: none !important;
 }

src/shared/components/buttons/outline/tco/tco19-sec-lg.scss

@@ -24,4 +24,5 @@ $tco-disabled-background: #e9e9e9;
   border-radius: 20px !important;
   border: none !important;
   color: $tc-white !important;
+  text-decoration: none !important;
 }

src/shared/components/buttons/outline/tco/tco19-sec.scss

@@ -24,4 +24,5 @@ $tco-disabled-background: #e9e9e9;
   border-radius: 15px !important;
   border: none !important;
   color: $tc-white !important;
+  text-decoration: none !important;
 }