-
-
How likely are you to buy it?
-
Majority of voters are not likely to buy it
-
-
-
-
+
+
+
+
+
How likely are you to buy it?
+
Majority of voters are not likely to buy it
+
+
-
+
+
+
+
+
367 votes
+
+
+ );
+ }
+
+ /**
+ * @returns {jsx} What users see when they have voted on this product.
+ */
+ renderDidVote(){
+ return(
+
+
-
-
367 votes
+
Thanks for voting! Here are the results
+
367 Votes
+
+
);
}
+
+ render() {
+ let voteContent;
+
+ if(this.state.didVote){
+ voteContent = this.renderDidVote();
+ } else {
+ voteContent = this.renderVoteAsk();
+ }
+
+ return (
+
+ { voteContent }
+
View comments or share your results
+ {/* TODO: Make these share links work */}
+
fb, tw, email
+
+ );
+ }
}
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
index 539e4af9ffb..032e7258270 100644
--- 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
new file mode 100644
index 00000000000..84785f483d8
--- /dev/null
+++ 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 (
+
+
+
+ {/* 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 */}
+
+
+
+ Not creepy
+
+ |
+ 1% |
+
+
+
+
+ A little creepy
+
+ |
+ 2% |
+
+
+
+
+ Somewhat creepy
+
+ |
+ 3% |
+
+
+
+
+ Very creepy
+
+ |
+ 4% |
+
+
+
+
+ Super creepy
+
+ |
+ 5% |
+
+
+
+
+
Not creepy
+
Super creepy
+
+
+ );
+ }
+}
diff --git a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss
new file mode 100644
index 00000000000..3e3f82e5ec1
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..00f75d60350
--- /dev/null
+++ 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 (
+
+
+
+
+
+ Likely
+ |
+
+
+ 95% Likely to buy it
+ |
+
+
+
+ Not likely
+ |
+
+
+ 5% Not likely to buy it
+ |
+
+
+
+
+ );
+ }
+}
diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss
new file mode 100644
index 00000000000..63d77222b85
--- /dev/null
+++ b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss
@@ -0,0 +1,36 @@
+#likelyhood-score {
+ tbody {
+ width: 100%;
+ }
+
+ .bar {
+ //For some nice animations later on, width set in JSX
+ transition: width 2.5s ease;
+ background-color: $light-gray;
+ position: absolute;
+ height: 25px;
+ }
+
+ tr {
+ position: relative;
+ display: block;
+ }
+
+ .likelyhood-words {
+ position: relative;
+ }
+
+ .likely-label {
+ //Make sure screen readers can see the label
+ clip: rect(1px, 1px, 1px, 1px);
+ position: absolute;
+ }
+
+ .likely th::before {
+ content: '👍';
+ }
+
+ .unlikely th::before {
+ content: '👎';
+ }
+}
diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss
index 19635c39d6a..482abb93513 100644
--- a/source/sass/buyers-guide/bg-main.scss
+++ b/source/sass/buyers-guide/bg-main.scss
@@ -22,6 +22,8 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
@import '../../js/buyers-guide/components/creepometer/creepometer';
@import '../../js/buyers-guide/components/creep-vote/creep-vote';
+@import '../../js/buyers-guide/components/creepiness-chart/creepiness-chart';
+@import '../../js/buyers-guide/components/likelyhood-chart/likelyhood-chart';
// Non-React Components