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

Merge pull request #4683 from storybooks/addon-jest/fix-configureviewport

Browse Source 
Addon Viewport - fix "defaultViewport" configuration
This commit is contained in:
Igor 2018-11-05 18:48:22 +02:00 committed by Michael Shilman
parent 4bbc479635
commit 9ebbce78d6
3 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
addons/viewport/src/manager/components/Panel.js
View File

@ -25,8 +25,9 @@ const Container = styled.div({
});
Container.displayName = 'Container';
const getDefaultViewport = (viewports, candidateViewport) =>
candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
function getDefaultViewport(viewports, candidateViewport) {
return candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
}
const getViewports = viewports =>
Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
@ -62,7 +63,6 @@ export class Panel extends Component {
componentDidMount() {
const { channel, api } = this.props;
const { defaultViewport } = this.state;
this.iframe = document.getElementById(storybookIframe);
@ -71,6 +71,7 @@ export class Panel extends Component {
channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
this.unsubscribeFromOnStory = api.onStory(() => {
const { defaultViewport } = this.state;
this.setStoryDefaultViewport(defaultViewport);
});
}
@ -98,7 +99,7 @@ export class Panel extends Component {
};
configure = (options = Panel.defaultOptions) => {
const viewports = getViewports(options.viewports);
const viewports = getViewports(options.viewports || {});
const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
this.setState(

12
examples/html-kitchen-sink/.storybook/config.js
View File

@ -1,9 +1,11 @@
import { configure } from '@storybook/html';
import { setOptions } from '@storybook/addon-options';
import { configure, addDecorator } from '@storybook/html';
import { withOptions } from '@storybook/addon-options';
setOptions({
hierarchyRootSeparator: /\|/,
});
addDecorator(
withOptions({
hierarchyRootSeparator: /\|/,
})
);
// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

7
examples/html-kitchen-sink/stories/addon-a11y.stories.js
View File

@ -1,17 +1,12 @@
import { document, setTimeout } from 'global';
import { storiesOf } from '@storybook/html';
import { setOptions } from '@storybook/addon-options';
import { checkA11y } from '@storybook/addon-a11y';
const text = 'Testing the a11y addon';
storiesOf('Addons|a11y', module)
.addDecorator(checkA11y)
.addDecorator(fn => {
setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
return fn();
})
.addParameters({ options: { selectedAddonPanel: '@storybook/addon-a11y/panel' } })
.add('Default', () => `<button></button>`)
.add('Label', () => `<button>${text}</button>`)
.add('Disabled', () => `<button disabled>${text}</button>`)