mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add StorybookJS

Browse source
This commit is contained in:
Michal 2025-04-04 11:51:33 +02:00
parent 1039a4788d
commit cbc1260553
116 changed files with 3560 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

38
stories/sectioning/address.stories.ts Normal file
View file

@ -0,0 +1,38 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Address",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return `<address
${Object.entries(args)
.map(([key, value]) => {
if (!value) {
return "";
}
return `${key}="${value}"`;
})
.join(" ")}
>${args.content}</address>`;
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<address>
You can contact author at
<a href="http://www.example.com/contact">www.example.com</a>.<br />
If you see any bugs, please
<a href="mailto:webmaster@example.com">contact webmaster</a>.<br />
You may also want to visit us:<br />
Mozilla Foundation<br />
331 E Evelyn Ave<br />
Mountain View, CA 94041<br />
USA
</address>`,
};

70
stories/sectioning/article.stories.ts Normal file
View file

@ -0,0 +1,70 @@
import { render } from "sass-embedded";
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Article",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return `<article>Article Content</article>`;
},
};
export const Default = {};
export const WithContent = {
render: (args) => {
return createHTMLElement("article", {
content: `<header><h1>Article Title</h1></header>
<p>This is the first paragraph of the article.</p>
<p>This is the second paragraph of the article.</p>
<footer><p>Author: John Doe</p></footer>`,
});
},
};
export const MozillaExample = {
render: (args) => `<article>
<h2>Jurassic Park</h2>
<section >
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section>
<h3>User reviews</h3>
<article>
<h4>Too scary!</h4>
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article>
<h4>Love the dinos!</h4>
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
`,
};

29
stories/sectioning/aside.stories.ts Normal file
View file

@ -0,0 +1,29 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Aside",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return `<aside>Aside content</aside>`;
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<article>
<p>
The Disney movie <cite>The Little Mermaid</cite> was first released to
theatres in 1989.
</p>
<aside>
<p>The movie earned $87 million during its initial release.</p>
</aside>
<p>More info about the movie…</p>
</article>
`,
};

15
stories/sectioning/body.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Body",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("body", args);
},
};
export const Default = {};

31
stories/sectioning/footer.stories.ts Normal file
View file

@ -0,0 +1,31 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Footer",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("footer", args);
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<h3>FIFA World Cup top goalscorers</h3>
<ol>
<li>Miroslav Klose, 16</li>
<li>Ronaldo Nazário, 15</li>
<li>Gerd Müller, 14</li>
</ol>
<footer>
<small>
Copyright © 2023 Football History Archives. All Rights Reserved.
</small>
</footer>
`,
};

15
stories/sectioning/h1.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H1",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h1", args);
},
};
export const Default = {};

15
stories/sectioning/h2.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H2",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h2", args);
},
};
export const Default = {};

15
stories/sectioning/h3.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H3",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h3", args);
},
};
export const Default = {};

15
stories/sectioning/h4.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H4",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h4", args);
},
};
export const Default = {};

15
stories/sectioning/h5.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H5",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h5", args);
},
};
export const Default = {};

15
stories/sectioning/h6.stories.ts Normal file
View file

@ -0,0 +1,15 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/H6",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("h6", args);
},
};
export const Default = {};

39
stories/sectioning/header.stories.ts Normal file
View file

@ -0,0 +1,39 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Header",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("header", args);
},
};
export const Default = {};
export const MozillaExamplePageHeader = {
render: (args) => `<header>
<h1>Main Page Title</h1>
<img src="https://picsum.photos/200/300" alt="MDN logo" />
</header>`,
};
export const MozillaExampleArticleHeader = {
render: (args) => `<article>
<header>
<h2>The Planet Earth</h2>
<p>
Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
Jane Smith
</p>
</header>
<p>
We live on a planet that's blue and green, with so many things still unseen.
</p>
<p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>
`,
};

30
stories/sectioning/hgroup.stories.ts Normal file
View file

@ -0,0 +1,30 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/HGroup",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("hgroup", args);
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<hgroup id="document-title">
<h1>HTML: Living Standard</h1>
<p>Last Updated 12 July 2022</p>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id="toc">
…
</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
`,
};

38
stories/sectioning/main.stories.ts Normal file
View file

@ -0,0 +1,38 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Main",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("main", args);
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>
These bright red apples are the most common found in many supermarkets.
</p>
<p>…</p>
<p>…</p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>…</p>
<p>…</p>
</article>
</main>`,
};

49
stories/sectioning/nav.stories.ts Normal file
View file

@ -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>`,
};

57
stories/sectioning/search.stories.ts Normal file
View file

@ -0,0 +1,57 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Search",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("search", args);
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<search>
<label>
Find and filter your query
<input type="search" id="query" />
</label>
<label>
<input type="checkbox" id="exact-only" />
Exact matches only
</label>
<section>
<h3>Results:</h3>
<ul id="results">
<!-- search result content -->
</ul>
<output id="no-results">
<!-- no results content -->
</output>
</section>
</search>
`,
};
export const MozillaExample2 = {
render: (args) => `<header>
<h1>Car rental agency</h1>
<search title="Website">...</search>
</header>
<main>
<h2>Cars available for rent</h2>
<search title="Cars">
<h3>Filter results</h3>
...
</search>
<article>
<!-- search result content -->
</article>
</main>
`,
};

28
stories/sectioning/section.stories.ts Normal file
View file

@ -0,0 +1,28 @@
import { createHTMLElement } from "../HTMLElement";
export default {
title: "Sectioning/Section",
tags: ["autodocs"],
args: {
content: "Content",
},
// Render the <html> element
render: (args) => {
return createHTMLElement("section", args);
},
};
export const Default = {};
export const MozillaExample = {
render: (args) => `<section>
<a href="#">Previous article</a>
<a href="#">Next article</a>
</section><section>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>
</section>
`,
};