Skip to content

Commit 2cf94fa

Browse files
Colinh84Colinh84
committed
create tags component
1 parent fc5556f commit 2cf94fa

11 files changed

+282
-17
lines changed

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

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import PT from 'prop-types';
1111
import _ from 'lodash';
1212
import { Link } from 'utils/router';
1313
import style from './style.scss';
14-
import { TagButton } from 'components/buttons';
14+
import { Tag } from 'components/tags';
15+
import { EventTag } from 'components/tags';
16+
import { PrimaryTag } from 'components/tags';
1517

1618
export default function ChallengeTags(props) {
1719
const {
@@ -36,31 +38,28 @@ export default function ChallengeTags(props) {
3638
<div>
3739
{
3840
subTrack &&
39-
<TagButton
41+
<PrimaryTag
4042
to="/challenges"
4143
onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
42-
theme={{ button: style[subTrackStyle] }}
43-
>{stylizedSubTrack(subTrack)}</TagButton>
44+
>{stylizedSubTrack(subTrack)}</PrimaryTag>
4445
}
4546
{
4647
events.map(event => (
47-
<TagButton
48+
<EventTag
4849
to={`https://${event}.topcoder.com`}
49-
theme={{ button: style[eventStyle] }}
5050
key={event}
51-
>{event}</TagButton>
51+
>{event}</EventTag>
5252
))
5353
}
5454
{
5555
technPlatforms.map(
5656
tag =>
5757
(
58-
<TagButton
58+
<Tag
5959
to="/challenges"
6060
onClick={() => setChallengeListingFilter({ tags: [tag] })}
61-
theme={{ button: style.miscTag }}
6261
key={tag}
63-
>{tag}</TagButton>
62+
>{tag}</Tag>
6463
),
6564
)
6665
}

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,35 @@
1010

1111
import { COMPETITION_TRACKS } from 'utils/tc';
1212

13-
// import primaryDesignButtonStyle from '../buttons/primaryDesign.scss';
14-
// import primaryDevelopButtonStyle from '../buttons/primaryDevelop.scss';
15-
// import primaryDataScienceButtonStyle from '../buttons/primaryDataScience.scss';
13+
import primaryDesignTagStyle from '../tags/primaryDesign.scss';
14+
import primaryDevelopTagStyle from '../tags/primaryDevelop.scss';
15+
import primaryDataScienceTagStyle from '../tags/primaryDataScience.scss';
16+
import eventDesignTagStyle from '../tags/eventDesign.scss';
17+
import eventDevelopTagStyle from '../tags/eventDevelop.scss';
18+
import eventDataScienceTagStyle from '../tags/eventDataScience.scss';
1619

1720
export default function factory(track) {
1821
/* Currently track value can come either from Topcoder API v2, where it is
1922
* lowercase, or from Topcoder API v3, where it is upper-case. Thus, we have
2023
* to normalize. */
2124
switch (track.toLowerCase()) {
2225
case COMPETITION_TRACKS.DATA_SCIENCE:
26+
console.log('track: ' + track);
2327
return {
24-
// PrimaryButton: primaryDataScienceButtonStyle,
28+
PrimaryTag: primaryDataScienceTagStyle,
29+
EventTag: eventDataScienceTagStyle,
2530
};
2631
case COMPETITION_TRACKS.DESIGN:
32+
console.log('track: ' + track);
2733
return {
28-
// PrimaryButton: primaryDesignButtonStyle,
34+
//PrimaryTag: primaryDesignTagStyle,
35+
//EventTag: eventDesignTagStyle,
2936
};
3037
case COMPETITION_TRACKS.DEVELOP:
38+
console.log('track: ' + track);
3139
return {
32-
// PrimaryButton: primaryDevelopButtonStyle,
40+
PrimaryTag: primaryDevelopTagStyle,
41+
EventTag: eventDevelopTagStyle,
3342
};
3443
default:
3544
throw new Error('Wrong competition track value!');

‎src/shared/components/tags/default.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Challenge tag button, default style with white text on light blue background.
3+
*/
4+
@import "~styles/tc-styles";
5+
6+
@mixin feedback {
7+
&:active,
8+
&:focus,
9+
&:hover {
10+
color: $tc-gray-80;
11+
background-color: $tc-dark-blue-30;
12+
}
13+
&:visited {
14+
color: $tc-gray-80;
15+
}
16+
}
17+
18+
19+
.tag {
20+
display: inline-block;
21+
text-align: center;
22+
padding: 0 7px;
23+
line-height: 20px;
24+
background-color: $tc-gray-neutral-dark;
25+
font-size: 11px;
26+
font-family: Roboto;
27+
font-weight: 500;
28+
color: $tc-gray-80;
29+
margin-right: 5px;
30+
border-radius: 4px;
31+
height: 20px;
32+
margin-bottom: 2px;
33+
cursor: pointer;
34+
@include feedback;
35+
}

‎src/shared/components/tags/eventDataScience.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Event tag, colored with colors of data science track (orange).
3+
*/
4+
5+
@import "~styles/tc-styles";
6+
7+
@mixin feedback {
8+
&:active,
9+
&:focus,
10+
&:hover {
11+
color: $tc-orange;
12+
background-color: $tc-light-blue-10;
13+
}
14+
&:visited {
15+
color: $tc-orange;
16+
}
17+
}
18+
19+
div .tag {
20+
color: $tc-orange;
21+
background-color: $tc-light-blue-10;
22+
@include feedback;
23+
}

‎src/shared/components/tags/eventDesign.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Event tag, colored with colors of design track (blue).
3+
*/
4+
5+
@import "./default";
6+
7+
8+
@mixin feedback {
9+
&:active,
10+
&:focus,
11+
&:hover {
12+
color: $tc-dark-blue-90;
13+
background-color: $tc-light-blue-10;
14+
}
15+
&:visited {
16+
color: $tc-dark-blue-90;
17+
}
18+
}
19+
20+
.tag {
21+
border-radius: 3px;
22+
font-size: 10px;
23+
margin: 5px 5px 0 0;
24+
padding: 0 5px;
25+
font-weight: 700;
26+
color: $tc-dark-blue-90;
27+
background-color: $tc-light-blue-10;
28+
@include feedback;
29+
}

‎src/shared/components/tags/eventDevelop.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Event tag, colored with colors of develop track (green).
3+
*/
4+
@import "~styles/tc-styles";
5+
6+
@mixin feedback {
7+
&:active,
8+
&:focus,
9+
&:hover {
10+
color: $tc-green;
11+
background-color: $tc-light-blue-10;
12+
}
13+
&:visited {
14+
color: $tc-green;
15+
}
16+
}
17+
18+
div .tag {
19+
color: $tc-green;
20+
background-color: $tc-light-blue-10;
21+
@include feedback;
22+
}

‎src/shared/components/tags/index.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import PT from 'prop-types';
2+
import React from 'react';
3+
import { themr } from 'react-css-themr';
4+
import { Link } from 'utils/router';
5+
6+
import defaultTag from './default.scss';
7+
import primaryDesignTag from './primaryDesign.scss';
8+
import eventDesignTag from './eventDesign.scss';
9+
10+
/* Generic button, not wrapped by themr, but accepting theme property.
11+
* In most cases you will want to use some of the themable exports below
12+
* instead. */
13+
export function GenericTag({
14+
children,
15+
enforceA,
16+
onClick,
17+
openNewTab,
18+
replace,
19+
theme,
20+
to,
21+
}) {
22+
if (to) {
23+
return (
24+
<Link
25+
className={`${theme.tag}`}
26+
enforceA={enforceA}
27+
onClick={onClick}
28+
openNewTab={openNewTab}
29+
replace={replace}
30+
to={to}
31+
>{children}</Link>
32+
);
33+
}
34+
return (
35+
<button
36+
className={`${theme.tag}`}
37+
onClick={onClick}
38+
>{children}</button>
39+
);
40+
}
41+
42+
GenericTag.defaultProps = {
43+
children: null,
44+
enforceA: false,
45+
onClick: null,
46+
openNewTab: false,
47+
replace: false,
48+
to: null,
49+
};
50+
51+
GenericTag.propTypes = {
52+
children: PT.node,
53+
enforceA: PT.bool,
54+
onClick: PT.func,
55+
openNewTab: PT.bool,
56+
replace: PT.bool,
57+
theme: PT.shape({
58+
tag: PT.string.isRequired,
59+
}).isRequired,
60+
to: PT.oneOfType([PT.object, PT.string]),
61+
};
62+
63+
export const Tag =
64+
themr('Tag', defaultTag)(GenericTag);
65+
66+
export const PrimaryTag =
67+
themr('PrimaryTag', primaryDesignTag)(GenericTag);
68+
69+
export const SecondaryTag =
70+
themr('EventTag', eventDesignTag)(GenericTag);
71+
72+
export default undefined;

‎src/shared/components/tags/primaryDataScience.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Primary tag, colored with colors of data science track (orange).
3+
*/
4+
5+
@import "~styles/tc-styles";
6+
7+
@mixin feedback {
8+
&:active,
9+
&:focus,
10+
&:hover {
11+
color: $tc-white;
12+
background-color: $tc-orange;
13+
}
14+
&:visited {
15+
color: $tc-white;
16+
}
17+
}
18+
19+
div .tag {
20+
color: $tc-white;
21+
background-color: $tc-orange;
22+
@include feedback;
23+
}

‎src/shared/components/tags/primaryDesign.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Primary tag, colored with colors of design track (blue).
3+
*/
4+
5+
@import "./default";
6+
7+
8+
@mixin feedback {
9+
&:active,
10+
&:focus,
11+
&:hover {
12+
color: $tc-white;
13+
background-color: $tc-dark-blue-90;
14+
}
15+
&:visited {
16+
color: $tc-white;
17+
}
18+
}
19+
20+
.tag {
21+
border-radius: 3px;
22+
font-size: 10px;
23+
margin: 5px 5px 0 0;
24+
padding: 0 5px;
25+
font-weight: 700;
26+
color: $tc-white;
27+
background-color: $tc-dark-blue-90;
28+
@include feedback;
29+
}

‎src/shared/components/tags/primaryDevelop.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Primary tag, colored with colors of develop track (green).
3+
*/
4+
5+
@import "~styles/tc-styles";
6+
7+
@mixin feedback {
8+
&:active,
9+
&:focus,
10+
&:hover {
11+
color: $tc-white;
12+
background-color: $tc-green;
13+
}
14+
&:visited {
15+
color: $tc-white;
16+
}
17+
}
18+
19+
div .tag {
20+
color: $tc-white;
21+
background-color: $tc-green;
22+
@include feedback;
23+
}

‎src/shared/services/.exchange-rates.cache

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1504137600,"base":"USD","rates":{"AED":3.673097,"AFN":68.445423,"ALL":111.791078,"AMD":480.27149,"ANG":1.78843,"AOA":165.9205,"ARS":17.395,"AUD":1.264894,"AWG":1.794996,"AZN":1.7,"BAM":1.644699,"BBD":2,"BDT":81.689034,"BGN":1.64397,"BHD":0.377055,"BIF":1749.75,"BMD":1,"BND":1.356545,"BOB":7.008005,"BRL":3.1603,"BSD":1,"BTC":0.00021700956,"BTN":63.98413,"BWP":10.164186,"BYN":1.941205,"BZD":2.025258,"CAD":1.263078,"CDF":1550.740385,"CHF":0.963759,"CLF":0.02349,"CLP":631.9,"CNH":6.599327,"CNY":6.595577,"COP":2953.5,"CRC":579.374449,"CUC":1,"CUP":25.5,"CVE":92.8,"CZK":21.92111,"DJF":178.77,"DKK":6.256053,"DOP":47.279238,"DZD":110.9295,"EGP":17.643,"ERN":15.335471,"ETB":23.319528,"EUR":0.840993,"FJD":2.034645,"FKP":0.774009,"GBP":0.774009,"GEL":2.4245,"GGP":0.774009,"GHS":4.456015,"GIP":0.774009,"GMD":46.15,"GNF":8930.05,"GTQ":7.320704,"GYD":207.972754,"HKD":7.824991,"HNL":23.509381,"HRK":6.2329,"HTG":63.506176,"HUF":257.132505,"IDR":13345.175458,"ILS":3.58885,"IMP":0.774009,"INR":63.9874,"IQD":1172.5,"IRR":33062.267348,"ISK":105.747443,"JEP":0.774009,"JMD":128.693699,"JOD":0.709001,"JPY":110.4721,"KES":103.18,"KGS":68.664403,"KHR":4075.766667,"KMF":414.090225,"KPW":900,"KRW":1124.28,"KWD":0.301448,"KYD":0.837333,"KZT":336.825303,"LAK":8328.65,"LBP":1509.062443,"LKR":153.581733,"LRD":115.030245,"LSL":13.085258,"LYD":1.368959,"MAD":9.370738,"MDL":17.864359,"MGA":2982.444875,"MKD":51.78,"MMK":1369.51006,"MNT":2428.158099,"MOP":8.098407,"MRO":366.89879,"MUR":32.6185,"MVR":15.450233,"MWK":725.046611,"MXN":17.74,"MYR":4.2715,"MZN":61.160857,"NAD":13.085258,"NGN":355,"NIO":29.996418,"NOK":7.80381,"NPR":102.833791,"NZD":1.388156,"OMR":0.384992,"PAB":1,"PEN":3.240393,"PGK":3.199435,"PHP":51.149,"PKR":105.725129,"PLN":3.57795,"PYG":5696.477124,"QAR":3.685006,"RON":3.863137,"RSD":100.15515,"RUB":58.4901,"RWF":831,"SAR":3.7503,"SBD":7.797375,"SCR":13.631694,"SDG":6.708373,"SEK":7.975026,"SGD":1.358101,"SHP":0.774009,"SLL":7550.184032,"SOS":580.38334,"SRD":7.438,"SSP":124.9444,"STD":20528.502691,"SVC":8.791576,"SYP":515,"SZL":13.096402,"THB":33.2155,"TJS":8.856445,"TMT":3.499986,"TND":2.434089,"TOP":2.193576,"TRY":3.456008,"TTD":6.757558,"TWD":30.151,"TZS":2241.25,"UAH":25.716003,"UGX":3627.308069,"USD":1,"UYU":28.773276,"UZS":4201.65,"VEF":10.05845,"VND":22722.55232,"VUV":105.013288,"WST":2.497571,"XAF":551.655496,"XAG":0.05750432,"XAU":0.00076489,"XCD":2.70255,"XDR":0.7051,"XOF":551.655496,"XPD":0.0010724,"XPF":100.357205,"XPT":0.0010091,"YER":250.35,"ZAR":13.01652,"ZMW":9.077975,"ZWL":322.355011}}
1+
2+
{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1504152000,"base":"USD","rates":{"AED":3.673097,"AFN":68.753,"ALL":111.791078,"AMD":480.79,"ANG":1.788544,"AOA":165.9205,"ARS":17.397,"AUD":1.265096,"AWG":1.794996,"AZN":1.7,"BAM":1.644699,"BBD":2,"BDT":81.6885,"BGN":1.64768,"BHD":0.376988,"BIF":1749.85,"BMD":1,"BND":1.356545,"BOB":7.008309,"BRL":3.1604,"BSD":1,"BTC":0.000214876709,"BTN":64.002922,"BWP":10.165203,"BYN":1.941418,"BZD":2.025349,"CAD":1.26401,"CDF":1550.740385,"CHF":0.964134,"CLF":0.02349,"CLP":631.9,"CNH":6.603155,"CNY":6.596007,"COP":2953.5,"CRC":578.835,"CUC":1,"CUP":25.5,"CVE":92.8,"CZK":21.953782,"DJF":178.77,"DKK":6.264427,"DOP":47.2815,"DZD":110.734,"EGP":17.638,"ERN":15.338604,"ETB":23.321,"EUR":0.842132,"FJD":2.034645,"FKP":0.774439,"GBP":0.774439,"GEL":2.426725,"GGP":0.774439,"GHS":4.456189,"GIP":0.774439,"GMD":46.15,"GNF":8930.7,"GTQ":7.321298,"GYD":207.972754,"HKD":7.825497,"HNL":23.5105,"HRK":6.2428,"HTG":63.512,"HUF":257.473748,"IDR":13350.737506,"ILS":3.589475,"IMP":0.774439,"INR":64.0225,"IQD":1172.6,"IRR":33164.5,"ISK":105.87,"JEP":0.774439,"JMD":128.68,"JOD":0.709001,"JPY":110.54041071,"KES":103.175,"KGS":68.675501,"KHR":4068.5,"KMF":414.090225,"KPW":900,"KRW":1125.55,"KWD":0.301434,"KYD":0.837427,"KZT":336.955,"LAK":8329.15,"LBP":1513.7,"LKR":153.635,"LRD":115.030245,"LSL":13.086864,"LYD":1.369091,"MAD":9.38025,"MDL":17.8955,"MGA":2979.25,"MKD":51.87,"MMK":1369,"MNT":2428.467354,"MOP":8.09906,"MRO":366.735,"MUR":32.6115,"MVR":15.450233,"MWK":725.046611,"MXN":17.73081,"MYR":4.2715,"MZN":61.160857,"NAD":13.087114,"NGN":361.25,"NIO":29.999232,"NOK":7.810398,"NPR":102.83,"NZD":1.39479,"OMR":0.384987,"PAB":1,"PEN":3.240393,"PGK":3.199713,"PHP":51.157,"PKR":105.735,"PLN":3.582625,"PYG":5674.55,"QAR":3.685006,"RON":3.868227,"RSD":100.2925,"RUB":58.4916,"RWF":831,"SAR":3.75015,"SBD":7.812222,"SCR":13.631558,"SDG":6.708748,"SEK":7.986789,"SGD":1.35839,"SHP":0.774439,"SLL":7524.999807,"SOS":581.27,"SRD":7.438,"SSP":124.9444,"STD":20583.157597,"SVC":8.79201,"SYP":515,"SZL":13.09776,"THB":33.22075,"TJS":8.857112,"TMT":3.499986,"TND":2.435798,"TOP":2.19132,"TRY":3.45735,"TTD":6.758012,"TWD":30.1505,"TZS":2241.25,"UAH":25.718,"UGX":3617.15,"USD":1,"UYU":28.764997,"UZS":4202.05,"VEF":10.05845,"VND":22752.373857,"VUV":105.078218,"WST":2.511557,"XAF":552.402553,"XAG":0.05764137,"XAU":0.00076742,"XCD":2.70255,"XDR":0.7051,"XOF":552.402553,"XPD":0.00107336,"XPF":100.49311,"XPT":0.00101536,"YER":250.35,"ZAR":13.032813,"ZMW":9.078587,"ZWL":322.355011}}

0 commit comments

Comments
 (0)