mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-18 05:02:24 +08:00
Merge remote-tracking branch 'upstream/master' into stricter-lint-imports
# Conflicts: # examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
This commit is contained in:
hypnos
commit
fb5e28fa01
10
.github/PULL_REQUEST_TEMPLATE.md
vendored
10
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -2,6 +2,12 @@ Issue:
|
||||
|
||||
## What I did
|
||||
|
||||
|
||||
|
||||
## How to test
|
||||
|
||||
Is this testable with jest or storyshots?
|
||||
|
||||
Does this need a new example in the kitchen sink apps?
|
||||
|
||||
Does this need an update to the documentation?
|
||||
|
||||
If your answer is yes to any of these, please make sure to include it in your PR.
|
||||
|
||||
@ -468,6 +468,376 @@ exports[`Storyshots AddonInfo.DocgenButton DocgenButton 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots AddonInfo.FlowTypeButton FlowTypeButton 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"position": "relative",
|
||||
"zIndex": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Flow Typed Button
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
style={
|
||||
Object {
|
||||
"background": "#28c",
|
||||
"borderRadius": "0 0 0 5px",
|
||||
"color": "#fff",
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "sans-serif",
|
||||
"fontSize": "12px",
|
||||
"padding": "5px 15px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
"textDecoration": "none",
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
tabIndex="0"
|
||||
>
|
||||
Show Info
|
||||
</a>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"background": "white",
|
||||
"bottom": 0,
|
||||
"display": "none",
|
||||
"left": 0,
|
||||
"overflow": "auto",
|
||||
"padding": "0 40px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
"zIndex": 99999,
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
style={
|
||||
Object {
|
||||
"background": "#28c",
|
||||
"borderRadius": "0 0 0 5px",
|
||||
"color": "#fff",
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "sans-serif",
|
||||
"fontSize": "12px",
|
||||
"padding": "5px 15px",
|
||||
"position": "fixed",
|
||||
"right": 0,
|
||||
"textDecoration": "none",
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
tabIndex="0"
|
||||
>
|
||||
×
|
||||
</a>
|
||||
<div
|
||||
style={undefined}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"backgroundColor": "#fff",
|
||||
"border": "1px solid #eee",
|
||||
"borderRadius": "2px",
|
||||
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
|
||||
"color": "#444",
|
||||
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
|
||||
"fontSize": "15px",
|
||||
"fontWeight": 300,
|
||||
"lineHeight": 1.45,
|
||||
"marginTop": "50px",
|
||||
"padding": "20px 40px 40px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #eee",
|
||||
"marginBottom": 10,
|
||||
"paddingTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<h1
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "35px",
|
||||
"margin": 0,
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
AddonInfo.FlowTypeButton
|
||||
</h1>
|
||||
<h2
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "22px",
|
||||
"fontWeight": 400,
|
||||
"margin": "0 0 10px 0",
|
||||
"padding": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
FlowTypeButton
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"color": "#444",
|
||||
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
|
||||
"fontSize": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Some Description
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #EEE",
|
||||
"fontSize": "25px",
|
||||
"margin": "20px 0 0 0",
|
||||
"padding": "0 0 5px 0",
|
||||
}
|
||||
}
|
||||
>
|
||||
Story Source
|
||||
</h1>
|
||||
<pre
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#fafafa",
|
||||
"fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
|
||||
"fontSize": ".88em",
|
||||
"lineHeight": 1.5,
|
||||
"overflowX": "scroll",
|
||||
"padding": ".5rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"paddingLeft": 18,
|
||||
"paddingRight": 3,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
}
|
||||
}
|
||||
>
|
||||
<
|
||||
FlowTypeButton
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
onClick
|
||||
</span>
|
||||
<span>
|
||||
=
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#170",
|
||||
}
|
||||
}
|
||||
>
|
||||
clicked()
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
label
|
||||
</span>
|
||||
<span>
|
||||
=
|
||||
<span
|
||||
style={Object {}}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#22a",
|
||||
"wordBreak": "break-word",
|
||||
}
|
||||
}
|
||||
>
|
||||
"
|
||||
Flow Typed Button
|
||||
"
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
}
|
||||
}
|
||||
>
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
style={
|
||||
Object {
|
||||
"borderBottom": "1px solid #EEE",
|
||||
"fontSize": "25px",
|
||||
"margin": "20px 0 0 0",
|
||||
"padding": "0 0 5px 0",
|
||||
}
|
||||
}
|
||||
>
|
||||
Prop Types
|
||||
</h1>
|
||||
<div>
|
||||
<h2
|
||||
style={
|
||||
Object {
|
||||
"margin": "20px 0 0 0",
|
||||
}
|
||||
}
|
||||
>
|
||||
"
|
||||
FlowTypeButton
|
||||
" Component
|
||||
</h2>
|
||||
<table
|
||||
style={
|
||||
Object {
|
||||
"borderCollapse": "separate",
|
||||
"borderSpacing": "10px 5px",
|
||||
"marginLeft": -10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
property
|
||||
</th>
|
||||
<th>
|
||||
propType
|
||||
</th>
|
||||
<th>
|
||||
required
|
||||
</th>
|
||||
<th>
|
||||
default
|
||||
</th>
|
||||
<th>
|
||||
description
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
disabled
|
||||
</td>
|
||||
<td />
|
||||
<td />
|
||||
<td>
|
||||
<span>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#a11",
|
||||
}
|
||||
}
|
||||
>
|
||||
false
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
onClick
|
||||
</td>
|
||||
<td />
|
||||
<td />
|
||||
<td>
|
||||
<span>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#170",
|
||||
}
|
||||
}
|
||||
>
|
||||
onClick()
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots App full app 1`] = `
|
||||
<div
|
||||
className="App"
|
||||
|
||||
24
examples/cra-kitchen-sink/src/components/FlowTypeButton.js
Normal file
24
examples/cra-kitchen-sink/src/components/FlowTypeButton.js
Normal file
@ -0,0 +1,24 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
type PropsType = {
|
||||
/** The text to be rendered in the button */
|
||||
label: string,
|
||||
/** Function to be called when the button is clicked */
|
||||
onClick?: Function,
|
||||
/** Boolean representing wether the button is disabled */
|
||||
disabled?: boolean,
|
||||
};
|
||||
|
||||
/** Flow type button description */
|
||||
const FlowTypeButton = ({ label, onClick, disabled }: PropsType) =>
|
||||
<button onClick={onClick} disabled={disabled}>
|
||||
{label}
|
||||
</button>;
|
||||
|
||||
FlowTypeButton.defaultProps = {
|
||||
disabled: false,
|
||||
onClick: () => {},
|
||||
};
|
||||
|
||||
export default FlowTypeButton;
|
||||
@ -27,6 +27,7 @@ import App from '../App';
|
||||
import Logger from './Logger';
|
||||
import Container from './Container';
|
||||
import DocgenButton from '../components/DocgenButton';
|
||||
import FlowTypeButton from '../components/FlowTypeButton';
|
||||
|
||||
const EVENTS = {
|
||||
TEST_EVENT_1: 'test-event-1',
|
||||
@ -167,6 +168,13 @@ storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some De
|
||||
<DocgenButton onClick={action('clicked')} label="Docgen Button" />
|
||||
);
|
||||
|
||||
storiesOf(
|
||||
'AddonInfo.FlowTypeButton',
|
||||
module
|
||||
).addWithInfo('FlowTypeButton', 'Some Description', () =>
|
||||
<FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
|
||||
);
|
||||
|
||||
storiesOf('App', module).add('full app', () => <App />);
|
||||
|
||||
storiesOf('Some really long story kind description', module)
|
||||
|
||||
@ -23,6 +23,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
onClick () {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user