From ab71f6020a5cf24d03fc6635ba7fc6357dd1c554 Mon Sep 17 00:00:00 2001 From: seotts Date: Mon, 30 Mar 2020 17:46:21 -0400 Subject: [PATCH] Format prompts with multiple paragraphs and a list --- src/components/modal/report/modal.jsx | 20 ++++++- src/components/modal/report/modal.scss | 2 +- src/components/modal/report/report-options.js | 58 +++++++++++++++++-- src/l10n.json | 22 +++++++ 4 files changed, 95 insertions(+), 7 deletions(-) diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx index c5890968f..10445daba 100644 --- a/src/components/modal/report/modal.jsx +++ b/src/components/modal/report/modal.jsx @@ -85,10 +85,16 @@ class ReportModal extends React.Component { const category = reportOptions.find(o => o.value === this.state.categoryValue) || reportOptions[0]; let finalCategory = category; + if (category.subcategories) { finalCategory = category.subcategories.find(o => o.value === this.state.subcategoryValue) || category.subcategories[0]; } + const promptList = finalCategory.list && finalCategory.list.map((listItem, index) => +
  • + +
    • + ); // Confirmation step is shown if a report has been submitted, even if state is reset by closing the modal. // This prevents multiple report submission within the same session because submission is stored in redux. @@ -230,7 +236,19 @@ class ReportModal extends React.Component {
    - +

    + +

    + {finalCategory.prompt2 && ( +

    + +

    + )} + {promptList && ( + + )} diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss index 77276131f..a433a6ec3 100644 --- a/src/components/modal/report/modal.scss +++ b/src/components/modal/report/modal.scss @@ -72,7 +72,7 @@ } } - ul { + ul, p { font-size: .875rem; } } diff --git a/src/components/modal/report/report-options.js b/src/components/modal/report/report-options.js index 403e7f38b..42ff9ca52 100644 --- a/src/components/modal/report/report-options.js +++ b/src/components/modal/report/report-options.js @@ -20,6 +20,8 @@ const subcategoryShape = shape({ value: string.isRequired, label: messageShape.isRequired, prompt: messageShape.isRequired, + prompt2: messageShape, + list: arrayOf(messageShape), preventSubmission: bool }); @@ -83,18 +85,64 @@ const REPORT_OPTIONS = [ label: {id: 'report.reasonPlaceHolder'}, prompt: {id: 'report.promptPlaceholder'} }, + { + value: 'report.reasonDontLikeIt', + label: {id: 'report.reasonDontLikeIt'}, + prompt: {id: 'report.promptDontLikeIt'}, + prompt2: {id: 'report.promptDontLikeIt'}, + list: [ + {id: 'report.itemSupportive'}, + {id: 'report.itemConstructive'}, + {id: 'report.itemSpecific'} + ], + preventSubmission: true + }, + { + value: 'report.reasonDoesntWork', + label: {id: 'report.reasonDoesntWork'}, + prompt: {id: 'report.promptDoesntWork'}, + preventSubmission: true + }, + { + value: 'report.reasonCouldImprove', + label: {id: 'report.reasonCouldImprove'}, + prompt: {id: 'report.promptCouldImprove'}, + preventSubmission: true + }, + { + value: 'report.reasonTooHard', + label: {id: 'report.reasonTooHard'}, + prompt: {id: 'report.promptTooHard'}, + preventSubmission: true + }, + { + value: '9', + label: {id: 'report.reasonMisleading'}, + prompt: {id: 'report.promptMisleading'} + }, + { + value: '10', + label: {id: 'report.reasonFaceReveal'}, + prompt: {id: 'report.promptFaceReveal'} + }, { value: '11', - label: {id: 'report.reasonCopy'}, - prompt: {id: 'report.promptCopy'} + label: {id: 'report.reasonNoRemixingAllowed'}, + prompt: {id: 'report.promptNoRemixingAllowed'} }, { value: '12', - label: {id: 'report.reasonPersonal'}, - prompt: {id: 'report.promptPersonal'}, - preventSubmission: true + label: {id: 'report.reasonCreatorsSafety'}, + prompt: {id: 'report.promptCreatorsSafety'} + }, + { + value: '13', + label: {id: 'report.reasonSomethingElse'}, + prompt: {id: 'report.promptSomethingElse'} } ] + + } ]; diff --git a/src/l10n.json b/src/l10n.json index daaafb78f..06197ef57 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -258,6 +258,15 @@ "report.reasonMissing": "Please select a reason", "report.reasonImage": "Inappropriate Images", "report.reasonPersonal": "Sharing Personal Contact Information", + "report.reasonDontLikeIt": "I don't like this project", + "report.reasonDoesntWork": "This project does not work", + "report.reasonCouldImprove": "This project could be improved on", + "report.reasonTooHard": "This project is too hard", + "report.reasonMisleading": "The project is misleading or tricks the community", + "report.reasonFaceReveal": "It's a face reveal or is just trying to show someone's picture", + "report.reasonNoRemixingAllowed": "The project doesn't allow remixing", + "report.reasonCreatorsSafety": "I'm worried about the safety of the creator of this project", + "report.reasonSomethingElse": "Something else", "report.receivedHeader": "We have received your report!", "report.receivedBody": "The Scratch Team will review the project based on the Scratch community guidelines.", "report.promptPlaceholder": "Select a reason why above.", @@ -269,6 +278,19 @@ "report.promptPersonal": "Please say where the personal contact information is shared (For example: Notes & Credits, sprite name, project text, etc.)", "report.promptGuidelines": "Please be specific about why this project does not follow our Community Guidelines", "report.promptImage": "Please say the name of the sprite or the backdrop with the inappropriate image", + "report.promptDontLikeIt": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.", + "report.prompt2DontLikeIt": "Here are tips on sharing constructive feedback:", + "report.itemSupportive": "Be supportive and encouraging.", + "report.itemConstructive": "Leave a comment telling them what you like, but also what they could do to make the project better.", + "report.itemSpecific": "Try to be specific with your feedback. For instance: The controls to move the character did not work.", + "report.promptDoesntWork": "

    A Scratch project, like any other application, may contain a few bugs. That is expected and completely okay!

    We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.

    ", + "report.promptCouldImprove": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.
    Here are tips on sharing constructive feedback: