Add custom viewports to the official-storybook example

storybookjs · Feb 26, 2018 · 00d4252 · 00d4252
1 parent bb9eaab
commit 00d4252
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+import { addViewports } from '@storybook/addon-viewport';
 import 'react-chromatic/storybook-addon';
 import addHeadWarning from './head-warning';
+import extraViewports from './extra-viewports.json';
 
 addHeadWarning('Preview head not loaded', 'preview-head-not-loaded');
 addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded');
@@ -11,6 +13,8 @@ setOptions({
   hierarchyRootSeparator: /\|/,
 });
 
+addViewports(extraViewports);
+
 function importAll(req) {
   req.keys().forEach(filename => req(filename));
 }

diff --git a/examples/official-storybook/extra-viewports.json b/examples/official-storybook/extra-viewports.json
@@ -0,0 +1,16 @@
+{
+  "kindleFire2": {
+    "name": "Kindle Fire 2",
+    "styles": {
+      "width": "600px",
+      "height": "963px"
+    }
+  },
+  "kindleFireHD": {
+    "name": "Kindle Fire HD",
+    "styles": {
+      "width": "533px",
+      "height": "801px"
+    }
+  }
+}