Merge pull request #79 from amolskh/prizeComponent

final fixes

Author: vikasrohit

components/Prize/PrizeExamples.jsx

@@ -3,6 +3,8 @@ import PrizeItems from './PrizeItems'
 
 require('./PrizeExamples.scss')
 
+
+
 const prizeItems = {
   type : 'prize',
   title : 'Prizes',
@@ -48,7 +50,8 @@ const bonusItems = {
     },
     {
       title : 'Checkin',
-      subText : '$50 x 5'
+      subText : '$50',
+      count: '6'
     }
   ]
 }

components/Prize/PrizeExamples.scss

@@ -2,4 +2,5 @@
    background-color: #47474F;
    padding: 15px;
    width: 400px;
+   height: 200px !important;
 }

components/Prize/PrizeItem.jsx

@@ -8,19 +8,19 @@ $gray: #47474F;
 $purple: #B47DD6;
 $accent: #59A7FF;
 
-.PrizeItem {
+.TaggedValue {
   display:inline-block;
   height: 20px;
   margin-right: 15px;
 
-  span {
+  .subText {
     font-family: "Roboto", Arial, Helvetica, sans-serif;
     font-size: 13px;
     line-height: 15px;
     color: $white;
     font-weight: 500;
   }
-  .prize-circle{
+  .tagged-value-bg{
     display: inline;
     padding: 1px 4px 1px 4px;
     min-width: 15px;
@@ -38,38 +38,38 @@ $accent: #59A7FF;
 }
 
 .prize {
-  .PrizeItem:nth-child(1) {
-    .prize-circle{
+  .TaggedValue:nth-child(1) {
+    .tagged-value-bg {
       background: $gold;
     }
   }
-  .PrizeItem:nth-child(2) {
-    .prize-circle{
+  .TaggedValue:nth-child(2) {
+    .tagged-value-bg {
         background: $silver;
     }
   }
 
-  .PrizeItem:nth-child(3) {
-    .prize-circle{
+  .TaggedValue:nth-child(3) {
+    .tagged-value-bg {
         background: $bronze;
     }
   }
 }
 
 .bonus {
-  .PrizeItem:nth-child(1) {
-    .prize-circle {
+  .TaggedValue:nth-child(1) {
+    .tagged-value-bg {
       background: $purple;
     }
   }
-  .PrizeItem:nth-child(2) {
-    .prize-circle {
+  .TaggedValue:nth-child(2) {
+    .tagged-value-bg {
         background: $purple;
     }
   }
 
-  .PrizeItem:nth-child(3) {
-    .prize-circle {
+  .TaggedValue:nth-child(3) {
+    .tagged-value-bg {
         background: $accent;
     }
   }

components/Prize/PrizeItem.scss

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import PrizeItem from './PrizeItem'
+import TaggedValueList from '../TaggedValue/TaggedValueList'
 
 require('./PrizeItem.scss')
 
@@ -14,15 +14,13 @@ const PrizeItems = ({type, title, items}) => {
     <div className="PrizeItems">
         <div className="title">{title}</div>
         <div className={itemsClass}>
-          {items.map((item, index) => {
-            return <PrizeItem title={item.title} subText={item.subText} key={index}/>
-          })}
+          <TaggedValueList items={items} layout="wrap"/>   
         </div>
     </div>
   )
 }
 
-PrizeItem.propTypes = {
+PrizeItems.propTypes = {
   type :  React.PropTypes.string,
   items :  React.PropTypes.array
 }