From 6b6ffaf5fda74643884a12adda3e3b848d496b7f Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Fri, 27 Sep 2024 11:22:50 +0100
Subject: [PATCH 1/3] feat(developerdocslinks story): create story for
 developerdocslinks

---
 .storybook/main.ts                            |  5 +++
 .../DeveloperDocsLinks.stories.tsx            | 34 +++++++++++++++++++
 .../index.tsx}                                |  0
 3 files changed, 39 insertions(+)
 create mode 100644 src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
 rename src/components/{DeveloperDocsLinks.tsx => DeveloperDocsLinks/index.tsx} (100%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 02d785aefdc..c744770d30b 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -67,6 +67,11 @@ const config: StorybookConfig = {
     if (imageRule) {
       imageRule["exclude"] = /\.svg$/
     }
+    // Configure yaml files to be loaded with 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/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
new file mode 100644
index 00000000000..eee1d533ca9
--- /dev/null
+++ b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+import DeveloperDocsLinksComponent from "."
+
+const meta = {
+  title: "Molecules / Navigation / DeveloperDocsLinks",
+  component: DeveloperDocsLinksComponent,
+  args: {
+    headerId: "ethereum-stack",
+  },
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <article className="max-w-3xl scroll-mt-24">
+        <Story />
+      </article>
+    ),
+  ],
+} satisfies Meta<typeof DeveloperDocsLinksComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const DeveloperDocsLinks: Story = {}
diff --git a/src/components/DeveloperDocsLinks.tsx b/src/components/DeveloperDocsLinks/index.tsx
similarity index 100%
rename from src/components/DeveloperDocsLinks.tsx
rename to src/components/DeveloperDocsLinks/index.tsx

From 66bc1276ee11c217a83fa88a9913d079f5042876 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Fri, 11 Oct 2024 08:18:35 +0100
Subject: [PATCH 2/3] fix(link import): update link import directory

---
 src/components/DeveloperDocsLinks/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DeveloperDocsLinks/index.tsx b/src/components/DeveloperDocsLinks/index.tsx
index d614cac67df..f7b327fef30 100644
--- a/src/components/DeveloperDocsLinks/index.tsx
+++ b/src/components/DeveloperDocsLinks/index.tsx
@@ -4,8 +4,8 @@ import Translation from "@/components/Translation"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
-import InlineLink from "./ui/Link"
-import { ListItem, UnorderedList } from "./ui/list"
+import InlineLink from "../ui/Link"
+import { ListItem, UnorderedList } from "../ui/list"
 
 export type DeveloperDocsLinksProps = {
   headerId: string

From 1af78058dda1131c1e2553f6f7900f87a634bfcb Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 21 Jul 2025 20:40:01 -0700
Subject: [PATCH 3/3] feat: split out each section as own story

---
 .../DeveloperDocsLinks.stories.tsx            | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
index eee1d533ca9..236821ee33a 100644
--- a/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
+++ b/src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx
@@ -7,9 +7,6 @@ import DeveloperDocsLinksComponent from "."
 const meta = {
   title: "Molecules / Navigation / DeveloperDocsLinks",
   component: DeveloperDocsLinksComponent,
-  args: {
-    headerId: "ethereum-stack",
-  },
   parameters: {
     layout: "fullscreen",
     chromatic: {
@@ -31,4 +28,20 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const DeveloperDocsLinks: Story = {}
+export const FoundationalTopics: Story = {
+  args: {
+    headerId: "foundational-topics",
+  },
+}
+
+export const EthereumStack: Story = {
+  args: {
+    headerId: "ethereum-stack",
+  },
+}
+
+export const Advanced: Story = {
+  args: {
+    headerId: "advanced",
+  },
+}