Storybook UI theming

addons/a11y/src/components/Panel.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
 
@@ -17,36 +17,40 @@ const Violations = styled('span')({
 });
 
 class Panel extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = {
-      passes: [],
-      violations: [],
-    };
-    this.channel = addons.getChannel();
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+  };
 
-    this.onUpdate = this.onUpdate.bind(this);
-  }
+  state = {
+    passes: [],
+    violations: [],
+  };
 
   componentDidMount() {
-    this.channel.on(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.on(CHECK_EVENT_ID, this.onUpdate);
   }
 
   componentWillUnmount() {
-    this.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
   }
 
-  onUpdate({ passes, violations }) {
+  onUpdate = ({ passes, violations }) => {
     this.setState({
       passes,
       violations,
     });
-  }
+  };
 
   render() {
     const { passes, violations } = this.state;
+    const { active } = this.props;
 
-    return (
+    return active ? (
       <Tabs
         tabs={[
           {
@@ -59,7 +63,7 @@ class Panel extends Component {
           },
         ]}
       />
-    );
+    ) : null;
   }
 }
 

addons/a11y/src/components/Tabs.js

@@ -6,6 +6,7 @@ import styled from 'react-emotion';
 const Container = styled('div')({
   width: '100%',
   position: 'relative',
+  minHeight: '100%',
 });
 
 const List = styled('div')({

addons/a11y/src/register.js

@@ -5,12 +5,12 @@ import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID } from './shared';
 
 function init() {
-  addons.register(ADDON_ID, () => {
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Accessibility',
-      render() {
-        return <Panel />;
-      },
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
     });
   });
 }

addons/actions/src/components/ActionLogger/style.js

@@ -51,4 +51,5 @@ export const Wrapper = styled('div')({
   flex: 1,
   display: 'flex',
   position: 'relative',
+  minHeight: '100%',
 });

addons/actions/src/containers/ActionLogger/index.js

@@ -56,21 +56,25 @@ export default class ActionLogger extends React.Component {
   }
 
   render() {
+    const { active } = this.props;
     const props = {
       actions: this.state.actions,
       onClear: () => this.clearActions(),
     };
-    return <ActionLoggerComponent {...props} />;
+    return active ? <ActionLoggerComponent {...props} /> : null;
   }
 }
 
 ActionLogger.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  channel: PropTypes.object,
+  active: PropTypes.bool.isRequired,
+  channel: PropTypes.shape({
+    emit: PropTypes.func,
+    on: PropTypes.func,
+    removeListener: PropTypes.func,
+  }).isRequired,
   api: PropTypes.shape({
-    onStory: PropTypes.func.isRequired,
+    onStory: PropTypes.func,
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
   }).isRequired,
 };
-ActionLogger.defaultProps = {
-  channel: {},
-};

addons/actions/src/manager.js

@@ -8,7 +8,8 @@ export function register() {
     const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Action Logger',
-      render: () => <ActionLogger channel={channel} api={api} />,
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <ActionLogger channel={channel} api={api} active={active} />,
     });
   });
 }

addons/backgrounds/src/BackgroundPanel.js

