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

Update snapshots and fix tests

Browse Source
This commit is contained in:
domyen 2019-01-31 17:14:20 -05:00
parent 7d6da326b0
commit e3e0eba826
28 changed files with 2063 additions and 2016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
addons/a11y/src/components/ColorBlindness.js
View File

@ -4,7 +4,7 @@ import memoize from 'memoizerific';
import { styled } from '@storybook/theming';
import { logger } from '@storybook/client-logger';
import { Popout, Item, Icons, Icon, IconButton, Title, List } from '@storybook/components';
import { Popout, Item, Icons, MenuIcon, IconButton, Title, List } from '@storybook/components';
const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));
@ -63,7 +63,7 @@ class ColorBlindness extends Component {
hide();
}}
>
<Icon type={<ColorIcon filter={i} />} />
<MenuIcon type={<ColorIcon filter={i} />} />
<Title>{i}</Title>
</Item>
))}
@ -73,7 +73,7 @@ class ColorBlindness extends Component {
hide();
}}
>
<Icon type={<ColorIcon filter="mono" />} />
<MenuIcon type={<ColorIcon filter="mono" />} />
<Title>mono</Title>
</Item>
<Item
@ -82,7 +82,7 @@ class ColorBlindness extends Component {
hide();
}}
>
<Icon type={<ColorIcon />} />
<MenuIcon type={<ColorIcon />} />
<Title>Off</Title>
</Item>
</List>

15
addons/backgrounds/src/Tool.js
View File

@ -6,7 +6,16 @@ import memoize from 'memoizerific';
import { logger } from '@storybook/client-logger';
import { STORY_CHANGED } from '@storybook/core-events';
import { Popout, Item, Icons, Icon, IconButton, Title, Detail, List } from '@storybook/components';
import {
Popout,
Item,
Icons,
MenuIcon,
IconButton,
Title,
Detail,
List,
} from '@storybook/components';
import * as S from './components';
import { PARAM_KEY } from './constants';
@ -107,7 +116,7 @@ export default class BackgroundTool extends Component {
this.change(undefined);
}}
>
<Icon type="undo" />
<MenuIcon type="undo" />
<Title>Reset</Title>
<Detail>transparent</Detail>
</Item>
@ -122,7 +131,7 @@ export default class BackgroundTool extends Component {
this.change(key);
}}
>
<Icon type={<S.ColorIcon background={value} />} />
<MenuIcon type={<S.ColorIcon background={value} />} />
<Title>{key}</Title>
<Detail>{value}</Detail>
</Item>

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

@ -179,7 +179,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -1435,7 +1435,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -1493,7 +1493,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
Object {
"WebkitFontSmoothing": "antialiased",
"borderBottom": "1px solid #eee",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "40px",
"fontWeight": 600,
@ -1515,7 +1515,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "30px",
"fontWeight": 600,
@ -1535,7 +1535,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
}
@ -2648,7 +2648,7 @@ exports[`addon Info should render component description if story kind matches co
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -2771,7 +2771,7 @@ exports[`addon Info should render component description if story kind matches co
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -2794,7 +2794,7 @@ exports[`addon Info should render component description if story kind matches co
Object {
"WebkitFontSmoothing": "antialiased",
"borderBottom": "1px solid #eee",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "40px",
"fontWeight": 600,
@ -2816,7 +2816,7 @@ exports[`addon Info should render component description if story kind matches co
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "30px",
"fontWeight": 600,
@ -2836,7 +2836,7 @@ exports[`addon Info should render component description if story kind matches co
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
}
@ -3877,7 +3877,7 @@ exports[`addon Info should render component description if story name matches co
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -4000,7 +4000,7 @@ exports[`addon Info should render component description if story name matches co
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
"fontWeight": 300,
@ -4023,7 +4023,7 @@ exports[`addon Info should render component description if story name matches co
Object {
"WebkitFontSmoothing": "antialiased",
"borderBottom": "1px solid #eee",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "40px",
"fontWeight": 600,
@ -4045,7 +4045,7 @@ exports[`addon Info should render component description if story name matches co
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "30px",
"fontWeight": 600,
@ -4065,7 +4065,7 @@ exports[`addon Info should render component description if story name matches co
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"color": "#333",
"fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "15px",
}

8
addons/viewport/src/Tool.js
View File

@ -5,7 +5,7 @@ import memoize from 'memoizerific';
import { Global, css } from '@storybook/theming';
import { Popout, Item, Icons, Icon, IconButton, Title, List } from '@storybook/components';
import { Popout, Item, Icons, MenuIcon, IconButton, Title, List } from '@storybook/components';
import { STORY_CHANGED } from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
@ -118,7 +118,7 @@ export default class ViewportTool extends Component {
this.change(undefined);
}}
>
<Icon type="undo" />
<MenuIcon type="undo" />
<Title>Reset (responsive)</Title>
</Item>
<Item
@ -128,7 +128,7 @@ export default class ViewportTool extends Component {
this.rotate();
}}
>
<Icon type="sync" />
<MenuIcon type="sync" />
<Title>Rotate</Title>
</Item>
</Fragment>
@ -142,7 +142,7 @@ export default class ViewportTool extends Component {
this.change(key);
}}
>
<Icon type={type} />
<MenuIcon type={type} />
<Title>{name}</Title>
</Item>
))}

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

