Add onViewportChange story to official-examples

storybookjs · Mar 28, 2018 · 6c5e21f · 6c5e21f
1 parent ca20832
commit 6c5e21f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -31,3 +31,17 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden 1`
   .
 </div>
 `;
+
+exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
+<div
+  style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+      \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
+>
+  <h1
+    style="margin:0"
+  >
+    Select device/viewport
+  </h1>
+  <dl />
+</div>
+`;
diff --git a/examples/official-storybook/stories/addon-viewport.stories.js b/examples/official-storybook/stories/addon-viewport.stories.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { baseFonts } from '@storybook/components';
-
 import { withViewport } from '@storybook/addon-viewport';
+import EventEmitter from 'eventemitter3';
+
+import Logger from './Logger';
 
 // eslint-disable-next-line react/prop-types
 const Panel = ({ children }) => <div style={baseFonts}>{children}</div>;
@@ -26,3 +28,18 @@ storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
       </Panel>
     ))
   );
+
+const emitter = new EventEmitter();
+
+storiesOf('Addons|Viewport.withViewport', module)
+  .addDecorator(
+    withViewport({
+      onViewportChange({ viewport }) {
+        emitter.emit(Logger.LOG_EVENT, {
+          name: 'Viewport Changed',
+          payload: `${viewport.name} (${viewport.type})`,
+        });
+      },
+    })
+  )
+  .add('onViewportChange', () => <Logger title="Select device/viewport" emitter={emitter} />);