@@ -130,8 +130,11 @@ export default class BackgroundPanel extends Component {
   }
 
   render() {
+    const { active } = this.props;
     const backgrounds = [...this.state.backgrounds];
-
+    if (!active) {
+      return null;
+    }
     if (!backgrounds.length) return <Instructions />;
 
     const hasDefault = backgrounds.filter(x => x.default).length;
@@ -149,6 +152,7 @@ export default class BackgroundPanel extends Component {
   }
 }
 BackgroundPanel.propTypes = {
+  active: PropTypes.bool.isRequired,
   api: PropTypes.shape({
     getQueryParam: PropTypes.func,
     setQueryParams: PropTypes.func,

addons/backgrounds/src/__tests__/BackgroundPanel.js

@@ -30,50 +30,54 @@ jest.mock('global', () => ({
 
 describe('Background Panel', () => {
   it('should exist', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel).toBeDefined();
   });
 
   it('should have a default background value of transparent', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel.state().backgrounds).toHaveLength(0);
   });
 
   it('should show setup instructions if no colors provided', () => {
-    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
+    const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} active />);
 
     expect(backgroundPanel.html().match(/Setup Instructions/gim).length).toBeGreaterThan(0);
   });
 
   it('should set the query string', () => {
     const SpiedChannel = new EventEmitter();
-    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} active />);
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(mockedApi.getQueryParam).toBeCalledWith('background');
   });
 
   it('should not unset the query string', () => {
     const SpiedChannel = new EventEmitter();
-    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} active />);
     SpiedChannel.emit(Events.UNSET, []);
 
     expect(mockedApi.setQueryParams).not.toHaveBeenCalled();
   });
 
   it('should accept colors through channel and render the correct swatches with a default swatch', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
   });
 
   it('should allow setting a default swatch', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     const [head, ...tail] = backgrounds;
     const localBgs = [{ ...head, default: true }, ...tail];
     SpiedChannel.emit(Events.SET, localBgs);
@@ -88,7 +92,9 @@ describe('Background Panel', () => {
 
   it('should allow the default swatch become the background color', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     const [head, second, ...tail] = backgrounds;
     const localBgs = [head, { ...second, default: true }, ...tail];
     SpiedChannel.on('background', bg => {
@@ -106,7 +112,9 @@ describe('Background Panel', () => {
 
   it('should unset all swatches on receiving the background-unset message', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     SpiedChannel.emit(Events.SET, backgrounds);
 
     expect(backgroundPanel.state('backgrounds')).toEqual(backgrounds);
@@ -118,7 +126,9 @@ describe('Background Panel', () => {
 
   it('should set iframe background', () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const backgroundPanel = mount(
+      <BackgroundPanel channel={SpiedChannel} api={mockedApi} active />
+    );
     backgroundPanel.setState({ backgrounds }); // force re-render
 
     backgroundPanel

addons/backgrounds/src/register.js

@@ -10,6 +10,7 @@ addons.register(ADDON_ID, api => {
   const channel = addons.getChannel();
   addons.addPanel(PANEL_ID, {
     title: 'Backgrounds',
-    render: () => <BackgroundPanel channel={channel} api={api} />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
   });
 });

addons/events/src/components/Panel.js

@@ -10,10 +10,12 @@ const Wrapper = styled('div')({
   width: '100%',
   boxSizing: 'border-box',
   padding: '10px',
+  minHeight: '100%',
 });
 
 export default class Events extends Component {
   static propTypes = {
+    active: PropTypes.bool.isRequired,
     channel: PropTypes.shape({
       on: PropTypes.func,
       emit: PropTypes.func,
@@ -43,10 +45,11 @@ export default class Events extends Component {
 
   render() {
     const { events } = this.state;
-    return (
+    const { active } = this.props;
+    return active ? (
       <Wrapper>
         {events.map(event => <Event key={event.name} {...event} onEmit={this.onEmit} />)}
       </Wrapper>
-    );
+    ) : null;
   }
 }

addons/events/src/manager.js

@@ -6,9 +6,11 @@ import { ADDON_ID, PANEL_ID } from './constants';
 
 export function register() {
   addons.register(ADDON_ID, () => {
+    const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
       title: 'Events',
-      render: () => <Panel channel={addons.getChannel()} />,
+      // eslint-disable-next-line react/prop-types
+      render: ({ active }) => <Panel channel={channel} active={active} />,
     });
   });
 }

addons/jest/src/register.js

@@ -4,11 +4,11 @@ import addons from '@storybook/addons';
 import PanelTitle from './components/PanelTitle';
 import Panel from './components/Panel';
 
-// Register the addon with a unique name.
 addons.register('storybook/tests', api => {
-  // Also need to set a unique name to the panel.
+  const channel = addons.getChannel();
   addons.addPanel('storybook/tests/panel', {
     title: <PanelTitle channel={addons.getChannel()} api={api} />,
-    render: () => <Panel channel={addons.getChannel()} api={api} />,
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => (active ? <Panel channel={channel} api={api} /> : null),
   });
 });

addons/knobs/src/components/Panel.js

@@ -136,6 +136,11 @@ export default class Panel extends React.Component {
 
   render() {
     const { knobs, groupId } = this.state;
+    const { active } = this.props;
+
+    if (!active) {
+      return null;
+    }
 
     const groups = {};
     const groupIds = [];
@@ -190,12 +195,13 @@ export default class Panel extends React.Component {
 }
 
 Panel.propTypes = {
+  active: PropTypes.bool.isRequired,
+  onReset: PropTypes.object, // eslint-disable-line
   channel: PropTypes.shape({
     emit: PropTypes.func,
     on: PropTypes.func,
     removeListener: PropTypes.func,
   }).isRequired,
-  onReset: PropTypes.object, // eslint-disable-line
   api: PropTypes.shape({
     onStory: PropTypes.func,
     getQueryParam: PropTypes.func,

addons/knobs/src/components/__tests__/Panel.js

@@ -6,14 +6,14 @@ describe('Panel', () => {
   it('should subscribe to setKnobs event of channel', () => {
     const testChannel = { on: jest.fn() };
     const testApi = { onStory: jest.fn() };
-    shallow(<Panel channel={testChannel} api={testApi} />);
+    shallow(<Panel channel={testChannel} api={testApi} active />);
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
   });
 
   it('should subscribe to onStory event', () => {
     const testChannel = { on: jest.fn() };
     const testApi = { onStory: jest.fn() };
-    shallow(<Panel channel={testChannel} api={testApi} />);
+    shallow(<Panel channel={testChannel} api={testApi} active />);
 
     expect(testApi.onStory).toHaveBeenCalled();
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
@@ -41,7 +41,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      shallow(<Panel channel={testChannel} api={testApi} />);
+      shallow(<Panel channel={testChannel} api={testApi} active />);
       const setKnobsHandler = handlers['addon:knobs:setKnobs'];
 
       const knobs = {
@@ -88,7 +88,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
+      const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
       const setKnobsHandler = handlers['addon:knobs:setKnobs'];
 
       const knobs = {
@@ -130,7 +130,7 @@ describe('Panel', () => {
         onStory: jest.fn(),
       };
 
-      const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
+      const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
 
       const testChangedKnob = {
         name: 'foo',