Add Tag example page, improvements to tag component

Author: Colinh84

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

@@ -47,7 +47,6 @@ import dangerButton from './danger.scss';
 import defaultButton from './default.scss';
 import primaryDesignButton from './primaryDesign.scss';
 import secondaryButton from './secondary.scss';
-import tagButton from './tags.scss';
 
 /* Generic button, not wrapped by themr, but accepting theme property.
  * In most cases you will want to use some of the themable exports below
@@ -124,7 +123,4 @@ export const PrimaryButton =
 export const SecondaryButton =
   themr('SecondaryButton', secondaryButton)(GenericButton);
 
-export const TagButton =
-  themr('TagButton', tagButton)(GenericButton);
-
   export default undefined;

src/shared/components/buttons/tags.scss

@@ -10,18 +10,14 @@ import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
 import { Link } from 'utils/router';
-import style from './style.scss';
-import { Tag } from 'components/tags';
-import { EventTag } from 'components/tags';
-import { PrimaryTag } from 'components/tags';
+
+import { Tag, EventTag, PrimaryTag } from 'components/tags';
 
 export default function ChallengeTags(props) {
   const {
     subTrack,
     events,
     technPlatforms,
-    subTrackStyle,
-    eventStyle,
     setChallengeListingFilter,
     challengeSubtracksMap,
   } = props;
@@ -55,6 +51,7 @@ export default function ChallengeTags(props) {
         technPlatforms.map(
           tag =>
             (
+              tag && 
               <Tag
                 to="/challenges"
                 onClick={() => setChallengeListingFilter({ tags: [tag] })}
@@ -77,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/ChallengeTags.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/index.jsx

@@ -10,10 +10,8 @@
 
 import { COMPETITION_TRACKS } from 'utils/tc';
 
-  import primaryDesignTagStyle from '../tags/primaryDesign.scss';
   import primaryDevelopTagStyle from '../tags/primaryDevelop.scss';
   import primaryDataScienceTagStyle from '../tags/primaryDataScience.scss';
-  import eventDesignTagStyle from '../tags/eventDesign.scss';
   import eventDevelopTagStyle from '../tags/eventDevelop.scss';
   import eventDataScienceTagStyle from '../tags/eventDataScience.scss';
 
@@ -23,19 +21,15 @@ export default function factory(track) {
    * to normalize. */
   switch (track.toLowerCase()) {
     case COMPETITION_TRACKS.DATA_SCIENCE:
-      console.log('track: ' + track);
       return {
         PrimaryTag: primaryDataScienceTagStyle,
         EventTag: eventDataScienceTagStyle,
       };
     case COMPETITION_TRACKS.DESIGN:
-    console.log('track: ' + track);
       return {
-        //PrimaryTag: primaryDesignTagStyle,
-        //EventTag: eventDesignTagStyle,
+
       };
     case COMPETITION_TRACKS.DEVELOP:
-    console.log('track: ' + track);
       return {
         PrimaryTag: primaryDevelopTagStyle,
         EventTag: eventDevelopTagStyle,

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

@@ -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,10 @@ 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())}
-          role="button"
-          tabIndex={0}
-        >{c}</a>
+          key={c}
+        >{c}</Tag>
       ));
     }
     return '';

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  Tag,
+  PrimaryTag,
+  EventTag
+} from 'components/tags';
+import { ThemeProvider } from 'react-css-themr';
+
+import primaryDataScienceTagStyle from '../../tags/primaryDataScience.scss';
+import primaryDevelopTagStyle from '../../tags/primaryDevelop.scss';
+import eventDevelopTagStyle from '../../tags/eventDevelop.scss';
+import eventDataScienceTagStyle from '../../tags/eventDataScience.scss';
+
+import style from './style.scss';
+
+export default function Tags() {
+  return (
+    <div styleName="style.page">
+      <h1>Tags</h1>
+      <p>
+        All tags in this page are instances of the generic tag,
+        implemented in <code>/src/components/tags</code> and wrapped
+        into different style themes with help
+        of <code>react-css-themr</code>.
+      </p>
+
+      <h3>Default Tag</h3>
+      <Tag>Tag</Tag>
+      <Tag to=".">Link Tag</Tag>
+
+      <h3>Primary Tag</h3>
+
+      <p>Default &mdash; design color scheme:</p>
+      <PrimaryTag>Tag</PrimaryTag>
+      <PrimaryTag to=".">Link Tag</PrimaryTag>
+
+      <p>Develop color scheme (underlying source code also
+        demonstrates the proper context theming in action):</p>
+
+      <ThemeProvider
+        theme={{ PrimaryTag: primaryDevelopTagStyle }}
+      >
+        <div>
+          <PrimaryTag>Tag</PrimaryTag>
+          <PrimaryTag to=".">Link Tag</PrimaryTag>
+        </div>
+      </ThemeProvider>
+
+      <p>Data science color scheme:</p>
+      <ThemeProvider
+        theme={{ PrimaryTag: primaryDataScienceTagStyle }}
+      >
+        <div>
+          <PrimaryTag>Tag</PrimaryTag>
+          <PrimaryTag to=".">Link Tag</PrimaryTag>
+        </div>
+      </ThemeProvider>
+
+      <h3>Event Tag</h3>
+      <p>Default &mdash; design color scheme:</p>
+      <EventTag>Tag</EventTag>
+      <EventTag to=".">Link Tag</EventTag>
+      <p>Develop color scheme:</p>
+      <ThemeProvider
+        theme={{ EventTag: eventDevelopTagStyle }}
+      >
+        <div>
+          <EventTag>Tag</EventTag>
+          <EventTag to=".">Link Tag</EventTag>
+        </div>
+      </ThemeProvider>
+      <p>Data Science color scheme:</p>
+      <ThemeProvider
+        theme={{ EventTag: eventDataScienceTagStyle }}
+      >
+        <div>
+          <EventTag>Tag</EventTag>
+          <EventTag to=".">Link Tag</EventTag>
+        </div>
+      </ThemeProvider>
+    </div>
+  );
+}

