From 91fff9c7c3b79117003b3f49fdbc68f83f51eac5 Mon Sep 17 00:00:00 2001
From: Kobi Krasnoff <krasnoff.kobi@gmail.com>
Date: Sat, 7 Jun 2025 08:38:56 +0300
Subject: [PATCH] add new two components

---
 src/option-label/index.ts                     |  2 ++
 src/option-label/option-label.stories.tsx     | 20 +++++++++++++++++++
 src/option-label/option-label.test.tsx        | 14 +++++++++++++
 src/option-label/option-label.tsx             | 20 +++++++++++++++++++
 src/option-label/types.ts                     |  3 +++
 src/question-label/index.ts                   |  2 ++
 src/question-label/question-label.stories.tsx | 20 +++++++++++++++++++
 src/question-label/question-label.test.tsx    | 14 +++++++++++++
 src/question-label/question-label.tsx         | 10 ++++++++++
 src/question-label/types.ts                   |  3 +++
 src/quiz-question/quiz-question.tsx           |  9 ++++++++-
 src/quiz/quiz.tsx                             |  9 ++++++++-
 12 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 src/option-label/index.ts
 create mode 100644 src/option-label/option-label.stories.tsx
 create mode 100644 src/option-label/option-label.test.tsx
 create mode 100644 src/option-label/option-label.tsx
 create mode 100644 src/option-label/types.ts
 create mode 100644 src/question-label/index.ts
 create mode 100644 src/question-label/question-label.stories.tsx
 create mode 100644 src/question-label/question-label.test.tsx
 create mode 100644 src/question-label/question-label.tsx
 create mode 100644 src/question-label/types.ts

diff --git a/src/option-label/index.ts b/src/option-label/index.ts
new file mode 100644
index 00000000..978c24ab
--- /dev/null
+++ b/src/option-label/index.ts
@@ -0,0 +1,2 @@
+export { OptionLabel } from "./option-label";
+export type { OptionLabelProps } from "./types";
diff --git a/src/option-label/option-label.stories.tsx b/src/option-label/option-label.stories.tsx
new file mode 100644
index 00000000..87d6e70d
--- /dev/null
+++ b/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;
diff --git a/src/option-label/option-label.test.tsx b/src/option-label/option-label.test.tsx
new file mode 100644
index 00000000..76703ec9
--- /dev/null
+++ b/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();
+	});
+});
diff --git a/src/option-label/option-label.tsx b/src/option-label/option-label.tsx
new file mode 100644
index 00000000..818e3208
--- /dev/null
+++ b/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={() => ""}
+		/>
+	);
+};
diff --git a/src/option-label/types.ts b/src/option-label/types.ts
new file mode 100644
index 00000000..4d064aed
--- /dev/null
+++ b/src/option-label/types.ts
@@ -0,0 +1,3 @@
+export interface OptionLabelProps {
+	questionText: string;
+}
diff --git a/src/question-label/index.ts b/src/question-label/index.ts
new file mode 100644
index 00000000..0fed831a
--- /dev/null
+++ b/src/question-label/index.ts
@@ -0,0 +1,2 @@
+export { QuestionLabel } from "./question-label";
+export type { QuestionLabelProps } from "./types";
diff --git a/src/question-label/question-label.stories.tsx b/src/question-label/question-label.stories.tsx
new file mode 100644
index 00000000..7cfd33b3
--- /dev/null
+++ b/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;
diff --git a/src/question-label/question-label.test.tsx b/src/question-label/question-label.test.tsx
new file mode 100644
index 00000000..63018d5f
--- /dev/null
+++ b/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();
+	});
+});
diff --git a/src/question-label/question-label.tsx b/src/question-label/question-label.tsx
new file mode 100644
index 00000000..67c2569e
--- /dev/null
+++ b/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={() => ""} />
+	);
+};
diff --git a/src/question-label/types.ts b/src/question-label/types.ts
new file mode 100644
index 00000000..43b733e9
--- /dev/null
+++ b/src/question-label/types.ts
@@ -0,0 +1,3 @@
+export interface QuestionLabelProps {
+	question: string;
+}
diff --git a/src/quiz-question/quiz-question.tsx b/src/quiz-question/quiz-question.tsx
index 51591c52..a9a3e484 100644
--- a/src/quiz-question/quiz-question.tsx
+++ b/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 };
diff --git a/src/quiz/quiz.tsx b/src/quiz/quiz.tsx
index dda9f497..32dd5361 100644
--- a/src/quiz/quiz.tsx
+++ b/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 };