From 90fe5e04c3b5d802352e2150261eb9b17e176954 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Mon, 20 Dec 2021 19:24:52 +0100 Subject: [PATCH 1/5] adds hide other answers, adds message box, adds signedIn and eligible status --- src/components/Auth/withMe.js | 4 +- src/components/MessageBox.js | 33 ++++++++++ src/components/QuestionTypeChoice.js | 56 +++++++++------- src/components/QuestionTypeRange.js | 7 +- src/components/Questionnaire.js | 24 +++++-- src/lib/translations.json | 18 ++++- test/article.md | 99 ++++++++++++++++++++++++++-- 7 files changed, 206 insertions(+), 35 deletions(-) create mode 100644 src/components/MessageBox.js diff --git a/src/components/Auth/withMe.js b/src/components/Auth/withMe.js index 1bcebee..0cc8384 100644 --- a/src/components/Auth/withMe.js +++ b/src/components/Auth/withMe.js @@ -11,6 +11,6 @@ export const meQuery = gql` export default graphql(meQuery, { props: ({ data }) => ({ - me: data.me - }) + me: data.me, + }), }) diff --git a/src/components/MessageBox.js b/src/components/MessageBox.js new file mode 100644 index 0000000..8468724 --- /dev/null +++ b/src/components/MessageBox.js @@ -0,0 +1,33 @@ +import React from 'react' + +import { css } from 'glamor' + +import { useColorContext, fontStyles } from '@project-r/styleguide' + +const styles = { + box: css({ + margin: '10px 0', + padding: 20, + textAlign: 'center', + }), + text: css({ + ...fontStyles.sansSerifRegular21, + }), +} + +// deconstruct props directly +const MessageBox = ({ children }) => { + const [colorScheme] = useColorContext() + return ( +
+ {children} +
+ ) +} + +export default MessageBox diff --git a/src/components/QuestionTypeChoice.js b/src/components/QuestionTypeChoice.js index 2cb0e2c..f75d77d 100644 --- a/src/components/QuestionTypeChoice.js +++ b/src/components/QuestionTypeChoice.js @@ -2,20 +2,17 @@ import React, { Component } from 'react' import { css } from 'glamor' import uuid from '../lib/uuid' -import { - Interaction, - Button, - mediaQueries -} from '@project-r/styleguide' +import { Interaction, Button, mediaQueries } from '@project-r/styleguide' const { P } = Interaction import { withTranslations } from '../lib/TranslationsContext' import Chart from './QuestionTypeChoiceChart' +import MessageBox from './MessageBox' const styles = { container: css({ - margin: '50px 0 10px 0' + margin: '50px 0 10px 0', }), question: css({ margin: '0px 0 10px 0', @@ -28,27 +25,31 @@ const styles = { }), mobileBorder: css({ [mediaQueries.onlyS]: { - margin: '0px 10px' - } + margin: '0px 10px', + }, }), buttons: css({ width: '100%', display: 'flex', - justifyContent: 'space-evenly' + justifyContent: 'space-evenly', }), } class QuestionTypeChoice extends Component { - constructor (props) { + constructor(props) { super(props) this.state = { - answerId: (props.question.userAnswer && props.question.userAnswer.id) || uuid(), + answerId: + (props.question.userAnswer && props.question.userAnswer.id) || uuid(), } } - render () { - + 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) { @@ -67,30 +68,39 @@ class QuestionTypeChoice extends Component { onChange(answerId, Array.from(nextValue)) } - const { questionnaire, question: { id, text, userAnswer, options, choiceResults: results }, showResults } = this.props + const { + t, + questionnaire, + question: { id, text, userAnswer, options, choiceResults: results }, + showResults, + hideAnswers, + } = this.props const { question } = this.props - const { userHasSubmitted } = questionnaire + const { userHasSubmitted } = questionnaire return (

{text}

- { (userAnswer || userHasSubmitted || showResults) && + {!hideAnswers && (userAnswer || userHasSubmitted || showResults) && (
- } - { (!userAnswer && !userHasSubmitted && !showResults) && + )} + {hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( + {t('questionnaire/hideAnswers/thankyou')} + )} + {!userAnswer && !userHasSubmitted && !showResults && (
- { options.map(option => + {options.map((option) => (
-
- )} + ))}
- } + )}
) diff --git a/src/components/QuestionTypeRange.js b/src/components/QuestionTypeRange.js index b7c4031..9de15a4 100644 --- a/src/components/QuestionTypeRange.js +++ b/src/components/QuestionTypeRange.js @@ -10,6 +10,7 @@ import uuid from '../lib/uuid' import { withTranslations } from '../lib/TranslationsContext' import Chart, { TicksLabels } from './QuestionTypeRangeChart' +import MessageBox from './MessageBox' const styles = { question: css({ @@ -83,6 +84,7 @@ class QuestionTypeRange extends Component { questionnaire, question, showResults, + hideAnswers, augments, t, colors, @@ -167,7 +169,7 @@ class QuestionTypeRange extends Component { )} - {(submitted || showResults) && ( + {!hideAnswers && (submitted || showResults) && ( )} + {hideAnswers && (submitted || showResults) && ( + {t('questionnaire/hideAnswers/thankyou')} + )} ) diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index f0e6fd7..ff3121b 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -25,6 +25,7 @@ import { withTranslations } from '../lib/TranslationsContext' import QuestionTypeChoice from './QuestionTypeChoice' import QuestionTypeRange from './QuestionTypeRange' +import MessageBox from './MessageBox' const questionTypes = { QuestionTypeChoice, @@ -96,6 +97,7 @@ const Questionnaire = (props) => { me, t, hideAnonymize, + hideAnswers, settings, submitAnswer, submitAnswerUnattributed, @@ -224,13 +226,25 @@ const Questionnaire = (props) => { return

{t('questionnaire/notFound')}

} - const { unattributedAnswers, questions, userHasSubmitted } = - questionnaire + const { + unattributedAnswers, + questions, + userIsEligible, + userHasSubmitted, + endDate, + } = questionnaire + if (new Date(endDate) < now) { + return {t('questionnaire/ended')} + } if ((!me || !me.id) && !unattributedAnswers) { return ( -

{t('questionnaire/noUnattributedAnswers')}

+ {t('questionnaire/noUnattributedAnswers')} ) + } else if (!me || !me.id) { + return {t('questionnaire/notSignedIn')} + } else if (!userIsEligible) { + return {t('questionnaire/notEligible')} } // handle questions @@ -255,6 +269,7 @@ const Questionnaire = (props) => { React.createElement(questionTypes[question.__typename], { unattributed: !me, showResults: answersSubmitted || showResults, + hideAnswers, ...(settings && settings.find((s) => s.order === question.order)), onChange: createHandleChange(questionnaire, question), @@ -279,7 +294,7 @@ const Questionnaire = (props) => {

)}
- {!showResults && !answersSubmitted && ( + {!hideAnswers && !showResults && !answersSubmitted && (
+## Komponente ohne andere Antworten + +
DYNAMIC_COMPONENT
+ +``` +{ + "autoHtml": false, + "props": { + "slug": "mss-klimabeitrag", + "hideAnswers": true, + "translations": [ + { + "key": "questionnaire/question/0/text", + "value": "Wie viel wären Sie bereit für einen solchen Dienst auszugeben?" + }, + { + "key": "questionnaire/question/0/range/submit", + "value": "{value} Franken speichern" + }, + { + "key": "questionnaire/question/0/range/tick/first", + "value": "nichts" + }, + { + "key": "questionnaire/question/0/range/tick/last", + "value": "1000 Franken und mehr" + } + ], + "settings": [ + { + "order": 0, + "colors": { + "min": "#fbfbfb", + "max": "#d6d6d6" + }, + "colorsDark": { + "min": "#232323", + "max": "#757575" + }, + "slider": { + "step": 1 + }, + "augments": [ + { + "path": "[0].userAnswer.payload.value", + "color": "#048e02", + "colorDark": "#00AA00", + "label": "{value} Franken (Sie)" + }, + { + "path": "[0].rangeResults.median", + "color": "#ba5968", + "label": "{value} Franken (Mittelwert)" + } + ] + } + ] + }, + "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire/index.js" +} +``` + +
+ ## Komponenten-Fehler Fragebogen ist nicht aufzufinden: @@ -252,7 +316,34 @@ Komponenten rendert alle Fragen:
-Andere Komponente: +## Fragebogen mit choice-Fragen ohne andere Antworten + +
DYNAMIC_COMPONENT
+ +``` +{ + "autoHtml": false, + "props": { + "slug": "mss-demokratie", + "hideAnswers": true, + "colors": [ + { + "value": true, + "color": "#6FB977" + }, + { + "value": false, + "color": "#AD8BBD" + } + ] + }, + "src": "https://cdn.republik.space/s3/republik-assets/dynamic-components/questionnaire/index.js" +} +``` + +
+ +## Andere Komponente mit choice Fragen:
DYNAMIC_COMPONENT
@@ -268,4 +359,4 @@ Andere Komponente:
-
\ No newline at end of file +
From b7430d868c339557d9a3fac306d517cdd2cf39a9 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Tue, 21 Dec 2021 18:03:37 +0100 Subject: [PATCH 2/5] mobile styling of message box --- package.json | 3 ++- src/components/MessageBox.js | 11 +++++++++-- src/components/QuestionTypeChoice.js | 4 +++- src/components/Questionnaire.js | 24 ++++++++++++++++++++---- 4 files changed, 34 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 94c8f71..c71ac31 100755 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "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/" + "deploy": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/", + "deploy:love": "s3cmd sync --exclude '.DS_Store' --verbose --acl-public build/ s3://republik-assets/dynamic-components/questionnaire/love/" }, "repository": { "type": "git", diff --git a/src/components/MessageBox.js b/src/components/MessageBox.js index 8468724..bec3c6f 100644 --- a/src/components/MessageBox.js +++ b/src/components/MessageBox.js @@ -2,7 +2,11 @@ import React from 'react' import { css } from 'glamor' -import { useColorContext, fontStyles } from '@project-r/styleguide' +import { + useColorContext, + fontStyles, + mediaQueries, +} from '@project-r/styleguide' const styles = { box: css({ @@ -11,7 +15,10 @@ const styles = { textAlign: 'center', }), text: css({ - ...fontStyles.sansSerifRegular21, + ...fontStyles.sansSerifRegular17, + [mediaQueries.mUp]: { + ...fontStyles.sansSerifRegular21, + }, }), } diff --git a/src/components/QuestionTypeChoice.js b/src/components/QuestionTypeChoice.js index f75d77d..8f3df3e 100644 --- a/src/components/QuestionTypeChoice.js +++ b/src/components/QuestionTypeChoice.js @@ -88,7 +88,9 @@ class QuestionTypeChoice extends Component {
)} {hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( - {t('questionnaire/hideAnswers/thankyou')} +
+ {t('questionnaire/hideAnswers/thankyou')} +
)} {!userAnswer && !userHasSubmitted && !showResults && (
diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index ff3121b..9a0c31c 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -235,16 +235,32 @@ const Questionnaire = (props) => { } = questionnaire if (new Date(endDate) < now) { - return {t('questionnaire/ended')} + return ( +
+ {t('questionnaire/ended')} +
+ ) } if ((!me || !me.id) && !unattributedAnswers) { return ( - {t('questionnaire/noUnattributedAnswers')} +
+ + {t('questionnaire/noUnattributedAnswers')} + +
) } else if (!me || !me.id) { - return {t('questionnaire/notSignedIn')} + return ( +
+ {t('questionnaire/notSignedIn')} +
+ ) } else if (!userIsEligible) { - return {t('questionnaire/notEligible')} + return ( +
+ {t('questionnaire/notEligible')} +
+ ) } // handle questions From 4430e862a557cd2db63a19b38db4432e84f03fd8 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Tue, 21 Dec 2021 18:46:04 +0100 Subject: [PATCH 3/5] message box styling --- src/components/QuestionTypeChoice.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/QuestionTypeChoice.js b/src/components/QuestionTypeChoice.js index 8f3df3e..73f3e79 100644 --- a/src/components/QuestionTypeChoice.js +++ b/src/components/QuestionTypeChoice.js @@ -28,6 +28,11 @@ const styles = { margin: '0px 10px', }, }), + mobileBox: css({ + [mediaQueries.onlyS]: { + margin: '20px 0', + }, + }), buttons: css({ width: '100%', display: 'flex', @@ -88,7 +93,7 @@ class QuestionTypeChoice extends Component {
)} {hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( -
+
{t('questionnaire/hideAnswers/thankyou')}
)} From 0554c592551a9c6a1547eb9e9858381f4dcc7986 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 24 Dec 2021 13:43:38 +0100 Subject: [PATCH 4/5] messagebox display --- src/components/MessageBox.js | 2 +- src/components/QuestionTypeChoice.js | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/MessageBox.js b/src/components/MessageBox.js index bec3c6f..65879a4 100644 --- a/src/components/MessageBox.js +++ b/src/components/MessageBox.js @@ -10,6 +10,7 @@ import { const styles = { box: css({ + display: 'block', margin: '10px 0', padding: 20, textAlign: 'center', @@ -22,7 +23,6 @@ const styles = { }), } -// deconstruct props directly const MessageBox = ({ children }) => { const [colorScheme] = useColorContext() return ( diff --git a/src/components/QuestionTypeChoice.js b/src/components/QuestionTypeChoice.js index 73f3e79..2f88583 100644 --- a/src/components/QuestionTypeChoice.js +++ b/src/components/QuestionTypeChoice.js @@ -86,17 +86,19 @@ class QuestionTypeChoice extends Component { return (

{text}

+ {hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( +
+
+ {t('questionnaire/hideAnswers/thankyou')} +
+
+ )}
{!hideAnswers && (userAnswer || userHasSubmitted || showResults) && (
)} - {hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( -
- {t('questionnaire/hideAnswers/thankyou')} -
- )} {!userAnswer && !userHasSubmitted && !showResults && (
{options.map((option) => ( From 68be5e84b7a8a9c2c393a37e667d80d8ac01ca43 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 24 Dec 2021 14:08:06 +0100 Subject: [PATCH 5/5] fix styling and unattributedAnswer message --- src/components/QuestionTypeChoice.js | 14 ++++++++------ src/components/Questionnaire.js | 10 +++++----- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/QuestionTypeChoice.js b/src/components/QuestionTypeChoice.js index 2f88583..d5fe5c1 100644 --- a/src/components/QuestionTypeChoice.js +++ b/src/components/QuestionTypeChoice.js @@ -93,13 +93,15 @@ class QuestionTypeChoice extends Component {
)} -
- {!hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( + {!hideAnswers && (userAnswer || userHasSubmitted || showResults) && ( +
- )} - {!userAnswer && !userHasSubmitted && !showResults && ( +
+ )} + {!userAnswer && !userHasSubmitted && !showResults && ( +
{options.map((option) => (
@@ -109,8 +111,8 @@ class QuestionTypeChoice extends Component {
))}
- )} -
+
+ )}
) } diff --git a/src/components/Questionnaire.js b/src/components/Questionnaire.js index 9a0c31c..e62d117 100644 --- a/src/components/Questionnaire.js +++ b/src/components/Questionnaire.js @@ -236,14 +236,14 @@ const Questionnaire = (props) => { if (new Date(endDate) < now) { return ( -
+
{t('questionnaire/ended')}
) } - if ((!me || !me.id) && !unattributedAnswers) { + if ((!me || !me.id) && unattributedAnswers) { return ( -
+
{t('questionnaire/noUnattributedAnswers')} @@ -251,13 +251,13 @@ const Questionnaire = (props) => { ) } else if (!me || !me.id) { return ( -
+
{t('questionnaire/notSignedIn')}
) } else if (!userIsEligible) { return ( -
+
{t('questionnaire/notEligible')}
)