Merge e29d2f7 into f33381a

MozillaFoundation · Oct 17, 2018 · a882319 · a882319
2 parents f33381a + e29d2f7
commit a882319
Show file tree

Hide file tree

Showing 7 changed files with 383 additions and 23 deletions.
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
@@ -1,42 +1,102 @@
 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) {
     super(props);
 
-    this.state = {};
+    this.state = this.getInitialState();
+
+    this.submitVote = this.submitVote.bind(this);
   }
 
-  render() {
-    return (
-      <div className="creep-vote py-5">
-        <div className="row mb-5">
-          <div className="col-12 col-md-6">
-            <div className="mb-4 text-center">
-              <h3 className="h5-heading mb-2">How creepy is this product?</h3>
-              <p>Majority of voters think it is super creepy</p>
-            </div>
-            <Creepometer initialValue={50}></Creepometer>
+  getInitialState() {
+    return {
+      didVote: false
+    };
+  }
+
+  submitVote(){
+    this.setState({didVote:true});
+  }
+
+  /**
+   * @returns {jsx} What users see when they haven't voted on this product yet.
+   */
+  renderVoteAsk() {
+    return (<form method="post" id="creep-vote" onSubmit={this.submitVote}>
+      <div className="row mb-5">
+        <div className="col-12 col-md-6">
+          <div className="mb-4 text-center">
+            <h3 className="h5-heading mb-2">How creepy is this product?</h3>
+            <p>Majority of voters think it is super creepy</p>
           </div>
-          <div className="col-12 col-md-6">
-            <div className="mb-4 text-center">
-              <h3 className="h5-heading mb-2">How likely are you to buy it?</h3>
-              <p>Majority of voters are not likely to buy it</p>
-            </div>
-            <div className="text-center">
-              <button>Likely</button>
-              <button>Not likely</button>
+          <Creepometer initialValue={50}></Creepometer>
+        </div>
+        <div className="col-12 col-md-6">
+          <div className="mb-4 text-center">
+            <h3 className="h5-heading mb-2">How likely are you to buy it?</h3>
+            <p>Majority of voters are not likely to buy it</p>
+          </div>
+          <div className="text-center">
+            <div class="btn-group btn-group-toggle" data-toggle="buttons">
+              <label for="likely">
+                <input type="radio" name="wouldbuy" id="likely" autocomplete="off" required /><span class="btn">Likely</span>
+              </label>
+              <label for="unlikely">
+                <input type="radio" name="wouldbuy" id="unlikely" autocomplete="off" required /><span class="btn">Not likely</span>
+              </label>
             </div>
           </div>
         </div>
-        <div className="row">
+      </div>
+      <div className="row">
+        <div className="col-12 text-center">
+          <button type="submit" className="btn btn-ghost mb-2">Vote & See Results</button>
+          <p>367 votes</p>
+        </div>
+      </div>
+    </form>);
+  }
+
+  /**
+   * @returns {jsx} What users see when they have voted on this product.
+   */
+  renderDidVote(){
+    return(
+      <div>
+        <div className="mb-5">
           <div className="col-12 text-center">
-            <button className="btn btn-ghost mb-2">Vote & See Results</button>
-            <p>367 votes</p>
+            <h3 className="h4-heading">Thanks for voting! Here are the results</h3>
+            <div>367 Votes</div>
+          </div>
+          <div className="row">
+            <div className="col"><CreepChart/></div>
+            <div className="col likelyhood-chart"><LikelyhoodChart /></div>
           </div>
         </div>
       </div>
     );
   }
+
+  render() {
+    let voteContent;
+
+    if(this.state.didVote){
+      voteContent = this.renderDidVote();
+    } else {
+      voteContent = this.renderVoteAsk();
+    }
+
+    return (
+      <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>
+    );
+  }
 }
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
@@ -1,4 +1,35 @@
+$radio-button-radius: 50px;
+$btn-shadow-width: 3px;
+
 .creep-vote {
-  border-top: 1px solid #c8c8ca;
   border-bottom: 1px solid #c8c8ca;
+  border-top: 1px solid #c8c8ca;
+
+  .btn-group {
+    .btn {
+      border: 1px solid $medium-gray;
+      border-bottom-width: $btn-shadow-width;
+      color: black;
+      text-transform: initial;
+      transition: all 0.1s linear;
+    }
+
+    input { display: none; }
+
+    input:checked + span {
+      background-color: #5cccff;
+    }
+
+    input:-moz-ui-invalid + span {
+      border-color: red;
+    }
+
+    label:first-of-type span {
+      border-radius: $radio-button-radius 0 0 $radio-button-radius;
+    }
+
+    label:last-of-type span {
+      border-radius: 0 $radio-button-radius $radio-button-radius 0;
+    }
+  }
 }
diff --git a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+export default class CreepChart extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = this.getInitialState();
+
+  }
+
+  getInitialState() {
+    return {
+    };
+  }
+
+  render(){
+    return (
+      <div>
+        <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
+            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>
+                <span className="creep-label">Not creepy</span>
+                <span className="creep-face"></span>
+              </th>
+              <td className="creepiness">1%</td>
+            </tr>
+            <tr className="your-vote little-creep">
+              <th>
+                <div className="bar" style={{height: '20px'}}></div>
+                <span className="creep-label">A little creepy</span>
+                <span className="creep-face"></span>
+              </th>
+              <td className="creepiness">2%</td>
+            </tr>
+            <tr className="your-vote somewhat-creep">
+              <th>
+                <div className="bar" style={{height: '40px'}}></div>
+                <span className="creep-label">Somewhat creepy</span>
+                <span className="creep-face"></span>
+              </th>
+              <td className="creepiness">3%</td>
+            </tr>
+            <tr className="your-vote very-creep">
+              <th>
+                <div className="bar" style={{height: '25px'}}></div>
+                <span className="creep-label">Very creepy</span>
+                <span className="creep-face"></span>
+              </th>
+              <td className="creepiness">4%</td>
+            </tr>
+            <tr className="your-vote super-creep">
+              <th>
+                <div className="bar" style={{height: '65px'}}></div>
+                <span className="creep-label">Super creepy</span>
+                <span className="creep-face"></span>
+              </th>
+              <td className="creepiness">5%</td>
+            </tr>
+          </tbody>
+        </table>
+        <div className="row">
+          <div className="col text-left text-muted">Not creepy</div>
+          <div className="col text-right text-muted">Super creepy</div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss
@@ -0,0 +1,112 @@
+#creepiness-score {
+  display: flex;
+  // There's probably a better way to do this.
+  border-image: url("/_images/buyers-guide/gradient-bar.svg") 7/0px 6px 6px;
+
+  tbody {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    width: 100%;
+  }
+
+  th {
+    order: 2;
+    margin: 0 1px;
+    text-align: center;
+    align-self: flex-end;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+    position: relative;
+    min-height: 70px;
+  }
+
+  .bar,
+  td {
+    position: relative;
+    bottom: -30px;
+  }
+
+  //For some nice animations later on
+  .creepiness,
+  .bar {
+    transition: all 2.5s ease;
+  }
+
+  .creep-label {
+    //Make sure screen readers can see the label
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute;
+  }
+
+  //Height of this is set inline via JSX
+  .bar {
+    background-color: $light-gray;
+  }
+
+  //Show a different creep-face in each bar of the graph
+  .creep-face {
+    background-image: url("/_images/buyers-guide/faces/sprite-resized-64-colors.png");
+    background-position: center 0;
+    background-size: 25px auto;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    height: 25px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  .little-creep .creep-face {
+    background-position: center 25.6%;
+  }
+
+  .somewhat-creep .creep-face {
+    background-position: center 51.3%;
+  }
+
+  .very-creep .creep-face {
+    background-position: center 76.9%;
+  }
+
+  .super-creep .creep-face {
+    background-position: center 100%;
+  }
+
+  //Style the graph bar representing the range the user voted
+  .your-vote {
+    &.no-creep .bar {
+      background-color: #1808f2;
+    }
+
+    &.little-creep .bar {
+      background-color: #4a17d4;
+    }
+
+    &.somewhat-creep .bar {
+      background-color: #7f28b7;
+    }
+
+    &.very-creep .bar {
+      background-color: #b0379b;
+    }
+
+    &.super-creep .bar {
+      background-color: #e4487d;
+    }
+  }
+
+  td {
+    order: 1;
+    text-align: center;
+  }
+
+  tr {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 0 1px;
+  }
+}
diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx b/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>
+    );
+  }
+}