From 1531b685318b4e3057af1d6e103c90e93520bcbb Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 17 Sep 2024 01:42:05 +0700
Subject: [PATCH] docs: add stories for how PrismFormatted handles long lines

---
 .../prism-formatted.stories.tsx               | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/prism-formatted/prism-formatted.stories.tsx b/src/prism-formatted/prism-formatted.stories.tsx
index d4c34fbe..2cf3112a 100644
--- a/src/prism-formatted/prism-formatted.stories.tsx
+++ b/src/prism-formatted/prism-formatted.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import { PrismFormatted } from "./prism-formatted";
@@ -68,4 +69,50 @@ export const WithLineNumbers: Story = {
 	},
 };
 
+export const WithLongLineOfCode: Story = {
+	args: {
+		text: `<pre><code class="language-html"><p>This story shows how PrismFormatted displays a long line of code. This line should not wrap to a new line, but instead, the overflow content is clipped and can be scrolled into view.</p></code></pre>`,
+		getCodeBlockAriaLabel: (codeName) => `${codeName} code example`,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<PrismFormatted
+  getCodeBlockAriaLabel={codeName => \`\${codeName} code example\`}
+  text={\`<pre><code class="language-html"><p>This story shows how PrismFormatted displays a long line of code. This line should not wrap to a new line, but instead, the overflow content is clipped and can be scrolled into view.</p></code></pre>\`}
+/>`,
+			},
+		},
+	},
+};
+
+export const InsideDisclosureElement: Story = {
+	decorators: [
+		(Story) => (
+			<details>
+				<summary>Example code</summary>
+				<Story />
+			</details>
+		),
+	],
+	args: {
+		text: `<pre><code class="language-html"><p>This story shows how PrismFormatted displays a long line of code when it's rendered inside a disclosure element. This line should not wrap to a new line, but instead, the overflow content is clipped and can be scrolled into view.</p></code></pre>`,
+		getCodeBlockAriaLabel: (codeName) => `${codeName} code example`,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<details>
+  <summary>Example code</summary>
+
+  <PrismFormatted
+    getCodeBlockAriaLabel={codeName => \`\${codeName} code example\`}
+    text={\`<pre><code class="language-html"><p>This story shows how PrismFormatted displays a long line of code when it's rendered inside a disclosure element. This line should not wrap to a new line, but instead, the overflow content is clipped and can be scrolled into view.</p></code></pre>\`}
+	/>
+</details>`,
+			},
+		},
+	},
+};
+
 export default story;