mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-17 05:02:23 +08:00
REFACTOR to use emotion, see: https://github.com/paypal/glamorous/issues/419
This commit is contained in:
Norbert de Langen
parent
96f130f11a
commit
75593740e9
36
.babelrc
36
.babelrc
@ -1,33 +1,13 @@
|
||||
{
|
||||
"presets": ["env", "stage-0", "react"],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": [
|
||||
"babel-plugin-macros",
|
||||
"babel-plugin-glamorous-displayname",
|
||||
["transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": true
|
||||
}]
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
"plugins": [
|
||||
"babel-plugin-macros",
|
||||
["transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": true
|
||||
}]
|
||||
]
|
||||
},
|
||||
"production": {
|
||||
"plugins": [
|
||||
"babel-plugin-macros",
|
||||
["transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
"plugins": [
|
||||
"emotion",
|
||||
"babel-plugin-macros",
|
||||
["transform-runtime", {
|
||||
"polyfill": false,
|
||||
"regenerator": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
"@storybook/core-events": "4.0.0-alpha.4",
|
||||
"axe-core": "^3.0.2",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const RerunButton = glamorous.button({
|
||||
const RerunButton = styled('button')({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
"@storybook/core-events": "4.0.0-alpha.4",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"make-error": "^1.3.4",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
import { Button as BaseButton } from '@storybook/components';
|
||||
|
||||
export const Actions = glamorous.pre({
|
||||
export const Actions = styled('pre')({
|
||||
flex: 1,
|
||||
margin: 0,
|
||||
padding: '8px 2px 20px 0',
|
||||
@ -9,7 +9,7 @@ export const Actions = glamorous.pre({
|
||||
color: '#666',
|
||||
});
|
||||
|
||||
export const Action = glamorous.div({
|
||||
export const Action = styled('div')({
|
||||
display: 'flex',
|
||||
padding: '3px 3px 3px 0',
|
||||
borderLeft: '5px solid white',
|
||||
@ -18,7 +18,7 @@ export const Action = glamorous.div({
|
||||
alignItems: 'start',
|
||||
});
|
||||
|
||||
export const Button = glamorous(BaseButton)({
|
||||
export const Button = styled(BaseButton)({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
@ -30,7 +30,7 @@ export const Button = glamorous(BaseButton)({
|
||||
border: '0 none',
|
||||
});
|
||||
|
||||
export const Counter = glamorous.div({
|
||||
export const Counter = styled('div')({
|
||||
margin: '0 5px 0 5px',
|
||||
backgroundColor: '#777777',
|
||||
color: '#ffffff',
|
||||
@ -38,16 +38,16 @@ export const Counter = glamorous.div({
|
||||
borderRadius: '20px',
|
||||
});
|
||||
|
||||
export const Countwrap = glamorous.div({
|
||||
export const Countwrap = styled('div')({
|
||||
paddingBottom: 2,
|
||||
});
|
||||
|
||||
export const InspectorContainer = glamorous.div({
|
||||
export const InspectorContainer = styled('div')({
|
||||
flex: 1,
|
||||
padding: '0 0 0 5px',
|
||||
});
|
||||
|
||||
export const Wrapper = glamorous.div({
|
||||
export const Wrapper = styled('div')({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
"@storybook/components": "4.0.0-alpha.4",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"core-js": "2.5.6",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.0.3",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withTheme } from 'glamorous';
|
||||
import createFragment from 'react-addons-create-fragment';
|
||||
|
||||
const getValueStyles = (codeColors = {}) => ({
|
||||
@ -283,4 +282,4 @@ PropVal.propTypes = {
|
||||
}),
|
||||
};
|
||||
|
||||
export default withTheme(PropVal);
|
||||
export default PropVal;
|
||||
|
||||
@ -5,7 +5,6 @@ import { polyfill } from 'react-lifecycles-compat';
|
||||
import PropTypes from 'prop-types';
|
||||
import global from 'global';
|
||||
import { baseFonts } from '@storybook/components';
|
||||
import { ThemeProvider } from 'glamorous';
|
||||
|
||||
import marksy from 'marksy';
|
||||
|
||||
@ -364,11 +363,8 @@ class Story extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ThemeProvider theme={this.state.stylesheet}>
|
||||
{this.props.showInline ? this._renderInline() : this._renderOverlay()}
|
||||
</ThemeProvider>
|
||||
);
|
||||
// <ThemeProvider theme={this.state.stylesheet}></ThemeProvider>
|
||||
return this.props.showInline ? this._renderInline() : this._renderOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous, { withTheme } from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const Button = glamorous.button(
|
||||
const Button = styled('button')(
|
||||
{
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #eee',
|
||||
@ -26,7 +26,7 @@ const Button = glamorous.button(
|
||||
props => props.styles
|
||||
);
|
||||
|
||||
const ContentWrapper = glamorous.div(
|
||||
const ContentWrapper = styled('div')(
|
||||
{
|
||||
transition: 'transform .2s ease',
|
||||
height: 16,
|
||||
@ -65,4 +65,4 @@ CopyButton.defaultProps = {
|
||||
theme: {},
|
||||
};
|
||||
|
||||
export default withTheme(CopyButton);
|
||||
export default CopyButton;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous, { withTheme } from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import CopyButton from './copyButton';
|
||||
import copy from './copy';
|
||||
|
||||
const TOGGLE_TIMEOUT = 1800;
|
||||
|
||||
const StyledPre = glamorous.pre(
|
||||
const StyledPre = styled('pre')(
|
||||
{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@ -72,4 +72,4 @@ Pre.defaultProps = {
|
||||
theme: {},
|
||||
};
|
||||
|
||||
export default withTheme(Pre);
|
||||
export default Pre;
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
"@storybook/addons": "4.0.0-alpha.4",
|
||||
"@storybook/components": "4.0.0-alpha.4",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const Indicator = glamorous.div(
|
||||
const Indicator = styled('div')(
|
||||
({ color, size }) => ({
|
||||
boxSizing: 'border-box',
|
||||
padding: `0 ${size / 2}px`,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts } from '@storybook/components';
|
||||
|
||||
@ -9,32 +9,32 @@ import Result, { FailedResult } from './Result';
|
||||
import provideJestResult from '../hoc/provideJestResult';
|
||||
import colors from '../colors';
|
||||
|
||||
const List = glamorous.ul({
|
||||
const List = styled('ul')({
|
||||
listStyle: 'none',
|
||||
fontSize: 14,
|
||||
padding: 0,
|
||||
margin: '10px 0',
|
||||
});
|
||||
|
||||
const Item = glamorous.li({
|
||||
const Item = styled('li')({
|
||||
display: 'block',
|
||||
margin: '10px 0',
|
||||
padding: 0,
|
||||
});
|
||||
|
||||
const NoTests = glamorous.div({
|
||||
const NoTests = styled('div')({
|
||||
padding: '10px 20px',
|
||||
flex: 1,
|
||||
...baseFonts,
|
||||
});
|
||||
|
||||
const FileTitle = glamorous.h2({
|
||||
const FileTitle = styled('h2')({
|
||||
margin: 0,
|
||||
fontWeight: 500,
|
||||
fontSize: 18,
|
||||
});
|
||||
|
||||
const SuiteHead = glamorous.div({
|
||||
const SuiteHead = styled('div')({
|
||||
display: 'flex',
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
@ -42,7 +42,7 @@ const SuiteHead = glamorous.div({
|
||||
paddingTop: 10,
|
||||
});
|
||||
|
||||
const SuiteTotals = glamorous(({ successNumber, failedNumber, result, className }) => (
|
||||
const SuiteTotals = styled(({ successNumber, failedNumber, result, className }) => (
|
||||
<div className={className}>
|
||||
{successNumber > 0 && <div style={{ color: colors.success }}>{successNumber} passed</div>}
|
||||
{failedNumber > 0 && <div style={{ color: colors.error }}>{failedNumber} failed</div>}
|
||||
@ -62,7 +62,7 @@ const SuiteTotals = glamorous(({ successNumber, failedNumber, result, className
|
||||
},
|
||||
});
|
||||
|
||||
const SuiteProgress = glamorous(({ successNumber, result, className }) => (
|
||||
const SuiteProgress = styled(({ successNumber, result, className }) => (
|
||||
<div className={className} role="progressbar">
|
||||
<span style={{ width: `${successNumber / result.assertionResults.length * 100}%` }}>
|
||||
{`${successNumber / result.assertionResults.length * 100}%`}
|
||||
@ -89,12 +89,12 @@ const SuiteProgress = glamorous(({ successNumber, result, className }) => (
|
||||
},
|
||||
}));
|
||||
|
||||
const SuiteTitle = glamorous.div({
|
||||
const SuiteTitle = styled('div')({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
const Content = glamorous(({ tests, className }) => (
|
||||
const Content = styled(({ tests, className }) => (
|
||||
<div className={className}>
|
||||
{tests.map(({ name, result }) => {
|
||||
if (!result) {
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import provideJestResult from '../hoc/provideJestResult';
|
||||
import Indicator from './Indicator';
|
||||
import colors from '../colors';
|
||||
|
||||
const Wrapper = glamorous.div({
|
||||
const Wrapper = styled('div')({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
const PanelName = glamorous.div({
|
||||
const PanelName = styled('div')({
|
||||
paddingLeft: 5,
|
||||
});
|
||||
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
import { monoFonts } from '@storybook/components';
|
||||
|
||||
import Indicator from './Indicator';
|
||||
import colors from '../colors';
|
||||
|
||||
const Pre = glamorous.pre({
|
||||
const Pre = styled('pre')({
|
||||
margin: 0,
|
||||
...monoFonts,
|
||||
});
|
||||
|
||||
const FlexContainer = glamorous.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
const FlexContainer = styled('div')({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
/* eslint no-control-regex:0 */
|
||||
const patterns = [/^\x08+/, /^\x1b\[[012]?K/, /^\x1b\[?[\d;]{0,3}/];
|
||||
|
||||
const Positive = glamorous.strong({
|
||||
const Positive = styled('strong')({
|
||||
color: colors.success,
|
||||
fontWeight: 500,
|
||||
});
|
||||
const Negative = glamorous.strong({
|
||||
const Negative = styled('strong')({
|
||||
color: colors.error,
|
||||
fontWeight: 500,
|
||||
});
|
||||
const StackTrace = glamorous(({ trace, className }) => (
|
||||
const StackTrace = styled(({ trace, className }) => (
|
||||
<details className={className}>
|
||||
<summary>Callstack</summary>
|
||||
{trace
|
||||
@ -42,11 +42,11 @@ const StackTrace = glamorous(({ trace, className }) => (
|
||||
background: 'silver',
|
||||
padding: 10,
|
||||
});
|
||||
const Main = glamorous(({ msg, className }) => <section className={className}>{msg}</section>)({
|
||||
const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
|
||||
padding: 10,
|
||||
borderBottom: '1px solid silver',
|
||||
});
|
||||
const Sub = glamorous(({ msg, className }) => (
|
||||
const Sub = styled(({ msg, className }) => (
|
||||
<section className={className}>
|
||||
{msg
|
||||
.filter(item => typeof item !== 'string' || (typeof item === 'string' && item.trim() !== ''))
|
||||
@ -186,18 +186,18 @@ Message.propTypes = {
|
||||
msg: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const Head = glamorous.header({
|
||||
const Head = styled('header')({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
});
|
||||
|
||||
const Title = glamorous.h3({
|
||||
const Title = styled('h3')({
|
||||
padding: '10px 10px 0 10px',
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
export const FailedResult = glamorous(({ fullName, title, status, failureMessages, className }) => (
|
||||
export const FailedResult = styled(({ fullName, title, status, failureMessages, className }) => (
|
||||
<div className={className}>
|
||||
<Head>
|
||||
<FlexContainer>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
.css-0,
|
||||
[data-css-0] {
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
@ -15,28 +14,22 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Component
|
||||
className="css-0"
|
||||
<button
|
||||
className="emotion-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="css-0"
|
||||
onClick={[Function]}
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Component>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
.css-0,
|
||||
[data-css-0] {
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
@ -49,23 +42,17 @@ exports[`Storyshots Another Button with text 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Component
|
||||
className="css-0"
|
||||
<button
|
||||
className="emotion-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="css-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Component>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
.css-0,
|
||||
[data-css-0] {
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
@ -78,28 +65,22 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Component
|
||||
className="css-0"
|
||||
<button
|
||||
className="emotion-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="css-0"
|
||||
onClick={[Function]}
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Component>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
.css-0,
|
||||
[data-css-0] {
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
@ -112,31 +93,24 @@ exports[`Storyshots Button with text 1`] = `
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Component
|
||||
className="css-0"
|
||||
<button
|
||||
className="emotion-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="css-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Component>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
.css-0,
|
||||
[data-css-0] {
|
||||
.emotion-9 {
|
||||
margin: 15px;
|
||||
max-width: 600px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
|
||||
}
|
||||
|
||||
.css-1,
|
||||
[data-css-1] {
|
||||
.emotion-1 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
@ -146,9 +120,9 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.css-2,
|
||||
[data-css-2] {
|
||||
.emotion-2 {
|
||||
color: #1474f3;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
@ -161,45 +135,44 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.css-3,
|
||||
[data-css-3] {
|
||||
.emotion-6 {
|
||||
color: #1474f3;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.css-4,
|
||||
[data-css-4] {
|
||||
.emotion-8 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
>
|
||||
<Welcome__Main>
|
||||
<Styled(article)>
|
||||
<article
|
||||
className="css-0"
|
||||
className="emotion-9"
|
||||
>
|
||||
<Welcome__Title>
|
||||
<Styled(h1)>
|
||||
<h1
|
||||
className="css-nil"
|
||||
className="emotion-0"
|
||||
>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Welcome__Title>
|
||||
</Styled(h1)>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="css-1"
|
||||
className="emotion-1"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
@ -208,25 +181,25 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<Welcome__NavButton
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="css-2"
|
||||
className="emotion-2"
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</Welcome__NavButton>
|
||||
</Styled(button)>
|
||||
for a component called
|
||||
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="css-1"
|
||||
className="emotion-1"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
@ -235,22 +208,22 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="css-1"
|
||||
className="emotion-1"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
stories located at
|
||||
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="css-1"
|
||||
className="emotion-1"
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
@ -258,43 +231,43 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<Welcome__Link
|
||||
<Styled(a)
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
className="css-3"
|
||||
className="emotion-6"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Welcome__Link>
|
||||
</Styled(a)>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Welcome__Note>
|
||||
<Styled(p)>
|
||||
<p
|
||||
className="css-4"
|
||||
className="emotion-8"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="css-1"
|
||||
className="emotion-1"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</Welcome__Note>
|
||||
</Styled(p)>
|
||||
</article>
|
||||
</Welcome__Main>
|
||||
</Styled(article)>
|
||||
</Welcome>
|
||||
`;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
<button
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -11,21 +11,21 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Unknown>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
<button
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Unknown>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
<button
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -34,31 +34,31 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Unknown>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<Unknown
|
||||
className="css-1yjiefr"
|
||||
<button
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Unknown>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<Welcome__Main>
|
||||
<Welcome__Title>
|
||||
<Styled(article)>
|
||||
<Styled(h1)>
|
||||
Welcome to storybook
|
||||
</Welcome__Title>
|
||||
</Styled(h1)>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
src/stories
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
@ -67,16 +67,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<Welcome__NavButton
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</Welcome__NavButton>
|
||||
</Styled(button)>
|
||||
for a component called
|
||||
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
Button
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
@ -85,14 +85,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
Button
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
stories located at
|
||||
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
src/stories/index.js
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
@ -100,26 +100,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<Welcome__Link
|
||||
<Styled(a)
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Welcome__Link>
|
||||
</Styled(a)>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Welcome__Note>
|
||||
<Styled(p)>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<Welcome__InlineCode>
|
||||
<Styled(code)>
|
||||
.storybook/webpack.config.js
|
||||
</Welcome__InlineCode>
|
||||
</Styled(code)>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Welcome__Note>
|
||||
</Welcome__Main>
|
||||
</Styled(p)>
|
||||
</Styled(article)>
|
||||
`;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1qwzad5\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Another Button with text 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1qwzad5\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Button with some emoji 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1qwzad5\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Button with text 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1qwzad5\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -16,7 +16,7 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -16,7 +16,7 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
className="css-1qwzad5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<article
|
||||
className="css-1fqbdip"
|
||||
className="css-3qkdq7"
|
||||
>
|
||||
<h1
|
||||
className="css-nil"
|
||||
className="css-0"
|
||||
>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
@ -15,7 +15,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
className="css-mteq83"
|
||||
className="css-1rxzob2"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
@ -28,7 +28,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
className="css-1opliz7"
|
||||
className="css-1otf2jm"
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
@ -36,7 +36,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
for a component called
|
||||
|
||||
<code
|
||||
className="css-mteq83"
|
||||
className="css-1rxzob2"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
@ -49,14 +49,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
className="css-mteq83"
|
||||
className="css-1rxzob2"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
|
||||
<code
|
||||
className="css-mteq83"
|
||||
className="css-1rxzob2"
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
@ -68,7 +68,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
Have a look at the
|
||||
|
||||
<a
|
||||
className="css-ca0824"
|
||||
className="css-4d3lbr"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
@ -79,7 +79,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
className="css-bwdon3"
|
||||
className="css-1tzeee1"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
@ -87,7 +87,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
className="css-mteq83"
|
||||
className="css-1rxzob2"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
|
||||
@ -41,8 +41,8 @@
|
||||
"common-tags": "^1.7.2",
|
||||
"core-js": "^2.5.4",
|
||||
"dotenv-webpack": "^1.5.5",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
|
||||
@ -39,8 +39,8 @@
|
||||
"common-tags": "^1.7.2",
|
||||
"core-js": "^2.5.6",
|
||||
"dotenv-webpack": "^1.5.5",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const Button = glamorous.button({
|
||||
const Button = styled('button')({
|
||||
border: '1px solid #eee',
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#FFFFFF',
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const Main = glamorous.article({
|
||||
const Main = styled('article')({
|
||||
margin: 15,
|
||||
maxWidth: 600,
|
||||
lineHeight: 1.4,
|
||||
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
|
||||
});
|
||||
|
||||
const Title = glamorous.h1({});
|
||||
const Title = styled('h1')({});
|
||||
|
||||
const Note = glamorous.p({
|
||||
const Note = styled('p')({
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
const InlineCode = glamorous.code({
|
||||
const InlineCode = styled('code')({
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
padding: '2px 5px',
|
||||
@ -25,14 +25,14 @@ const InlineCode = glamorous.code({
|
||||
color: '#3a3a3a',
|
||||
});
|
||||
|
||||
const Link = glamorous.a({
|
||||
const Link = styled('a')({
|
||||
color: '#1474f3',
|
||||
textDecoration: 'none',
|
||||
borderBottom: '1px solid #1474f3',
|
||||
paddingBottom: 2,
|
||||
});
|
||||
|
||||
const NavButton = glamorous(Link.withComponent('button'))({
|
||||
const NavButton = styled(Link.withComponent('button'))({
|
||||
borderTop: 'none',
|
||||
borderRight: 'none',
|
||||
borderLeft: 'none',
|
||||
|
||||
@ -92,7 +92,7 @@ exports[`Storyshots Button addons composition 1`] = `
|
||||
Story Source
|
||||
</h1>
|
||||
<pre
|
||||
class="css-4akams"
|
||||
class="css-r8d96o"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
@ -181,10 +181,10 @@ exports[`Storyshots Button addons composition 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="css-gydez8"
|
||||
class="css-zvhq5i"
|
||||
>
|
||||
<div
|
||||
class="css-kv47nt"
|
||||
class="css-lvl6aa"
|
||||
>
|
||||
<div
|
||||
style="margin-bottom:6px"
|
||||
@ -296,7 +296,7 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
Story Source
|
||||
</h1>
|
||||
<pre
|
||||
class="css-4akams"
|
||||
class="css-r8d96o"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
@ -385,10 +385,10 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="css-gydez8"
|
||||
class="css-zvhq5i"
|
||||
>
|
||||
<div
|
||||
class="css-kv47nt"
|
||||
class="css-lvl6aa"
|
||||
>
|
||||
<div
|
||||
style="margin-bottom:6px"
|
||||
@ -415,32 +415,32 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
"Container" Component
|
||||
</h2>
|
||||
<table
|
||||
class="css-1ytzlk7"
|
||||
class="css-1uhv8nx"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
property
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
propType
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
required
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
default
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
description
|
||||
</th>
|
||||
@ -449,47 +449,47 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
children
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
yes
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
isAmazing
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span>
|
||||
{
|
||||
@ -502,27 +502,27 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
age
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span>
|
||||
{
|
||||
@ -571,27 +571,27 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
title
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span
|
||||
style="color:#22a;word-break:break-word"
|
||||
@ -600,7 +600,7 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -625,7 +625,7 @@ exports[`Storyshots Button with new info 1`] = `
|
||||
|
||||
exports[`Storyshots Button with notes 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Check my notes in the notes panel
|
||||
</button>
|
||||
@ -633,7 +633,7 @@ exports[`Storyshots Button with notes 1`] = `
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
@ -719,7 +719,7 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
Story Source
|
||||
</h1>
|
||||
<pre
|
||||
class="css-4akams"
|
||||
class="css-r8d96o"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
@ -801,10 +801,10 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="css-gydez8"
|
||||
class="css-zvhq5i"
|
||||
>
|
||||
<div
|
||||
class="css-kv47nt"
|
||||
class="css-lvl6aa"
|
||||
>
|
||||
<div
|
||||
style="margin-bottom:6px"
|
||||
@ -831,32 +831,32 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
"Container" Component
|
||||
</h2>
|
||||
<table
|
||||
class="css-1ytzlk7"
|
||||
class="css-1uhv8nx"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
property
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
propType
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
required
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
default
|
||||
</th>
|
||||
<th
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
description
|
||||
</th>
|
||||
@ -865,47 +865,47 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
children
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
yes
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
isAmazing
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span>
|
||||
{
|
||||
@ -918,27 +918,27 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
age
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span>
|
||||
{
|
||||
@ -987,27 +987,27 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
title
|
||||
</td>
|
||||
<td
|
||||
class="css-1ygfcef"
|
||||
class="css-1qcb1f7"
|
||||
>
|
||||
<span />
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
-
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
>
|
||||
<span
|
||||
style="color:#22a;word-break:break-word"
|
||||
@ -1016,7 +1016,7 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="css-d52hbj"
|
||||
class="css-11b5gui"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1041,7 +1041,7 @@ exports[`Storyshots Button with some info 1`] = `
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
@ -1061,7 +1061,7 @@ exports[`Storyshots Some really long story kind description with text 1`] = `
|
||||
style="margin:auto"
|
||||
>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<article
|
||||
class="css-1fqbdip"
|
||||
class="css-3qkdq7"
|
||||
>
|
||||
<h1
|
||||
class="css-nil"
|
||||
class="css-0"
|
||||
>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
@ -15,7 +15,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
class="css-mteq83"
|
||||
class="css-1rxzob2"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
@ -28,13 +28,13 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<p>
|
||||
See these sample
|
||||
<button
|
||||
class="css-1opliz7"
|
||||
class="css-1otf2jm"
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
for a component called
|
||||
<code
|
||||
class="css-mteq83"
|
||||
class="css-1rxzob2"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
@ -47,13 +47,13 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
(Try editing the
|
||||
<code
|
||||
class="css-mteq83"
|
||||
class="css-1rxzob2"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
stories located at
|
||||
<code
|
||||
class="css-mteq83"
|
||||
class="css-1rxzob2"
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
@ -64,7 +64,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
class="css-ca0824"
|
||||
class="css-4d3lbr"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
@ -74,7 +74,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
class="css-bwdon3"
|
||||
class="css-1tzeee1"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
@ -82,7 +82,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
<code
|
||||
class="css-mteq83"
|
||||
class="css-1rxzob2"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
|
||||
@ -3,102 +3,102 @@
|
||||
exports[`Storyshots Addons|Actions All types 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Array
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Boolean
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Empty Object
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
File
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Function A
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Bound Function A
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Infinity
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
-Infinity
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
NaN
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
null
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Number
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Multiple
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Plain Object
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Object (depth: 2)
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
RegExp
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
String
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Symbol
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
SyntheticEvent
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
undefined
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Window
|
||||
</button>
|
||||
@ -107,7 +107,7 @@ exports[`Storyshots Addons|Actions All types 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Circular Payload 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Circular Payload
|
||||
</button>
|
||||
@ -115,7 +115,7 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated Action (deprecated) 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Native Event
|
||||
</button>
|
||||
@ -123,7 +123,7 @@ exports[`Storyshots Addons|Actions Decorated Action (deprecated) 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Moving away from this story will persist the action logger
|
||||
</button>
|
||||
@ -131,7 +131,7 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated action 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Native Event
|
||||
</button>
|
||||
@ -139,7 +139,7 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Moving away from this story will persist the action logger
|
||||
</button>
|
||||
@ -147,7 +147,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Decorated actions 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Native Event
|
||||
</button>
|
||||
@ -155,7 +155,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Function Name 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Action.name: fnName
|
||||
</button>
|
||||
@ -163,7 +163,7 @@ exports[`Storyshots Addons|Actions Function Name 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Hello World 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
@ -172,12 +172,12 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
|
||||
exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
False
|
||||
</button>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
True
|
||||
</button>
|
||||
@ -186,7 +186,7 @@ exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Moving away from this story will persist the action logger
|
||||
</button>
|
||||
@ -194,7 +194,7 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
@ -202,7 +202,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Moving away from this story will persist the action logger
|
||||
</button>
|
||||
@ -210,7 +210,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Hello World
|
||||
</button>
|
||||
@ -222,7 +222,7 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
|
||||
Moving away from this story will persist the action logger
|
||||
</p>
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Object (configured clearOnStoryChange: false)
|
||||
</button>
|
||||
@ -231,7 +231,7 @@ exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@ -239,7 +239,7 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
|
||||
|
||||
exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
|
||||
<button
|
||||
class="css-1yjiefr"
|
||||
class="css-1qwzad5"
|
||||
>
|
||||
Object (configured depth: 2)
|
||||
</button>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,8 +2,7 @@
|
||||
|
||||
exports[`Storyshots Core|Events Force re-render 1`] = `
|
||||
<button
|
||||
class="css-1ibnlbj"
|
||||
type="button"
|
||||
class="css-191qq9b"
|
||||
>
|
||||
Clicked: 0
|
||||
</button>
|
||||
|
||||
@ -1,12 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Other|/stories//Dirname Example story 1 1`] = `
|
||||
exports[`Storyshots Other|function macroWrapper(args) {
|
||||
var source = args.source,
|
||||
isBabelMacrosCall = args.isBabelMacrosCall;
|
||||
|
||||
if (!isBabelMacrosCall) {
|
||||
throw new MacroError(\`The macro you imported from "\${source}" is being executed outside the context of compilation with babel-macros. \` + \`This indicates that you don't have the babel plugin "babel-macros" configured correctly. \` + \`Please see the documentation for how to configure babel-macros properly: \` + 'https://github.com/kentcdodds/babel-macros/blob/master/other/docs/user.md');
|
||||
}
|
||||
return macro(args);
|
||||
}/Dirname Example story 1 1`] = `
|
||||
<button>
|
||||
Story 1
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Other|/stories//Dirname Example story 2 1`] = `
|
||||
exports[`Storyshots Other|function macroWrapper(args) {
|
||||
var source = args.source,
|
||||
isBabelMacrosCall = args.isBabelMacrosCall;
|
||||
|
||||
if (!isBabelMacrosCall) {
|
||||
throw new MacroError(\`The macro you imported from "\${source}" is being executed outside the context of compilation with babel-macros. \` + \`This indicates that you don't have the babel plugin "babel-macros" configured correctly. \` + \`Please see the documentation for how to configure babel-macros properly: \` + 'https://github.com/kentcdodds/babel-macros/blob/master/other/docs/user.md');
|
||||
}
|
||||
return macro(args);
|
||||
}/Dirname Example story 2 1`] = `
|
||||
<button>
|
||||
Story 2
|
||||
</button>
|
||||
|
||||
@ -11,4 +11,4 @@
|
||||
|
||||
Storybook Components is a React UI components collection used by the UI of Storybook and Addons.
|
||||
|
||||
All components use [`glamorous`](https://glamorous.rocks) for styling.
|
||||
All components use [`glamorous`](https://styled.rocks) for styling.
|
||||
|
||||
@ -15,12 +15,12 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.6.1",
|
||||
"react-emotion": "^9.1.3",
|
||||
"react-split-pane": "^0.1.77"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -5,30 +5,33 @@ exports[`Storyshots Components|AddonPanel default 1`] = `
|
||||
style="height:calc(100vh - 20px)"
|
||||
>
|
||||
<div
|
||||
class="css-1rulpt"
|
||||
class="css-1u7hvgb"
|
||||
>
|
||||
<div
|
||||
class="css-ogka8q"
|
||||
class="css-6km6mc"
|
||||
role="tablist"
|
||||
>
|
||||
<div
|
||||
class="css-17i7p52"
|
||||
class="css-4nm8j5"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
Test 1
|
||||
</div>
|
||||
<div
|
||||
class="css-1rybdg4"
|
||||
class="css-bf047d"
|
||||
role="tab"
|
||||
selected=""
|
||||
type="button"
|
||||
>
|
||||
Test 2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-15ai5s3"
|
||||
class="css-1k5wv3o"
|
||||
>
|
||||
<div
|
||||
class="css-gyrv08"
|
||||
class="css-1hyfx7x"
|
||||
hidden=""
|
||||
role="tabpanel"
|
||||
>
|
||||
@ -39,7 +42,7 @@ exports[`Storyshots Components|AddonPanel default 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-w2c7bl"
|
||||
class="css-13pmxen"
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
@ -58,7 +61,7 @@ exports[`Storyshots Components|AddonPanel no panels 1`] = `
|
||||
style="height:calc(100vh - 20px)"
|
||||
>
|
||||
<p
|
||||
class="css-4dh0ei"
|
||||
class="css-i7uow2"
|
||||
>
|
||||
no panels available
|
||||
</p>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts, Placeholder } from '../';
|
||||
|
||||
const Wrapper = glamorous.div({
|
||||
const Wrapper = styled('div')({
|
||||
flex: '1 1 auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -16,7 +16,7 @@ const Wrapper = glamorous.div({
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const TabBar = glamorous.div({
|
||||
export const TabBar = styled('div')({
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
@ -25,7 +25,7 @@ export const TabBar = glamorous.div({
|
||||
borderBottom: 'solid 1px #eaeaea',
|
||||
});
|
||||
|
||||
const Content = glamorous.div({
|
||||
const Content = styled('div')({
|
||||
flex: '1 1 0',
|
||||
display: 'flex',
|
||||
overflow: 'auto',
|
||||
@ -33,7 +33,7 @@ const Content = glamorous.div({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
const TabButton = glamorous.div(
|
||||
const TabButton = styled('div')(
|
||||
baseFonts,
|
||||
{
|
||||
fontSize: 11,
|
||||
@ -57,7 +57,7 @@ const TabButton = glamorous.div(
|
||||
}
|
||||
);
|
||||
|
||||
const Panel = glamorous.div(
|
||||
const Panel = styled('div')(
|
||||
({ hidden }) => (hidden ? { display: 'none' } : { display: 'flex', flex: 1 })
|
||||
);
|
||||
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
|
||||
exports[`Storyshots Components|Form/Button with onclick 1`] = `
|
||||
<button
|
||||
class="css-1ibnlbj"
|
||||
type="button"
|
||||
class="css-191qq9b"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
import { baseFonts } from '../theme';
|
||||
|
||||
export default glamorous
|
||||
.button({
|
||||
...baseFonts,
|
||||
border: 'none',
|
||||
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
|
||||
backgroundColor: 'rgb(255, 255, 255)',
|
||||
padding: '4px 10px 7px',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
transition: 'box-shadow 0.15s ease-out',
|
||||
':hover': {
|
||||
transition: 'background-color 0.15s ease-out',
|
||||
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
':focus': {
|
||||
transition: 'background-color 0.15s ease-out',
|
||||
outline: 'none',
|
||||
boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
':active': {
|
||||
transition: 'none',
|
||||
backgroundColor: 'rgb(247, 247, 247)',
|
||||
},
|
||||
})
|
||||
.withProps({ type: 'button' });
|
||||
export default styled('button')({
|
||||
...baseFonts,
|
||||
border: 'none',
|
||||
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2)',
|
||||
backgroundColor: 'rgb(255, 255, 255)',
|
||||
padding: '4px 10px 7px',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
transition: 'box-shadow 0.15s ease-out',
|
||||
':hover': {
|
||||
transition: 'background-color 0.15s ease-out',
|
||||
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
':focus': {
|
||||
transition: 'background-color 0.15s ease-out',
|
||||
outline: 'none',
|
||||
boxShadow: '0 0 0 2px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
':active': {
|
||||
transition: 'none',
|
||||
backgroundColor: 'rgb(247, 247, 247)',
|
||||
},
|
||||
});
|
||||
|
||||
@ -2,27 +2,27 @@
|
||||
|
||||
exports[`Storyshots Components|Header mobile-view 1`] = `
|
||||
<div
|
||||
class="css-1s18db1"
|
||||
class="css-1ct5egv"
|
||||
>
|
||||
<button
|
||||
class="css-bl2pg7"
|
||||
class="css-r41s90"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<a
|
||||
class="css-1n8et9"
|
||||
class="css-5m3y99"
|
||||
href="http://google.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
class="css-ht6bk4"
|
||||
>
|
||||
name
|
||||
</h3>
|
||||
</a>
|
||||
<button
|
||||
class="css-tjfz53"
|
||||
class="css-1sibdyl"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
@ -31,22 +31,22 @@ exports[`Storyshots Components|Header mobile-view 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Header simple 1`] = `
|
||||
<div
|
||||
class="css-eivvbb"
|
||||
class="css-5xz1i6"
|
||||
>
|
||||
<a
|
||||
class="css-9hm7k1"
|
||||
class="css-108o064"
|
||||
href="http://google.com"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
class="css-ht6bk4"
|
||||
>
|
||||
name
|
||||
</h3>
|
||||
</a>
|
||||
<button
|
||||
class="css-8kgocl"
|
||||
class="css-i6e0jg"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts } from '../';
|
||||
|
||||
const Wrapper = glamorous.div(({ isMobileDevice }) => ({
|
||||
const Wrapper = styled('div')(({ isMobileDevice }) => ({
|
||||
margin: isMobileDevice ? '10px 0' : '0 0 10px',
|
||||
display: 'flex',
|
||||
}));
|
||||
|
||||
const HeadingLink = glamorous.a(({ isMobileDevice }) => ({
|
||||
const HeadingLink = styled('a')(({ isMobileDevice }) => ({
|
||||
textDecoration: 'none',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
@ -19,7 +19,7 @@ const HeadingLink = glamorous.a(({ isMobileDevice }) => ({
|
||||
border: isMobileDevice ? 'none' : '1px solid rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 2,
|
||||
}));
|
||||
const Heading = glamorous.h3(baseFonts, {
|
||||
const Heading = styled('h3')(baseFonts, {
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1.5px',
|
||||
fontSize: '12px',
|
||||
@ -50,10 +50,10 @@ const iconStyle = ({ isMobileDevice }) => ({
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
const BurgerButton = glamorous.button(iconStyle({ isMobileDevice: true }), {
|
||||
const BurgerButton = styled('button')(iconStyle({ isMobileDevice: true }), {
|
||||
paddingBottom: 2,
|
||||
});
|
||||
const ShortHelpButton = glamorous.button(iconStyle);
|
||||
const ShortHelpButton = styled('button')(iconStyle);
|
||||
|
||||
const Header = ({
|
||||
openShortcutsHelp,
|
||||
|
||||
@ -7,7 +7,7 @@ describe('manager.ui.components.stories_panel.header', () => {
|
||||
const openShortcutsHelp = jest.fn();
|
||||
const wrap = shallow(<Header openShortcutsHelp={openShortcutsHelp} />);
|
||||
|
||||
wrap.find('glamorous(button)').simulate('click');
|
||||
wrap.find('Styled(button)').simulate('click');
|
||||
|
||||
expect(openShortcutsHelp).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
export default glamorous.button(
|
||||
export default styled('button')(
|
||||
{
|
||||
border: '1px solid rgba(0, 0, 0, 0)',
|
||||
font: 'inherit',
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
<div
|
||||
class="css-1dfemhp"
|
||||
class="css-4b1g0m"
|
||||
>
|
||||
<div
|
||||
class="SplitPane vertical "
|
||||
@ -13,10 +13,10 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:250px"
|
||||
>
|
||||
<div
|
||||
class="css-1so1enu"
|
||||
class="css-1kbxkw2"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -25,10 +25,12 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-jjd33c"
|
||||
class="css-owlojx"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,13 +52,13 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
style="overflow:auto;flex:1;position:relative;outline:none"
|
||||
>
|
||||
<div
|
||||
class="css-1czpjwe"
|
||||
class="css-vuknnh"
|
||||
>
|
||||
<div
|
||||
class="css-165xhya"
|
||||
class="css-1oma8ph"
|
||||
/>
|
||||
<div
|
||||
class="css-adfvcn"
|
||||
class="css-1qmkiz4"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -75,13 +77,15 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:400px"
|
||||
>
|
||||
<div
|
||||
class="css-8umvy9"
|
||||
class="css-1929wko"
|
||||
>
|
||||
<div
|
||||
class="css-1jvx458"
|
||||
class="css-nq4yle"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -99,7 +103,7 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Layout default 1`] = `
|
||||
<div
|
||||
class="css-1dfemhp"
|
||||
class="css-4b1g0m"
|
||||
>
|
||||
<div
|
||||
class="SplitPane vertical "
|
||||
@ -110,10 +114,10 @@ exports[`Storyshots Components|Layout default 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:250px"
|
||||
>
|
||||
<div
|
||||
class="css-1so1enu"
|
||||
class="css-1kbxkw2"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -122,10 +126,12 @@ exports[`Storyshots Components|Layout default 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-jjd33c"
|
||||
class="css-owlojx"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,13 +153,13 @@ exports[`Storyshots Components|Layout default 1`] = `
|
||||
style="overflow:auto;flex:1;position:relative;outline:none"
|
||||
>
|
||||
<div
|
||||
class="css-ysp1on"
|
||||
class="css-7hbg2h"
|
||||
>
|
||||
<div
|
||||
class="css-165xhya"
|
||||
class="css-1oma8ph"
|
||||
/>
|
||||
<div
|
||||
class="css-adfvcn"
|
||||
class="css-1qmkiz4"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -172,13 +178,15 @@ exports[`Storyshots Components|Layout default 1`] = `
|
||||
style="flex:none;position:relative;outline:none;height:200px;display:flex"
|
||||
>
|
||||
<div
|
||||
class="css-1ssjsmz"
|
||||
class="css-1fxkhug"
|
||||
>
|
||||
<div
|
||||
class="css-1tog424"
|
||||
class="css-1fpokv0"
|
||||
direction="horizontal"
|
||||
>
|
||||
<div
|
||||
class="css-12krn9q"
|
||||
class="css-16ohwqy"
|
||||
direction="horizontal"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -196,7 +204,7 @@ exports[`Storyshots Components|Layout default 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
<div
|
||||
class="css-1dfemhp"
|
||||
class="css-4b1g0m"
|
||||
>
|
||||
<div
|
||||
class="SplitPane vertical disabled"
|
||||
@ -207,10 +215,10 @@ exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:1px"
|
||||
>
|
||||
<div
|
||||
class="css-w5nx2k"
|
||||
class="css-1aqo4nl"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -219,10 +227,12 @@ exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-jjd33c"
|
||||
class="css-owlojx"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -244,13 +254,13 @@ exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
style="overflow:auto;flex:1;position:relative;outline:none"
|
||||
>
|
||||
<div
|
||||
class="css-ysp1on"
|
||||
class="css-7hbg2h"
|
||||
>
|
||||
<div
|
||||
class="css-165xhya"
|
||||
class="css-1oma8ph"
|
||||
/>
|
||||
<div
|
||||
class="css-19sdkk7"
|
||||
class="css-1ybcogp"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -269,13 +279,15 @@ exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
style="flex:none;position:relative;outline:none;height:1px;display:flex"
|
||||
>
|
||||
<div
|
||||
class="css-lw0tx4"
|
||||
class="css-1vc1w07"
|
||||
>
|
||||
<div
|
||||
class="css-1tog424"
|
||||
class="css-1fpokv0"
|
||||
direction="horizontal"
|
||||
>
|
||||
<div
|
||||
class="css-12krn9q"
|
||||
class="css-16ohwqy"
|
||||
direction="horizontal"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -293,40 +305,44 @@ exports[`Storyshots Components|Layout full screen 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Layout mobile 1`] = `
|
||||
<div
|
||||
class="css-vzm1uf"
|
||||
class="css-o1qq1g"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="css-1ebwt9d"
|
||||
class="css-1kes5pl"
|
||||
>
|
||||
<div
|
||||
class="css-ogka8q"
|
||||
class="css-6km6mc"
|
||||
>
|
||||
<div
|
||||
class="css-17i7p52"
|
||||
class="css-4nm8j5"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
Navigator
|
||||
</div>
|
||||
<div
|
||||
class="css-1rybdg4"
|
||||
class="css-bf047d"
|
||||
role="tab"
|
||||
selected=""
|
||||
type="button"
|
||||
>
|
||||
Preview
|
||||
</div>
|
||||
<div
|
||||
class="css-17i7p52"
|
||||
class="css-4nm8j5"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
Addons
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-gyrv08"
|
||||
class="css-1hyfx7x"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -336,10 +352,11 @@ exports[`Storyshots Components|Layout mobile 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1m9zc0l"
|
||||
class="css-1387n1o"
|
||||
selected=""
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -349,7 +366,7 @@ exports[`Storyshots Components|Layout mobile 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-gyrv08"
|
||||
class="css-1hyfx7x"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
|
||||
@ -363,7 +380,7 @@ exports[`Storyshots Components|Layout mobile 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
<div
|
||||
class="css-1dfemhp"
|
||||
class="css-4b1g0m"
|
||||
>
|
||||
<div
|
||||
class="SplitPane vertical "
|
||||
@ -374,10 +391,10 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:250px"
|
||||
>
|
||||
<div
|
||||
class="css-1so1enu"
|
||||
class="css-1kbxkw2"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -386,10 +403,12 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-jjd33c"
|
||||
class="css-owlojx"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -411,13 +430,13 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
style="overflow:auto;flex:1;position:relative;outline:none"
|
||||
>
|
||||
<div
|
||||
class="css-ysp1on"
|
||||
class="css-7hbg2h"
|
||||
>
|
||||
<div
|
||||
class="css-165xhya"
|
||||
class="css-1oma8ph"
|
||||
/>
|
||||
<div
|
||||
class="css-adfvcn"
|
||||
class="css-1qmkiz4"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -436,13 +455,15 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
style="flex:none;position:relative;outline:none;height:1px;display:flex"
|
||||
>
|
||||
<div
|
||||
class="css-lw0tx4"
|
||||
class="css-1vc1w07"
|
||||
>
|
||||
<div
|
||||
class="css-1tog424"
|
||||
class="css-1fpokv0"
|
||||
direction="horizontal"
|
||||
>
|
||||
<div
|
||||
class="css-12krn9q"
|
||||
class="css-16ohwqy"
|
||||
direction="horizontal"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -460,7 +481,7 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
|
||||
|
||||
exports[`Storyshots Components|Layout no stories panel 1`] = `
|
||||
<div
|
||||
class="css-1dfemhp"
|
||||
class="css-4b1g0m"
|
||||
>
|
||||
<div
|
||||
class="SplitPane vertical disabled"
|
||||
@ -471,10 +492,10 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
|
||||
style="flex:none;position:relative;outline:none;width:1px"
|
||||
>
|
||||
<div
|
||||
class="css-w5nx2k"
|
||||
class="css-1aqo4nl"
|
||||
>
|
||||
<div
|
||||
class="css-a8tcv7"
|
||||
class="css-9in0fq"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#4abdac"
|
||||
@ -483,10 +504,12 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-jjd33c"
|
||||
class="css-owlojx"
|
||||
direction="vertical"
|
||||
>
|
||||
<div
|
||||
class="css-jv2gl8"
|
||||
class="css-m9qu1u"
|
||||
direction="vertical"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -508,13 +531,13 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
|
||||
style="overflow:auto;flex:1;position:relative;outline:none"
|
||||
>
|
||||
<div
|
||||
class="css-ysp1on"
|
||||
class="css-7hbg2h"
|
||||
>
|
||||
<div
|
||||
class="css-165xhya"
|
||||
class="css-1oma8ph"
|
||||
/>
|
||||
<div
|
||||
class="css-adfvcn"
|
||||
class="css-1qmkiz4"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;height:100%;width:100%;color:white;background:#f7b733"
|
||||
@ -533,13 +556,15 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
|
||||
style="flex:none;position:relative;outline:none;height:200px;display:flex"
|
||||
>
|
||||
<div
|
||||
class="css-1ssjsmz"
|
||||
class="css-1fxkhug"
|
||||
>
|
||||
<div
|
||||
class="css-1tog424"
|
||||
class="css-1fpokv0"
|
||||
direction="horizontal"
|
||||
>
|
||||
<div
|
||||
class="css-12krn9q"
|
||||
class="css-16ohwqy"
|
||||
direction="horizontal"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { localStorage, window } from 'global';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
import throttle from 'lodash.throttle';
|
||||
|
||||
import SplitPane from 'react-split-pane';
|
||||
@ -10,7 +10,7 @@ import SplitPane from 'react-split-pane';
|
||||
import USplit from './usplit';
|
||||
import Dimensions from './dimensions';
|
||||
|
||||
const StoriesPanelWrapper = glamorous.div(({ showStoriesPanel, storiesPanelOnTop }) => ({
|
||||
const StoriesPanelWrapper = styled('div')(({ showStoriesPanel, storiesPanelOnTop }) => ({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: showStoriesPanel ? 'flex' : 'none',
|
||||
@ -19,7 +19,7 @@ const StoriesPanelWrapper = glamorous.div(({ showStoriesPanel, storiesPanelOnTop
|
||||
paddingRight: storiesPanelOnTop ? 10 : 0,
|
||||
}));
|
||||
|
||||
const StoriesPanelInner = glamorous.div({
|
||||
const StoriesPanelInner = styled('div')({
|
||||
flexGrow: 1,
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
@ -27,7 +27,7 @@ const StoriesPanelInner = glamorous.div({
|
||||
overflow: 'auto',
|
||||
});
|
||||
|
||||
const AddonPanelWrapper = glamorous.div(({ showAddonPanel, addonPanelInRight }) => ({
|
||||
const AddonPanelWrapper = styled('div')(({ showAddonPanel, addonPanelInRight }) => ({
|
||||
display: showAddonPanel ? 'flex' : 'none',
|
||||
flexDirection: addonPanelInRight ? 'row' : 'column',
|
||||
alignItems: 'stretch',
|
||||
@ -54,7 +54,7 @@ const addonResizerStyle = (showAddonPanel, addonPanelInRight) => ({
|
||||
zIndex: 1,
|
||||
});
|
||||
|
||||
const ContentPanel = glamorous.div(({ addonPanelInRight, storiesPanelOnTop }) => ({
|
||||
const ContentPanel = styled('div')(({ addonPanelInRight, storiesPanelOnTop }) => ({
|
||||
position: 'absolute',
|
||||
boxSizing: 'border-box',
|
||||
width: '100%',
|
||||
@ -63,7 +63,7 @@ const ContentPanel = glamorous.div(({ addonPanelInRight, storiesPanelOnTop }) =>
|
||||
paddingTop: storiesPanelOnTop ? 0 : 10,
|
||||
}));
|
||||
|
||||
const PreviewWrapper = glamorous.div(
|
||||
const PreviewWrapper = styled('div')(
|
||||
({ fullscreen }) =>
|
||||
fullscreen
|
||||
? {
|
||||
@ -89,7 +89,7 @@ const PreviewWrapper = glamorous.div(
|
||||
}
|
||||
);
|
||||
|
||||
const DragBlockOverlay = glamorous.div(({ isDragging }) => ({
|
||||
const DragBlockOverlay = styled('div')(({ isDragging }) => ({
|
||||
display: isDragging ? 'block' : 'none',
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
@ -259,7 +259,7 @@ class Layout extends Component {
|
||||
<DragBlockOverlay isDragging={this.state.isDragging} />
|
||||
<PreviewWrapper
|
||||
fullscreen={goFullScreen}
|
||||
ref={ref => {
|
||||
innerRef={ref => {
|
||||
this.previewPanelRef = ref;
|
||||
}}
|
||||
>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts } from '../';
|
||||
|
||||
const DISPLAY_TIMEOUT = 1000;
|
||||
|
||||
const Container = glamorous.div({
|
||||
const Container = styled('div')({
|
||||
position: 'absolute',
|
||||
padding: 5,
|
||||
bottom: 10,
|
||||
@ -15,14 +15,14 @@ const Container = glamorous.div({
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||
});
|
||||
|
||||
const Section = glamorous.span(baseFonts, { fontSize: 12 });
|
||||
const Section = styled('span')(baseFonts, { fontSize: 12 });
|
||||
|
||||
const Delimiter = glamorous.span(baseFonts, {
|
||||
const Delimiter = styled('span')(baseFonts, {
|
||||
margin: '0px 5px',
|
||||
fontSize: 12,
|
||||
});
|
||||
|
||||
class Dimensions extends React.Component {
|
||||
class Dimensions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import MobileLayout from './mobile';
|
||||
import DesktopLayout from './desktop';
|
||||
|
||||
export const Root = glamorous.div(
|
||||
export const Root = styled('div')(
|
||||
{
|
||||
backgroundColor: '#F7F7F7',
|
||||
},
|
||||
@ -30,7 +30,7 @@ export const Root = glamorous.div(
|
||||
}
|
||||
);
|
||||
|
||||
const StoriesPanelInner = glamorous.div({
|
||||
const StoriesPanelInner = styled('div')({
|
||||
flexGrow: 1,
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { Component, Children } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { TabBar, Tab } from '../addon_panel/index';
|
||||
|
||||
const MobilePanel = glamorous.div(
|
||||
const MobilePanel = styled('div')(
|
||||
({ selected }) =>
|
||||
selected
|
||||
? {
|
||||
@ -21,7 +21,7 @@ const MobilePanel = glamorous.div(
|
||||
display: 'none',
|
||||
}
|
||||
);
|
||||
const TabsWrapper = glamorous.div({
|
||||
const TabsWrapper = styled('div')({
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const gripSize = 1;
|
||||
const splitSize = 10;
|
||||
|
||||
const Wrapper = glamorous.div(({ shift, direction }) => {
|
||||
const Wrapper = styled('div')(({ shift, direction }) => {
|
||||
switch (direction) {
|
||||
case 'horizontal': {
|
||||
return {
|
||||
@ -28,7 +28,7 @@ const Wrapper = glamorous.div(({ shift, direction }) => {
|
||||
}
|
||||
});
|
||||
|
||||
const Inner = glamorous.div(({ direction }) => {
|
||||
const Inner = styled('div')(({ direction }) => {
|
||||
switch (direction) {
|
||||
case 'horizontal': {
|
||||
return {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import glamorous from 'glamorous';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import RoutedLink from './RoutedLink';
|
||||
|
||||
export default glamorous(RoutedLink, { rootEl: 'a' })(
|
||||
export const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
|
||||
{
|
||||
display: 'block',
|
||||
color: '#828282',
|
||||
@ -23,3 +24,8 @@ export default glamorous(RoutedLink, { rootEl: 'a' })(
|
||||
}
|
||||
: {}
|
||||
);
|
||||
MenuLink.propTypes = {
|
||||
active: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default MenuLink;
|
||||
|
||||
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
|
||||
import { Div } from 'glamorous';
|
||||
|
||||
import MenuLink from './MenuLink';
|
||||
|
||||
@ -15,16 +14,18 @@ storiesOf('Components|Navigation/MenuLink', module)
|
||||
))
|
||||
.addDecorator(withKnobs)
|
||||
.add('with knobs', () => (
|
||||
<Div
|
||||
width={number('Container width', 90, {
|
||||
range: true,
|
||||
min: 50,
|
||||
max: 200,
|
||||
step: 10,
|
||||
})}
|
||||
<div
|
||||
style={{
|
||||
width: number('Container width', 90, {
|
||||
range: true,
|
||||
min: 50,
|
||||
max: 200,
|
||||
step: 10,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<MenuLink href="/" onClick={action('navigation triggered')} active={boolean('Active', true)}>
|
||||
{text('Text', 'Menu link item')}
|
||||
</MenuLink>
|
||||
</Div>
|
||||
</div>
|
||||
));
|
||||
|
||||
@ -21,8 +21,8 @@ export default class RoutedLink extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { href, children, onClick, ...rest } = this.props;
|
||||
const props = onClick ? { href, ...rest, onClick: this.onClick } : { href, ...rest };
|
||||
const { href, children, onClick } = this.props;
|
||||
const props = onClick ? { href, onClick: this.onClick } : { href };
|
||||
return <a {...props}>{children}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
href="http://google.com"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Components|Navigation/MenuLink default 1`] = `
|
||||
<a
|
||||
class="css-1b2u8sb"
|
||||
class="css-1enusis"
|
||||
href="http://google.com"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Components|Navigation/MenuLink with knobs 1`] = `
|
||||
<div
|
||||
class="css-t9df35"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
href="/"
|
||||
>
|
||||
Menu link item
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -11,8 +11,6 @@ exports[`manager.ui.components.routed_link render should not render onClick when
|
||||
exports[`manager.ui.components.routed_link render should render other properties 1`] = `
|
||||
<a
|
||||
href="href"
|
||||
target="_blank"
|
||||
title="title"
|
||||
>
|
||||
Other content
|
||||
</a>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts } from '../';
|
||||
|
||||
export default glamorous.p(baseFonts, {
|
||||
export default styled('p')(baseFonts, {
|
||||
fontSize: '11px',
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const dynamicStyles = ({ bordered, code }) => ({
|
||||
...(bordered ? { border: '1px solid #ccc' } : {}),
|
||||
@ -14,8 +14,8 @@ const styles = {
|
||||
padding: '2px 6px',
|
||||
};
|
||||
|
||||
export const Td = glamorous.td(styles, dynamicStyles);
|
||||
export const Th = glamorous.th(styles, dynamicStyles);
|
||||
export const Td = styled('td')(styles, dynamicStyles);
|
||||
export const Th = styled('th')(styles, dynamicStyles);
|
||||
|
||||
Td.displayName = 'Td';
|
||||
Th.displayName = 'Th';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const Table = glamorous.table({
|
||||
const Table = styled('table')({
|
||||
borderCollapse: 'collapse',
|
||||
});
|
||||
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
"deep-equal": "^1.0.1",
|
||||
"events": "^2.0.0",
|
||||
"fuse.js": "^3.2.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.13.0",
|
||||
"emotion": "^9.1.3",
|
||||
"react-emotion": "^9.1.3",
|
||||
"global": "^4.3.2",
|
||||
"keycode": "^2.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import ReactModal from 'react-modal';
|
||||
import FuzzySearch from 'react-fuzzy';
|
||||
@ -49,13 +49,13 @@ const formatStories = stories => {
|
||||
return formattedStories;
|
||||
};
|
||||
|
||||
const SuggestionWrapper = glamorous.div(
|
||||
const SuggestionWrapper = styled('div')(
|
||||
({ selected, selectedResultStyle, resultsStyle }) =>
|
||||
selected ? selectedResultStyle : resultsStyle,
|
||||
{ display: 'flex', justifyContent: 'space-between' }
|
||||
);
|
||||
const SuggestionValue = glamorous.p({ margin: 0 });
|
||||
const SuggestionKind = glamorous.p({
|
||||
const SuggestionValue = styled('p')({ margin: 0 });
|
||||
const SuggestionKind = styled('p')({
|
||||
opacity: 0.5,
|
||||
margin: 0,
|
||||
paddingLeft: 10,
|
||||
@ -140,7 +140,9 @@ export default class SearchBox extends React.Component {
|
||||
onSelect={this.onSelect}
|
||||
keys={['value', 'type']}
|
||||
resultsTemplate={suggestionTemplate}
|
||||
ref={this.inputRef}
|
||||
innerRef={inputRef => {
|
||||
this.inputRef = inputRef;
|
||||
}}
|
||||
/>
|
||||
</ReactModal>
|
||||
);
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import ReactModal from 'react-modal';
|
||||
import { baseFonts } from '@storybook/components';
|
||||
|
||||
const Command = glamorous.b(
|
||||
const Command = styled('b')(
|
||||
({ isLast, isFirst }) => {
|
||||
switch (true) {
|
||||
case isFirst && isLast: {
|
||||
@ -48,12 +48,12 @@ const Command = glamorous.b(
|
||||
}
|
||||
);
|
||||
|
||||
const Title = glamorous.h4({
|
||||
const Title = styled('h4')({
|
||||
marginTop: 0,
|
||||
textAlign: 'left',
|
||||
});
|
||||
|
||||
const CommandDescription = glamorous.span(baseFonts, {
|
||||
const CommandDescription = styled('span')(baseFonts, {
|
||||
fontSize: 12,
|
||||
});
|
||||
|
||||
|
||||
@ -2,32 +2,32 @@
|
||||
|
||||
exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
|
||||
<div
|
||||
class="css-b79lvn"
|
||||
class="css-3dwd22"
|
||||
>
|
||||
<div
|
||||
class="css-eivvbb"
|
||||
class="css-5xz1i6"
|
||||
>
|
||||
<a
|
||||
class="css-9hm7k1"
|
||||
class="css-108o064"
|
||||
href=""
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
class="css-ht6bk4"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
class="css-8kgocl"
|
||||
class="css-i6e0jg"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="css-gpw716"
|
||||
class="css-oczsoj"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
class="css-b9cqpx"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
@ -39,32 +39,32 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
|
||||
|
||||
exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is empty 1`] = `
|
||||
<div
|
||||
class="css-b79lvn"
|
||||
class="css-3dwd22"
|
||||
>
|
||||
<div
|
||||
class="css-eivvbb"
|
||||
class="css-5xz1i6"
|
||||
>
|
||||
<a
|
||||
class="css-9hm7k1"
|
||||
class="css-108o064"
|
||||
href=""
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
class="css-ht6bk4"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
class="css-8kgocl"
|
||||
class="css-i6e0jg"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="css-gpw716"
|
||||
class="css-oczsoj"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
class="css-b9cqpx"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
@ -76,32 +76,32 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
|
||||
|
||||
exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
|
||||
<div
|
||||
class="css-1kle2qo"
|
||||
class="css-nk32ej"
|
||||
>
|
||||
<div
|
||||
class="css-eivvbb"
|
||||
class="css-5xz1i6"
|
||||
>
|
||||
<a
|
||||
class="css-9hm7k1"
|
||||
class="css-108o064"
|
||||
href=""
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
class="css-ht6bk4"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
class="css-8kgocl"
|
||||
class="css-i6e0jg"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="css-gpw716"
|
||||
class="css-oczsoj"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
class="css-b9cqpx"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
@ -110,130 +110,3 @@ exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
|
||||
<div
|
||||
class="css-b79lvn"
|
||||
>
|
||||
<div
|
||||
class="css-eivvbb"
|
||||
>
|
||||
<a
|
||||
class="css-9hm7k1"
|
||||
href=""
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3
|
||||
class="css-17rda8a"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
class="css-8kgocl"
|
||||
>
|
||||
⌘
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="css-gpw716"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ul
|
||||
style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="kk"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
kk
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
data-name="bb"
|
||||
href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
bb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
|
||||
exports[`Storyshots ui/stories/TextFilter with filterText 1`] = `
|
||||
<div
|
||||
class="css-gpw716"
|
||||
class="css-oczsoj"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
class="css-b9cqpx"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
value="Filter Text"
|
||||
/>
|
||||
<button
|
||||
class="css-1tb9faa clear"
|
||||
class="clear css-thhrwj"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@ -21,10 +21,10 @@ exports[`Storyshots ui/stories/TextFilter with filterText 1`] = `
|
||||
|
||||
exports[`Storyshots ui/stories/TextFilter without filterText 1`] = `
|
||||
<div
|
||||
class="css-gpw716"
|
||||
class="css-oczsoj"
|
||||
>
|
||||
<input
|
||||
class="css-x0nny6"
|
||||
class="css-b9cqpx"
|
||||
name="filter-text"
|
||||
placeholder="Filter"
|
||||
type="text"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import pick from 'lodash.pick';
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { Header } from '@storybook/components';
|
||||
import Stories from './stories_tree';
|
||||
import TextFilter from './text_filter';
|
||||
|
||||
const Wrapper = glamorous.div(
|
||||
const Wrapper = styled('div')(
|
||||
({ isMobileDevice }) =>
|
||||
isMobileDevice
|
||||
? {
|
||||
|
||||
@ -17,822 +17,3 @@ exports[`Storyshots ui/stories/Stories empty 1`] = `
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots ui/stories/Stories simple 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="a"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="b"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
b
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1b2u8sb"
|
||||
data-name="b1"
|
||||
href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
data-name="b2"
|
||||
href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is defined 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="some"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
some
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="another"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
another
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="space"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
space
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="20"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1b2u8sb"
|
||||
data-name="b1"
|
||||
href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
data-name="b2"
|
||||
href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is provided 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="another"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
<span>
|
||||
ano
|
||||
</span>
|
||||
<strong
|
||||
style="background-color:#FFFEAA;font-weight:inherit"
|
||||
>
|
||||
th
|
||||
</strong>
|
||||
<span>
|
||||
er
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="space"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
space
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="20"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1b2u8sb"
|
||||
data-name="b1"
|
||||
href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
data-name="b2"
|
||||
href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is defined 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="some.name.item1"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
some.name.item1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
data-name="another.space.20"
|
||||
role="menuitem"
|
||||
style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
|
||||
>
|
||||
<div
|
||||
style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="10"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="vertical-align:top;fill:#9DA5AB"
|
||||
viewBox="0 0 40 40"
|
||||
width="10"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div
|
||||
style="line-height:18px;padding:1px 0 5px"
|
||||
>
|
||||
another.space.20
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<ul
|
||||
style="padding-left:19px;list-style:none"
|
||||
>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1b2u8sb"
|
||||
data-name="b1"
|
||||
href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
<li
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="css-1ns2oul"
|
||||
data-name="b2"
|
||||
href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
|
||||
>
|
||||
<div
|
||||
data-radium="true"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
|
||||
>
|
||||
<div>
|
||||
b2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -55,7 +55,7 @@ function ContainerDecorator(props) {
|
||||
|
||||
return (
|
||||
<MenuLink
|
||||
active={node.active}
|
||||
active={node.active || undefined}
|
||||
overrideParams={overrideParams}
|
||||
onClick={onClick}
|
||||
data-name={node.name}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
import { baseFonts } from '@storybook/components';
|
||||
|
||||
const TreeHeader = glamorous.h4(baseFonts, {
|
||||
const TreeHeader = styled('h4')(baseFonts, {
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '1.2px',
|
||||
fontSize: '12px',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import glamorous from 'glamorous';
|
||||
import styled from 'react-emotion';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
|
||||
import debounce from 'lodash.debounce';
|
||||
@ -9,11 +9,11 @@ import { baseFonts } from '@storybook/components';
|
||||
|
||||
const defaultTextValue = '';
|
||||
|
||||
const Wrapper = glamorous.div(baseFonts, {
|
||||
const Wrapper = styled('div')(baseFonts, {
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
const Input = glamorous.input({
|
||||
const Input = styled('input')({
|
||||
fontSize: 12,
|
||||
color: '#828282',
|
||||
padding: 5,
|
||||
@ -27,7 +27,7 @@ const Input = glamorous.input({
|
||||
borderRadius: 2,
|
||||
});
|
||||
|
||||
const ClearButton = glamorous.button({
|
||||
const ClearButton = styled('button')({
|
||||
position: 'absolute',
|
||||
backgroundColor: 'transparent',
|
||||
color: '#868686',
|
||||
|
||||
@ -9,14 +9,14 @@ describe('manager.ui.components.stories_panel.test_filter', () => {
|
||||
test('should render input without filterText', () => {
|
||||
const wrap = shallow(<TextFilter />);
|
||||
|
||||
const input = wrap.find('glamorous(input)').first();
|
||||
const input = wrap.find('Styled(input)').first();
|
||||
|
||||
expect(input).toHaveProp('placeholder', 'Filter');
|
||||
});
|
||||
|
||||
test('should render input with filterText', () => {
|
||||
const wrap = mount(<TextFilter text="Filter Text" />);
|
||||
const input = wrap.find('glamorous(input)').first();
|
||||
const input = wrap.find('Styled(input)').first();
|
||||
|
||||
expect(input).toHaveProp('value', 'Filter Text');
|
||||
});
|
||||
@ -27,7 +27,7 @@ describe('manager.ui.components.stories_panel.test_filter', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrap = mount(<TextFilter onChange={onChange} />);
|
||||
|
||||
const input = wrap.find('glamorous(input)').first();
|
||||
const input = wrap.find('Styled(input)').first();
|
||||
input.value = 'new value';
|
||||
input.simulate('change', { target: input });
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.3",
|
||||
"babel-plugin-glamorous-displayname": "^2.2.0",
|
||||
"babel-plugin-emotion": "^9.1.2",
|
||||
"babel-plugin-macros": "^2.2.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
@ -60,6 +60,7 @@
|
||||
"concurrently": "^3.5.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"danger": "^3.6.5",
|
||||
"emotion": "^9.1.3",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-react-16": "^1.1.1",
|
||||
"eslint": "^4.19.1",
|
||||
@ -80,6 +81,7 @@
|
||||
"jest-cli": "^22.4.3",
|
||||
"jest-config": "^22.4.3",
|
||||
"jest-diff": "^22.4.3",
|
||||
"jest-emotion": "^9.1.3",
|
||||
"jest-environment-jsdom": "^22.4.3",
|
||||
"jest-enzyme": "^6.0.0",
|
||||
"jest-glamor-react": "^4.3.0",
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import 'jest-enzyme/lib/index';
|
||||
import serializer from 'jest-glamor-react';
|
||||
|
||||
// setup file
|
||||
import { configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
import * as emotion from 'emotion';
|
||||
import { createSerializer } from 'jest-emotion';
|
||||
|
||||
expect.addSnapshotSerializer(createSerializer(emotion));
|
||||
// mock console.info calls for cleaner test execution
|
||||
global.console.info = jest.fn().mockImplementation(() => {});
|
||||
|
||||
configure({ adapter: new Adapter() });
|
||||
|
||||
expect.addSnapshotSerializer(serializer);
|
||||
|
||||
/* Fail tests on PropType warnings
|
||||
This allows us to throw an error in tests environments when there are prop-type warnings. This should keep the tests
|
||||
free of warnings going forward.
|
||||
|
||||
182
yarn.lock
182
yarn.lock
@ -181,6 +181,13 @@
|
||||
dependencies:
|
||||
"@babel/types" "7.0.0-beta.44"
|
||||
|
||||
"@babel/helper-module-imports@7.0.0-beta.32":
|
||||
version "7.0.0-beta.32"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz#8126fc024107c226879841b973677a4f4e510a03"
|
||||
dependencies:
|
||||
"@babel/types" "7.0.0-beta.32"
|
||||
lodash "^4.2.0"
|
||||
|
||||
"@babel/helper-split-export-declaration@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
|
||||
@ -227,6 +234,14 @@
|
||||
invariant "^2.2.0"
|
||||
lodash "^4.2.0"
|
||||
|
||||
"@babel/types@7.0.0-beta.32":
|
||||
version "7.0.0-beta.32"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff"
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
lodash "^4.2.0"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@babel/types@7.0.0-beta.44":
|
||||
version "7.0.0-beta.44"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
|
||||
@ -235,6 +250,28 @@
|
||||
lodash "^4.2.0"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@emotion/hash@^0.6.2":
|
||||
version "0.6.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.3.tgz#0e7a5604626fc6c6d4ac4061a2f5ac80d50262a4"
|
||||
|
||||
"@emotion/is-prop-valid@^0.6.1":
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.2.tgz#a76a16b174ff03f8e3a27faf6259bacd21a02adc"
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.6.2"
|
||||
|
||||
"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.2":
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.2.tgz#138e00b332d519b4e307bded6159e5ba48aba3ae"
|
||||
|
||||
"@emotion/stylis@^0.6.5":
|
||||
version "0.6.7"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.7.tgz#730a6aa2198257124940014d7fffac7cf3e6614c"
|
||||
|
||||
"@emotion/unitless@^0.6.2":
|
||||
version "0.6.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.3.tgz#65682e68a82701c70eefb38d7f941a2c0bfa90de"
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
@ -1697,19 +1734,28 @@ babel-plugin-dynamic-import-node@1.1.0:
|
||||
babel-template "^6.26.0"
|
||||
babel-types "^6.26.0"
|
||||
|
||||
babel-plugin-emotion@^9.1.2:
|
||||
version "9.1.2"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.1.2.tgz#e26b313fa0fecd0f2cc07b1e4ef05da167e4f740"
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "7.0.0-beta.32"
|
||||
"@emotion/hash" "^0.6.2"
|
||||
"@emotion/memoize" "^0.6.1"
|
||||
"@emotion/stylis" "^0.6.5"
|
||||
babel-plugin-macros "^2.0.0"
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
convert-source-map "^1.5.0"
|
||||
find-root "^1.1.0"
|
||||
mkdirp "^0.5.1"
|
||||
source-map "^0.5.7"
|
||||
touch "^1.0.0"
|
||||
|
||||
babel-plugin-external-helpers@^6.18.0:
|
||||
version "6.22.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz#2285f48b02bd5dede85175caf8c62e86adccefa1"
|
||||
dependencies:
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-glamorous-displayname@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-glamorous-displayname/-/babel-plugin-glamorous-displayname-2.2.0.tgz#0cdbfdaf3b39300209d357c7f0c0b91546f2d5a3"
|
||||
dependencies:
|
||||
babel-plugin-macros "^2.1.0"
|
||||
babel-runtime "^6.26.0"
|
||||
|
||||
babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.4, babel-plugin-istanbul@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
|
||||
@ -1748,12 +1794,6 @@ babel-plugin-macros@^2.0.0:
|
||||
dependencies:
|
||||
cosmiconfig "^4.0.0"
|
||||
|
||||
babel-plugin-macros@^2.1.0:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.1.tgz#7cc0f84735aa86f776b51860793a98928f43a7fa"
|
||||
dependencies:
|
||||
cosmiconfig "^4.0.0"
|
||||
|
||||
babel-plugin-macros@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.0.tgz#31fc16748d6480697a517f692dc4421cb7bff0cc"
|
||||
@ -3044,10 +3084,6 @@ braces@^2.3.1:
|
||||
split-string "^3.0.2"
|
||||
to-regex "^3.0.1"
|
||||
|
||||
brcast@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd"
|
||||
|
||||
brorand@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
|
||||
@ -4663,6 +4699,23 @@ create-ecdh@^4.0.0:
|
||||
bn.js "^4.1.0"
|
||||
elliptic "^6.0.0"
|
||||
|
||||
create-emotion-styled@^9.1.2:
|
||||
version "9.1.2"
|
||||
resolved "https://registry.yarnpkg.com/create-emotion-styled/-/create-emotion-styled-9.1.2.tgz#1528d9ff5ecc7e3abdf9986510a85ad2a9d73648"
|
||||
dependencies:
|
||||
"@emotion/is-prop-valid" "^0.6.1"
|
||||
|
||||
create-emotion@^9.1.3:
|
||||
version "9.1.3"
|
||||
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.1.3.tgz#a2e570415eb3e1ec7c42489ba55b2361baf0ed3f"
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.6.2"
|
||||
"@emotion/memoize" "^0.6.1"
|
||||
"@emotion/stylis" "^0.6.5"
|
||||
"@emotion/unitless" "^0.6.2"
|
||||
stylis "^3.5.0"
|
||||
stylis-rule-sheet "^0.0.10"
|
||||
|
||||
create-error-class@^3.0.0, create-error-class@^3.0.1:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
|
||||
@ -4929,10 +4982,6 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
|
||||
dependencies:
|
||||
cssom "0.3.x"
|
||||
|
||||
csstype@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.2.0.tgz#1656ef97553ac53b77090844a2531c6660ebd902"
|
||||
|
||||
csurf@~1.8.3:
|
||||
version "1.8.3"
|
||||
resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.8.3.tgz#23f2a13bf1d8fce1d0c996588394442cba86a56a"
|
||||
@ -5576,6 +5625,13 @@ emojis-list@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
|
||||
|
||||
emotion@^9.1.3:
|
||||
version "9.1.3"
|
||||
resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.1.3.tgz#e9b3e897ba3d5c0aff5628b0008a8993fa9c0937"
|
||||
dependencies:
|
||||
babel-plugin-emotion "^9.1.2"
|
||||
create-emotion "^9.1.3"
|
||||
|
||||
encodeurl@~1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
|
||||
@ -6647,10 +6703,6 @@ fast-levenshtein@~2.0.4:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
|
||||
|
||||
fast-memoize@^2.2.7:
|
||||
version "2.2.8"
|
||||
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.2.8.tgz#d7f899f31d037b12d9db4281912f9018575720b1"
|
||||
|
||||
fastparse@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
|
||||
@ -6698,7 +6750,7 @@ fbjs-scripts@^0.8.1:
|
||||
semver "^5.1.0"
|
||||
through2 "^2.0.0"
|
||||
|
||||
fbjs@^0.8.12, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
|
||||
fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
|
||||
version "0.8.16"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
|
||||
dependencies:
|
||||
@ -7301,29 +7353,6 @@ github@^11.0.0:
|
||||
mime "^1.2.11"
|
||||
netrc "^0.1.4"
|
||||
|
||||
glamor@^2.20.40:
|
||||
version "2.20.40"
|
||||
resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
|
||||
dependencies:
|
||||
fbjs "^0.8.12"
|
||||
inline-style-prefixer "^3.0.6"
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.5.10"
|
||||
through "^2.3.8"
|
||||
|
||||
glamorous@^4.13.0:
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-4.13.0.tgz#4ac5cb05633aa49a0396d409f665dd9b614f1b5a"
|
||||
dependencies:
|
||||
brcast "^3.0.0"
|
||||
csstype "^2.2.0"
|
||||
fast-memoize "^2.2.7"
|
||||
html-tag-names "^1.1.1"
|
||||
is-function "^1.0.1"
|
||||
is-plain-object "^2.0.4"
|
||||
react-html-attributes "^1.4.2"
|
||||
svg-tag-names "^1.1.0"
|
||||
|
||||
glob-base@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
|
||||
@ -7925,10 +7954,6 @@ html-comment-regex@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
|
||||
|
||||
html-element-attributes@^1.0.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-1.3.0.tgz#f06ebdfce22de979db82020265cac541fb17d4fc"
|
||||
|
||||
html-encoding-sniffer@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
|
||||
@ -7972,10 +7997,6 @@ html-minifier@^3.2.3, html-minifier@^3.5.8:
|
||||
relateurl "0.2.x"
|
||||
uglify-js "3.3.x"
|
||||
|
||||
html-tag-names@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.2.tgz#f65168964c5a9c82675efda882875dcb2a875c22"
|
||||
|
||||
html-tags@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-1.2.0.tgz#c78de65b5663aa597989dd2b7ab49200d7e4db98"
|
||||
@ -8696,10 +8717,6 @@ is-fullwidth-code-point@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
|
||||
|
||||
is-function@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
|
||||
|
||||
is-generator-fn@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
|
||||
@ -9278,6 +9295,12 @@ jest-docblock@^22.4.3:
|
||||
dependencies:
|
||||
detect-newline "^2.1.0"
|
||||
|
||||
jest-emotion@^9.1.3:
|
||||
version "9.1.3"
|
||||
resolved "https://registry.yarnpkg.com/jest-emotion/-/jest-emotion-9.1.3.tgz#d6dab1210f00d438c932b3d96c0401ff4606339c"
|
||||
dependencies:
|
||||
css "^2.2.1"
|
||||
|
||||
jest-environment-enzyme@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jest-environment-enzyme/-/jest-environment-enzyme-6.0.0.tgz#469ceaa0a21579af86cb01255f0591a3a5d95f40"
|
||||
@ -11953,6 +11976,12 @@ nopt@^4.0.1, nopt@~4.0.1:
|
||||
abbrev "1"
|
||||
osenv "^0.1.4"
|
||||
|
||||
nopt@~1.0.10:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
|
||||
dependencies:
|
||||
abbrev "1"
|
||||
|
||||
normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, "normalize-package-data@~1.0.1 || ^2.0.0", normalize-package-data@~2.4.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
|
||||
@ -13907,6 +13936,13 @@ react-dom@^16.3.2:
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-emotion@^9.1.3:
|
||||
version "9.1.3"
|
||||
resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.1.3.tgz#299c29731d12d6236e33277845f5692ec8ba92d6"
|
||||
dependencies:
|
||||
babel-plugin-emotion "^9.1.2"
|
||||
create-emotion-styled "^9.1.2"
|
||||
|
||||
react-error-overlay@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
|
||||
@ -13920,12 +13956,6 @@ react-fuzzy@^0.5.2:
|
||||
fuse.js "^3.0.1"
|
||||
prop-types "^15.5.9"
|
||||
|
||||
react-html-attributes@^1.4.2:
|
||||
version "1.4.2"
|
||||
resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.2.tgz#0d2ccf134fc79b2d3543837dc1591d32b7b903f9"
|
||||
dependencies:
|
||||
html-element-attributes "^1.0.0"
|
||||
|
||||
react-icon-base@2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
|
||||
@ -16383,6 +16413,14 @@ style-loader@^0.21.0:
|
||||
loader-utils "^1.1.0"
|
||||
schema-utils "^0.4.5"
|
||||
|
||||
stylis-rule-sheet@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
|
||||
|
||||
stylis@^3.5.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
|
||||
|
||||
stylus-loader@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-3.0.1.tgz#77f4b34fd030d25b2617bcf5513db5b0730c4089"
|
||||
@ -16459,10 +16497,6 @@ supports-hyperlinks@^1.0.1:
|
||||
has-flag "^2.0.0"
|
||||
supports-color "^5.0.0"
|
||||
|
||||
svg-tag-names@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/svg-tag-names/-/svg-tag-names-1.1.1.tgz#9641b29ef71025ee094c7043f7cdde7d99fbd50a"
|
||||
|
||||
svg-tags@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
|
||||
@ -16803,6 +16837,12 @@ toposort@^1.0.0:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
|
||||
|
||||
touch@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
|
||||
dependencies:
|
||||
nopt "~1.0.10"
|
||||
|
||||
tough-cookie@>=2.3.3, tough-cookie@^2.3.2, tough-cookie@^2.3.3, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user