feat: build a label component for Quiz and QuizQuestion

src/option-label/index.ts

@@ -0,0 +1,2 @@
+export { OptionLabel } from "./option-label";
+export type { OptionLabelProps } from "./types";

src/option-label/option-label.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StoryFn } from "@storybook/react";
+import { OptionLabel, OptionLabelProps } from ".";
+
+const story = {
+	title: "components/OptionLabel",
+	component: OptionLabel,
+};
+
+const Template: StoryFn<OptionLabelProps> = (args) => {
+	return <OptionLabel {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+	// default props go here
+	questionText: "What is the capital of France?",
+};
+
+export default story;

src/option-label/option-label.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { OptionLabel } from ".";
+
+describe("<OptionLabel />", () => {
+	it("should render correctly", () => {
+		const questionText = "What is the capital of France?";
+		render(<OptionLabel questionText={questionText} />);
+
+		const questionElement = screen.getByText(questionText);
+		expect(questionElement).toBeInTheDocument();
+	});
+});

src/option-label/option-label.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { OptionLabelProps } from "./types";
+import { PrismFormatted } from "../prism-formatted";
+
+export const OptionLabel = (props: OptionLabelProps) => {
+	const removeParagraphTags = (text: string) => {
+		// Remove <p> and </p> tags from the text
+		return text.replace(/<\/?p>/g, "");
+	};
+
+	return (
+		<PrismFormatted
+			text={removeParagraphTags(props.questionText)}
+			useSpan
+			noAria
+			getCodeBlockAriaLabel={() => ""}
+		/>
+	);
+};

src/option-label/types.ts

@@ -0,0 +1,3 @@
+export interface OptionLabelProps {
+	questionText: string;
+}

src/question-label/index.ts

@@ -0,0 +1,2 @@
+export { QuestionLabel } from "./question-label";
+export type { QuestionLabelProps } from "./types";

src/question-label/question-label.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StoryFn } from "@storybook/react";
+import { QuestionLabel, QuestionLabelProps } from ".";
+
+const story = {
+	title: "components/QuestionLabel",
+	component: QuestionLabel,
+};
+
+const Template: StoryFn<QuestionLabelProps> = (args) => {
+	return <QuestionLabel {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+	// default props go here
+	question: "What is the capital of France?",
+};
+
+export default story;

src/question-label/question-label.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { QuestionLabel } from ".";
+
+describe("<QuestionLabel />", () => {
+	it("should render correctly", () => {
+		const questionText = "What is the capital of France?";
+		render(<QuestionLabel question={questionText} />);
+
+		const questionElement = screen.getByText(questionText);
+		expect(questionElement).toBeInTheDocument();
+	});
+});

src/question-label/question-label.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+import { QuestionLabelProps } from "./types";
+import { PrismFormatted } from "../prism-formatted";
+
+export const QuestionLabel = (props: QuestionLabelProps) => {
+	return (
+		<PrismFormatted text={props.question} getCodeBlockAriaLabel={() => ""} />
+	);
+};

src/question-label/types.ts

@@ -0,0 +1,3 @@
+export interface QuestionLabelProps {
+	question: string;
+}

src/quiz-question/quiz-question.tsx

@@ -3,6 +3,8 @@ import { RadioGroup } from "@headlessui/react";
 
 import type { QuizQuestionAnswer, QuizQuestionProps } from "./types";
 import { Answer } from "./answer";
+import { QuestionLabel } from "../question-label";
+import { OptionLabel } from "../option-label";
 
 const QuestionText = ({
 	question,
@@ -32,7 +34,7 @@ const QuestionText = ({
  * but instead, it provides a `selectedAnswer` and an `onChange` props,
  * giving the parent component full control over the selection handling logic.
  */
-export const QuizQuestion = <AnswerT extends number | string>({
+const QuizQuestion = <AnswerT extends number | string>({
 	question,
 	answers,
 	required,
@@ -82,3 +84,8 @@ export const QuizQuestion = <AnswerT extends number | string>({
 		</RadioGroup>
 	);
 };
+
+QuizQuestion.QuestionLabel = QuestionLabel;
+QuizQuestion.OptionLabel = OptionLabel;
+
+export { QuizQuestion };

src/quiz/quiz.tsx

@@ -2,8 +2,10 @@ import React from "react";
 
 import { QuizQuestion } from "../quiz-question";
 import { type QuizProps } from "./types";
+import { QuestionLabel } from "../question-label";
+import { OptionLabel } from "../option-label";
 
-export const Quiz = <AnswerT extends number | string>({
+const Quiz = <AnswerT extends number | string>({
 	questions,
 	disabled,
 	required,
@@ -23,3 +25,8 @@ export const Quiz = <AnswerT extends number | string>({
 		</ul>
 	);
 };
+
+Quiz.QuestionLabel = QuestionLabel;
+Quiz.OptionLabel = OptionLabel;
+
+export { Quiz };