Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] addon-notes and addon-cssresources unavailable on initial load #5514

Merged
merged 2 commits into from
Feb 8, 2019
Merged

[bug] addon-notes and addon-cssresources unavailable on initial load #5514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32cf22d
Defect fixes for addon `onload` functionality
pgoforth Feb 7, 2019
e914c98
Clarify docs for addon-cssresources
pgoforth Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions addons/cssresources/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,27 @@ You need add the all the css resources at compile time using the `withCssResourc

```js
// Import from @storybook/X where X is your framework
import { configure, addDecorator, storiesOf } from '@storybook/react';
import { configure, addDecorator, addParameters, storiesOf } from '@storybook/react';
import { withCssResources } from '@storybook/addon-cssresources';

// global
addDecorator(
withCssResources({
cssresources: [{
id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
})
);
addDecorator(withCssResources)
addParameters({
cssresources: [{
id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
});

You can use the `cssresources` parameter to override resources on each story individually:

// per story
storiesOf('Addons|Cssresources', module)
.addDecorator(
withCssResources({
cssresources: [{
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
cssresources: [
{
id: `fontawesome`,
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
picked: true,
Expand All @@ -57,7 +58,5 @@ storiesOf('Addons|Cssresources', module)
picked: true,
},
],
})
)
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
});
```
6 changes: 3 additions & 3 deletions addons/cssresources/src/css-resource-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react';
import { SyntaxHighlighter } from '@storybook/components';
import Eventtypes, { STORY_CHANGED } from '@storybook/core-events';
import Eventtypes, { STORY_RENDERED } from '@storybook/core-events';

import { EVENTS, PARAM_KEY } from './constants';
import { CssResource } from './CssResource';
Expand Down Expand Up @@ -32,12 +32,12 @@ export class CssResourcePanel extends Component<CssResourcePanelProps, CssResour

componentDidMount() {
const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}

componentWillUnmount() {
const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}

onStoryChange = (id: string) => {
Expand Down
6 changes: 3 additions & 3 deletions addons/notes/src/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types';
import { types } from '@storybook/addons';
import { styled } from '@storybook/theming';
import { STORY_CHANGED } from '@storybook/core-events';
import { STORY_RENDERED } from '@storybook/core-events';

import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
import Giphy from './giphy';
Expand Down Expand Up @@ -73,12 +73,12 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>

componentDidMount() {
const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}

componentWillUnmount() {
const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}

onStoryChange = (id: string) => {
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/addons/writing-addons/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@ class MyPanel extends React.Component {
componentDidMount() {
const { api } = this.props;

api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}

componentWillUnmount() {
const { api } = this.props;

api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}

onStoryChange = id => {
Expand Down Expand Up @@ -184,12 +184,12 @@ class MyPanel extends React.Component {
componentDidMount() {
const { api } = this.props;
api.on('foo/doSomeAction', this.onSomeAction);
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED this.onStoryChange);
}
componentWillUnmount() {
const { api } = this.props;
api.off('foo/doSomeAction', this.onSomeAction);
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}

render() {
Expand Down