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 {
- {/* 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;