mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
test(html-kitchen-sink): add new snapshots
This commit is contained in:
Yann Braga
parent
cd5905f161
commit
cb55ee6abb
@ -0,0 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Example/Button Large 1`] = `
|
||||
<button
|
||||
class="storybook-button storybook-button--large storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Example/Button Primary 1`] = `
|
||||
<button
|
||||
class="storybook-button storybook-button--medium storybook-button--primary"
|
||||
type="button"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Example/Button Secondary 1`] = `
|
||||
<button
|
||||
class="storybook-button storybook-button--medium storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Example/Button Small 1`] = `
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
`;
|
||||
@ -0,0 +1,129 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Example/Header Logged In 1`] = `
|
||||
<header>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div>
|
||||
|
||||
|
||||
<svg
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
||||
<h1>
|
||||
Acme
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Example/Header Logged Out 1`] = `
|
||||
<header>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div>
|
||||
|
||||
|
||||
<svg
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
||||
<h1>
|
||||
Acme
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--primary"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
@ -0,0 +1,417 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Example/Page Logged In 1`] = `
|
||||
<article>
|
||||
<header>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div>
|
||||
|
||||
|
||||
<svg
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
||||
<h1>
|
||||
Acme
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
|
||||
<h2>
|
||||
Pages in Storybook
|
||||
</h2>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
We recommend building UIs with a
|
||||
|
||||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
|
||||
<strong>
|
||||
component-driven
|
||||
</strong>
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
process starting with atomic components and ending with pages.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
||||
in Storybook:
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Get a guided tutorial on component-driven development at
|
||||
|
||||
<a
|
||||
href="https://www.learnstorybook.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
Learn Storybook
|
||||
|
||||
</a>
|
||||
|
||||
. Read more in the
|
||||
|
||||
<a
|
||||
href="https://storybook.js.org/docs"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
docs
|
||||
</a>
|
||||
|
||||
.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div
|
||||
class="tip-wrapper"
|
||||
>
|
||||
|
||||
|
||||
<span
|
||||
class="tip"
|
||||
>
|
||||
Tip
|
||||
</span>
|
||||
|
||||
Adjust the width of the canvas with the
|
||||
|
||||
<svg
|
||||
height="10"
|
||||
viewBox="0 0 12 12"
|
||||
width="10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
|
||||
01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
|
||||
010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
fill="#999"
|
||||
id="a"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
Viewports addon in the toolbar
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</article>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Example/Page Logged Out 1`] = `
|
||||
<article>
|
||||
<header>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div>
|
||||
|
||||
|
||||
<svg
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
|
||||
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
|
||||
<h1>
|
||||
Acme
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--secondary"
|
||||
type="button"
|
||||
/>
|
||||
<button
|
||||
class="storybook-button storybook-button--small storybook-button--primary"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
|
||||
<h2>
|
||||
Pages in Storybook
|
||||
</h2>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
We recommend building UIs with a
|
||||
|
||||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
|
||||
<strong>
|
||||
component-driven
|
||||
</strong>
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
process starting with atomic components and ending with pages.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
||||
in Storybook:
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Get a guided tutorial on component-driven development at
|
||||
|
||||
<a
|
||||
href="https://www.learnstorybook.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
Learn Storybook
|
||||
|
||||
</a>
|
||||
|
||||
. Read more in the
|
||||
|
||||
<a
|
||||
href="https://storybook.js.org/docs"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
docs
|
||||
</a>
|
||||
|
||||
.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div
|
||||
class="tip-wrapper"
|
||||
>
|
||||
|
||||
|
||||
<span
|
||||
class="tip"
|
||||
>
|
||||
Tip
|
||||
</span>
|
||||
|
||||
Adjust the width of the canvas with the
|
||||
|
||||
<svg
|
||||
height="10"
|
||||
viewBox="0 0 12 12"
|
||||
width="10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
|
||||
<g
|
||||
fill="none"
|
||||
fillrule="evenodd"
|
||||
>
|
||||
|
||||
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
|
||||
01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
|
||||
010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
fill="#999"
|
||||
id="a"
|
||||
/>
|
||||
|
||||
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
Viewports addon in the toolbar
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</article>
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user