Skip to content

Commit

Permalink
viewport-addon: configure => configureViewport
Browse files Browse the repository at this point in the history
  • Loading branch information
mshaaban088 committed Apr 14, 2018
1 parent dbf8eba commit fc1705d
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 16 deletions.
20 changes: 10 additions & 10 deletions addons/viewport/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ or with yarn:

## Configuration

Import and use the `configure` function in your `config.js` file.
Import and use the `configureViewport` function in your `config.js` file.

```js
import { configure } from '@storybook/addon-viewport';
import { configureViewport } from '@storybook/addon-viewport';
```

### defaultViewport : String
Expand Down Expand Up @@ -94,10 +94,10 @@ This will register the Viewport Addon to Storybook and will show up in the actio

### Use Custom Set of Devices

This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configure` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configureViewport` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.

```js
import { configure } from '@storybook/addon-viewport';
import { configureViewport } from '@storybook/addon-viewport';

const newViewports = {
kindleFire2: {
Expand All @@ -116,18 +116,18 @@ const newViewports = {
}
};

configure({
configureViewport({
viewports: newViewports
});
```


### Add New Device

This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configure` function
This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function

```js
import { configure, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const newViewports = {
kindleFire2: {
Expand All @@ -146,7 +146,7 @@ const newViewports = {
}
};

configure({
configureViewport({
viewports: {
...INITIAL_VIEWPORTS,
...newViewports
Expand All @@ -160,9 +160,9 @@ configure({
This will make `iPhone 6` the default viewport for all stories.

```js
import { configure } from '@storybook/addon-viewport';
import { configureViewport } from '@storybook/addon-viewport';

configure({
configureViewport({
defaultViewport: 'iphone6'
});
```
Expand Down
2 changes: 1 addition & 1 deletion addons/viewport/preview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const preview = require('./dist/preview');

exports.configure = preview.configure;
exports.configureViewport = preview.configureViewport;
exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT;
exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS;
exports.withViewport = preview.withViewport;
Expand Down
2 changes: 1 addition & 1 deletion addons/viewport/src/preview/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
export { default as withViewport } from './withViewport';
export { default as Viewport } from './components/Viewport';

export function configure(configs = {}) {
export function configureViewport(configs = {}) {
const channel = addons.getChannel();

if (channel) {
Expand Down
6 changes: 3 additions & 3 deletions addons/viewport/src/preview/tests/index.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import addons from '@storybook/addons';
import { configure } from '../';
import { configureViewport } from '../';

jest.mock('@storybook/addons');

Expand All @@ -10,13 +10,13 @@ describe('Viewport preview', () => {
};
addons.getChannel.mockReturnValue(channel);

describe('configure', () => {
describe('configureViewport', () => {
it('publishes configure event with all passed configurations', () => {
const configs = {
foo: 'bar',
john: 'Doe',
};
configure(configs);
configureViewport(configs);

expect(channel.emit).toHaveBeenCalledTimes(1);
expect(channel.emit).toHaveBeenCalledWith('addon:viewport:configure', {
Expand Down
2 changes: 1 addition & 1 deletion examples/official-storybook/config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { configure as configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import 'react-chromatic/storybook-addon';
import addHeadWarning from './head-warning';
import extraViewports from './extra-viewports.json';
Expand Down

0 comments on commit fc1705d

Please sign in to comment.