Issue 221

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

@@ -374,6 +374,19 @@ exports[`Matches shallow shapshot 1`] = `
       </code>
       .
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/examples/tags/"
+      >
+        Tags
+      </Link>
+       - Demo/test of standard tags already available in the code, and customizable with help of 
+      <code>
+        react-css-themr
+      </code>
+      .
+    </li>
     <li>
       <Link
         replace={false}

__tests__/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Renderer from 'react-test-renderer/shallow';
 import TU from 'react-dom/test-utils';
 import ChallengeCard from 'components/challenge-listing/ChallengeCard';
 import MockDate from 'mockdate';
 import { Provider } from 'react-redux';
 import mockReduxStore from 'redux-mock-store';
+import { Tag } from 'components/tags';
 
 const store = mockReduxStore()();
 
@@ -152,16 +154,16 @@ describe('render properly', () => {
 
   test('click', () => {
     instance = TU.renderIntoDocument((<Wrapper {...mockData4} />));
-    const tags = TU.findAllInRenderedTree(instance, item =>
-      item && item.className && item.className.match('technology'));
-    expect(tags).toHaveLength(4);
-    TU.Simulate.click(tags[0]);
+    const tags = TU.scryRenderedComponentsWithType(instance, Tag);
+    const el = ReactDOM.findDOMNode(tags[0]);
+    expect(tags).toHaveLength(4);    
+    TU.Simulate.click(el);
   });
 
   test('click + tag', () => {
     instance = TU.renderIntoDocument((<Wrapper {...mockData5} />));
-    const tags = TU.findAllInRenderedTree(instance, item =>
-      item && item.className && item.className.match('technology'));
-    TU.Simulate.click(tags[0]);
+    const tags = TU.scryRenderedComponentsWithType(instance, Tag);
+    const el = ReactDOM.findDOMNode(tags[0]);
+    TU.Simulate.click(el);
   });
 });

__tests__/shared/components/challenge-listing/Listing/Bucket.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import Renderer from 'react-test-renderer/shallow';
 import TU from 'react-dom/test-utils';
 import Bucket from 'components/challenge-listing/Listing/Bucket';
 import reduxStoreFactory from 'redux-mock-store';
 import { Provider } from 'react-redux';
+import { Tag } from 'components/tags';
 
 const store = reduxStoreFactory()();
 
@@ -176,14 +178,13 @@ class Wrapper extends React.Component {
 const instance = TU.renderIntoDocument((<Wrapper {...mockDatas[0]} />));
 
 test('setFilterState', () => {
-  const matches = TU.findAllInRenderedTree(instance, item =>
-    item && item.className && item.className.match('technology'));
+  const matches = TU.scryRenderedComponentsWithType(instance, Tag);
   expect(matches).toHaveLength(3);
-  TU.Simulate.click(matches[0]);
+  TU.Simulate.click(ReactDOM.findDOMNode(matches[0]));
   expect(setFilterState).toHaveBeenCalledTimes(1);
-  TU.Simulate.click(matches[1]);
+  TU.Simulate.click(ReactDOM.findDOMNode(matches[1]));
   expect(setFilterState).toHaveBeenCalledTimes(2);
-  TU.Simulate.click(matches[2]);
+  TU.Simulate.click(ReactDOM.findDOMNode(matches[2]));
   expect(setFilterState).toHaveBeenCalledTimes(3);
 });
 

src/shared/components/Content/index.jsx

@@ -152,6 +152,11 @@ export default function Content() {
           load <code>.svg</code> assets with use
           of <code>babel-plugin-inline-react-svg</code>.
         </li>
+        <li>
+          <Link to="/examples/tags/">Tags</Link> - Demo/test of standard
+          tags already available in the code, and customizable with help
+          of <code>react-css-themr</code>.
+        </li>
         <li>
           <Link to="/examples/themr">Themr</Link> - Test/demo of
           react-css-themr.

src/shared/components/buttons/index.jsx

@@ -123,4 +123,4 @@ export const PrimaryButton =
 export const SecondaryButton =
   themr('SecondaryButton', secondaryButton)(GenericButton);
 
-export default undefined;
+  export default undefined;

src/shared/components/challenge-detail/Header/ChallengeTags.jsx

@@ -11,15 +11,13 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import { Link } from 'utils/router';
 
-import './style.scss';
+import { Tag, EventTag, PrimaryTag } from 'components/tags';
 
 export default function ChallengeTags(props) {
   const {
     subTrack,
     events,
     technPlatforms,
-    subTrackStyle,
-    eventStyle,
     setChallengeListingFilter,
     challengeSubtracksMap,
   } = props;
@@ -33,34 +31,32 @@ export default function ChallengeTags(props) {
   };
 
   return (
-    <div styleName="tag-holder">
+    <div>
       {
         subTrack &&
-        <Link
-          onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
+        <PrimaryTag
           to="/challenges"
-          styleName={`tag-common ${subTrackStyle}`}
-        >{stylizedSubTrack(subTrack)}</Link>
+          onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
+        >{stylizedSubTrack(subTrack)}</PrimaryTag>
       }
       {
         events.map(event => (
-          <a
-            href={`https://${event}.topcoder.com`}
+          <EventTag
+            to={`https://${event}.topcoder.com`}
             key={event}
-            styleName={`tag-common  ${eventStyle}`}
-          >{event}</a>
+          >{event}</EventTag>
         ))
       }
       {
         technPlatforms.map(
           tag =>
             (
-              <Link
-                key={tag}
-                onClick={() => setChallengeListingFilter({ tags: [tag] })}
+              tag && 
+              <Tag
                 to="/challenges"
-                styleName="tag-common misc-tag"
-              >{tag}</Link>
+                onClick={() => setChallengeListingFilter({ tags: [tag] })}
+                key={tag}
+              >{tag}</Tag>
             ),
         )
       }
