mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
CSF: Use displayName param for nav display to preserve ID stability
This commit is contained in:
Michael Shilman
parent
062dc3ba4a
commit
061d781372
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
|
||||
exports[`Storyshots Addons|Actions story1 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
@ -8,7 +8,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
|
||||
exports[`Storyshots Addons|Actions story2 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
@ -16,7 +16,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Hello World 1`] = `
|
||||
exports[`Storyshots Addons|Actions story3 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
@ -24,7 +24,7 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
|
||||
exports[`Storyshots Addons|Actions story4 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
@ -32,36 +32,36 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
|
||||
exports[`Storyshots Addons|Actions story5 1`] = `
|
||||
|
||||
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Backgrounds story 1 1`] = `
|
||||
exports[`Storyshots Addons|Actions story6 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions story7 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions story8 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Backgrounds story1 1`] = `
|
||||
<span
|
||||
style="color: white"
|
||||
>
|
||||
@ -69,7 +69,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Backgrounds story 2 1`] = `
|
||||
exports[`Storyshots Addons|Backgrounds story2 1`] = `
|
||||
<span
|
||||
style="color: white"
|
||||
>
|
||||
@ -77,7 +77,7 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Centered button in center 1`] = `
|
||||
exports[`Storyshots Addons|Centered story1 1`] = `
|
||||
<div
|
||||
id="sb-addon-centered-wrapper"
|
||||
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
|
||||
@ -98,9 +98,29 @@ exports[`Storyshots Addons|Events Logger 1`] = `
|
||||
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
|
||||
exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs All knobs 1`] = `
|
||||
exports[`Storyshots Addons|Knobs DOM 1`] = `
|
||||
<p>
|
||||
John Doe
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs story3 1`] = `
|
||||
<p
|
||||
style="transition: color 0.5s ease-out; color: orangered;"
|
||||
>
|
||||
John Doe
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs story4 1`] = `
|
||||
<div
|
||||
style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
|
||||
>
|
||||
@ -147,29 +167,9 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
|
||||
<p
|
||||
style="transition: color 0.5s ease-out; color: orangered;"
|
||||
>
|
||||
John Doe
|
||||
</p>
|
||||
`;
|
||||
exports[`Storyshots Addons|Knobs story5 1`] = `<img src=x onerror="alert('XSS Attack')" >`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs DOM 1`] = `
|
||||
<p>
|
||||
John Doe
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs XSS safety 1`] = `<img src=x onerror="alert('XSS Attack')" >`;
|
||||
|
||||
exports[`Storyshots Addons|Notes Simple note 1`] = `
|
||||
exports[`Storyshots Addons|Notes story1 1`] = `
|
||||
<p>
|
||||
|
||||
|
||||
@ -185,8 +185,6 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Disabled 1`] = `
|
||||
<button
|
||||
disabled=""
|
||||
@ -195,27 +193,29 @@ exports[`Storyshots Addons|a11y Disabled 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
|
||||
<button
|
||||
style="color: black; background-color: brown;"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Label 1`] = `
|
||||
<button>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Demo Button 1`] = `
|
||||
exports[`Storyshots Addons|a11y story4 1`] = `
|
||||
<button
|
||||
style="color: black; background-color: brown;"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y story5 1`] = `<div />`;
|
||||
|
||||
exports[`Storyshots Demo button 1`] = `
|
||||
<button>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Demo Effect 1`] = `
|
||||
exports[`Storyshots Demo effect 1`] = `
|
||||
<button
|
||||
id="button"
|
||||
>
|
||||
@ -223,13 +223,13 @@ exports[`Storyshots Demo Effect 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Demo Heading 1`] = `
|
||||
exports[`Storyshots Demo heading 1`] = `
|
||||
<h1>
|
||||
Hello World
|
||||
</h1>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Demo Headings 1`] = `
|
||||
exports[`Storyshots Demo headings 1`] = `
|
||||
<section>
|
||||
<h1>
|
||||
Hello World
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import startCase from 'lodash/startCase';
|
||||
import { configure, addDecorator, addParameters } from '@storybook/react';
|
||||
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
@ -52,6 +53,7 @@ addParameters({
|
||||
theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
|
||||
storySort: (a, b) =>
|
||||
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
|
||||
displayName: key => startCase(key).toLowerCase(),
|
||||
},
|
||||
backgrounds: [
|
||||
{ name: 'storybook app', value: themes.light.appBg, default: true },
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
"global": "^4.3.2",
|
||||
"graphql": "^14.1.1",
|
||||
"jest-emotion": "^10.0.11",
|
||||
"lodash": "^4.17.11",
|
||||
"paths.macro": "^2.0.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons|Actions Action and method 1`] = `
|
||||
exports[`Storyshots Addons|Actions actionAndMethod 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -9,7 +9,7 @@ exports[`Storyshots Addons|Actions Action and method 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Action only 1`] = `
|
||||
exports[`Storyshots Addons|Actions actionOnly 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -18,7 +18,7 @@ exports[`Storyshots Addons|Actions Action only 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
|
||||
exports[`Storyshots Addons|Actions multipleActions 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -28,7 +28,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
|
||||
exports[`Storyshots Addons|Actions multipleActionsObject 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -38,7 +38,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
|
||||
exports[`Storyshots Addons|Backgrounds example1 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
>
|
||||
@ -46,7 +46,7 @@ exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
|
||||
exports[`Storyshots Addons|Backgrounds example2 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
>
|
||||
@ -54,7 +54,7 @@ exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Centered Button 1`] = `
|
||||
exports[`Storyshots Addons|Centered button 1`] = `
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
@ -86,7 +86,7 @@ exports[`Storyshots Addons|Centered Button 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
|
||||
exports[`Storyshots Addons|Contexts simpleCssTheming 1`] = `
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
@ -103,7 +103,13 @@ exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs All knobs 1`] = `
|
||||
exports[`Storyshots Addons|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs allKnobs 1`] = `
|
||||
<div
|
||||
style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
|
||||
>
|
||||
@ -136,13 +142,7 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Links Go to welcome 1`] = `
|
||||
exports[`Storyshots Addons|Links goToWelcome 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -151,7 +151,7 @@ exports[`Storyshots Addons|Links Go to welcome 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Notes Note with HTML 1`] = `
|
||||
exports[`Storyshots Addons|Notes noteWithHtml 1`] = `
|
||||
<p>
|
||||
<span>
|
||||
🤔😳😯😮
|
||||
@ -167,7 +167,7 @@ exports[`Storyshots Addons|Notes Note with HTML 1`] = `
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|Notes Simple note 1`] = `
|
||||
exports[`Storyshots Addons|Notes simpleNote 1`] = `
|
||||
<p>
|
||||
<strong>
|
||||
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
|
||||
@ -175,7 +175,7 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
exports[`Storyshots Button withSomeEmoji 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -189,7 +189,7 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
exports[`Storyshots Button withText 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
onclick={[Function]}
|
||||
@ -198,7 +198,7 @@ exports[`Storyshots Button with text 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
exports[`Storyshots Welcome toStorybook 1`] = `
|
||||
<article
|
||||
style={
|
||||
Object {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon|Actions Action only 1`] = `
|
||||
exports[`Storyshots Addon|Actions actionOnly 1`] = `
|
||||
<div
|
||||
data-is="my-button"
|
||||
id="root"
|
||||
@ -14,7 +14,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Actions Multiple actions 1`] = `
|
||||
exports[`Storyshots Addon|Actions multipleActions 1`] = `
|
||||
<div
|
||||
data-is="my-button"
|
||||
id="root"
|
||||
@ -28,7 +28,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Backgrounds story 1 1`] = `
|
||||
exports[`Storyshots Addon|Backgrounds story1 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -44,7 +44,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Backgrounds story 2 1`] = `
|
||||
exports[`Storyshots Addon|Backgrounds story2 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -60,7 +60,18 @@ exports[`Storyshots Addon|Backgrounds story 2 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs All knobs 1`] = `
|
||||
exports[`Storyshots Addon|Knobs Simple 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
>
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs allKnobs 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -115,18 +126,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs Simple 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
>
|
||||
<div>
|
||||
I am John Doe and I'm 44 years old.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs XSS safety 1`] = `
|
||||
exports[`Storyshots Addon|Knobs xssSafety 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -137,7 +137,7 @@ exports[`Storyshots Addon|Knobs XSS safety 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Links Go to welcome 1`] = `
|
||||
exports[`Storyshots Addon|Links goToWelcome 1`] = `
|
||||
<div
|
||||
data-is="my-button"
|
||||
id="root"
|
||||
@ -151,7 +151,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -168,7 +168,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
exports[`Storyshots Addon|Notes simpleNote 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -181,18 +181,18 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
exports[`Storyshots Core|Parameters passedToStory 1`] = `
|
||||
<div
|
||||
data-is="parameters"
|
||||
id="root"
|
||||
>
|
||||
<div>
|
||||
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
|
||||
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story built as string 1`] = `
|
||||
exports[`Storyshots Story|How to create a story builtAsString 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -205,7 +205,7 @@ exports[`Storyshots Story|How to create a story built as string 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story built from raw import 1`] = `
|
||||
exports[`Storyshots Story|How to create a story builtFromRawImport 1`] = `
|
||||
<div
|
||||
data-is="simpletest"
|
||||
id="root"
|
||||
@ -216,7 +216,7 @@ exports[`Storyshots Story|How to create a story built from raw import 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story built from tags and template 1`] = `
|
||||
exports[`Storyshots Story|How to create a story builtFromTagsAndTemplate 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -231,7 +231,7 @@ exports[`Storyshots Story|How to create a story built from tags and template 1`]
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story built from the precompilation 1`] = `
|
||||
exports[`Storyshots Story|How to create a story builtFromThePrecompilation 1`] = `
|
||||
<div
|
||||
data-is="anothertest"
|
||||
id="root"
|
||||
@ -242,7 +242,7 @@ exports[`Storyshots Story|How to create a story built from the precompilation 1`
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story built with tag 1`] = `
|
||||
exports[`Storyshots Story|How to create a story builtWithTag 1`] = `
|
||||
<div
|
||||
data-is="test"
|
||||
id="root"
|
||||
@ -253,7 +253,7 @@ exports[`Storyshots Story|How to create a story built with tag 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
|
||||
exports[`Storyshots Story|How to create a story tagsTemplateAndTagConstructorAtOnce 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
@ -269,7 +269,7 @@ exports[`Storyshots Story|How to create a story tags, template and tagConstructo
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
|
||||
exports[`Storyshots Story|How to create a story theMountInstructionIsNotNecessary 1`] = `
|
||||
<div
|
||||
data-is="anothertest"
|
||||
id="root"
|
||||
@ -280,7 +280,7 @@ exports[`Storyshots Story|How to create a story the mount instruction is not nec
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = `
|
||||
exports[`Storyshots Story|How to create a story theOptsValueIsNotNecessary 1`] = `
|
||||
<div
|
||||
data-is="anothertest"
|
||||
id="root"
|
||||
@ -349,7 +349,7 @@ exports[`Storyshots Story|Nest tags Matriochka 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Story|Nest tags Three tags 1`] = `
|
||||
exports[`Storyshots Story|Nest tags threeTags 1`] = `
|
||||
<div
|
||||
data-is="root"
|
||||
id="root"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon|Actions Action on component method 1`] = `
|
||||
exports[`Storyshots Addon|Actions actionOnComponentMethod 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -19,7 +19,7 @@ exports[`Storyshots Addon|Actions Action on component method 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Actions Action on view method 1`] = `
|
||||
exports[`Storyshots Addon|Actions actionOnViewMethod 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -61,7 +61,7 @@ exports[`Storyshots Addon|Actions Action on view method 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Backgrounds story 1 1`] = `
|
||||
exports[`Storyshots Addon|Backgrounds story1 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -103,7 +103,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Centered Rounded 1`] = `
|
||||
exports[`Storyshots Addon|Centered rounded 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -122,7 +122,7 @@ exports[`Storyshots Addon|Centered Rounded 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Centered with action 1`] = `
|
||||
exports[`Storyshots Addon|Centered withAction 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -155,7 +155,7 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Links Go to welcome view 1`] = `
|
||||
exports[`Storyshots Addon|Links goToWelcomeView 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -183,7 +183,7 @@ exports[`Storyshots Addon|Links Go to welcome view 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -225,7 +225,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
exports[`Storyshots Addon|Notes simpleNote 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -267,7 +267,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Rounded 1`] = `
|
||||
exports[`Storyshots Button rounded 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
@ -309,7 +309,7 @@ exports[`Storyshots Button Rounded 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Square 1`] = `
|
||||
exports[`Storyshots Button square 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon|Actions Action and method 1`] = `
|
||||
exports[`Storyshots Addon|Actions actionAndMethod 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -9,7 +9,7 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Actions Action only 1`] = `
|
||||
exports[`Storyshots Addon|Actions actionOnly 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -18,7 +18,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Actions Multiple actions 1`] = `
|
||||
exports[`Storyshots Addon|Actions multipleActions 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -27,7 +27,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
|
||||
exports[`Storyshots Addon|Actions multipleActionsObject 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -36,19 +36,19 @@ exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Backgrounds story 1 1`] = `
|
||||
exports[`Storyshots Addon|Backgrounds story1 1`] = `
|
||||
<button>
|
||||
You should be able to switch backgrounds for this story
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Backgrounds story 2 1`] = `
|
||||
exports[`Storyshots Addon|Backgrounds story2 1`] = `
|
||||
<button>
|
||||
This one too!
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Centered Rounded 1`] = `
|
||||
exports[`Storyshots Addon|Centered rounded 1`] = `
|
||||
<div
|
||||
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
|
||||
>
|
||||
@ -77,7 +77,7 @@ exports[`Storyshots Addon|Contexts Languages 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
|
||||
exports[`Storyshots Addon|Contexts simpleCssTheming 1`] = `
|
||||
<div
|
||||
style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
|
||||
>
|
||||
@ -87,7 +87,13 @@ exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs All knobs 1`] = `
|
||||
exports[`Storyshots Addon|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 40 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs allKnobs 1`] = `
|
||||
<div
|
||||
style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
|
||||
>
|
||||
@ -125,19 +131,13 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs Simple 1`] = `
|
||||
<div>
|
||||
I am John Doe and I'm 40 years old.
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Knobs XSS safety 1`] = `
|
||||
exports[`Storyshots Addon|Knobs xssSafety 1`] = `
|
||||
<div>
|
||||
<img src=x onerror="alert('XSS Attack')" >
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Links Go to welcome 1`] = `
|
||||
exports[`Storyshots Addon|Links goToWelcome 1`] = `
|
||||
<button
|
||||
class="button rounded"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -146,7 +146,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
|
||||
<p>
|
||||
🤔😳😯😮
|
||||
<br />
|
||||
@ -156,7 +156,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
exports[`Storyshots Addon|Notes simpleNote 1`] = `
|
||||
<p>
|
||||
<strong>
|
||||
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
|
||||
@ -164,7 +164,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots App App 1`] = `
|
||||
exports[`Storyshots App app 1`] = `
|
||||
<div
|
||||
id="app"
|
||||
>
|
||||
@ -260,7 +260,7 @@ exports[`Storyshots App App 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Rounded 1`] = `
|
||||
exports[`Storyshots Button rounded 1`] = `
|
||||
<button
|
||||
class="button rounded"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -269,7 +269,7 @@ exports[`Storyshots Button Rounded 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Square 1`] = `
|
||||
exports[`Storyshots Button square 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -278,13 +278,13 @@ exports[`Storyshots Button Square 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
exports[`Storyshots Core|Parameters passedToStory 1`] = `
|
||||
<div>
|
||||
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
|
||||
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core|Template string only 1`] = `
|
||||
exports[`Storyshots Core|Template stringOnly 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -293,7 +293,7 @@ exports[`Storyshots Core|Template string only 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
|
||||
exports[`Storyshots Custom|Decorator for Vue render 1`] = `
|
||||
<div
|
||||
style="border: medium solid blue;"
|
||||
>
|
||||
@ -310,7 +310,7 @@ exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
|
||||
exports[`Storyshots Custom|Decorator for Vue template 1`] = `
|
||||
<div
|
||||
style="border: medium solid blue;"
|
||||
>
|
||||
@ -327,7 +327,7 @@ exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
|
||||
exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
|
||||
<div
|
||||
style="border: medium solid blue;"
|
||||
>
|
||||
@ -336,10 +336,10 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
|
||||
>
|
||||
<pre>
|
||||
{
|
||||
"id": "custom-decorator-for-vue--with-data",
|
||||
"id": "custom-decorator-for-vue--withdata",
|
||||
"kind": "Custom|Decorator for Vue",
|
||||
"name": "With Data",
|
||||
"story": "With Data",
|
||||
"name": "withData",
|
||||
"story": "withData",
|
||||
"customContext": 52,
|
||||
"parameters": {
|
||||
"options": {
|
||||
@ -351,6 +351,7 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
|
||||
},
|
||||
"globalParameter": "globalParameter",
|
||||
"framework": "vue",
|
||||
"displayName": "With Data",
|
||||
"customParameter": 42
|
||||
}
|
||||
}
|
||||
@ -368,25 +369,7 @@ exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
|
||||
<div>
|
||||
renders a div with some text in it..
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
|
||||
<div>
|
||||
<h1>
|
||||
A template
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
rendered in vue in storybook
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue preRegisteredComponent 1`] = `
|
||||
<p>
|
||||
<em>
|
||||
This component was pre-registered in .storybook/config.js
|
||||
@ -402,7 +385,13 @@ exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`]
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
|
||||
<div>
|
||||
renders a div with some text in it..
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue renderComponent 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: pink; border-color: pink;"
|
||||
@ -411,7 +400,19 @@ exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
|
||||
<div>
|
||||
<h1>
|
||||
A template
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
rendered in vue in storybook
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue templateComponent 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -420,7 +421,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue templateMethods 1`] = `
|
||||
<p>
|
||||
<em>
|
||||
Clicking the button will navigate to another story using the 'addon-links'
|
||||
@ -436,7 +437,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
|
||||
</p>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue vuexActions 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -445,7 +446,7 @@ exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
|
||||
exports[`Storyshots Custom|Method for rendering Vue whateverYouWant 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
@ -454,7 +455,7 @@ exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome Welcome 1`] = `
|
||||
exports[`Storyshots Welcome welcome 1`] = `
|
||||
<div
|
||||
class="main"
|
||||
>
|
||||
|
||||
@ -417,7 +417,10 @@ export default function start(render, { decorateStory } = {}) {
|
||||
`${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
|
||||
}
|
||||
const decoratorParams = decorators ? { decorators } : null;
|
||||
kind.add(name || displayName(key), storyFn, { ...parameters, ...decoratorParams });
|
||||
const displayNameParams = {
|
||||
displayName: name || displayName(key),
|
||||
};
|
||||
kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -135,6 +135,9 @@ const SidebarItem = ({
|
||||
iconName = 'folder';
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
const displayName = (props.parameters && props.parameters.displayName) || name;
|
||||
|
||||
return (
|
||||
<Item
|
||||
isSelected={isSelected}
|
||||
@ -143,7 +146,7 @@ const SidebarItem = ({
|
||||
>
|
||||
<Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
|
||||
<Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
|
||||
<span>{name}</span>
|
||||
<span>{displayName}</span>
|
||||
</Item>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user