mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
FIX storyshots
This commit is contained in:
Norbert de Langen
parent
20ba22081f
commit
1c899c900f
@ -9,7 +9,7 @@ const FlexSpaced = styled.div({
|
||||
'& > *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
'& > *:first-child': {
|
||||
'& > *:first-of-type': {
|
||||
marginLeft: 0,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,106 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons|A11y/Button Content 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Button Default 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
|
||||
type="button"
|
||||
>
|
||||
null
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Button Disabled 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
disabled=""
|
||||
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Button Invalid contrast 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;color:#ffffff;background-color:#4caf50"
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Button Label 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
|
||||
type="button"
|
||||
>
|
||||
null
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Form With label 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
@ -162,236 +61,3 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<img
|
||||
role="presentation"
|
||||
src="http://placehold.it/350x150"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Image With alt 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<img
|
||||
alt="Testing the a11y addon"
|
||||
src="http://placehold.it/350x150"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Image Without alt 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<img
|
||||
src="http://placehold.it/350x150"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Typography Correct 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<h1>
|
||||
Testing the a11y addon
|
||||
</h1>
|
||||
<p>
|
||||
Testing the a11y addon
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void 0"
|
||||
>
|
||||
Testing the a11y addon...
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<h2 />
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<a
|
||||
href="javascript:void 0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<p />
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|A11y/Typography Link without href 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<a>
|
||||
Testing the a11y addon...
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Default 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Disabled 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
style="color:black;background-color:black"
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y Label 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Testing the a11y addon
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons|a11y delayed render 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -199,13 +199,14 @@ storiesOf('Addons|Knobs.withKnobs', module)
|
||||
string: 'string',
|
||||
object: {},
|
||||
array: [],
|
||||
function: () => {},
|
||||
},
|
||||
'string'
|
||||
);
|
||||
const value = m.toString();
|
||||
return (
|
||||
<pre>
|
||||
the type of {value} = {typeof m}
|
||||
the type of {JSON.stringify(value, null, 2)} = {typeof m}
|
||||
</pre>
|
||||
);
|
||||
})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, text } from '@storybook/addon-knobs';
|
||||
@ -6,18 +7,20 @@ import { withKnobs, text } from '@storybook/addon-knobs';
|
||||
import { Button, Select, Textarea } from './input';
|
||||
import { Spaced } from '../grid/grid';
|
||||
|
||||
const Flexed = styled.div({ display: 'flex' });
|
||||
|
||||
storiesOf('Components|Form/Select', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('sizes', () => (
|
||||
<Spaced>
|
||||
{['auto', 'flex', '100%'].map(size => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Select key={size} value="val2" onChange={action('onChange')} size={size}>
|
||||
<Flexed key={size}>
|
||||
<Select value="val2" onChange={action('onChange')} size={size}>
|
||||
<option value="val1">Value 1</option>
|
||||
<option value="val2">Value 2</option>
|
||||
<option value="val3">Value 3</option>
|
||||
</Select>
|
||||
</div>
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
))
|
||||
@ -32,6 +35,7 @@ storiesOf('Components|Form/Select', module)
|
||||
))}
|
||||
</Spaced>
|
||||
));
|
||||
|
||||
storiesOf('Components|Form/Button', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with knobs', () => (
|
||||
@ -43,33 +47,31 @@ storiesOf('Components|Form/Button', module)
|
||||
.add('sizes', () => (
|
||||
<Spaced>
|
||||
{['auto', 'flex', '100%'].map(size => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button key={size} size={size}>
|
||||
click this button
|
||||
</Button>
|
||||
</div>
|
||||
<Flexed key={size}>
|
||||
<Button size={size}>click this button</Button>
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
))
|
||||
.add('validations', () => (
|
||||
<Spaced>
|
||||
{['error', 'warn', 'valid', null].map(valid => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button key={valid} size="100%" valid={valid}>
|
||||
<Flexed key={valid}>
|
||||
<Button size="100%" valid={valid}>
|
||||
click this button
|
||||
</Button>
|
||||
</div>
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
))
|
||||
.add('alignment', () => (
|
||||
<Spaced>
|
||||
{['end', 'center', 'start'].map(align => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button key={align} size="100%" align={align}>
|
||||
<Flexed key={align}>
|
||||
<Button size="100%" align={align}>
|
||||
click this button
|
||||
</Button>
|
||||
</div>
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
));
|
||||
@ -82,27 +84,27 @@ storiesOf('Components|Form/Textarea', module)
|
||||
.add('sizes', () => (
|
||||
<Spaced>
|
||||
{['auto', 'flex', '100%'].map(size => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Textarea key={size} defaultValue="text" size={size} />
|
||||
</div>
|
||||
<Flexed key={size}>
|
||||
<Textarea defaultValue="text" size={size} />
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
))
|
||||
.add('validations', () => (
|
||||
<Spaced>
|
||||
{['error', 'warn', 'valid', null].map(valid => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Textarea key={valid} defaultValue="text" size="100%" valid={valid} />
|
||||
</div>
|
||||
<Flexed key={valid}>
|
||||
<Textarea defaultValue="text" size="100%" valid={valid} />
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
))
|
||||
.add('alignment', () => (
|
||||
<Spaced>
|
||||
{['end', 'center', 'start'].map(align => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Textarea key={align} defaultValue="text" size="100%" align={align} />
|
||||
</div>
|
||||
<Flexed key={align}>
|
||||
<Textarea defaultValue="text" size="100%" align={align} />
|
||||
</Flexed>
|
||||
))}
|
||||
</Spaced>
|
||||
));
|
||||
|
||||
@ -14,7 +14,7 @@ const Container = styled.div(
|
||||
marginLeft: col * theme.layoutMargin,
|
||||
verticalAlign: 'inherit',
|
||||
},
|
||||
'& > *:first-child': {
|
||||
'& > *:first-of-type': {
|
||||
marginLeft: 0,
|
||||
},
|
||||
}
|
||||
@ -22,7 +22,7 @@ const Container = styled.div(
|
||||
'& > *': {
|
||||
marginTop: row * theme.layoutMargin,
|
||||
},
|
||||
'& > *:first-child': {
|
||||
'& > *:first-of-type': {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
|
||||
@ -27,7 +27,7 @@ export const normal = {
|
||||
barFill: 'rgba(255,255,255,1)',
|
||||
asideFill: 'transparent',
|
||||
barSelectedColor: 'rgba(0,0,0,0.1)',
|
||||
inputFill: 'transparent',
|
||||
inputFill: 'rgba(0,0,0,0.1)',
|
||||
mainTextFace: baseFonts.fontFamily,
|
||||
mainTextColor: baseFonts.color,
|
||||
dimmedTextColor: 'rgba(0,0,0,0.4)',
|
||||
|
||||
14
lib/ui/src/settings/__snapshots__/about.stories.storyshot
Normal file
14
lib/ui/src/settings/__snapshots__/about.stories.storyshot
Normal file
@ -0,0 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots UI|AboutPage default 1`] = `
|
||||
.emotion-0 {
|
||||
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-0 emotion-1"
|
||||
/>
|
||||
`;
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { ServerLocation } from '@reach/router';
|
||||
import About from './about';
|
||||
import AboutPage from './about';
|
||||
|
||||
// TODO: would be nice if this url was actually reflected in storybook UI
|
||||
|
||||
storiesOf('UI|About', module)
|
||||
storiesOf('UI|AboutPage', module)
|
||||
.addDecorator(fn => (
|
||||
<ServerLocation url="http://localhost:9011/?path=/settings">{fn()}</ServerLocation>
|
||||
))
|
||||
.add('default', () => <About />);
|
||||
.add('default', () => <AboutPage latest={{ version: '5.0.0' }} current={{ version: '5.0.1' }} />);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user