At 100/quiz option description websitejs libraryui library#292
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds support for showing option-level descriptions for single-select quiz questions and prevents auto-advance when the selected option includes a description.
Changes:
- Added
getDisplayedDescriptionto choose between question vs. selected-option description for single-select questions. - Updated
useSelectInputPropsto exposeselectedstate and to block auto-advance when an option description is present. - Propagated selected-option state through context/types and added Storybook + mock data for option descriptions.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils.tsx | Adds helper to compute the displayed description based on selection. |
| src/types.ts | Introduces shared Selected type and exposes selected options on the quiz return type. |
| src/stories/Quiz/tests/mocks.tsx | Adds mock options with descriptions and wires selected state into mock context. |
| src/stories/Quiz/Component/QuestionTypes/SingleSelectQuestion.stories.tsx | Adds story variant for options with descriptions. |
| src/hooks/usePropsGetters/useSelectInputProps.ts | Returns { getSelectInputProps, selected } and blocks auto-advance for described options. |
| src/hooks/usePropsGetters/index.ts | Passes selected through props-getters output. |
| src/components/SelectTypeQuestion/SelectTypeQuestion.tsx | Uses computed description instead of always using question description. |
| src/components/CioQuiz/index.tsx | Passes selected-options state through context provider value. |
| src/components/CioQuiz/context.ts | Adds selected-options state to context type. |
| spec/hooks/usePropsGetters/useSelectInputProps/useSelectInputProps.test.tsx | Updates tests to match new hook return shape. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Alexey-Pavlov
left a comment
There was a problem hiding this comment.
Thank you for working on this! Left just a few comments
| export interface Selected { | ||
| [key: number]: boolean; | ||
| } | ||
| export type { Selected }; |
There was a problem hiding this comment.
Is this re-export really necessary?
There was a problem hiding this comment.
Sorry, it's pre-existing, but it looks like this ref should be a boolean, not an object; it's later assigned true and checked as a boolean.
| const singleSelectClicked = useRef(false); |
| question: Question | null | undefined, | ||
| selected: Selected | ||
| ): string | undefined { | ||
| if (!question?.description && !question?.options) return undefined; |
There was a problem hiding this comment.
| if (!question?.description && !question?.options) return undefined; | |
| if (!question) return undefined; |
What if we use a simpler guard here? Downstream logic handles all the nullable paths already
| const makeQuestion = (type: string, description?: string, options?: any[]) => | ||
| ({ type, description, options } as any); |
There was a problem hiding this comment.
How about using Question type here?
Something like
const makeQuestion = (
type: string,
description?: string,
options?: { id: number | string; value: string; description?: string }[]
) => ({ type, description, options } as unknown as Question);
Add support for displaying option-level descriptions in single-select quiz questions
When a single option with a description is selected, the question description area shows the option's description instead of the question-level description
Disable auto-advance to next question when the selected option has a description (user must click Continue)
Test plan