Merge branch 'amolskh-TaggedValue-React-Component'

Author: vikasrohit

components/Router/Router.jsx

@@ -25,6 +25,7 @@ import SearchSuggestionsExamples     from '../SearchSuggestions/SearchSuggestion
 import SearchBarExample              from '../SearchBar/SearchBarExamples.jsx'
 import NavbarExample                 from '../Navbar/NavbarExample.jsx'
 import TCFooterExamples              from '../TCFooter/TCFooterExamples.jsx'
+import TaggedValueExamples           from '../TaggedValue/TaggedValueExamples.jsx'
 import SubTrackDetailsExample        from '../SubTrackDetails/SubTrackDetailsExample.jsx'
 import PrizeExamples                 from '../Prize/PrizeExamples.jsx'
 import TooltipExamples               from '../Tooltip/TooltipExamples.jsx'
@@ -75,12 +76,13 @@ const Component = () => (
         <Route path="/NavbarExample" component={NavbarExample} />
 
         <Route path="/TCFooterExamples" component={TCFooterExamples} />
+        
+        <Route path="/TaggedValueExamples" component={TaggedValueExamples} />
 
         <Route path="/SubTrackDetailsExample" component={SubTrackDetailsExample} />
 
         <Route path="/TooltipExamples" component={TooltipExamples} />
 
-        
         <Route path="/PrizeExamples" component={PrizeExamples}/>
 
         <Route path="/ProgressBarExample" component={ProgressBarExample}/>

components/TaggedValue/TaggedValue.jsx

@@ -0,0 +1,30 @@
+require('./TaggedValue.scss')
+
+import React from 'react'
+import classNames from 'classnames'
+
+const TaggedValue = ({title,subText,style,count}) => {  
+  const taggedValueClass = classNames(
+    'TaggedValue',
+    { [`${style}`]: style,
+    'count-one' : !style && count === '1'}
+  )
+  if(count) {
+    subText = `${subText} x ${count}`
+  }
+  return (
+    <div className={taggedValueClass}>
+      <div className="tagged-value-bg">{title}</div>
+      <span className="subText">{subText}</span>
+    </div>
+  )
+}
+
+TaggedValue.propTypes = {
+  title :  React.PropTypes.string,
+  subText :  React.PropTypes.string,
+  style : React.PropTypes.string,
+  count : React.PropTypes.string
+}
+
+export default TaggedValue

components/TaggedValue/TaggedValue.scss

@@ -0,0 +1,49 @@
+@import 'topcoder/tc-includes';
+
+$gray-30:  #C3C3C8;
+$gray: #47474F;
+$purple: #B47DD6;
+$accent: #59A7FF;
+
+.TaggedValue {
+  display:inline-block;
+  height: 20px;
+  .tagged-value-bg {
+    display: inline;
+    padding: 4px 4px 1px 4px;
+    min-width: 15px;
+    max-height: 15px;
+    background: $accent;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 11px;
+    line-height: 13px;
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color:  $gray;
+    padding: 1px 7px 2px 7px;
+  }
+  .subText {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    font-size: 13px;
+    line-height: 15px;
+    color: $white;
+    font-weight: 500;
+    padding-left: 6px;
+    padding-right: 10px;
+  }
+}
+.count-one {
+  .tagged-value-bg {
+    background: $purple;
+  }
+}
+.TaggedValueList {
+    .items{
+        white-space: normal;
+    }
+    .items-scroll {
+        overflow-x: scroll;
+        white-space: nowrap;
+    }
+}

components/TaggedValue/TaggedValueExamples.jsx

@@ -0,0 +1,42 @@
+require('./TaggedValueExamples.scss')
+
+import React from 'react'
+import TaggedValue from './TaggedValue'
+import TaggedValueList from './TaggedValueList'
+
+const taggedValueData1 = {
+  title : 'title1',
+  subText : 'SubText1',
+  style : 'sample1'
+}
+
+const taggedValueData2 = {
+  title : 'title2',
+  subText : 'SubText2',
+  style : 'sample2',
+  count:'5'
+}
+
+const taggedValueItems1 = {
+  items : [taggedValueData1,taggedValueData2,taggedValueData1,taggedValueData2]
+}
+
+const TaggedValueExamples = () => (
+    <div>
+      <div className="divStyle">
+        <TaggedValue title={taggedValueData1.title} subText={taggedValueData1.subText} count="1"/>
+          <TaggedValue title={taggedValueData1.title} subText={taggedValueData1.subText}/>
+        <TaggedValue title={taggedValueData2.title} subText={taggedValueData2.subText} style={taggedValueData2.style} count={taggedValueData2.count}/>
+      </div>
+      <br/>
+      <div className="divStyle">
+        <TaggedValueList items={taggedValueItems1.items} layout="scroll"/>
+      </div>
+      <br/>
+      <div className="divStyle">
+        <TaggedValueList items={taggedValueItems1.items} layout="wrap"/>
+      </div>
+    </div>
+)
+
+module.exports = TaggedValueExamples

components/TaggedValue/TaggedValueExamples.scss

@@ -0,0 +1,27 @@
+$gray: #47474F;
+$blue : #59A7FF;
+$purple: #B47DD6;
+
+.sample1 {
+    .tagged-value-bg {
+        background-color: $purple;
+        color: white;
+    }
+    .subText {
+        color: white;
+    }
+}
+
+.sample2 {
+    .tagged-value-bg {
+         color: $gray;
+    }
+    .subText{
+        color: lightblue;
+    }
+}
+.divStyle {
+   background-color:#47474F;
+   padding:20px;
+   width:320px
+}

components/TaggedValue/TaggedValueList.jsx

@@ -0,0 +1,28 @@
+require('./TaggedValue.scss')
+
+import React from 'react'
+import TaggedValue from './TaggedValue'
+import classNames from 'classnames'
+
+const TaggedValueList = ({items,layout}) => {
+  const itemClass = classNames(
+    items,
+    {'items-scroll' : layout === 'scroll'}
+  )
+  return (
+    <div className="TaggedValueList">
+      <div className={itemClass}>
+        {items.map((item,index) => {
+          return <TaggedValue title={item.title} subText={item.subText} style={item.style} count={item.count} key={index}/>
+        })}
+      </div>
+    </div> 
+  )
+}
+
+TaggedValueList.propTypes = {
+  items :  React.PropTypes.array,
+  layout : React.PropTypes.string
+}
+
+export default TaggedValueList