Render children for QuestionBox

[justin-b-yee]

Specs

<QuestionBox 
    children = [].
    // other props
/>

Refactor app/components/question-box.jsx so that it renders children, rather than just rendering a status badge with the number of participants. Where QuestionBox is used in the code, the code should be modified to pass 1 child that is a StatusBadge

Tasks

• Add the children prop to QuestionBox.
• Remove the participants prop.
• Render all children in order below the main text.
• Update all references to QuestionBox to use the new props.
• Create a story showing the QuestionBox with the participants status badge, looking the same as the old implementation.
• Create a story to showcase a questionbox with a participants badge and a complete badge on the same level, and a continue button.
• Create another story with participants and "Round 3" badges on the same level, and View Summary and View My Activity buttons.

See app/components/point.jsx for an example of rendering children this way.

Figma

[ddfridley]

@justin-b-yee

What about the continue button? I see that we will keep adding components within the QuestionBox as his project evolves I think it would be more extensible to have QuestionBox render children within it. We did this with the point.jsx And questionBox is stating to look a lot like a point, with a different format.

Should we have QuestionBox render children, where status badges, and maybe the continue button are children. Should we look at Point and have a different vState or pass a prop or something to it to make it take on the QuestionBox appearance?

[ddfridley]

Yup, I see view status and view summary in the other issues, and I think children is the right answer.

[ddfridley]

@justin-b-yee I added reference to app/components/point.jsx and now I'm moving this to todo.

[gaikwadsanjeevv]

Interested to continue work on it.

[gaikwadsanjeevv]

Step 1: Refactor QuestionBox
// app/components/question-box.jsx

import React from 'react';
import { StatusBadge } from './StatusBadge'; // Adjust the import based on your structure
import cx from 'classnames';
import { createUseStyles } from 'react-jss';

const QuestionBox = ({ children = [], className = '', ...otherProps }) => {
const classes = useStyles();

return (
<div className={cx(classes.box, className)} {...otherProps}>

Your Question Here

{/* Render any additional content here */}

{children}

);
};

const useStyles = createUseStyles({
box: {
padding: '1rem',
border: '1px solid #ddd',
borderRadius: '0.5rem',
},
content: {
display: 'flex',
flexDirection: 'column',
},
childrenContainer: {
marginTop: '1rem',
},
});

export default QuestionBox;

==============================================================

//Updating References
//Findinding all instances of QuestionBox and update them. can be Step 2 by follwing way :

============================================================== // Setting up story :

// app/stories/QuestionBox.stories.jsx

import React from 'react';
import QuestionBox from '../components/question-box';
import StatusBadge from '../components/StatusBadge'; // Adjust the import based on your structure

export default {
title: 'QuestionBox',
component: QuestionBox,
};

export const WithStatusBadge = () => (



);

export const WithCompleteBadgeAndContinueButton = () => (



Continue

);

export const WithSummaryAndActivityButtons = () => (

View Summary
View My Activity

);

[ddfridley]

@gaikwadsanjeevv did you move this into Ready for Review? I can't find a PR for it. See this for how to create a pr. https://github.com/EnCiv/.github/wiki/Contributing
If you have trouble with permissions, let me know.

[ddfridley]

I'm moving it back to in progress, but please move it to ready to review again when ready.

[gaikwadsanjeevv]

Yes sir, i have moved again to Ready to review

…

On Mon, Nov 25, 2024 at 12:41 PM David ***@***.***> wrote: I'm moving it back to in progress, but please move it to ready to review again when ready. — Reply to this email directly, view it on GitHub <#224 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGQI5KH2XMQE4OKLFCUBNQL2CODOVAVCNFSM6AAAAABPQMEWFKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOJYHE4DSOBZGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>