From 5c5a3ebc3788b85e89979552234b854d2d7db024 Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Wed, 2 Apr 2025 08:32:02 +0800
Subject: [PATCH 1/2] configure Storybook to handle YAML files in
 .storybook/main.ts and created Storybook story for DocsNav component

---
 .storybook/main.ts                            |  5 ++
 src/components/DocsNav/DocsNav.stories.tsx    | 57 +++++++++++++++++++
 .../{DocsNav.tsx => DocsNav/index.tsx}        |  2 -
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DocsNav/DocsNav.stories.tsx
 rename src/components/{DocsNav.tsx => DocsNav/index.tsx} (99%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 98834c3edcc..4f3805cdb0d 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -68,6 +68,11 @@ const config: StorybookConfig = {
     if (imageRule) {
       imageRule["exclude"] = /\.svg$/
     }
+    // Configure YAML loader
+    config.module.rules.push({
+      test: /\.ya?ml$/,
+      use: "yaml-loader",
+    })
 
     // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
diff --git a/src/components/DocsNav/DocsNav.stories.tsx b/src/components/DocsNav/DocsNav.stories.tsx
new file mode 100644
index 00000000000..273df666a12
--- /dev/null
+++ b/src/components/DocsNav/DocsNav.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import DocsNavComponent from "."
+
+const meta = {
+  title: "Molecules / Navigation / DocsNav",
+  component: DocsNavComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/developers/docs/intro-to-ethereum/",
+      },
+    },
+
+    layout: "fullscreen",
+  },
+
+  decorators: [
+    (Story) => (
+      <div className="mx-auto max-w-4xl p-6">
+        <div className="mb-8">
+          <h1 className="mb-4 text-3xl font-bold">Introduction to Ethereum</h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            This shows how the DocsNav component appears at the bottom of a
+            documentation page.
+          </p>
+        </div>
+        <div className="prose mb-8 max-w-none">
+          <p>
+            Ethereum is an open-source, globally decentralized computing
+            infrastructure that executes programs called smart contracts. It
+            uses a blockchain to synchronize and store the system&apos;s state
+            changes, along with a cryptocurrency called ether to meter and
+            constrain execution resource costs.
+          </p>
+          <p>
+            Ethereum is programmable, which means that developers can use it to
+            build new kinds of applications. These decentralized applications
+            gain the benefits of cryptocurrency and blockchain technology.
+          </p>
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DocsNavComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const DocsNav: Story = {
+  args: {
+    contentNotTranslated: false,
+  },
+}
diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav/index.tsx
similarity index 99%
rename from src/components/DocsNav.tsx
rename to src/components/DocsNav/index.tsx
index 90a2b91450a..b580805ecab 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav/index.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 
 import { TranslationKey } from "@/lib/types"

From e7e9b91b9f130c5940f03402995d2deb4966c226 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 20 Oct 2025 20:59:39 -0700
Subject: [PATCH 2/2] patch: remove extraneous decorators

---
 src/components/DocsNav/DocsNav.stories.tsx | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/DocsNav/DocsNav.stories.tsx b/src/components/DocsNav/DocsNav.stories.tsx
index 273df666a12..55efb3fdd1c 100644
--- a/src/components/DocsNav/DocsNav.stories.tsx
+++ b/src/components/DocsNav/DocsNav.stories.tsx
@@ -19,27 +19,6 @@ const meta = {
   decorators: [
     (Story) => (
       <div className="mx-auto max-w-4xl p-6">
-        <div className="mb-8">
-          <h1 className="mb-4 text-3xl font-bold">Introduction to Ethereum</h1>
-          <p className="text-gray-600 dark:text-gray-300">
-            This shows how the DocsNav component appears at the bottom of a
-            documentation page.
-          </p>
-        </div>
-        <div className="prose mb-8 max-w-none">
-          <p>
-            Ethereum is an open-source, globally decentralized computing
-            infrastructure that executes programs called smart contracts. It
-            uses a blockchain to synchronize and store the system&apos;s state
-            changes, along with a cryptocurrency called ether to meter and
-            constrain execution resource costs.
-          </p>
-          <p>
-            Ethereum is programmable, which means that developers can use it to
-            build new kinds of applications. These decentralized applications
-            gain the benefits of cryptocurrency and blockchain technology.
-          </p>
-        </div>
         <Story />
       </div>
     ),