feat: add StorybookJS

2025-04-28 03:56:15 -04:00 · 2025-04-04 11:51:33 +02:00 · 2025-04-04 11:51:33 +02:00 · cbc1260553
commit cbc1260553
parent 1039a4788d
116 changed files with 3560 additions and 2 deletions
--- a/stories/sectioning/nav.stories.ts
+++ b/stories/sectioning/nav.stories.ts
@ -0,0 +1,49 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "Sectioning/Nav",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("nav", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: (args) => `<nav class="menu">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+`,
+};
+
+export const MozillaExampleInProse = {
+  render: (args) => `<nav>
+  <h2>Navigation</h2>
+  <p>
+    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
+    whence the sounds of battle can be heard. To the east you can see a large
+    mountain, upon which many <a href="/school">school papers</a> are littered.
+    Far up this mountain you can spy a little figure who appears to be me,
+    desperately scribbling a <a href="/school/thesis">thesis</a>.
+  </p>
+  <p>
+    To the west are several exits. One fun-looking exit is labeled
+    <a href="https://games.example.com/">"games"</a>. Another more
+    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
+  </p>
+  <p>
+    To the south lies a dark and dank <a href="/about">contacts page</a>.
+    Cobwebs cover its disused entrance, and at one point you see a rat run
+    quickly out of the page.
+  </p>
+</nav>`,
+};