Merge pull request #2611 from topcoder-platform/develop-from-master-23may

Add verified badge to skills

Author: sushilshinde

.circleci/config.yml

@@ -189,7 +189,7 @@ workflows:
           filters:
             branches:
               only:
-                - hot-fixes
+                - hot-fixes-2
                 - develop
                 - general-features
                 - develop-from-master-23may

__tests__/shared/components/ProfilePage/Skill/__snapshots__/index.jsx.snap

@@ -15,9 +15,23 @@ exports[`renders a skill correctly 1`] = `
     />
   </div>
   <div
-    className="src-shared-components-ProfilePage-Skill-___styles__name___31cKG"
+    className="src-shared-components-ProfilePage-Skill-___styles__name-wrapper___2hnPT"
   >
-    Test Skill
+    <div
+      className="src-shared-components-ProfilePage-Skill-___styles__name___31cKG"
+    >
+      Test Skill
+    </div>
+    <div
+      className="src-shared-components-ProfilePage-Skill-___styles__verified-badge____BoiH"
+    >
+      <VerifiedBadgeIcon
+        height="14"
+        viewBox="0 0 14 14"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </div>
   </div>
 </div>
 `;

__tests__/shared/components/ProfilePage/Skill/index.jsx

@@ -9,6 +9,7 @@ it('renders a skill correctly', () => {
   rnd.render((<Skill
     tagId="1"
     tagName="Test Skill"
+    isVerified
   />));
   expect(rnd.getRenderOutput()).toMatchSnapshot();
 });

__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap

@@ -83,6 +83,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="117"
                   tagName="API"
                 />
@@ -91,6 +92,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="125"
                   tagName="Bash"
                 />
@@ -99,6 +101,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="132"
                   tagName="C#"
                 />
@@ -107,6 +110,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="153"
                   tagName="CSS"
                 />
@@ -115,6 +119,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="159"
                   tagName="Database"
                 />
@@ -123,6 +128,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="168"
                   tagName="EC2"
                 />
@@ -131,6 +137,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="170"
                   tagName="EJB"
                 />
@@ -139,6 +146,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="176"
                   tagName="Excel"
                 />
@@ -147,6 +155,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="212"
                   tagName="HTML"
                 />
@@ -155,6 +164,7 @@ exports[`renders a full Profile correctly 1`] = `
                 className="src-shared-components-ProfilePage-___styles__skill___17_DJ"
               >
                 <Skill
+                  isVerified={false}
                   tagId="247"
                   tagName="Java"
                 />

src/assets/images/verified-skill-badge.svg

@@ -6,6 +6,7 @@ import PT from 'prop-types';
 import { truncate } from 'lodash';
 
 import FallbackIcon from 'assets/images/profile/skills/id-develop.svg';
+import VerifiedBadgeIcon from 'assets/images/verified-skill-badge.svg';
 import { isomorphy } from 'topcoder-react-utils';
 
 import './styles.scss';
@@ -18,20 +19,25 @@ if (isomorphy.isClientSide()) {
 const Skill = ({
   tagId,
   tagName,
+  isVerified,
 }) => (
   <div styleName="container">
     <div styleName="skill-icon">
       { assets && assets.keys().includes(`./id-${tagId}.svg`) ? <img src={assets(`./id-${tagId}.svg`)} alt="Skill Icon" /> : <FallbackIcon /> }
     </div>
-    <div styleName="name">
-      {truncate(tagName, 20)}
+    <div styleName="name-wrapper">
+      <div styleName="name">
+        {truncate(tagName, 20)}
+      </div>
+      { isVerified && <div styleName="verified-badge"><VerifiedBadgeIcon /></div> }
     </div>
   </div>
 );
 
 Skill.propTypes = {
   tagId: PT.string.isRequired,
   tagName: PT.string.isRequired,
+  isVerified: PT.string.isRequired,
 };
 
 export default Skill;

src/shared/components/ProfilePage/Skill/index.jsx

@@ -44,16 +44,27 @@
     }
   }
 
-  .name {
-    @include sofia-pro-light;
-
+  .name-wrapper {
     margin-top: 8px;
-    font-size: 12px;
-    color: $tc-gray-90;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    @media (min-width: 768px) {
-      font-size: 14px;
+    .name {
+      @include sofia-pro-light;
+
+      font-size: 12px;
+      color: $tc-gray-90;
+      text-align: center;
+
+      @media (min-width: 768px) {
+        font-size: 14px;
+      }
+    }
+
+    .verified-badge {
+      padding-left: 5px;
+      font-size: 0;
     }
   }
 }

src/shared/components/ProfilePage/Skill/styles.scss

@@ -212,13 +212,16 @@ Skills
                     </h3>
                     <div styleName="list">
                       {
-                        skills.map(({ tagId, tagName, hidden }) => (
+                        skills.map(({
+                          tagId, tagName, hidden, sources,
+                        }) => (
                           !hidden
                           && (
                           <div key={tagId} styleName="skill">
                             <Skill
                               tagId={tagId}
                               tagName={tagName}
+                              isVerified={_.includes(sources, 'CHALLENGE')}
                             />
                           </div>
                           )