introduce Storybook Viewport

Author: rwieruch

.storybook/addons.js

@@ -1,2 +1,3 @@
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -1,11 +1,40 @@
 import { configure, addDecorator } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
+import { configureViewport } from '@storybook/addon-viewport';
 
 // pick all stories.js files within the src/ folder
 const req = require.context('../src', true, /stories\.js$/);
 
 addDecorator(withKnobs);
 
+const viewports = {
+  small: {
+    name: 'small',
+    styles: {
+      width: '320px',
+      height: '240px',
+    },
+  },
+  medium: {
+    name: 'medium',
+    styles: {
+      width: '800px',
+      height: '600px',
+    },
+  },
+  large: {
+    name: 'large',
+    styles: {
+      width: '1280px',
+      height: '1024px',
+    },
+  },
+};
+
+configureViewport({
+  viewports,
+});
+
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }

package-lock.json

@@ -21,6 +21,7 @@
     "@storybook/addon-actions": "^4.0.0-alpha.6",
     "@storybook/addon-knobs": "^4.0.0-alpha.6",
     "@storybook/addon-storyshots": "^4.0.0-alpha.6",
+    "@storybook/addon-viewport": "^4.0.0-alpha.6",
     "@storybook/react": "^4.0.0-alpha.6",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
+import { Viewport } from '@storybook/addon-viewport';
 import Checkbox from './';
 
 class CheckboxStateful extends React.Component {
@@ -28,6 +29,32 @@ class CheckboxStateful extends React.Component {
 }
 
 storiesOf('Checkbox', module)
+  .add('with medium', () => {
+    const value = true;
+    const children = text('label', 'My Checkbox Label');
+    const onCheckboxChange = action('toggle');
+
+    return (
+      <Viewport name="medium">
+        <CheckboxStateful value={value} onCheckboxChange={onCheckboxChange}>
+          {children}
+        </CheckboxStateful>
+      </Viewport>
+    );
+  })
+  .add('with iphone6 Plus', () => {
+    const value = true;
+    const children = text('label', 'My Checkbox Label');
+    const onCheckboxChange = action('toggle');
+
+    return (
+      <Viewport name="iphone6p">
+        <CheckboxStateful value={value} onCheckboxChange={onCheckboxChange}>
+          {children}
+        </CheckboxStateful>
+      </Viewport>
+    );
+  })
   .add('with checked', () => {
     const value = true;
     const children = text('label', 'My Checkbox Label');