GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

FIX snapshots

Browse Source
This commit is contained in:
Norbert de Langen 2018-12-29 16:15:33 +01:00
parent 1eef24f94f
commit 0b70afd1df
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
17 changed files with 676 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
addons/links/src/react/components/__snapshots__/link.test.js.snap
View File

@ -1,7 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LinkTo render should render a link 1`] = `
<RoutedLink
<Link
cancel={true}
href="http://localhost/?id=foo-bar"
onClick={[Function]}
/>

14
examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
View File

@ -13,17 +13,3 @@ exports[`Storyshots Custom|Pipes Simple 1`] = `
</storybook-name>
</storybook-dynamic-app-root>
`;
exports[`Storyshots Custom|Pipes With Knobs 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<storybook-name>
<h1>
CustomPipe: foobar
</h1>
</storybook-name>
</storybook-dynamic-app-root>
`;

17
examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
View File

@ -16,20 +16,3 @@ exports[`Storyshots Custom|Providers Simple 1`] = `
</storybook-simple-service-component>
</storybook-dynamic-app-root>
`;
exports[`Storyshots Custom|Providers With knobs 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<storybook-simple-service-component>
<p>
Dynamic knob:
</p>
<ul>
</ul>
</storybook-simple-service-component>
</storybook-dynamic-app-root>
`;

21
examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
View File

@ -20,24 +20,3 @@ exports[`Storyshots Custom|Style Default 1`] = `
</ng-component>
</storybook-dynamic-app-root>
`;
exports[`Storyshots Custom|Style With Knobs 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<ng-component>
<storybook-button-component
_nghost-c12=""
ng-reflect-text="Button with custom styles"
>
<button
_ngcontent-c12=""
>
Button with custom styles
</button>
</storybook-button-component>
</ng-component>
</storybook-dynamic-app-root>
`;

31
examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
View File

@ -30,34 +30,3 @@ exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = `
</storybook-di-component>
</storybook-dynamic-app-root>
`;
exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<storybook-di-component>
<div>
<div>
All dependencies are defined: true
</div>
<div>
Title: Component dependencies
</div>
<div>
Injector: function Injector_(view, elDef) {
this.view = view;
this.elDef = elDef;
}
</div>
<div>
ElementRef: {"nativeElement":{}}
</div>
<div>
TestToken: 123
</div>
</div>
</storybook-di-component>
</storybook-dynamic-app-root>
`;

7
examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
View File

@ -445,12 +445,7 @@ exports[`Storyshots Button with some emoji 1`] = `
style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
type="button"
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
😀 😎 👍 💯
</button>
`;

144
examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
View File

@ -1,5 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|A11y/BaseButton Default 1`] = `
<button
type="button"
/>
`;
exports[`Storyshots Addons|A11y/BaseButton Disabled 1`] = `
<button
disabled=""
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|A11y/BaseButton Invalid contrast 1`] = `
<button
style="color:black;background-color:black"
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|A11y/BaseButton Label 1`] = `
<button
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|A11y/BaseButton delayed render 1`] = `<div />`;
exports[`Storyshots Addons|A11y/Button Content 1`] = `
<button
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
@ -46,37 +80,19 @@ exports[`Storyshots Addons|A11y/Button Label 1`] = `
</button>
`;
exports[`Storyshots Addons|A11y/Form With label 1`] = `
<div>
<label
for="1"
style="padding:0 6px"
>
Testing the a11y addon
</label>
<input
id="1"
/>
</div>
`;
exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
<div>
<input
id="1"
placeholder="Testing the a11y addon"
/>
</div>
`;
exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
<div>
<input />
</div>
<label
class="css-1n4tt73-Wrapper evz11jd0"
>
<input
class="css-yli1rb-Input e1iqivjq0"
/>
</label>
`;
exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
<img
class="css-1suhias-Img eipkw3i0"
role="presentation"
src="http://placehold.it/350x150"
/>
@ -85,78 +101,34 @@ exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
exports[`Storyshots Addons|A11y/Image With alt 1`] = `
<img
alt="Testing the a11y addon"
src="http://placehold.it/350x150"
/>
`;
exports[`Storyshots Addons|A11y/Image Without alt 1`] = `
<img
class="css-1suhias-Img eipkw3i0"
src="http://placehold.it/350x150"
/>
`;
exports[`Storyshots Addons|A11y/Typography Correct 1`] = `
Array [
<h1>
Testing the a11y addon
</h1>,
<p>
<header
class="css-yfonvn-Container e14vg0o61"
>
<h1
class="css-4bak20-getElement e14vg0o60"
>
<span>
Testing the a11y addon
</span>
</h1>
</header>,
<p
class="css-cn4ebp-Text e17gaumq0"
>
Testing the a11y addon
</p>,
<a
class="css-1a69rwi-A ehzniak0"
href="javascript:void 0"
>
Testing the a11y addon...
</a>,
]
`;
exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `<h2 />`;
exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = `
<a
href="javascript:void 0"
/>
`;
exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `<p />`;
exports[`Storyshots Addons|A11y/Typography Link without href 1`] = `
<a>
Testing the a11y addon...
</a>
`;
exports[`Storyshots Addons|a11y Default 1`] = `
<button
type="button"
/>
`;
exports[`Storyshots Addons|a11y Disabled 1`] = `
<button
disabled=""
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
<button
style="color:black;background-color:black"
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Label 1`] = `
<button
type="button"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y delayed render 1`] = `<div />`;

72
examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
View File

@ -3,102 +3,102 @@
exports[`Storyshots Addons|Actions All types 1`] = `
Array [
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Array
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Boolean
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Empty Object
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
File
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Function A
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Bound Function B
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Infinity
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
-Infinity
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
NaN
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
null
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Number
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Multiple
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Plain Object
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Object (depth: 2)
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
RegExp
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
String
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Symbol
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
SyntheticEvent
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
undefined
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Window
</button>,
@ -107,7 +107,7 @@ Array [
exports[`Storyshots Addons|Actions Basic example 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Hello World
</button>
@ -115,7 +115,7 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
exports[`Storyshots Addons|Actions Circular Payload 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Circular Payload
</button>
@ -123,7 +123,7 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Moving away from this story will persist the action logger
</button>
@ -131,7 +131,7 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
exports[`Storyshots Addons|Actions Decorated action 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Native Event
</button>
@ -139,7 +139,7 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Moving away from this story will persist the action logger
</button>
@ -147,7 +147,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Native Event
</button>
@ -156,12 +156,12 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
Array [
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
False
</button>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
True
</button>,
@ -170,7 +170,7 @@ Array [
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Moving away from this story will persist the action logger
</button>
@ -178,7 +178,7 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Hello World
</button>
@ -186,7 +186,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Hello World
</button>
@ -194,7 +194,7 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Moving away from this story will persist the action logger
</button>
@ -206,7 +206,7 @@ Array [
Moving away from this story will persist the action logger
</p>,
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Object (configured clearOnStoryChange: false)
</button>,
@ -215,7 +215,7 @@ Array [
exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Delete
</button>
@ -223,7 +223,7 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Object (configured depth: 2)
</button>
@ -231,7 +231,7 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Native Event
</button>

6
examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
View File

@ -178,9 +178,3 @@ exports[`Storyshots Addons|Knobs.withKnobs using options accepts options 1`] = `
&lt;h1&gt;Hello&lt;/h1&gt;
</div>
`;
exports[`Storyshots Addons|Knobs.withKnobsOptions displays HTML code 1`] = `
<div>
&lt;h1&gt;Hello&lt;/h1&gt;
</div>
`;

4
examples/official-storybook/stories/__snapshots__/core.stories.storyshot
View File

@ -21,7 +21,7 @@ exports[`Storyshots Core|Parameters adds data to storyFn 1`] = `
"name": "Custom Storybook",
"hierarchySeparator": {},
"hierarchyRootSeparator": "|",
"selectedAddonPanel": "storybook/actions/panel",
"selectedPanel": "storybook/actions/panel",
"selectedPanel": "storybook/background/panel",
"panel": "storybook/actions/panel",
"showPanel": false
@ -198,7 +198,7 @@ Array [
"name": "Custom Storybook",
"hierarchySeparator": {},
"hierarchyRootSeparator": "|",
"selectedAddonPanel": "storybook/actions/panel",
"selectedPanel": "storybook/actions/panel",
"selectedPanel": "storybook/background/panel",
"panel": "storybook/actions/panel",
"showPanel": false

2
examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View File

@ -4,7 +4,7 @@ exports[`Storyshots Core|Errors story errors 1`] = `null`;
exports[`Storyshots Core|Events Force re-render 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
Clicked: 0
</button>

270
lib/components/src/form/__snapshots__/form.stories.storyshot
View File

@ -8,7 +8,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-h3sobf-Button e1lk8yn73"
class="css-h3sobf-Button e1iqivjq3"
>
click this button
</button>
@ -17,7 +17,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-f5ome0-Button e1lk8yn73"
class="css-f5ome0-Button e1iqivjq3"
>
click this button
</button>
@ -26,7 +26,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-4ds05y-Button e1lk8yn73"
class="css-4ds05y-Button e1iqivjq3"
>
click this button
</button>
@ -42,7 +42,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-1pzmux7-Button e1lk8yn73"
class="css-1pzmux7-Button e1iqivjq3"
>
click this button
</button>
@ -51,7 +51,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-1hyuh0l-Button e1lk8yn73"
class="css-1hyuh0l-Button e1iqivjq3"
>
click this button
</button>
@ -60,7 +60,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-4ds05y-Button e1lk8yn73"
class="css-4ds05y-Button e1iqivjq3"
>
click this button
</button>
@ -76,7 +76,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-wvpv7w-Button e1lk8yn73"
class="css-wvpv7w-Button e1iqivjq3"
>
click this button
</button>
@ -85,7 +85,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-1g2cn2b-Button e1lk8yn73"
class="css-1g2cn2b-Button e1iqivjq3"
>
click this button
</button>
@ -94,7 +94,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-c7m30k-Button e1lk8yn73"
class="css-c7m30k-Button e1iqivjq3"
>
click this button
</button>
@ -103,7 +103,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<button
class="css-4ds05y-Button e1lk8yn73"
class="css-4ds05y-Button e1iqivjq3"
>
click this button
</button>
@ -111,12 +111,207 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Button with knobs 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
exports[`Storyshots Components|Form/Field field 1`] = `
<label
class="css-1n4tt73-Wrapper evz11jd0"
>
💌 love letter to storybook team
</button>
<span
class="css-1e2pl7n-Label evz11jd1"
>
<span>
label
</span>
</span>
<select
class="css-bsjfx3-Select e1iqivjq1"
size="1"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>
</label>
`;
exports[`Storyshots Components|Form/Input alignment 1`] = `
<div
class="css-1mvfu07-Container ecq4n7c0"
>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-szkw5p-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-1y2wvrw-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-16q8oyb-Input e1iqivjq0"
value="text"
/>
</div>
</div>
`;
exports[`Storyshots Components|Form/Input sizes 1`] = `
<div
class="css-1mvfu07-Container ecq4n7c0"
>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-yli1rb-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-1isdddd-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-16q8oyb-Input e1iqivjq0"
value="text"
/>
</div>
</div>
`;
exports[`Storyshots Components|Form/Input validations 1`] = `
<div
class="css-1mvfu07-Container ecq4n7c0"
>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-1ixcpjc-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-7fui90-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-13lwlbq-Input e1iqivjq0"
value="text"
/>
</div>
<div
class="css-1nttea4-Flexed e1cifqpq0"
>
<input
class="css-16q8oyb-Input e1iqivjq0"
value="text"
/>
</div>
</div>
`;
exports[`Storyshots Components|Form/Select alignment 1`] = `
<div
class="css-1mvfu07-Container ecq4n7c0"
>
<select
class="css-1sgistt-Select e1iqivjq1"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>
<select
class="css-fxcaf9-Select e1iqivjq1"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>
<select
class="css-170lhp0-Select e1iqivjq1"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>
</div>
`;
exports[`Storyshots Components|Form/Select sizes 1`] = `
@ -127,7 +322,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<select
class="css-bsjfx3-Select e1lk8yn71"
class="css-bsjfx3-Select e1iqivjq1"
>
<option
value="val1"
@ -151,7 +346,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<select
class="css-1mq6ser-Select e1lk8yn71"
class="css-1mq6ser-Select e1iqivjq1"
>
<option
value="val1"
@ -175,7 +370,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<select
class="css-170lhp0-Select e1lk8yn71"
class="css-170lhp0-Select e1iqivjq1"
>
<option
value="val1"
@ -203,7 +398,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
class="css-1mvfu07-Container ecq4n7c0"
>
<select
class="css-hxwf21-Select e1lk8yn71"
class="css-hxwf21-Select e1iqivjq1"
>
<option
value="val1"
@ -223,7 +418,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
</option>
</select>
<select
class="css-1pbuugy-Select e1lk8yn71"
class="css-1pbuugy-Select e1iqivjq1"
>
<option
value="val1"
@ -243,7 +438,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
</option>
</select>
<select
class="css-p4579u-Select e1lk8yn71"
class="css-p4579u-Select e1iqivjq1"
>
<option
value="val1"
@ -263,7 +458,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
</option>
</select>
<select
class="css-170lhp0-Select e1lk8yn71"
class="css-170lhp0-Select e1iqivjq1"
>
<option
value="val1"
@ -294,7 +489,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
>
<textarea
align="end"
class="css-ok7c03-Textarea e1lk8yn72"
class="css-ok7c03-Textarea e1iqivjq2"
style="height:0"
>
text
@ -305,7 +500,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
>
<textarea
align="center"
class="css-djty3k-Textarea e1lk8yn72"
class="css-djty3k-Textarea e1iqivjq2"
style="height:0"
>
text
@ -316,7 +511,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
>
<textarea
align="start"
class="css-pul98m-Textarea e1lk8yn72"
class="css-pul98m-Textarea e1iqivjq2"
style="height:0"
>
text
@ -333,7 +528,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-fpmx1h-Textarea e1lk8yn72"
class="css-fpmx1h-Textarea e1iqivjq2"
style="height:0"
>
text
@ -343,7 +538,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-5rqdpj-Textarea e1lk8yn72"
class="css-5rqdpj-Textarea e1iqivjq2"
style="height:0"
>
text
@ -353,7 +548,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-pul98m-Textarea e1lk8yn72"
class="css-pul98m-Textarea e1iqivjq2"
style="height:0"
>
text
@ -370,7 +565,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-vcj5vs-Textarea e1lk8yn72"
class="css-vcj5vs-Textarea e1iqivjq2"
style="height:0"
valid="error"
>
@ -381,7 +576,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-1orv7tn-Textarea e1lk8yn72"
class="css-1orv7tn-Textarea e1iqivjq2"
style="height:0"
valid="warn"
>
@ -392,7 +587,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-1gb1gub-Textarea e1lk8yn72"
class="css-1gb1gub-Textarea e1iqivjq2"
style="height:0"
valid="valid"
>
@ -403,7 +598,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
class="css-1nttea4-Flexed e1cifqpq0"
>
<textarea
class="css-pul98m-Textarea e1lk8yn72"
class="css-pul98m-Textarea e1iqivjq2"
style="height:0"
>
text
@ -411,14 +606,3 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
</div>
</div>
`;
exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = `
<textarea
class="css-pul98m-Textarea e1lk8yn72"
style="height:0"
>
OMG, multiple lines!
That is amazing
</textarea>
`;

2
lib/components/src/preview/__snapshots__/preview.stories.storyshot
View File

@ -9,7 +9,7 @@ Array [
class="css-1g91tai-Side e18hjm8i2"
>
<div
class="css-1jsscdj-TabBar e1lzzkxx1"
class="css-1p9vzbx-TabBar e1lzzkxx1"
>
<a
class="css-1e55byq-UnstyledLink e15lz5d2"

476
lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
View File

@ -8,10 +8,10 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
class="css-z5a1p4-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
class="css-l8emx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -61,30 +61,68 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
<div
class="css-1eu9ihj-Content e1lzzkxx5"
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
id="test3"
title="Tab with scroll!"
/>
>
<div
style="background:#000000;height:30.8px"
/>
<div
style="background:#111111;height:31.3px"
/>
<div
style="background:#222222;height:32.1px"
/>
<div
style="background:#333333;height:33.4px"
/>
<div
style="background:#444444;height:35.5px"
/>
<div
style="background:#555555;height:38.9px"
/>
<div
style="background:#666666;height:44.4px"
/>
<div
style="background:#777777;height:53.3px"
/>
<div
style="background:#888888;height:67.7px"
/>
<div
style="background:#999999;height:91px"
/>
<div
style="background:#aaaaaa;height:128.7px"
/>
<div
style="background:#bbbbbb;height:189.7px"
/>
<div
style="background:#cccccc;height:288.4px"
/>
<div
style="background:#dddddd;height:448.1px"
/>
<div
style="background:#eeeeee;height:706.5px"
/>
</div>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
@ -98,10 +136,10 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
class="css-z5a1p4-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
class="css-l8emx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -153,76 +191,20 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
<div
id="test3"
title="Tab with scroll!"
/>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
</div>
</div>
</div>
`;
exports[`Storyshots Components|Tabs stateful - static 1`] = `
<div
style="height:calc(100vh - 20px)"
>
<div
class="css-z5a1p4-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
role="tablist"
>
<button
class="css-1ghc1c-TabButton e1lzzkxx4"
role="tab"
type="button"
>
With a function
</button>
<button
class="css-1jt6nsk-TabButton e1lzzkxx4"
role="tab"
type="button"
>
With markup
</button>
CONTENT 1
</div>
</div>
<div
class="css-1eu9ihj-Content e1lzzkxx5"
>
<div
id="test1"
title="With a function"
/>
<div
id="test2"
title="With markup"
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
test2 is always active (but visually hidden)
CONTENT 6
</div>
</div>
</div>
@ -238,10 +220,10 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
class="css-rpkhur-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
class="css-l8emx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -291,30 +273,68 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
<div
class="css-1od9ihz-Content e1lzzkxx5"
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
id="test3"
title="Tab with scroll!"
/>
>
<div
style="background:#000000;height:30.8px"
/>
<div
style="background:#111111;height:31.3px"
/>
<div
style="background:#222222;height:32.1px"
/>
<div
style="background:#333333;height:33.4px"
/>
<div
style="background:#444444;height:35.5px"
/>
<div
style="background:#555555;height:38.9px"
/>
<div
style="background:#666666;height:44.4px"
/>
<div
style="background:#777777;height:53.3px"
/>
<div
style="background:#888888;height:67.7px"
/>
<div
style="background:#999999;height:91px"
/>
<div
style="background:#aaaaaa;height:128.7px"
/>
<div
style="background:#bbbbbb;height:189.7px"
/>
<div
style="background:#cccccc;height:288.4px"
/>
<div
style="background:#dddddd;height:448.1px"
/>
<div
style="background:#eeeeee;height:706.5px"
/>
</div>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
@ -328,10 +348,10 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
class="css-1nivq3t-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
class="css-l8emx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -381,30 +401,68 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
<div
class="css-1eu9ihj-Content e1lzzkxx5"
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
id="test3"
title="Tab with scroll!"
/>
>
<div
style="background:#000000;height:30.8px"
/>
<div
style="background:#111111;height:31.3px"
/>
<div
style="background:#222222;height:32.1px"
/>
<div
style="background:#333333;height:33.4px"
/>
<div
style="background:#444444;height:35.5px"
/>
<div
style="background:#555555;height:38.9px"
/>
<div
style="background:#666666;height:44.4px"
/>
<div
style="background:#777777;height:53.3px"
/>
<div
style="background:#888888;height:67.7px"
/>
<div
style="background:#999999;height:91px"
/>
<div
style="background:#aaaaaa;height:128.7px"
/>
<div
style="background:#bbbbbb;height:189.7px"
/>
<div
style="background:#cccccc;height:288.4px"
/>
<div
style="background:#dddddd;height:448.1px"
/>
<div
style="background:#eeeeee;height:706.5px"
/>
</div>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
@ -430,10 +488,10 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
class="css-1nivq3t-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1jsscdj-TabBar e1lzzkxx1"
class="css-1p9vzbx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -483,30 +541,68 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
<div
class="css-1eu9ihj-Content e1lzzkxx5"
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
id="test3"
title="Tab with scroll!"
/>
>
<div
style="background:#000000;height:30.8px"
/>
<div
style="background:#111111;height:31.3px"
/>
<div
style="background:#222222;height:32.1px"
/>
<div
style="background:#333333;height:33.4px"
/>
<div
style="background:#444444;height:35.5px"
/>
<div
style="background:#555555;height:38.9px"
/>
<div
style="background:#666666;height:44.4px"
/>
<div
style="background:#777777;height:53.3px"
/>
<div
style="background:#888888;height:67.7px"
/>
<div
style="background:#999999;height:91px"
/>
<div
style="background:#aaaaaa;height:128.7px"
/>
<div
style="background:#bbbbbb;height:189.7px"
/>
<div
style="background:#cccccc;height:288.4px"
/>
<div
style="background:#dddddd;height:448.1px"
/>
<div
style="background:#eeeeee;height:706.5px"
/>
</div>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
@ -520,10 +616,10 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = `
class="css-z5a1p4-Wrapper e1lzzkxx0"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-1qbrtvg-TabBar e1lzzkxx1"
class="css-l8emx-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -587,30 +683,68 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = `
<div
class="css-1eu9ihj-Content e1lzzkxx5"
>
<div
id="test1"
title="Tab title #1"
/>
<div
id="test2"
title="Tab title #2"
/>
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
id="test3"
title="Tab with scroll!"
/>
>
<div
style="background:#000000;height:30.8px"
/>
<div
style="background:#111111;height:31.3px"
/>
<div
style="background:#222222;height:32.1px"
/>
<div
style="background:#333333;height:33.4px"
/>
<div
style="background:#444444;height:35.5px"
/>
<div
style="background:#555555;height:38.9px"
/>
<div
style="background:#666666;height:44.4px"
/>
<div
style="background:#777777;height:53.3px"
/>
<div
style="background:#888888;height:67.7px"
/>
<div
style="background:#999999;height:91px"
/>
<div
style="background:#aaaaaa;height:128.7px"
/>
<div
style="background:#bbbbbb;height:189.7px"
/>
<div
style="background:#cccccc;height:288.4px"
/>
<div
style="background:#dddddd;height:448.1px"
/>
<div
style="background:#eeeeee;height:706.5px"
/>
</div>
<div
id="test4"
title="Tab title #4"
/>
<div
id="test5"
title="Tab title #5"
/>
<div
id="test6"
title="Tab title #6"
/>
class="css-ovi531-VisuallyHidden e1lzzkxx6"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>

2
lib/components/src/typography/heading/__snapshots__/heading.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Heading types 1`] = `
exports[`Storyshots Components|Typography/Heading types 1`] = `
<div>
<div
class="css-ys6tvt-Holder eu04e0w0"

43
lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
View File

@ -130,7 +130,16 @@ exports[`Storyshots UI|Mobile layout initial 0 1`] = `
1
</h2>
<pre>
{}
{
"id": "iframe",
"path": "/components/UI-DesktopLayout-noNav",
"componentId": "UI-DesktopLayout-noNav",
"location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
"viewMode": "components",
"debug": {
"initialActive": 0
}
}
</pre>
</div>
</div>
@ -219,7 +228,16 @@ exports[`Storyshots UI|Mobile layout initial 1 1`] = `
1
</h2>
<pre>
{}
{
"id": "iframe",
"path": "/components/UI-DesktopLayout-noNav",
"componentId": "UI-DesktopLayout-noNav",
"location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
"viewMode": "components",
"debug": {
"initialActive": 1
}
}
</pre>
</div>
</div>
@ -308,7 +326,16 @@ exports[`Storyshots UI|Mobile layout initial 2 1`] = `
1
</h2>
<pre>
{}
{
"id": "iframe",
"path": "/components/UI-DesktopLayout-noNav",
"componentId": "UI-DesktopLayout-noNav",
"location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
"viewMode": "components",
"debug": {
"initialActive": 2
}
}
</pre>
</div>
</div>
@ -399,7 +426,15 @@ exports[`Storyshots UI|Mobile layout page 1`] = `
1
</h2>
<pre>
{}
{
"id": "iframe",
"path": "/components/UI-DesktopLayout-noNav",
"componentId": "UI-DesktopLayout-noNav",
"location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
"debug": {
"initialActive": 1
}
}
</pre>
</div>
</div>

15
lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
View File

@ -9,10 +9,10 @@ exports[`Storyshots UI|Panel default 1`] = `
id="storybook-panel-root"
>
<div
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
>
<div
class="css-i6idqx-TabBar e1lzzkxx1"
class="css-1gsy9it-TabBar e1lzzkxx1"
role="tablist"
>
<button
@ -71,19 +71,10 @@ exports[`Storyshots UI|Panel default 1`] = `
<div
class="css-1od9ihz-Content e1lzzkxx5"
>
<div
id="test1"
title="Test 1"
/>
<div
id="test2"
title="Test 2"
>
<div
id="test2"
>
TEST 2
</div>
TEST 2
</div>
</div>
</div>