src/shared/components/examples/Tags/index.jsx

@@ -0,0 +1,43 @@
+@import "~styles/tc-styles";
+
+.page {
+  @include roboto-light;
+
+  line-height: 150%;
+  margin: auto;
+  max-width: $screen-lg;
+  padding: 24px;
+
+  h1 {
+    margin: 0 0 18px;
+  }
+
+  h3 {
+    margin: 24px 0 6px;
+  }
+
+  code {
+    background: whitesmoke;
+    padding: 2px 4px;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  p {
+    margin: $base-unit 0;
+  }
+}
+
+.btnXS {
+  @include btn-xs;
+}
+
+.btnSM {
+  @include btn-sm;
+}
+
+.btnLG {
+  @include btn-lg;
+}

src/shared/components/examples/Tags/style.scss

@@ -4,32 +4,32 @@
  @import "~styles/tc-styles";
 
 @mixin feedback {
-  &:active, 
-  &:focus, 
+  &:active,
+  &:focus,
   &:hover {
     color: $tc-gray-80;
-    background-color: $tc-dark-blue-30;       
+    background-color: $tc-dark-blue-30;
   }
   &:visited {
     color: $tc-gray-80;
   }
 }
 
-
-.tag {
-  display: inline-block;
-  text-align: center;
-  padding: 0 7px;
-  line-height: 20px;
-  background-color: $tc-gray-neutral-dark;
-  font-size: 11px;
-  font-family: Roboto;
-  font-weight: 500;
-  color: $tc-gray-80;
-  margin-right: 5px;
-  border-radius: 4px;
-  height: 20px;
-  margin-bottom: 2px;
-  cursor: pointer;
-  @include feedback;  
+div, span {
+  .tag, a.tag {
+    display: inline-block;
+    text-align: center;
+    padding: 0 7px;
+    line-height: 20px;
+    background-color: $tc-gray-neutral-dark;
+    font-size: 11px;
+    font-family: Roboto;
+    font-weight: 500;
+    color: $tc-gray-80;
+    margin-right: 5px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    cursor: pointer;
+    @include feedback;
+  }
 }