Skip to content

Commit

Permalink
Merge pull request #2269 from storybooks/allow-duplicate-displaynames
Browse files Browse the repository at this point in the history 
Addon-info: allow duplicate displayNames
  • Loading branch information
@Hypnosphi
Hypnosphi committed Nov 9, 2017
2 parents b078de7 + aae332b commit a8dc0fd
Show file tree
Hide file tree
Showing 3 changed files with 362 additions and 6 deletions.
13 changes: 7 additions & 6 deletions addons/info/src/components/Story.js
View file
Expand Up @@ -14,6 +14,8 @@ import { Pre } from './markdown';
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
const { STORYBOOK_REACT_CLASSES } = global;

const getName = type => type.displayName || type.name;

const stylesheet = {
button: {
base: {
Expand Down Expand Up @@ -324,14 +326,13 @@ export default class Story extends React.Component {
extract(this.props.children);

const array = Array.from(types.keys());
array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
array.sort((a, b) => getName(a) > getName(b));

const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
const propTables = array.map(type => (
<div key={type.displayName || type.name}>
<h2 style={this.state.stylesheet.propTableHead}>
"{type.displayName || type.name}" Component
</h2>
const propTables = array.map((type, i) => (
// eslint-disable-next-line react/no-array-index-key
<div key={`${getName(type)}_${i}`}>
<h2 style={this.state.stylesheet.propTableHead}>"{getName(type)}" Component</h2>
<PropTable
type={type}
maxPropObjectKeys={maxPropObjectKeys}
Expand Down
339 changes: 339 additions & 0 deletions examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
View file
Expand Up @@ -421,6 +421,345 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
</div>
`;

exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
<div>
<div
style={
Object {
"position": "relative",
"zIndex": 0,
}
}
>
<div>
<input
type="text"
/>
<textarea />
</div>
</div>
<button
onClick={[Function]}
style={
Object {
"background": "#28c",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
Show Info
</button>
<div
style={
Object {
"background": "white",
"bottom": 0,
"display": "none",
"left": 0,
"overflow": "auto",
"padding": "0 40px",
"position": "fixed",
"right": 0,
"top": 0,
"zIndex": 99999,
}
}
>
<button
onClick={[Function]}
style={
Object {
"background": "#28c",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
×
</button>
<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,
}
}
>
Addon Info.GitHub issues
</h1>
<h2
style={
Object {
"fontSize": "22px",
"fontWeight": 400,
"margin": "0 0 10px 0",
"padding": 0,
}
}
>
#1814
</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",
}
}
>
Allow Duplicate DisplayNames for HOC #1814
</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>
<div
style={
Object {
"paddingLeft": 18,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;
div
</span>
<span />
<span
style={
Object {
"color": "#777",
}
}
>
&gt;
</span>
</div>
<div
style={
Object {
"paddingLeft": 33,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;
Unknown
</span>
<span />
<span
style={
Object {
"color": "#777",
}
}
>
/&gt;
</span>
</div>
<div
style={
Object {
"paddingLeft": 33,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;
Unknown
</span>
<span />
<span
style={
Object {
"color": "#777",
}
}
>
/&gt;
</span>
</div>
<div
style={
Object {
"paddingLeft": 18,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;/
div
&gt;
</span>
</div>
</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",
}
}
>
"
" Component
</h2>
<small>
No propTypes defined!
</small>
</div>
<div>
<h2
style={
Object {
"margin": "20px 0 0 0",
}
}
>
"
" Component
</h2>
<small>
No propTypes defined!
</small>
</div>
</div>
</div>
</div>
</div>
</div>
`;

exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
<div>
<div
Expand Down
16 changes: 16 additions & 0 deletions examples/cra-kitchen-sink/src/stories/addon-info.stories.js
View file
Expand Up @@ -100,3 +100,19 @@ storiesOf('Addon Info.Decorator', module)
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
)
.add('Use Info as story decorator', () => <BaseButton label="Button" />);

const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;

const Input = hoc(() => <input type="text" />);

const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);

storiesOf('Addon Info.GitHub issues', module).add(
'#1814',
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
<div>
<Input />
<TextArea />
</div>
))
);

0 comments on commit a8dc0fd

Please sign in to comment.