@@ -78,8 +74,6 @@ ChallengeTags.propTypes = {
   subTrack: PT.string,
   events: PT.arrayOf(PT.string),
   technPlatforms: PT.arrayOf(PT.string),
-  subTrackStyle: PT.string.isRequired,
-  eventStyle: PT.string.isRequired,
   setChallengeListingFilter: PT.func.isRequired,
   challengeSubtracksMap: PT.shape().isRequired,
 };

src/shared/components/challenge-detail/Header/index.jsx

@@ -66,9 +66,8 @@ export default function ChallengeHeader(props) {
   }
 
   const theme = themeFactory(trackLower);
-
-  const subTrackStyle = `${trackLower}-accent-background`;
-  const eventStyle = `${trackLower}-accent-color`;
+  const stylizedSubTrack = (subTrack || '').replace('_', ' ')
+    .replace(/\w\S*/g, txt => _.capitalize(txt));
   const eventNames = (events || []).map((event => (event.eventName || '').toUpperCase()));
   const miscTags = _.union((technologies || '').split(', '), platforms.split(', '));
 
@@ -184,8 +183,6 @@ export default function ChallengeHeader(props) {
             challengeSubtracksMap={challengeSubtracksMap}
             events={eventNames}
             technPlatforms={miscTags}
-            subTrackStyle={subTrackStyle}
-            eventStyle={eventStyle}
             setChallengeListingFilter={setChallengeListingFilter}
           />
           <div styleName="prizes-ops-container">

src/shared/components/challenge-detail/Header/style.scss

@@ -124,39 +124,17 @@
       }
     }
 
-    .tag-holder {
-      .tag-common {
-        border-radius: 3px;
-        font-family: roboto;
-        font-size: 10px;
-        line-height: 20px;
-        margin: 5px 5px 0 0;
-        display: inline-block;
-        text-align: center;
-        padding: 0 5px;
-        font-weight: 700;
-        color: $tc-white;
-        background-color: $tc-light-blue-10;
-      }
-
-      .design-accent-background {
-        background-color: $tc-light-blue;
-      }
-
-      .design-accent-color {
-        background-color: $tc-light-blue;
-      }
-
-      @include develop-accent-bg;
-      @include datasci-accent-bg;
-      @include develop-accent-clr;
-      @include datasci-accent-clr;
-
-      .misc-tag {
-        color: $tc-gray-80;
-        background-color: $tc-gray-neutral-dark;
-        cursor: pointer;
-      }
+    @include design-accent-bg;
+    @include develop-accent-bg;
+    @include datasci-accent-bg;
+    @include design-accent-clr;
+    @include develop-accent-clr;
+    @include datasci-accent-clr;
+
+    .miscTag {
+      color: $tc-gray-80;
+      background-color: $tc-gray-neutral-dark;
+      cursor: pointer;
     }
 
     .prizes-ops-container {
@@ -260,10 +238,7 @@
               font-weight: 500;
             }
 
-            .design-accent-color {
-              color: $tc-light-blue;
-            }
-
+            @include design-accent-clr;
             @include develop-accent-clr;
             @include datasci-accent-clr;
           }

src/shared/components/challenge-detail/themeFactory.js

@@ -10,9 +10,10 @@
 
 import { COMPETITION_TRACKS } from 'utils/tc';
 
-// import primaryDesignButtonStyle from '../buttons/primaryDesign.scss';
-// import primaryDevelopButtonStyle from '../buttons/primaryDevelop.scss';
-// import primaryDataScienceButtonStyle from '../buttons/primaryDataScience.scss';
+  import primaryDevelopTagStyle from '../tags/primaryDevelop.scss';
+  import primaryDataScienceTagStyle from '../tags/primaryDataScience.scss';
+  import eventDevelopTagStyle from '../tags/eventDevelop.scss';
+  import eventDataScienceTagStyle from '../tags/eventDataScience.scss';
 
 export default function factory(track) {
   /* Currently track value can come either from Topcoder API v2, where it is
@@ -21,15 +22,17 @@ export default function factory(track) {
   switch (track.toLowerCase()) {
     case COMPETITION_TRACKS.DATA_SCIENCE:
       return {
-        // PrimaryButton: primaryDataScienceButtonStyle,
+        PrimaryTag: primaryDataScienceTagStyle,
+        EventTag: eventDataScienceTagStyle,
       };
     case COMPETITION_TRACKS.DESIGN:
       return {
-        // PrimaryButton: primaryDesignButtonStyle,
+
       };
     case COMPETITION_TRACKS.DEVELOP:
       return {
-        // PrimaryButton: primaryDevelopButtonStyle,
+        PrimaryTag: primaryDevelopTagStyle,
+        EventTag: eventDevelopTagStyle,
       };
     default:
       throw new Error('Wrong competition track value!');

src/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -11,6 +11,7 @@ import Prize from './Prize';
 import ChallengeStatus from './Status';
 import TrackAbbreviationTooltip from '../Tooltips/TrackAbbreviationTooltip';
 import './style.scss';
+import { Tag } from 'components/tags';
 
 export const PRIZE_MODE = {
   HIDDEN: 'hidden',
@@ -228,15 +229,11 @@ class Tags extends React.Component {
         technologyList.push(lastItem);
       }
       return technologyList.map(c => (
-        <a
-          key={c}
-          styleName="technology"
-          /* TODO: Find out why all tags beside the first one are prepended
-           * with whitespaces? */
+        <Tag
           onClick={() => this.onClick(c.trim())}
+          key={c}
           role="button"
-          tabIndex={0}
-        >{c}</a>
+        >{c}</Tag>
       ));
     }
     return '';