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 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: () => `
- first item
-
second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
`,
};
export const MozillaExampleNestingUnorderedLists = {
render: () => `
- first item
-
second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
`,
};