feat: add StorybookJS

2025-04-24 02:16: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/text-content/blockquote.stories.ts
+++ b/stories/text-content/blockquote.stories.ts
@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Blockquote",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    cite: "https://example.com",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("blockquote", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render:
+    () => `<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
+  <p>
+    Avian carriers can provide high delay, low throughput, and low altitude
+    service. The connection topology is limited to a single point-to-point path
+    for each carrier, used with standard carriers, but many carriers can be used
+    without significant interference with each other, outside early spring. This
+    is because of the 3D ether space available to the carriers, in contrast to
+    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+    avoidance system, which increases availability.
+  </p>
+</blockquote>`,
+};
--- a/stories/text-content/dd.stories.ts
+++ b/stories/text-content/dd.stories.ts
@ -0,0 +1,31 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DD",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dd", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>Cryptids of Cornwall:</p>
+
+<dl>
+  <dt>Beast of Bodmin</dt>
+  <dd>A large feline inhabiting Bodmin Moor.</dd>
+
+  <dt>Morgawr</dt>
+  <dd>A sea serpent.</dd>
+
+  <dt>Owlman</dt>
+  <dd>A giant owl-like creature.</dd>
+</dl>
+`,
+};
--- a/stories/text-content/div.stories.ts
+++ b/stories/text-content/div.stories.ts
@ -0,0 +1,15 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Div",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("div", args);
+  },
+};
+
+export const Default = {};
--- a/stories/text-content/dl.stories.ts
+++ b/stories/text-content/dl.stories.ts
@ -0,0 +1,74 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DL",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dl", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleMultipleTermsSingleDescription = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleSingleTermMultipleDescriptions = {
+  render: () => `<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform, graphical web browser developed by the
+    Mozilla Corporation and hundreds of volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+`,
+};
+
+export const MozillaExampleMultipleTermsAndDescriptions = {
+  render: () => `<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+`,
+};
--- a/stories/text-content/dt.stories.ts
+++ b/stories/text-content/dt.stories.ts
@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/DT",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("dt", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>Please use the following paint colors for the new house:</p>
+
+<dl>
+  <dt>Denim (semigloss finish)</dt>
+  <dd>Ceiling</dd>
+
+  <dt>Denim (eggshell finish)</dt>
+  <dt>Evening Sky (eggshell finish)</dt>
+  <dd>Layered on the walls</dd>
+</dl>
+`,
+};
--- a/stories/text-content/figcaption.stories.ts
+++ b/stories/text-content/figcaption.stories.ts
@ -0,0 +1,25 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Figcaption",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("figcaption", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <img
+    src="/shared-assets/images/examples/elephant.jpg"
+    alt="Elephant at sunset" />
+  <figcaption>An elephant at sunset</figcaption>
+</figure>
+`,
+};
--- a/stories/text-content/figure.stories.ts
+++ b/stories/text-content/figure.stories.ts
@ -0,0 +1,43 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Figure",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("figure", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <img src="https://picsum.photos/200/300" alt="The beautiful MDN logo." /><figcaption>An elephant at sunset</figcaption>
+</figure>`,
+};
+
+export const MozillaExampleQuotations = {
+  render: () => `<figure>
+  <figcaption><b>Edsger Dijkstra:</b></figcaption>
+  <blockquote>
+    If debugging is the process of removing software bugs, then programming must
+    be the process of putting them in.
+  </blockquote>
+</figure>`,
+};
+
+export const MozillaExamplePoems = {
+  render: () => `<figure>
+  <p style="white-space:pre">
+    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
+    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
+    yet no footing seen: Love is a spirit all compact of fire, Not gross to
+    sink, but light, and will aspire.
+  </p>
+  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
+</figure>`,
+};
--- a/stories/text-content/hr.stories.ts
+++ b/stories/text-content/hr.stories.ts
@ -0,0 +1,29 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/HR",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return `<hr>`;
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+
+<hr />
+
+<p>
+  This is the second paragraph of text. This is the second paragraph of text.
+  This is the second paragraph of text. This is the second paragraph of text.
+</p>`,
+};
--- a/stories/text-content/li.stories.ts
+++ b/stories/text-content/li.stories.ts
@ -0,0 +1,24 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/LI",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+    value: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("li", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>second item</li>
+  <li>third item</li>
+</ol>`,
+};
--- a/stories/text-content/menu.stories.ts
+++ b/stories/text-content/menu.stories.ts
@ -0,0 +1,33 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Menu",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("menu", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<div class="news">
+  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
+  <menu>
+    <li><button id="save">Save for later</button></li>
+    <li><button id="share">Share this news</button></li>
+  </menu>
+</div>`,
+};
+
+export const MozillaExample2 = {
+  render: () => `<menu>
+  <li><button onclick="copy()">Copy</button></li>
+  <li><button onclick="cut()">Cut</button></li>
+  <li><button onclick="paste()">Paste</button></li>
+</menu>`,
+};
--- a/stories/text-content/ol.stories.ts
+++ b/stories/text-content/ol.stories.ts
@ -0,0 +1,76 @@
+import { ArgTypes } from "@storybook/blocks";
+import { createHTMLElement } from "../HTMLElement";
+import LI from "./li.stories";
+
+export default {
+  title: "TextContent/OL",
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["a", "A", "i", "I", "1"],
+      description: "The type of list marker to use.",
+    },
+  },
+  args: {
+    content: "Content",
+    reversed: false,
+    start: 1,
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ol", args);
+  },
+};
+
+export const Default = {};
+
+export const WithItems = {
+  render: (args) => {
+    return createHTMLElement("ol", {
+      ...args,
+      content: [
+        createHTMLElement("li", { content: "Item 1" }),
+        createHTMLElement("li", { content: "Item 2" }),
+        createHTMLElement("li", { content: "Item 3" }),
+        createHTMLElement("li", { content: "Item 4" }),
+        createHTMLElement("li", { content: "Item 5" }),
+      ],
+    });
+  },
+};
+
+export const MozillaExampleNestingLists = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+`,
+};
+
+export const MozillaExampleNestingUnorderedLists = {
+  render: () => `<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ul>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>`,
+};
--- a/stories/text-content/p.stories.ts
+++ b/stories/text-content/p.stories.ts
@ -0,0 +1,26 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/P",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("p", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<p>
+  This is the first paragraph of text. This is the first paragraph of text. This
+  is the first paragraph of text. This is the first paragraph of text.
+</p>
+<p>
+  This is the second paragraph. This is the second paragraph. This is the second
+  paragraph. This is the second paragraph.
+</p>`,
+};
--- a/stories/text-content/pre.stories.ts
+++ b/stories/text-content/pre.stories.ts
@ -0,0 +1,34 @@
+import { createHTMLElement } from "../HTMLElement";
+
+export default {
+  title: "TextContent/Pre",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("pre", args);
+  },
+};
+
+export const Default = {};
+
+export const MozillaExample = {
+  render: () => `<figure>
+  <pre role="img" aria-label="ASCII COW">
+      ___________________________
+  &lt; I'm an expert in my field. &gt;
+      ---------------------------
+          \   ^__^
+           \  (oo)\_______
+              (__)\       )\/\
+                  ||----w |
+                  ||     ||
+  </pre>
+  <figcaption id="cow-caption">
+    A cow saying, "I'm an expert in my field." The cow is illustrated using
+    preformatted text characters.
+  </figcaption>
+</figure>`,
+};
--- a/stories/text-content/ul.stories.ts
+++ b/stories/text-content/ul.stories.ts
@ -0,0 +1,76 @@
+import { create } from "storybook/internal/theming";
+import { createHTMLElement } from "../HTMLElement";
+import LI from "./li.stories";
+
+export default {
+  title: "TextContent/UL",
+  tags: ["autodocs"],
+  args: {
+    content: "Content",
+  },
+  // Render the <html> element
+  render: (args) => {
+    return createHTMLElement("ul", args);
+  },
+};
+
+export const Default = {};
+
+export const WithItems = {
+  render: (args) => {
+    return createHTMLElement("ul", {
+      ...args,
+      content: [
+        createHTMLElement("li", { content: "Item 1" }),
+        createHTMLElement("li", { content: "Item 2" }),
+        createHTMLElement("li", { content: "Item 3" }),
+        createHTMLElement("li", { content: "Item 4" }),
+        createHTMLElement("li", { content: "Item 5" }),
+      ],
+    });
+  },
+};
+
+export const MozillaExampleNestingLists = {
+  render: () => `<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>
+        second item second subitem
+        <!-- Same for the second nested unordered list! -->
+        <ul>
+          <li>second item second subitem first sub-subitem</li>
+          <li>second item second subitem second sub-subitem</li>
+          <li>second item second subitem third sub-subitem</li>
+        </ul>
+      </li>
+      <!-- Closing </li> tag for the li that
+                  contains the third unordered list -->
+      <li>second item third subitem</li>
+    </ul>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>`,
+};
+
+export const MozillaExampleNestingOrderedLists = {
+  render: () => `<ul>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- Look, the closing </li> tag is not placed here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+    <!-- Here is the closing </li> tag -->
+  </li>
+  <li>third item</li>
+</ul>`,
+};