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

Addon-docs: Fix snapshots & chromatic

Browse Source
This commit is contained in:
Michael Shilman 2019-08-16 14:09:22 +08:00
parent fee13c37fe
commit 8e853799ea
13 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
View File

@ -139,6 +139,7 @@ exports[`A11YPanel should render report 1`] = `
background: #FFFFFF;
font-size: 12px;
line-height: 16px;
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
@ -215,13 +216,13 @@ exports[`A11YPanel should render report 1`] = `
"insert": [Function],
"inserted": Object {
"0": true,
"110qmus": true,
"11xgcgt": true,
"1551xjo": true,
"15paq49": true,
"1977chw": true,
"19mcg9j": true,
"1ez3l8h": true,
"1imo1gr": true,
"1kbt4a0": true,
"1l7fvsg": true,
"1vwgrhn": true,
@ -497,7 +498,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css"
>
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>
<style
data-emotion="css"
@ -723,7 +724,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css"
>
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>,
<style
data-emotion="css"

26
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -769,6 +769,7 @@ exports[`addon Info should render component description if story kind matches co
background: #FFFFFF;
font-size: 12px;
line-height: 16px;
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
@ -1360,8 +1361,8 @@ exports[`addon Info should render component description if story kind matches co
Object {
"insert": [Function],
"inserted": Object {
"110qmus": true,
"11xgcgt": true,
"1imo1gr": true,
"1maezg8": true,
"1si67pu": true,
"4zr3vl": true,
@ -2077,7 +2078,7 @@ exports[`addon Info should render component description if story kind matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>
<style
data-emotion="css"
@ -2575,7 +2576,7 @@ exports[`addon Info should render component description if story kind matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>,
<style
data-emotion="css"
@ -3144,8 +3145,8 @@ exports[`addon Info should render component description if story kind matches co
Object {
"insert": [Function],
"inserted": Object {
"110qmus": true,
"11xgcgt": true,
"1imo1gr": true,
"1maezg8": true,
"1si67pu": true,
"4zr3vl": true,
@ -3861,7 +3862,7 @@ exports[`addon Info should render component description if story kind matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>
<style
data-emotion="css"
@ -4359,7 +4360,7 @@ exports[`addon Info should render component description if story kind matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>,
<style
data-emotion="css"
@ -5326,6 +5327,7 @@ exports[`addon Info should render component description if story name matches co
background: #FFFFFF;
font-size: 12px;
line-height: 16px;
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
@ -5917,8 +5919,8 @@ exports[`addon Info should render component description if story name matches co
Object {
"insert": [Function],
"inserted": Object {
"110qmus": true,
"11xgcgt": true,
"1imo1gr": true,
"1maezg8": true,
"1si67pu": true,
"4zr3vl": true,
@ -6862,7 +6864,7 @@ exports[`addon Info should render component description if story name matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>
<style
data-emotion="css"
@ -7360,7 +7362,7 @@ exports[`addon Info should render component description if story name matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>,
<style
data-emotion="css"
@ -7929,8 +7931,8 @@ exports[`addon Info should render component description if story name matches co
Object {
"insert": [Function],
"inserted": Object {
"110qmus": true,
"11xgcgt": true,
"1imo1gr": true,
"1maezg8": true,
"1si67pu": true,
"4zr3vl": true,
@ -8874,7 +8876,7 @@ exports[`addon Info should render component description if story name matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>
<style
data-emotion="css"
@ -9372,7 +9374,7 @@ exports[`addon Info should render component description if story name matches co
data-emotion="css"
>
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
.emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
</style>,
<style
data-emotion="css"

2
lib/components/src/blocks/ColorPalette.stories.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import { ColorItem, ColorPalette } from './ColorPalette';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|ColorPalette',
component: ColorPalette,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const defaultStyle = () => (

2
lib/components/src/blocks/Description.stories.tsx
View File

@ -1,11 +1,13 @@
import React from 'react';
import { Description } from './Description';
import { DocsPageWrapper } from './DocsPage';
import markdownCaption from './DocsPageExampleCaption.md';
export default {
title: 'Docs|Description',
component: Description,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;

2
lib/components/src/blocks/EmptyBlock.stories.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import { EmptyBlock } from './EmptyBlock';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|EmptyBlock',
component: EmptyBlock,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;

2
lib/components/src/blocks/IconGallery.stories.tsx
View File

@ -1,11 +1,13 @@
import React from 'react';
import { IconItem, IconGallery } from './IconGallery';
import { DocsPageWrapper } from './DocsPage';
import { Icons as ExampleIcon } from '../icon/icon';
export default {
title: 'Docs|IconGallery',
component: IconGallery,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const defaultStyle = () => (

5
lib/components/src/blocks/Preview.stories.tsx
View File

@ -1,13 +1,14 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Preview } from './Preview';
import { Button } from '../Button/Button';
import { DocsPageWrapper } from './DocsPage';
import * as sourceStories from './Source.stories';
export default {
title: 'Docs|Preview',
component: Preview,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const codeCollapsed = () => (

6
lib/components/src/blocks/PropsTable/PropRow.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { PropRow } from './PropRow';
import { Table } from './PropsTable';
import { ResetWrapper } from '../../typography/DocumentFormatting';
import { DocsPageWrapper } from '../DocsPage';
export default {
component: PropRow,
@ -9,11 +9,11 @@ export default {
excludeStories: /.*Def$/,
decorators: [
getStory => (
<ResetWrapper>
<DocsPageWrapper>
<Table>
<tbody>{getStory()}</tbody>
</Table>
</ResetWrapper>
</DocsPageWrapper>
),
],
};

2
lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import { PropsTable, PropsTableError } from './PropsTable';
import { stringDef, numberDef } from './PropRow.stories';
import { DocsPageWrapper } from '../DocsPage';
export default {
component: PropsTable,
title: 'Docs|PropTable',
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
export const normal = () => <PropsTable rows={[stringDef, numberDef]} />;

2
lib/components/src/blocks/Source.stories.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import { Source, SourceError } from './Source';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|Source',
component: Source,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const jsxCode = `

2
lib/components/src/blocks/Story.stories.tsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import { Story, StoryError } from './Story';
import { Button } from '../Button/Button';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|Story',
component: Story,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const buttonFn = () => <Button secondary>Inline story</Button>;

2
lib/components/src/blocks/Typeset.stories.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import { Typeset } from './Typeset';
import { DocsPageWrapper } from './DocsPage';
export default {
title: 'Docs|Typeset',
component: Typeset,
decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
};
const fontSizes = [12, 14, 16, 20, 24, 32, 40, 48];

5
lib/components/src/typography/DocumentWrapper.stories.tsx
View File

@ -174,9 +174,8 @@ export const withDOM = () => (
</a>
</p>
<p>
Autoconverted link{' '}
<a href="https://github.com/nodeca/pica">https:// github.com/nodeca/pica</a> (enable linkify
to see)
Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a>{' '}
(enable linkify to see)
</p>
<h2>Images</h2>
<p>