Decouple initial viewports from SelectViewport component

addons/viewport/src/manager/components/Panel.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { baseFonts } from '@storybook/components';
 import { document } from 'global';
 
-import { viewports, defaultViewport, resetViewport } from './viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
 import { UPDATE_VIEWPORT_EVENT_ID } from '../../shared';
@@ -27,6 +27,7 @@ export class Panel extends Component {
     super(props, context);
     this.state = {
       viewport: defaultViewport,
+      viewports: initialViewports,
       isLandscape: false,
     };
 
@@ -64,7 +65,7 @@ export class Panel extends Component {
   };
 
   updateIframe = () => {
-    const { viewport: viewportKey, isLandscape } = this.state;
+    const { viewports, viewport: viewportKey, isLandscape } = this.state;
     const viewport = viewports[viewportKey] || resetViewport;
 
     if (!this.iframe) {
@@ -82,7 +83,7 @@ export class Panel extends Component {
   };
 
   render() {
-    const { isLandscape, viewport } = this.state;
+    const { isLandscape, viewport, viewports } = this.state;
 
     const disableDefault = viewport === defaultViewport;
     const disabledStyles = disableDefault ? styles.disabled : {};
@@ -97,6 +98,8 @@ export class Panel extends Component {
     return (
       <div style={containerStyles}>
         <SelectViewport
+          viewports={viewports}
+          defaultViewport={defaultViewport}
           activeViewport={viewport}
           onChange={e => this.changeViewport(e.target.value)}
         />

addons/viewport/src/manager/components/SelectViewport.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { viewports, defaultViewport } from './viewportInfo';
 import * as styles from './styles';
 
-export function SelectViewport({ activeViewport, onChange }) {
+export function SelectViewport({ viewports, defaultViewport, activeViewport, onChange }) {
   return (
     <div style={styles.row}>
       <label htmlFor="device" style={styles.label}>
@@ -25,4 +24,6 @@ export function SelectViewport({ activeViewport, onChange }) {
 SelectViewport.propTypes = {
   onChange: PropTypes.func.isRequired,
   activeViewport: PropTypes.string.isRequired,
+  viewports: PropTypes.shape({}).isRequired,
+  defaultViewport: PropTypes.string.isRequired,
 };

addons/viewport/src/manager/components/tests/Panel.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { document } from 'global';
 
 import { Panel } from '../Panel';
-import { viewports, defaultViewport, resetViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/Panel', () => {
@@ -24,6 +24,7 @@ describe('Viewport/Panel', () => {
     it('creates the initial state', () => {
       expect(subject.instance().state).toEqual({
         viewport: defaultViewport,
+        viewports: initialViewports,
         isLandscape: false,
       });
     });
@@ -76,13 +77,13 @@ describe('Viewport/Panel', () => {
 
     describe('new viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(viewports[0]);
+        subject.instance().changeViewport(initialViewports[0]);
       });
 
       it('sets the state with the new information', () => {
         expect(subject.instance().setState).toHaveBeenCalledWith(
           {
-            viewport: viewports[0],
+            viewport: initialViewports[0],
             isLandscape: false,
           },
           subject.instance().updateIframe
@@ -204,6 +205,22 @@ describe('Viewport/Panel', () => {
         );
       });
 
+      it('passes the defaultViewport', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            defaultViewport,
+          })
+        );
+      });
+
+      it('passes the initialViewports', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            viewports: initialViewports,
+          })
+        );
+      });
+
       it('onChange it updates the viewport', () => {
         const e = { target: { value: 'iphone6' } };
         select.simulate('change', e);

addons/viewport/src/manager/components/tests/SelectViewport.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SelectViewport } from '../SelectViewport';
-import { viewports, defaultViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/SelectViewport', () => {
@@ -12,6 +12,8 @@ describe('Viewport/SelectViewport', () => {
     props = {
       onChange: jest.fn(),
       activeViewport: defaultViewport,
+      viewports: initialViewports,
+      defaultViewport,
     };
 
     subject = shallow(<SelectViewport {...props} />);
@@ -35,7 +37,7 @@ describe('Viewport/SelectViewport', () => {
     });
 
     describe('dynamic options', () => {
-      const viewportKeys = Object.keys(viewports);
+      const viewportKeys = Object.keys(initialViewports);
       it('has at least 1 option', () => {
         expect(viewportKeys.length).toBeGreaterThan(0);
       });
@@ -43,9 +45,9 @@ describe('Viewport/SelectViewport', () => {
       viewportKeys.forEach(key => {
         let option;
 
-        it(`renders an option for ${viewports[key].name}`, () => {
+        it(`renders an option for ${initialViewports[key].name}`, () => {
           option = subject.find(`[value="${key}"]`);
-          expect(option.text()).toEqual(viewports[key].name);
+          expect(option.text()).toEqual(initialViewports[key].name);
         });
       });
     });

addons/viewport/src/manager/components/tests/viewportInfo.spec.js

@@ -1,12 +1,12 @@
-import { viewports, resetViewport, configuredStyles } from '../viewportInfo';
+import { initialViewports, resetViewport, configuredStyles } from '../viewportInfo';
 
 describe('Viewport/constants', () => {
-  describe('viewports', () => {
+  describe('initialViewports', () => {
     it('includes the default styles on every custom viewport', () => {
-      const keys = Object.keys(viewports);
+      const keys = Object.keys(initialViewports);
 
       keys.forEach(key => {
-        expect(viewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
+        expect(initialViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
       });
     });
   });

addons/viewport/src/manager/components/viewportInfo.js

@@ -18,7 +18,7 @@ export const resetViewport = {
   },
 };
 
-export const viewports = {
+export const initialViewports = {
   iphone5: {
     name: 'iPhone 5',
     styles: {