WIP Groups

README.md

@@ -39,7 +39,7 @@ npm run deploy
 Goto https://app.keycdn.com/zones/purgeurl/87880 and enter:
 
 ```
-/s3/republik-assets/dynamic-components/questionnaire-dn/index.js
+/s3/republik-assets/dynamic-components/questionnaire/index.js
 ```
 
 If you change asset files be sure to purge those too.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "questionnaire-dn",
+  "name": "questionnaire",
   "version": "0.0.1",
   "description": "use a questionnaire inline",
   "main": "index.js",
@@ -11,18 +11,18 @@
     "now-build": "NODE_ENV=production rollup -c && cd test && next build",
     "heroku-postbuild": "NODE_ENV=production rollup -c && cd test && next build",
     "start": "NODE_ENV=production cd test && node server.js",
-    "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire-dn/"
+    "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/orbiting/questionnaire-dn.git"
+    "url": "git+https://github.com/orbiting/questionnaire.git"
   },
   "author": "",
   "license": "BSD-3-Clause",
   "bugs": {
-    "url": "https://github.com/orbiting/questionnaire-dn/issues"
+    "url": "https://github.com/orbiting/questionnaire/issues"
   },
-  "homepage": "https://github.com/orbiting/questionnaire-dn#readme",
+  "homepage": "https://github.com/orbiting/questionnaire#readme",
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.51",
     "@babel/preset-env": "^7.0.0-beta.51",

src/components/Chart.js

@@ -69,7 +69,7 @@ const styles = {
 
 class Chart extends Component {
   render () {
-    const { question } = this.props
+    const { question, colors = [] } = this.props
     if (!question || !question.results) {
       return
     }
@@ -87,6 +87,9 @@ class Chart extends Component {
     const truePercent = getPercentage(trueResult)
     const falsePercent = getPercentage(falseResult)
 
+    const trueColor = colors.find(c => c.value)
+    const falseColor = colors.find(c => !c.value)
+
     return (
       <div style={{ width: '100%' }}>
         <div {...styles.labels} style={{ justifyContent: 'space-around' }}>
@@ -97,7 +100,7 @@ class Chart extends Component {
             <div {...styles.bar} style={{
               right: 0,
               width: `${truePercent}%`,
-              backgroundColor: 'rgb(75,151,201)',
+              backgroundColor: (trueColor && trueColor.color) || 'rgb(75,151,201)',
               direction: 'rtl',
               textAlign: 'left',
             }}>
@@ -113,7 +116,7 @@ class Chart extends Component {
             <div {...styles.bar} style={{
               left: 0,
               width: `${falsePercent}%`,
-              backgroundColor: '#ff7f0e',
+              backgroundColor: (falseColor && falseColor.color) || '#ff7f0e',
               textAlign: 'right',
             }}>
               <span style={{ marginRight: userAnswerFalse ? -CIRCLE_SIZE : 0 }}>

src/components/Question.js

@@ -16,7 +16,7 @@ import Chart from './Chart'
 
 const styles = {
   container: css({
-    margin: '50px 0 10px 0'
+    paddingBottom: 30
   }),
   question: css({
     margin: '0px 0 10px 0',
@@ -51,7 +51,14 @@ class ChoiceQuestion extends Component {
   render () {
 
     this.handleChange = (value) => {
-      const { onChange, questionnaire, question: { userAnswer, cardinality } } = this.props
+      const {
+        onChange,
+        questionnaire,
+        question: {
+          userAnswer,
+          cardinality
+        }
+      } = this.props
       const nextValue = new Set(userAnswer ? userAnswer.payload.value : [])
 
       if (cardinality === 0 || cardinality > 1) {
@@ -70,20 +77,32 @@ class ChoiceQuestion extends Component {
       onChange(answerId, Array.from(nextValue))
     }
 
-    const { questionnaire, question: { id, text, userAnswer, options, results } } = this.props
-    const { question } = this.props
-	  const { userHasSubmitted } = questionnaire
+    const {
+      questionnaire = {},
+      question: {
+        id,
+        text,
+        userAnswer,
+        options,
+        results
+      },
+      forceShowResults = false
+    } = this.props
+    const { question, colors } = this.props
+    const { userHasSubmitted = false } = questionnaire
+
+    const showResults = userAnswer || userHasSubmitted || forceShowResults
 
     return (
       <div {...styles.container}>
         <P {...styles.question}>{text}</P>
         <div {...styles.content}>
-          { (userAnswer || userHasSubmitted) &&
+          { showResults &&
             <div {...styles.mobileBorder}>
-              <Chart question={question} />
+              <Chart question={question} colors={colors} />
             </div>
           }
-          { (!userAnswer && !userHasSubmitted) &&
+          { !showResults &&
             <div {...styles.buttons}>
               { options.map(option =>
                 <div key={`${id}-${option.value}`}>