@ -39,7 +39,7 @@ exports[`Storyshots Button with new info 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -59,7 +59,7 @@ exports[`Storyshots Button with new info 1`] = `
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Use the
<a

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

@ -119,7 +119,7 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
.emotion-1 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -176,7 +176,7 @@ exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -227,7 +227,7 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -301,7 +301,7 @@ Array [
padding: 0;
line-height: 1.2em;
display: block;
color: #444;
color: #333;
line-height: 1em;
}
@ -358,7 +358,7 @@ exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `
padding: 0;
line-height: 1.2em;
display: block;
color: #444;
color: #333;
line-height: 1em;
}

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

@ -4,7 +4,7 @@ exports[`Storyshots Addons|Actions All types 1`] = `
Array [
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -37,7 +37,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -70,7 +70,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -103,7 +103,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -136,7 +136,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -169,7 +169,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -202,7 +202,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -235,7 +235,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -268,7 +268,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -301,7 +301,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -334,7 +334,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -367,7 +367,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -400,7 +400,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -433,7 +433,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -466,7 +466,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -499,7 +499,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -532,7 +532,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -565,7 +565,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -598,7 +598,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -631,7 +631,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -668,7 +668,7 @@ Array [
exports[`Storyshots Addons|Actions Basic example 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -704,7 +704,7 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
exports[`Storyshots Addons|Actions Circular Payload 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -740,7 +740,7 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -776,7 +776,7 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
exports[`Storyshots Addons|Actions Decorated action 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -812,7 +812,7 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -848,7 +848,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -885,7 +885,7 @@ exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
Array [
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -918,7 +918,7 @@ Array [
</button>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -955,7 +955,7 @@ Array [
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -991,7 +991,7 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1027,7 +1027,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1063,7 +1063,7 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1103,7 +1103,7 @@ Array [
</p>,
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1140,7 +1140,7 @@ Array [
exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1176,7 +1176,7 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1212,7 +1212,7 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;

122
examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View File

@ -31,7 +31,7 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -51,7 +51,7 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Info can take options via the global or local decorator as well.
</div>
@ -308,7 +308,7 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -658,7 +658,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -678,7 +678,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Allow Duplicate DisplayNames for HOC #1814
</div>
@ -822,7 +822,7 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -1133,7 +1133,7 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -1154,17 +1154,17 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
>
<h4
id="you-can-use-markdown-in-your-withinfo-description."
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
>
You can use markdown in your withInfo description.
</h4>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Sometimes you might want to manually include some code examples:
</div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Maybe include a
<a
@ -1448,7 +1448,7 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -1743,7 +1743,7 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -1764,18 +1764,18 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
>
<h1
id="internal"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;border-bottom:1px solid #eee;font-weight:600;margin:0;padding:0;font-size:40px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;border-bottom:1px solid #eee;font-weight:600;margin:0;padding:0;font-size:40px"
>
internal
</h1>
<h2
id="internal-markdown"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:30px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:30px"
>
markdown
</h2>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
file
</div>
@ -2050,7 +2050,7 @@ exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component fo
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -2232,7 +2232,7 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -2252,7 +2252,7 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Label propType should be excluded
</div>
@ -2482,13 +2482,13 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
The Info Addon header should be hidden
</div>
@ -2718,7 +2718,7 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`
<div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -2747,13 +2747,13 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`
</div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Component should be inlined between description and PropType table
</div>
@ -3009,7 +3009,7 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -3029,7 +3029,7 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
There should be a prop table added for a component not included in the story
</div>
@ -3391,7 +3391,7 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -3411,7 +3411,7 @@ exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
This can exclude extraneous components from being displayed in prop tables.
</div>
@ -3729,7 +3729,7 @@ exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -3749,7 +3749,7 @@ exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
The Info Addon source section should be hidden
</div>
@ -3952,7 +3952,7 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -4220,7 +4220,7 @@ exports[`Storyshots Addons|Info/Options.styles Full control over styles using a
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -4496,7 +4496,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -4517,17 +4517,17 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
>
<h4
id="you-can-use-markdown-in-your-withinfo-description."
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
>
You can use markdown in your withInfo description.
</h4>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Sometimes you might want to manually include some code examples:
</div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Maybe include a
<a
@ -4784,7 +4784,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
<div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -4813,13 +4813,13 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
</div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
description or documentation about my component, supports markdown
</div>
@ -5066,7 +5066,7 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet
<div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -5095,13 +5095,13 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet
</div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Label propType should be excluded
</div>
@ -5303,7 +5303,7 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1
<div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -5332,13 +5332,13 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1
</div>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
This text should be displayed on every story and the component should be inlined between description and PropType table
</div>
@ -5594,7 +5594,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`]
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -5614,7 +5614,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`]
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
</div>
@ -5833,7 +5833,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -5853,7 +5853,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
</div>
@ -6722,7 +6722,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -6742,7 +6742,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
</div>
@ -7017,7 +7017,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -7037,7 +7037,7 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen
style="margin-bottom:0"
>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
</div>
@ -7387,7 +7387,7 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -7863,7 +7863,7 @@ exports[`Storyshots Addons|Info/Story Source Children 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -8211,7 +8211,7 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -8504,7 +8504,7 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -8856,7 +8856,7 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -9124,7 +9124,7 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
</button>
<div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@ -9145,17 +9145,17 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
>
<h4
id="you-can-use-markdown-in-your-withinfo-description."
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
>
You can use markdown in your withInfo description.
</h4>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Sometimes you might want to manually include some code examples:
</div>
<div
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
style="font-family:\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif;color:#333;-webkit-font-smoothing:antialiased;font-size:15px"
>
Maybe include a
<a

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

File diff suppressed because it is too large Load Diff

1
lib/components/package.json
View File

@ -25,7 +25,6 @@
"@storybook/core-events": "5.0.0-alpha.10",
"@storybook/router": "5.0.0-alpha.10",
"@storybook/theming": "5.0.0-alpha.10",
"fuzzy-search": "^3.0.1",
"global": "^4.3.2",
"immer": "^1.12.0",
"js-beautify": "^1.8.9",

90
lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
View File

@ -85,93 +85,3 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
</div>
</div>
`;
exports[`Storyshots Basics|Badge negative 1`] = `
.emotion-0 {
display: inline-block;
vertical-align: top;
font-size: 11px;
line-height: 12px;
padding: 4px 12px;
border-radius: 3em;
color: #FF4400;
background: #FEDED2;
}
.emotion-0 svg {
height: 12px;
width: 12px;
margin-right: 4px;
margin-top: -2px;
}
.emotion-0 svg path {
fill: #FF4400;
}
<div
class="emotion-0"
>
Denied
</div>
`;
exports[`Storyshots Basics|Badge neutral 1`] = `
.emotion-0 {
display: inline-block;
vertical-align: top;
font-size: 11px;
line-height: 12px;
padding: 4px 12px;
border-radius: 3em;
color: #666666;
background: #EEEEEE;
}
.emotion-0 svg {
height: 12px;
width: 12px;
margin-right: 4px;
margin-top: -2px;
}
.emotion-0 svg path {
fill: #666666;
}
<div
class="emotion-0"
>
Neutral
</div>
`;
exports[`Storyshots Basics|Badge positive 1`] = `
.emotion-0 {
display: inline-block;
vertical-align: top;
font-size: 11px;
line-height: 12px;
padding: 4px 12px;
border-radius: 3em;
color: #66BF3C;
background: #E1FFD4;
}
.emotion-0 svg {
height: 12px;
width: 12px;
margin-right: 4px;
margin-top: -2px;
}
.emotion-0 svg path {
fill: #66BF3C;
}
<div
class="emotion-0"
>
Accepted
</div>
`;

42
lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot Normal file
View File

@ -0,0 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Basics|Brand/StorybookIcon default 1`] = `
<svg
height="64px"
title="Storybook icon"
viewBox="0 0 64 64"
width="64px"
>
<defs>
<path
d="M2 58.6L0 6c0-1.7 1.3-3.2 3-3.3L47.6 0A3.2 3.2 0 0 1 51 3.2v57.2a3.2 3.2 0 0 1-3.3 3.2L5 61.6c-1.6 0-3-1.4-3-3z"
id="a"
/>
</defs>
<g
fill="none"
fill-rule="evenodd"
transform="translate(6.6 .2)"
>
<mask
fill="#fff"
id="b"
>
<use
href="#a"
/>
</mask>
<use
fill="#FF4785"
fill-rule="nonzero"
href="#a"
/>
<path
d="M37.7 7.8L38 .5 44 0l.3 7.6a.5.5 0 0 1-.8.4l-2.4-2-2.8 2.2a.5.5 0 0 1-.7-.4zM29.8 24c0 1.2 8.4.6 9.5-.3 0-8.4-4.5-12.9-12.8-12.9s-13 4.5-13 11.3c0 11.8 16 12 16 18.5 0 1.8-1 2.9-3 2.9-2.4 0-3.5-1.3-3.3-5.7 0-1-9.7-1.3-10 0-.8 10.6 5.9 13.7 13.5 13.7 7.4 0 13.2-4 13.2-11 0-12.7-16.2-12.3-16.2-18.6 0-2.6 1.9-2.9 3-2.9 1.2 0 3.3.2 3.1 5z"
fill="#FFF"
fill-rule="nonzero"
mask="url(#b)"
/>
</g>
</svg>
`;

45
lib/components/src/brand/__snapshots__/StorybookLogo.stories.storyshot Normal file
View File

@ -0,0 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Basics|Brand/StorybookLogo default 1`] = `
<svg
height="40px"
title="Storybook"
viewBox="0 0 200 40"
width="200px"
>
<defs>
<path
d="M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z"
id="a"
/>
</defs>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
fill="#333"
/>
<mask
fill="#fff"
id="b"
>
<use
href="#a"
/>
</mask>
<use
fill="#FF4785"
fill-rule="nonzero"
href="#a"
/>
<path
d="M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z"
fill="#FFF"
fill-rule="nonzero"
mask="url(#b)"
/>
</g>
</svg>
`;

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Form/Button alignment 1`] = `
exports[`Storyshots Basics|Form/Button alignment 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -18,7 +18,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -46,7 +46,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -74,7 +74,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -133,7 +133,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Button sizes 1`] = `
exports[`Storyshots Basics|Form/Button sizes 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -151,7 +151,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -179,7 +179,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -209,7 +209,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -268,7 +268,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Button validations 1`] = `
exports[`Storyshots Basics|Form/Button validations 1`] = `
.emotion-8 > * {
margin-top: 10px;
}
@ -286,7 +286,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
.emotion-6 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -314,7 +314,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -343,7 +343,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -372,7 +372,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -441,7 +441,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Field field 1`] = `
exports[`Storyshots Basics|Form/Field field 1`] = `
.emotion-2 {
width: 100%;
box-sizing: border-box;
@ -480,7 +480,7 @@ exports[`Storyshots Components|Form/Field field 1`] = `
.emotion-1 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -539,7 +539,7 @@ exports[`Storyshots Components|Form/Field field 1`] = `
</label>
`;
exports[`Storyshots Components|Form/Input alignment 1`] = `
exports[`Storyshots Basics|Form/Input alignment 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -557,7 +557,7 @@ exports[`Storyshots Components|Form/Input alignment 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -579,7 +579,7 @@ exports[`Storyshots Components|Form/Input alignment 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -601,7 +601,7 @@ exports[`Storyshots Components|Form/Input alignment 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -651,7 +651,7 @@ exports[`Storyshots Components|Form/Input alignment 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Input sizes 1`] = `
exports[`Storyshots Basics|Form/Input sizes 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -669,7 +669,7 @@ exports[`Storyshots Components|Form/Input sizes 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -691,7 +691,7 @@ exports[`Storyshots Components|Form/Input sizes 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -715,7 +715,7 @@ exports[`Storyshots Components|Form/Input sizes 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -765,7 +765,7 @@ exports[`Storyshots Components|Form/Input sizes 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Input validations 1`] = `
exports[`Storyshots Basics|Form/Input validations 1`] = `
.emotion-8 > * {
margin-top: 10px;
}
@ -783,7 +783,7 @@ exports[`Storyshots Components|Form/Input validations 1`] = `
.emotion-6 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -805,7 +805,7 @@ exports[`Storyshots Components|Form/Input validations 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -828,7 +828,7 @@ exports[`Storyshots Components|Form/Input validations 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -851,7 +851,7 @@ exports[`Storyshots Components|Form/Input validations 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -910,7 +910,7 @@ exports[`Storyshots Components|Form/Input validations 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Select alignment 1`] = `
exports[`Storyshots Basics|Form/Select alignment 1`] = `
.emotion-3 > * {
margin-top: 10px;
}
@ -921,7 +921,7 @@ exports[`Storyshots Components|Form/Select alignment 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -948,7 +948,7 @@ exports[`Storyshots Components|Form/Select alignment 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -975,7 +975,7 @@ exports[`Storyshots Components|Form/Select alignment 1`] = `
.emotion-1 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1066,7 +1066,7 @@ exports[`Storyshots Components|Form/Select alignment 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Select sizes 1`] = `
exports[`Storyshots Basics|Form/Select sizes 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -1077,7 +1077,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1111,7 +1111,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1140,7 +1140,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1243,7 +1243,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Select validations 1`] = `
exports[`Storyshots Basics|Form/Select validations 1`] = `
.emotion-4 > * {
margin-top: 10px;
}
@ -1254,7 +1254,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
.emotion-3 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1281,7 +1281,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1309,7 +1309,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
.emotion-1 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1337,7 +1337,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1449,7 +1449,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Textarea alignment 1`] = `
exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -1467,7 +1467,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1492,7 +1492,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1517,7 +1517,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1579,7 +1579,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Textarea sizes 1`] = `
exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
.emotion-6 > * {
margin-top: 10px;
}
@ -1597,7 +1597,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1622,7 +1622,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1649,7 +1649,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1708,7 +1708,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
</div>
`;
exports[`Storyshots Components|Form/Textarea validations 1`] = `
exports[`Storyshots Basics|Form/Textarea validations 1`] = `
.emotion-8 > * {
margin-top: 10px;
}
@ -1726,7 +1726,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
.emotion-6 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1751,7 +1751,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1777,7 +1777,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
.emotion-2 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
@ -1803,7 +1803,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
.emotion-4 {
padding: 0 10px;
color: #444;
color: #333;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;

10
lib/components/src/grid/__snapshots__/grid.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Grid col 1`] = `
exports[`Storyshots Basics|Grid col 1`] = `
Array [
.emotion-0 {
background: silver;
@ -58,7 +58,7 @@ Array [
]
`;
exports[`Storyshots Components|Grid col outer 1`] = `
exports[`Storyshots Basics|Grid col outer 1`] = `
Array [
.emotion-0 {
background: silver;
@ -118,7 +118,7 @@ Array [
]
`;
exports[`Storyshots Components|Grid row 1`] = `
exports[`Storyshots Basics|Grid row 1`] = `
Array [
.emotion-0 {
background: silver;
@ -167,7 +167,7 @@ Array [
]
`;
exports[`Storyshots Components|Grid row multiply 1`] = `
exports[`Storyshots Basics|Grid row multiply 1`] = `
Array [
.emotion-0 {
background: silver;
@ -221,7 +221,7 @@ Array [
]
`;
exports[`Storyshots Components|Grid row outer 1`] = `
exports[`Storyshots Basics|Grid row outer 1`] = `
Array [
.emotion-0 {
background: silver;

48
lib/components/src/icon/__snapshots__/icon.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Icon labels 1`] = `
exports[`Storyshots Basics|Icon labels 1`] = `
.emotion-1 {
display: block;
}
@ -9,7 +9,7 @@ exports[`Storyshots Components|Icon labels 1`] = `
fill: currentColor;
}
.emotion-600 {
.emotion-604 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -50,7 +50,7 @@ exports[`Storyshots Components|Icon labels 1`] = `
}
<div
class="emotion-600"
class="emotion-604"
>
<div
class="emotion-3"
@ -766,6 +766,27 @@ exports[`Storyshots Components|Icon labels 1`] = `
close
</div>
</div>
<div
class="emotion-3"
>
<svg
class="emotion-1"
height="20px"
viewBox="0 0 1024 1024"
width="20px"
>
<path
class="emotion-0"
d="M586.7 512L936 861.4a52.8 52.8 0 0 1-74.6 74.7L512 586.7 162.6 936A52.8 52.8 0 0 1 88 861.4L437.3 512 88 162.6A52.8 52.8 0 1 1 162.6 88L512 437.3 861.4 88a52.8 52.8 0 1 1 74.7 74.7L586.7 512z"
/>
</svg>
<div
class="emotion-2"
>
closeAlt
</div>
</div>
<div
class="emotion-3"
>
@ -3205,7 +3226,7 @@ exports[`Storyshots Components|Icon labels 1`] = `
</div>
`;
exports[`Storyshots Components|Icon no labels 1`] = `
exports[`Storyshots Basics|Icon no labels 1`] = `
.emotion-1 {
display: block;
}
@ -3214,7 +3235,7 @@ exports[`Storyshots Components|Icon no labels 1`] = `
fill: currentColor;
}
.emotion-450 {
.emotion-453 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -3264,7 +3285,7 @@ exports[`Storyshots Components|Icon no labels 1`] = `
}
<div
class="emotion-450"
class="emotion-453"
>
<div
class="emotion-2"
@ -3776,6 +3797,21 @@ exports[`Storyshots Components|Icon no labels 1`] = `
/>
</svg>
</div>
<div
class="emotion-2"
>
<svg
class="emotion-1"
height="20px"
viewBox="0 0 1024 1024"
width="20px"
>
<path
class="emotion-0"
d="M586.7 512L936 861.4a52.8 52.8 0 0 1-74.6 74.7L512 586.7 162.6 936A52.8 52.8 0 0 1 88 861.4L437.3 512 88 162.6A52.8 52.8 0 1 1 162.6 88L512 437.3 861.4 88a52.8 52.8 0 1 1 74.7 74.7L586.7 512z"
/>
</svg>
</div>
<div
class="emotion-2"
>

10
lib/components/src/menu/__snapshots__/menu.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Menu initial closed 1`] = `
exports[`Storyshots Basics|Menu initial closed 1`] = `
.emotion-0 {
background: hotpink;
}
@ -16,7 +16,7 @@ exports[`Storyshots Components|Menu initial closed 1`] = `
</span>
`;
exports[`Storyshots Components|Menu multiple open 1`] = `
exports[`Storyshots Basics|Menu multiple open 1`] = `
Array [
.emotion-0 {
background: hotpink;
@ -47,7 +47,7 @@ Array [
]
`;
exports[`Storyshots Components|Menu with Items 1`] = `
exports[`Storyshots Basics|Menu with Items 1`] = `
.emotion-0 {
background: hotpink;
}
@ -63,7 +63,7 @@ exports[`Storyshots Components|Menu with Items 1`] = `
</span>
`;
exports[`Storyshots Components|Menu with Items that close 1`] = `
exports[`Storyshots Basics|Menu with Items that close 1`] = `
.emotion-0 {
background: hotpink;
}
@ -79,7 +79,7 @@ exports[`Storyshots Components|Menu with Items that close 1`] = `
</span>
`;
exports[`Storyshots Components|Menu with links 1`] = `
exports[`Storyshots Basics|Menu with links 1`] = `
.emotion-0 {
background: hotpink;
}

6
lib/components/src/menu/menu.js
View File

@ -17,7 +17,7 @@ export const Title = styled.span(text, {
paddingRight: 10,
});
export const Icon = ({ type }) => {
export const MenuIcon = ({ type }) => {
if (type === '') {
return <IconsWrapper />;
}
@ -33,10 +33,10 @@ export const Icon = ({ type }) => {
}
return <IconsWrapper>{type}</IconsWrapper>;
};
Icon.propTypes = {
MenuIcon.propTypes = {
type: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
};
Icon.defaultProps = {
MenuIcon.defaultProps = {
type: undefined,
};

4
lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
exports[`Storyshots Basics|PanelActionBar 3 items 1`] = `
.emotion-6 {
position: absolute;
bottom: 0;
@ -110,7 +110,7 @@ exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
</ul>
`;
exports[`Storyshots Components|PanelActionBar single item 1`] = `
exports[`Storyshots Basics|PanelActionBar single item 1`] = `
.emotion-2 {
position: absolute;
bottom: 0;

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Placeholder default 1`] = `
exports[`Storyshots Basics|Placeholder default 1`] = `
.emotion-0 {
font-size: 11px;
display: block;

12
lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|SyntaxHighlighter bash 1`] = `
exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = `
.emotion-2 {
position: relative;
overflow: auto;
@ -214,7 +214,7 @@ exports[`Storyshots Components|SyntaxHighlighter bash 1`] = `
</div>
`;
exports[`Storyshots Components|SyntaxHighlighter bordered & copy-able 1`] = `
exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
@ -669,7 +669,7 @@ exports[`Storyshots Components|SyntaxHighlighter bordered & copy-able 1`] = `
</div>
`;
exports[`Storyshots Components|SyntaxHighlighter jsx 1`] = `
exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `
.emotion-2 {
position: relative;
overflow: auto;
@ -1080,7 +1080,7 @@ exports[`Storyshots Components|SyntaxHighlighter jsx 1`] = `
</div>
`;
exports[`Storyshots Components|SyntaxHighlighter showLineNumbers 1`] = `
exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `
.emotion-2 {
position: relative;
overflow: auto;
@ -1493,7 +1493,7 @@ exports[`Storyshots Components|SyntaxHighlighter showLineNumbers 1`] = `
</div>
`;
exports[`Storyshots Components|SyntaxHighlighter story 1`] = `
exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
.emotion-2 {
position: relative;
overflow: auto;
@ -1918,7 +1918,7 @@ exports[`Storyshots Components|SyntaxHighlighter story 1`] = `
<span
class="token string"
>
'Components|Heading'
'Basics|Heading'
</span>
<span
class="token punctuation"

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
.emotion-8 {
display: -webkit-box;
display: -webkit-flex;
@ -280,7 +280,7 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
.emotion-8 {
display: -webkit-box;
display: -webkit-flex;
@ -516,7 +516,7 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateful - static 1`] = `
exports[`Storyshots Basics|Tabs stateful - static 1`] = `
.emotion-4 {
display: -webkit-box;
display: -webkit-flex;
@ -710,7 +710,7 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
.emotion-8 {
display: -webkit-box;
display: -webkit-flex;
@ -1009,7 +1009,7 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
.emotion-8 {
display: -webkit-box;
display: -webkit-flex;
@ -1293,7 +1293,7 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateless - empty 1`] = `
exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
.emotion-0 {
font-size: 11px;
display: block;
@ -1314,7 +1314,7 @@ exports[`Storyshots Components|Tabs stateless - empty 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
.emotion-7 {
display: -webkit-box;
display: -webkit-flex;
@ -1598,7 +1598,7 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateless - with tools 1`] = `
exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
.emotion-9 {
display: -webkit-box;
display: -webkit-flex;

54
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|Typography/Heading types 1`] = `
exports[`Storyshots Basics|Typography/Heading types 1`] = `
.emotion-0 {
color: currentColor;
font-weight: normal;
@ -9,7 +9,7 @@ exports[`Storyshots Components|Typography/Heading types 1`] = `
padding: 0;
line-height: 1.2em;
display: block;
color: #444;
color: #333;
line-height: 1em;
}
@ -24,31 +24,6 @@ exports[`Storyshots Components|Typography/Heading types 1`] = `
color: rgba(0,0,0,0.4);
}
.emotion-18 {
color: currentColor;
font-weight: normal;
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
-webkit-letter-spacing: 4.3px;
-moz-letter-spacing: 4.3px;
-ms-letter-spacing: 4.3px;
letter-spacing: 4.3px;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
}
.emotion-18 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-2 {
margin: 10px;
border: 1px dashed deepskyblue;
@ -102,6 +77,31 @@ exports[`Storyshots Components|Typography/Heading types 1`] = `
font-size: 14px;
}
.emotion-18 {
color: currentColor;
font-weight: normal;
font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
-webkit-letter-spacing: 4.3px;
-moz-letter-spacing: 4.3px;
-ms-letter-spacing: 4.3px;
letter-spacing: 4.3px;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
}
.emotion-18 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-20 {
color: currentColor;
font-weight: normal;

8
lib/components/src/typography/link/__snapshots__/link.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Typography/Link cancel w/ href 1`] = `
exports[`Storyshots Basics|Typography/Link cancel w/ href 1`] = `
.emotion-0 {
color: inherit;
}
@ -13,7 +13,7 @@ exports[`Storyshots Components|Typography/Link cancel w/ href 1`] = `
</a>
`;
exports[`Storyshots Components|Typography/Link cancel w/ onClick 1`] = `
exports[`Storyshots Basics|Typography/Link cancel w/ onClick 1`] = `
.emotion-0 {
color: inherit;
}
@ -26,7 +26,7 @@ exports[`Storyshots Components|Typography/Link cancel w/ onClick 1`] = `
</a>
`;
exports[`Storyshots Components|Typography/Link no-cancel w/ href 1`] = `
exports[`Storyshots Basics|Typography/Link no-cancel w/ href 1`] = `
.emotion-0 {
color: inherit;
}
@ -39,7 +39,7 @@ exports[`Storyshots Components|Typography/Link no-cancel w/ href 1`] = `
</a>
`;
exports[`Storyshots Components|Typography/Link no-cancel w/ onClick 1`] = `
exports[`Storyshots Basics|Typography/Link no-cancel w/ onClick 1`] = `
.emotion-0 {
color: inherit;
}

25
lib/ui/src/components/sidebar/__snapshots__/SidebarList.stories.storyshot Normal file
View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UI|Sidebar/SidebarList default 1`] = `
<span
class="emotion-0"
>
TODO SidebarList
</span>
`;
exports[`Storyshots UI|Sidebar/SidebarList empty 1`] = `
<span
class="emotion-0"
>
SidebarList empty state
</span>
`;
exports[`Storyshots UI|Sidebar/SidebarList loading 1`] = `
<span
class="emotion-0"
>
SidebarList loading state
</span>
`;

9
lib/ui/src/components/sidebar/__snapshots__/SidebarSearch.stories.storyshot Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UI|Sidebar/SidebarSearch default 1`] = `
<span
class="emotion-0"
>
TODO SidebarSearch
</span>
`;

5
lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
View File

@ -9,12 +9,13 @@ exports[`Storyshots UI|Sidebar/SidebarSubheading default 1`] = `
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
line-height: 24px;
color: #999999;
}
<span
<div
class="emotion-0"
>
Subheading
</span>
</div>
`;

498
lib/ui/src/settings/__snapshots__/about.stories.storyshot
View File

File diff suppressed because it is too large Load Diff