CivilPursuit Web Component

[ddfridley]

This is the top level component for the whole civil-pursuit app.

• In app/web-components create civil-pursuit.jsx
• required StepSlider Component #112
• required Join / Login component #150
• required MoreDetails Component #89
• required Tournament Component #151
• required Conclusion component
• required Feedback component
• create a story for this component based on the data below.

<CivilPursuit
    subject: ""
    description: ""
    steps: []
/>

• for the named components above, import and create a table to look them up by name:

import Login from ../components/Login
const WebCompnents={
   "Login": Login,
   ...
}

• for each element in the steps array, lookup the webComponent, remove that property from the element, and make react component with the rest of the element as props and push it onto the list to be passed to StepSlider
• to StepSlider onDone should be passed, when onDone is called with {valid: true} then ??? we are all done.

Here is an example of the props for CivilPursuit component.

{
    "subject": "What One Issue Should We The People Unite and Solve First?",
    "description": "This is a large scale online discussion with the purpose of starting unbiased, and thoughtful conversations, that lead to amazing new solutions. **But here, we are asking about concerns**, we will get to the solutions later.",
      "steps": [
        { "webComponent": "Loign" },
        { "webComponent": "Details", "questions": [["What party are you with"]] },
        {
          "webComponent": "Tournment",
          "steps": [
            {
              "webComponent": "Answer",
              "stepName": "Answer",
              "stepIntro": {
                "subject": "Answer",
                "description": "Please provide a title and short description for your answer"
              }
            },
            {
              "webComponent": "GroupingStep",
              "stepName": "Group",
              "stepIntro": {
                "subject": "Group Responses",
                "description": "Of these issues, please group similar responses to facilitate your decision-making by avoiding duplicates. If no duplicates are found, you may continue to the next section below."
              }
            },
            {
              "webComponent": "ReviewPointList",
              "stepName": "Rank",
              "stepIntro": {
                "subject": "Rank Responses",
                "description": "Please rate the following responses as Most, Neutral, or Least important. You must rate two responses as Most Important, and one as Least Important."
              }
            },
            {
              "webComponent": "WhyStep",
              "category": "most",
              "stepName": "Why Most",
              "stepIntro": {
                "subject": "Why it's Most Important",
                "description": "Of the issues you thought were Most important, please give a brief explanation of why it's important for everyone to consider it."
              }
            },
            {
              "webComponent": "WhyStep",
              "category": "least",
              "stepName": "Why Least",
              "stepIntro": {
                "subject": "Why it's Least Important",
                "description": "Of the issues you thought were least important, please give a brief explanation of why it's important for everyone to consider it."
              }
            },
            {
              "webComponent": "CompareReasons",
              "category": "most",
              "stepName": "Compare Why Most",
              "stepIntro": {
                "subject": "Compare Reasons Why It's Most Important",
                "description": "Compare two responses and select a response that is most important for the community to consider."
              }
            },
            {
              "webComponent": "CompareReasons",
              "category": "least",
              "stepName": "Compare Why Least",
              "stepIntro": {
                "subject": "Compare Reasons Why It's Least Important",
                "description": "Compare two responses and select a response that is most important for the community to consider."
              }
            },
            {
              "webComponent": "Review",
              "stepName": "Review",
              "stepIntro": {
                "subject": "Review",
                "description": "These are the issues you sorted earlier, with reasons added by the discussion. Please consider the reasons and sort the list again. "
              }
            },
            {
              "webComponent": "Intermission",
              "stepName": "",
              "stepIntro": {
                "subject": "Awesome, you've completed Round 1!",
                "description": "When more people have gotten to this point we will invite you back to continue the deliberation. "
              }
            }
          ]
        },
        { "webComponent": "Conclusion" },
        { "webComponent": "Feedback" }
      ]
  }

[ddfridley]

@justin-b-yee I see this is still waiting for Conclusion and Feedback, but I want to take it over as is and add those others later. Any thing I should know? Also, would you like to take a crack at writing issues for conclusion and feedback - I seem to have missed those. --- But at this point the Backend and Front end are ready (enough) for integration so I'm going to try that. -- Thanks.

[justin-b-yee]

@ddfridley Yeah that sounds good, I can take a look at those two components. I left this one sitting after adding the step-slider children (minus conclusion/feedback) - looks like the story needs to be updated to use the new args from the deriver refactors.

[justin-b-yee]

Are there also existing mockups for Conclusion and Feedback's design, or is that yet to be done as well? I can't seem to find them in the Figma.