Create Story for DeveloperDocsLinks COmponent

.storybook/main.ts

@@ -61,6 +61,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({

src/components/DeveloperDocsLinks/DeveloperDocsLinks.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+import DeveloperDocsLinksComponent from "."
+
+const meta = {
+  title: "Molecules / Navigation / DeveloperDocsLinks",
+  component: DeveloperDocsLinksComponent,
+  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 FoundationalTopics: Story = {
+  args: {
+    headerId: "foundational-topics",
+  },
+}
+
+export const EthereumStack: Story = {
+  args: {
+    headerId: "ethereum-stack",
+  },
+}
+
+export const Advanced: Story = {
+  args: {
+    headerId: "advanced",
+  },
+}

src/components/DeveloperDocsLinks.tsx → 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