Related to #1899 - social shares on Buyer's Guide product pages

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

@@ -2,6 +2,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';
+import SocialShare from '../social-share/social-share.jsx';
 
 export default class CreepVote extends React.Component {
   constructor(props) {
@@ -136,6 +137,18 @@ export default class CreepVote extends React.Component {
    * @returns {jsx} What users see when they have voted on this product.
    */
   renderDidVote(){
+    let numGroups = 5;
+    let userVoteGroup = Math.floor(this.state.creepiness/(100/numGroups)); // 0 1 2 3 4
+    let creepType;
+
+    if (userVoteGroup < Math.floor(numGroups/2)) { // lower half groups
+      creepType = `NOT CREEPY`;
+    } else if (userVoteGroup === Math.floor(numGroups/2)) { // mid group
+      creepType = `NOT REALLY CREEPY`;
+    } else { // upper half groups
+      creepType = `CREEPY`;
+    }
+
     return(
       <div>
         <div className="mb-5">
@@ -145,7 +158,7 @@ export default class CreepVote extends React.Component {
           </div>
           <div className="row mt-3">
             <div className="col">
-              <CreepChart userVoteGroup={Math.floor(this.state.creepiness/20)} values={this.props.votes.creepiness.vote_breakdown} />
+              <CreepChart userVoteGroup={userVoteGroup} values={this.props.votes.creepiness.vote_breakdown} />
             </div>
             <div className="col likelyhood-chart p-5">
               <LikelyhoodChart values={this.props.votes.confidence} />
@@ -154,12 +167,7 @@ export default class CreepVote extends React.Component {
         </div>
         <div className="text-center">
           <div><a className="share-results" href="#coral_talk_stream">View comments</a> or share your results</div>
-          {/* TODO: Make these share links work */}
-          <div class="social d-flex justify-content-center mt-3">
-            <a class="social-button social-button-fb" href=""><span class="sr-only">Facebook</span></a>
-            <a class="social-button social-button-twitter" href=""><span class="sr-only">Twitter</span></a>
-            <a class="social-button social-button-email" href=""><span class="sr-only">Email</span></a>
-          </div>
+          <SocialShare creepType={creepType} />
         </div>
       </div>
     );

source/js/buyers-guide/components/social-share/social-share.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const SocialShareLink = (props) => {
+  let classes = `social-button`;
+  let srLabel = ``;
+  let link = `PrivacyNotINcluded.org`;
+  let shareText = `I think this product is ${props.creepType}. What do you think? Check out the Creep-O-Meter over on @mozilla’s ${link} holiday buyer’s guide.`;
+
+  switch (props.type) {
+    case 'facebook':
+      classes += " social-button-fb";
+      srLabel = `Facebook`;
+      link = `https://www.facebook.com/sharer/sharer.php?u=https://${link}`;
+
+      break;
+    case 'twitter':
+      classes += " social-button-twitter";
+      srLabel = `Twitter`;
+      link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`;
+
+      break;
+    case 'email':
+      classes += " social-button-email";
+      srLabel = `Email`;
+      link = `mailto:?&body=${encodeURIComponent(shareText)}`;
+
+      break;
+  }
+
+  return <a className={classes} href={link}><span class="sr-only">{srLabel}</span></a>;
+};
+
+const SocialShare = (props) => {
+  return <div class="social d-flex justify-content-center mt-3">
+    <SocialShareLink type="facebook" creepType={props.creepType} />
+    <SocialShareLink type="twitter" creepType={props.creepType} />
+    <SocialShareLink type="email" creepType={props.creepType} />
+  </div>
+}
+
+export default SocialShare;