diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx index de110261f70..ceb61e673a5 100644 --- a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx +++ b/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(
@@ -145,7 +158,7 @@ export default class CreepVote extends React.Component {
- +
@@ -154,12 +167,7 @@ export default class CreepVote extends React.Component {
View comments or share your results
- {/* TODO: Make these share links work */} - +
); diff --git a/source/js/buyers-guide/components/social-share/social-share.jsx b/source/js/buyers-guide/components/social-share/social-share.jsx new file mode 100644 index 00000000000..5bc24edeb76 --- /dev/null +++ b/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 {srLabel}; +}; + +const SocialShare = (props) => { + return
+ + + +
+} + +export default SocialShare;