Basic likelyhood graph

source/js/buyers-guide/components/creep-vote/creep-vote.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Creepometer from '../creepometer/creepometer.jsx';
 import CreepChart from '../creepiness-chart/creepiness-chart.jsx';
+import LikelyhoodChart from '../likelyhood-chart/likelyhood-chart.jsx';
 
 export default class CreepVote extends React.Component {
   constructor(props) {
@@ -73,7 +74,7 @@ export default class CreepVote extends React.Component {
           </div>
           <div className="row">
             <div className="col"><CreepChart/></div>
-            <div className="col likelyhood-chart">10% likely to buy</div>
+            <div className="col likelyhood-chart"><LikelyhoodChart /></div>
           </div>
         </div>
       </div>
@@ -93,6 +94,7 @@ export default class CreepVote extends React.Component {
       <div className="creep-vote py-5">
         { voteContent }
         <div>View comments or share your results</div>
+        {/* TODO: Make these share links work */}
         <div className="share-links">fb, tw, email</div>
       </div>
     );

source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx

@@ -19,7 +19,8 @@ export default class CreepChart extends React.Component {
         <table id="creepiness-score">
           <tbody>
             {/* TODO: Pull in vote% and apply as pixel height, td value.
-            TODO: Apply "your-vote" class to the level of the user's vote  */}
+            TODO: Apply "your-vote" class to the level of the user's vote
+            Height needs to be in px so that the value sits on top of the bar  */}
             <tr className="your-vote no-creep">
               <th>
                 <div className="bar" style={{height: '100px'}}></div>

source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx

@@ -0,0 +1,46 @@
+// TODO: Inject likely % in .bar and .likelyhood-words
+
+import React from 'react';
+
+export default class LikelyhoodChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = this.getInitialState();
+
+  }
+
+  getInitialState() {
+    return {
+    };
+  }
+
+  render(){
+    return (
+      <div>
+        <table id="likelyhood-score">
+          <tbody>
+            <tr className="likely">
+              <th>
+                <span className="likely-label">Likely</span>
+              </th>
+              <td className="likelyhood">
+                <span className="bar" style={{width: '95%'}}></span>
+                <span className="likelyhood-words">95% Likely to buy it</span>
+              </td>
+            </tr>
+            <tr className="unlikely">
+              <th>
+                <span className="likely-label">Not likely</span>
+              </th>
+              <td className="likelyhood">
+                <span className="bar" style={{width: '5%'}}></span>
+                <span className="likelyhood-words">5% Not likely to buy it</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}

source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss

@@ -0,0 +1,36 @@
+#likelyhood-score {
+  tbody {
+    width: 100%;
+  }
+
+  .bar {
+    //For some nice animations later on, width set in JSX
+    transition: width 2.5s ease;
+    background-color: $light-gray;
+    position: absolute;
+    height: 25px;
+  }
+
+  tr {
+    position: relative;
+    display: block;
+  }
+
+  .likelyhood-words {
+    position: relative;
+  }
+
+  .likely-label {
+    //Make sure screen readers can see the label
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute;
+  }
+
+  .likely th::before {
+    content: '👍';
+  }
+
+  .unlikely th::before {
+    content: '👎';
+  }
+}

source/sass/buyers-guide/bg-main.scss

@@ -23,6 +23,7 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
 @import '../../js/buyers-guide/components/creepometer/creepometer';
 @import '../../js/buyers-guide/components/creep-vote/creep-vote';
 @import '../../js/buyers-guide/components/creepiness-chart/creepiness-chart';
+@import '../../js/buyers-guide/components/likelyhood-chart/likelyhood-chart';
 
 // Non-React Components