Social shares on Buyer's Guide product pages (#1975)

Related to #1899 

Covers
- social shares on Buyer's Guide product pages

Based on specs in #1899 (comment) but we might want to update the pre-populated text a bit though... /cc @kristinashu

network-api/networkapi/buyersguide/templates/product_page.html

@@ -25,7 +25,7 @@ <h2 class="h1-heading">{{product.name}}</h2>
       </div>
       <div class="body-large mb-5">{{product.blurb}}</div>
 
-      <div class="creep-vote-target my-5">
+      <div class="creep-vote-target my-5" data-product-name="{{product.name}}">
           {% csrf_token %}
           <input type="hidden" name="productID" value="{{ product.id }}">
           <input type="hidden" name="votes" value="{{ product.votes | safe }}">

source/js/buyers-guide/bg-main.js

@@ -83,6 +83,7 @@ let main = {
     if (document.querySelectorAll(`.creep-vote-target`)) {
       Array.from(document.querySelectorAll(`.creep-vote-target`)).forEach(element => {
         let csrf = element.querySelector(`input[name=csrfmiddlewaretoken]`);
+        let productName = element.dataset.productName;
         let productID = element.querySelector(`input[name=productID]`).value;
         let votes = element.querySelector(`input[name=votes]`).value;
 
@@ -98,7 +99,7 @@ let main = {
           };
         }
 
-        ReactDOM.render(<CreepVote csrf={csrf.value} productID={parseInt(productID,10)} votes={votes}/>, element);
+        ReactDOM.render(<CreepVote csrf={csrf.value} productName={productName} productID={parseInt(productID,10)} votes={votes}/>, element);
       });
     }
 

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';
 
 import CREEPINESS_LABELS from "../creepiness-labels.js";
 
@@ -159,6 +160,8 @@ export default class CreepVote extends React.Component {
    * @returns {jsx} What users see when they have voted on this product.
    */
   renderDidVote(){
+    let userVoteGroup = Math.floor(this.state.creepiness/(100/CREEPINESS_LABELS.length));
+
     return(
       <div>
         <div className="mb-5">
@@ -168,7 +171,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} />
@@ -177,12 +180,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 productName={this.props.productName} creepType={CREEPINESS_LABELS[userVoteGroup]} />
         </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 ${props.productName} is ${props.creepType.toUpperCase()}. 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" {...props} />
+    <SocialShareLink type="twitter" {...props} />
+    <SocialShareLink type="email" {...props} />
+  </div>
+};
+
+export default SocialShare;