Merge pull request #3337 from denzenin/mobile-device-view

Mobile device view: toggling stories panel with ☰ button

addons/notes/src/index.js

@@ -9,7 +9,9 @@ function renderMarkdown(text, options) {
 const decorator = options => {
   const channel = addons.getChannel();
   return (getStory, context) => {
-    const { parameters: { notes } } = context;
+    const {
+      parameters: { notes },
+    } = context;
     const storyOptions = notes || options;
 
     if (storyOptions) {

examples/cra-kitchen-sink/.storybook/config.js

@@ -8,7 +8,6 @@ setOptions({
   name: 'CRA Kitchen Sink',
   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
   goFullScreen: false,
-  showStoriesPanel: true,
   showAddonsPanel: true,
   showSearchBox: false,
   addonPanelInRight: true,

lib/ui/src/modules/shortcuts/index.js

@@ -1,11 +1,16 @@
 import actions from './actions';
+import checkIfMobileDevice from '../ui/libs/is_mobile_device';
+
+const { userAgent } = global.window.navigator;
+const isMobileDevice = checkIfMobileDevice(userAgent);
 
 export default {
   actions,
   defaultState: {
+    isMobileDevice,
     shortcutOptions: {
       goFullScreen: false,
-      showStoriesPanel: true,
+      showStoriesPanel: !isMobileDevice,
       showAddonPanel: true,
       showSearchBox: false,
       addonPanelInRight: false,

lib/ui/src/modules/ui/components/__snapshots__/header.stories.storyshot

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ui/stories/Header mobile-view 1`] = `
+<div
+  style="background:none;margin:10px 0;display:flex"
+>
+  <button
+    style="text-transform:uppercase;font-size:12px;font-weight:bolder;color:rgb(130, 130, 130);border:1px solid rgb(193, 193, 193);text-align:center;border-radius:2px;cursor:pointer;display:inlineBlock;padding:0;margin:0 15px;background-color:inherit;outline:0;width:30px;flex-shrink:0;padding-bottom:2px"
+  >
+    ☰
+  </button>
+  <a
+    href="http://google.com"
+    rel="noopener noreferrer"
+    style="text-decoration:none;flex-grow:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:2px"
+    target="_blank"
+  >
+    <h3
+      style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#828282;-webkit-font-smoothing:antialiased;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:bolder;text-align:center;cursor:pointer;padding:5px;margin:0;overflow:hidden"
+    >
+      name
+    </h3>
+  </a>
+  <button
+    style="text-transform:uppercase;font-size:12px;font-weight:bolder;color:rgb(130, 130, 130);border:1px solid rgb(193, 193, 193);text-align:center;border-radius:2px;cursor:pointer;display:inlineBlock;padding:0;margin:0 15px;background-color:inherit;outline:0;width:30px;flex-shrink:0"
+  >
+    ⌘
+  </button>
+</div>
+`;
+
+exports[`Storyshots ui/stories/Header simple 1`] = `
+<div
+  style="background:#F7F7F7;margin:0 0 10px;display:flex"
+>
+  <a
+    href="http://google.com"
+    rel="noopener noreferrer"
+    style="text-decoration:none;flex-grow:1;display:flex;align-items:center;justify-content:center;border:1px solid rgb(193, 193, 193);border-radius:2px"
+    target="_blank"
+  >
+    <h3
+      style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#828282;-webkit-font-smoothing:antialiased;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:bolder;text-align:center;cursor:pointer;padding:5px;margin:0;overflow:hidden"
+    >
+      name
+    </h3>
+  </a>
+  <button
+    style="text-transform:uppercase;font-size:12px;font-weight:bolder;color:rgb(130, 130, 130);border:1px solid rgb(193, 193, 193);text-align:center;border-radius:2px;cursor:pointer;display:inlineBlock;padding:0;margin:0 0 0 5px;background-color:inherit;outline:0;width:30px;flex-shrink:0"
+  >
+    ⌘
+  </button>
+</div>
+`;

lib/ui/src/modules/ui/components/header.js

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { baseFonts } from '@storybook/components';
 
-const wrapperStyle = {
+const wrapperStyle = isMobileDevice => ({
-  background: '#F7F7F7',
+  background: isMobileDevice ? 'none' : '#F7F7F7',
-  marginBottom: 10,
+  margin: isMobileDevice ? '10px 0' : '0 0 10px',
   display: 'flex',
-};
+});
 
 const headingStyle = {
   ...baseFonts,
@@ -22,7 +22,7 @@ const headingStyle = {
   overflow: 'hidden',
 };
 
-const shortcutIconStyle = {
+const iconStyle = isMobileDevice => ({
   textTransform: 'uppercase',
   fontSize: 12,
   fontWeight: 'bolder',
@@ -33,30 +33,47 @@ const shortcutIconStyle = {
   cursor: 'pointer',
   display: 'inlineBlock',
   padding: 0,
-  margin: '0 0 0 5px',
+  margin: isMobileDevice ? '0 15px' : '0 0 0 5px',
   backgroundColor: 'inherit',
   outline: 0,
   width: 30,
   flexShrink: 0,
+});
+
+const burgerIconStyle = {
+  ...iconStyle(true),
+  paddingBottom: 2,
 };
 
-const linkStyle = {
+const linkStyle = isMobileDevice => ({
   textDecoration: 'none',
   flexGrow: 1,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  border: '1px solid rgb(193, 193, 193)',
+  border: isMobileDevice ? 'none' : '1px solid rgb(193, 193, 193)',
   borderRadius: 2,
-};
+});
 
-const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp }) => (
+const Header = ({
-  <div style={wrapperStyle}>
+  openShortcutsHelp,
-    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
+  onBurgerButtonClick,
+  name,
+  url,
+  enableShortcutsHelp,
+  isMobileDevice,
+}) => (
+  <div style={wrapperStyle(isMobileDevice)}>
+    {isMobileDevice && (
+      <button style={burgerIconStyle} onClick={onBurgerButtonClick}>
+        ☰
+      </button>
+    )}
+    <a style={linkStyle(isMobileDevice)} href={url} target="_blank" rel="noopener noreferrer">
       <h3 style={headingStyle}>{name}</h3>
     </a>
     {enableShortcutsHelp && (
-      <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
+      <button style={iconStyle(isMobileDevice)} onClick={openShortcutsHelp}>
         ⌘
       </button>
     )}
@@ -65,15 +82,19 @@ const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp }) => (
 
 Header.defaultProps = {
   openShortcutsHelp: null,
+  onBurgerButtonClick: null,
   enableShortcutsHelp: true,
   name: '',
   url: '',
+  isMobileDevice: false,
 };
 
 Header.propTypes = {
   openShortcutsHelp: PropTypes.func,
+  onBurgerButtonClick: PropTypes.func,
   name: PropTypes.string,
   url: PropTypes.string,
+  isMobileDevice: PropTypes.bool,
   enableShortcutsHelp: PropTypes.bool,
 };
 

lib/ui/src/modules/ui/components/header.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Header from './header';
+
+const openShortcutsHelp = action('openShortcutsHelp');
+storiesOf('ui/stories/Header', module)
+  .add('simple', () => (
+    <Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
+  ))
+  .add('mobile-view', () => (
+    <Header
+      name="name"
+      url="http://google.com"
+      openShortcutsHelp={openShortcutsHelp}
+      isMobileDevice
+    />
+  ));

lib/ui/src/modules/ui/components/layout/index.js

@@ -130,7 +130,7 @@ class Layout extends React.Component {
   constructor(props) {
     super(props);
 
-    this.layerSizes = getSavedSizes(defaultSizes);
+    this.layerSizes = getSavedSizes(defaultSizes, props.isMobileDevice);
 
     this.state = {
       previewPanelDimensions: {
@@ -188,13 +188,15 @@ class Layout extends React.Component {
       goFullScreen,
       showStoriesPanel,
       showAddonPanel,
-      addonPanelInRight,
       addonPanel,
       storiesPanel,
       preview,
+      isMobileDevice,
     } = this.props;
     const { previewPanelDimensions } = this.state;
 
+    const addonPanelInRight = isMobileDevice ? false : this.props.addonPanelInRight;
+
     const storiesPanelOnTop = false;
 
     let previewStyle = normalPreviewStyle;
@@ -203,7 +205,7 @@ class Layout extends React.Component {
       previewStyle = fullScreenPreviewStyle;
     }
 
-    const sizes = getSavedSizes(this.layerSizes);
+    const sizes = getSavedSizes(this.layerSizes, isMobileDevice);
 
     const storiesPanelDefaultSize = !storiesPanelOnTop
       ? sizes.storiesPanel.left
@@ -219,8 +221,8 @@ class Layout extends React.Component {
       <div style={rootStyle}>
         <SplitPane
           split={storiesSplit}
-          allowResize={showStoriesPanel}
+          allowResize={isMobileDevice ? false : showStoriesPanel}
-          minSize={150}
+          minSize={isMobileDevice ? 0 : 150}
           maxSize={-400}
           size={showStoriesPanel ? storiesPanelDefaultSize : 1}
           defaultSize={storiesPanelDefaultSize}
@@ -235,7 +237,7 @@ class Layout extends React.Component {
           </div>
           <SplitPane
             split={addonSplit}
-            allowResize={showAddonPanel}
+            allowResize={isMobileDevice ? false : showAddonPanel}
             primary="second"
             minSize={addonPanelInRight ? 200 : 100}
             maxSize={-200}
@@ -285,6 +287,11 @@ Layout.propTypes = {
   preview: PropTypes.func.isRequired,
   addonPanel: PropTypes.func.isRequired,
   addonPanelInRight: PropTypes.bool.isRequired,
+  isMobileDevice: PropTypes.bool,
+};
+
+Layout.defaultProps = {
+  isMobileDevice: false,
 };
 
 export default Layout;

lib/ui/src/modules/ui/components/stories_panel/__snapshots__/header.stories.storyshot

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots ui/stories/Header simple 1`] = `
-<div
-  style="background:#F7F7F7;margin-bottom:10px;display:flex"
->
-  <a
-    href="http://google.com"
-    rel="noopener noreferrer"
-    style="text-decoration:none;flex-grow:1;display:flex;align-items:center;justify-content:center;border:1px solid rgb(193, 193, 193);border-radius:2px"
-    target="_blank"
-  >
-    <h3
-      style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#828282;-webkit-font-smoothing:antialiased;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:bolder;text-align:center;cursor:pointer;padding:5px;margin:0;overflow:hidden"
-    >
-      name
-    </h3>
-  </a>
-  <button
-    style="text-transform:uppercase;font-size:12px;font-weight:bolder;color:rgb(130, 130, 130);border:1px solid rgb(193, 193, 193);text-align:center;border-radius:2px;cursor:pointer;display:inlineBlock;padding:0;margin:0 0 0 5px;background-color:inherit;outline:0;width:30px;flex-shrink:0"
-  >
-    ⌘
-  </button>
-</div>
-`;

lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot

@@ -5,7 +5,7 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
   style="padding:10px 0 10px 10px"
 >
   <div
-    style="background:#F7F7F7;margin-bottom:10px;display:flex"
+    style="background:#F7F7F7;margin:0 0 10px;display:flex"
   >
     <a
       href=""
@@ -49,7 +49,7 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
   style="padding:10px 0 10px 10px"
 >
   <div
-    style="background:#F7F7F7;margin-bottom:10px;display:flex"
+    style="background:#F7F7F7;margin:0 0 10px;display:flex"
   >
     <a
       href=""
@@ -88,12 +88,37 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is emp
 </div>
 `;
 
+exports[`Storyshots ui/stories/StoriesPanel when open on mobile device 1`] = `
+<div
+  style="padding:10px 0 10px 10px"
+>
+  <div
+    style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;border:1px solid #ECECEC;border-radius:2px;position:relative"
+  >
+    <div
+      style="background:#F7F7F7"
+    >
+      <input
+        name="filter-text"
+        placeholder="Filter"
+        style="font-size:12px;color:#828282;padding:5px;display:block;width:100%;box-sizing:border-box;outline:none;border:0;height:26px"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    style="height:calc(100vh - 105px);margin-top:10px;overflow:auto"
+  />
+</div>
+`;
+
 exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
 <div
   style="padding:10px 0 10px 10px"
 >
   <div
-    style="background:#F7F7F7;margin-bottom:10px;display:flex"
+    style="background:#F7F7F7;margin:0 0 10px;display:flex"
   >
     <a
       href=""

lib/ui/src/modules/ui/components/stories_panel/header.stories.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Header from './header';
-
-const openShortcutsHelp = action('openShortcutsHelp');
-storiesOf('ui/stories/Header', module).add('simple', () => (
-  <Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
-));

lib/ui/src/modules/ui/components/stories_panel/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import pick from 'lodash.pick';
-import Header from './header';
+import Header from '../header';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
@@ -52,16 +52,19 @@ class StoriesPanel extends Component {
       storyFilter,
       url,
       shortcutOptions,
+      isMobileDevice,
     } = this.props;
 
     return (
       <div style={mainStyle}>
+        {!isMobileDevice && (
           <Header
             name={name}
             url={url}
             openShortcutsHelp={shortcutOptions.enableShortcuts ? openShortcutsHelp : null}
             enableShortcutsHelp={shortcutOptions.enableShortcuts}
           />
+        )}
         <TextFilter
           text={storyFilter}
           onClear={() => onStoryFilter('')}
@@ -78,6 +81,7 @@ StoriesPanel.defaultProps = {
   storyFilter: null,
   onStoryFilter: () => {},
   openShortcutsHelp: null,
+  isMobileDevice: false,
   name: '',
   url: '',
   shortcutOptions: {
@@ -102,6 +106,7 @@ StoriesPanel.propTypes = {
   onStoryFilter: PropTypes.func,
 
   openShortcutsHelp: PropTypes.func,
+  isMobileDevice: PropTypes.bool,
   name: PropTypes.string,
   url: PropTypes.string,
   shortcutOptions: PropTypes.shape({

lib/ui/src/modules/ui/components/stories_panel/index.stories.js

@@ -12,7 +12,7 @@ const decorator = withLifecyle({
     setContext({
       clientStore: {
         getAll() {
-          return { shortcutOptions: {} };
+          return { shortcutOptions: {}, uiOptions: {}, actions: { ui: {} } };
         },
         subscribe() {},
       },
@@ -51,4 +51,12 @@ storiesOf('ui/stories/StoriesPanel', module)
       openShortcutsHelp={openShortcutsHelp}
       onStoryFilter={onStoryFilter}
     />
+  ))
+  .add('when open on mobile device', () => (
+    <StoriesPanel
+      storiesHierarchies={createHierarchies([])}
+      openShortcutsHelp={openShortcutsHelp}
+      onStoryFilter={onStoryFilter}
+      isMobileDevice
+    />
   ));

lib/ui/src/modules/ui/components/stories_panel/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import StoriesPanel from './index';
-import Header from './header';
+import Header from '../header';
 import TextFilter from './text_filter';
 import Stories from './stories_tree';
 import { createHierarchies } from '../../libs/hierarchy';

lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js

@@ -20,8 +20,7 @@ describe('manager.ui.components.stories_panel.stories_tree', () => {
         },
         subscribe() {},
       },
-    })
+    }));
-  );
 
   afterEach(() => setContext(null));
 

lib/ui/src/modules/ui/containers/header.js

@@ -0,0 +1,37 @@
+import pick from 'lodash.pick';
+import Header from '../components/header';
+import genPoddaLoader from '../libs/gen_podda_loader';
+import compose from '../../../compose';
+
+export const mapper = (state, props, { actions }) => {
+  const currentOptions = pick(
+    state.shortcutOptions,
+    'showStoriesPanel',
+    'enableShortcuts',
+    'addonPanelInRight'
+  );
+
+  const actionMap = actions();
+  const { uiOptions, isMobileDevice } = state;
+  const { name = '', url = '' } = uiOptions;
+
+  const handleBurgerButtonClick = () => {
+    actionMap.shortcuts.setOptions({
+      showStoriesPanel: !currentOptions.showStoriesPanel,
+    });
+  };
+
+  const addonPanelInRight = isMobileDevice ? false : currentOptions.addonPanelInRight;
+
+  return {
+    name,
+    url,
+    enableShortcutsHelp: currentOptions.enableShortcuts,
+    openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
+    onBurgerButtonClick: handleBurgerButtonClick,
+    isMobileDevice,
+    addonPanelInRight,
+  };
+};
+
+export default compose(genPoddaLoader(mapper))(Header);

lib/ui/src/modules/ui/containers/header.test.js

@@ -0,0 +1,45 @@
+import { mapper } from './header';
+
+describe('manager.ui.containers.header', () => {
+  describe('mapper', () => {
+    test('should give correct data', () => {
+      const uiOptions = {
+        name: 'foo',
+        url: 'bar',
+      };
+      const shortcutOptions = {
+        showStoriesPanel: 'aa',
+        enableShortcuts: true,
+        addonPanelInRight: true,
+      };
+      const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
+      const props = {};
+      const env = {
+        actions: () => ({
+          ui: {
+            toggleShortcutsHelp,
+          },
+        }),
+      };
+      const state = {
+        uiOptions,
+        shortcutOptions,
+      };
+
+      const result = mapper(state, props, env);
+
+      expect(result.openShortcutsHelp).toBe(toggleShortcutsHelp);
+      expect(result.enableShortcutsHelp).toEqual(shortcutOptions.enableShortcuts);
+      expect(result.addonPanelInRight).toEqual(true);
+
+      const stateWhenMobileDevice = {
+        uiOptions,
+        shortcutOptions,
+        isMobileDevice: true,
+      };
+
+      const resultWhenMobileDevice = mapper(stateWhenMobileDevice, props, env);
+      expect(resultWhenMobileDevice.addonPanelInRight).toEqual(false);
+    });
+  });
+});

lib/ui/src/modules/ui/containers/layout.js

@@ -3,7 +3,20 @@ import Layout from '../components/layout';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
 
-export const mapper = ({ shortcutOptions }) =>
+export const mapper = state => {
-  pick(shortcutOptions, 'showStoriesPanel', 'showAddonPanel', 'goFullScreen', 'addonPanelInRight');
+  const { shortcutOptions, isMobileDevice } = state;
+  const currentOptions = pick(
+    shortcutOptions,
+    'showStoriesPanel',
+    'showAddonPanel',
+    'goFullScreen',
+    'addonPanelInRight'
+  );
+
+  return {
+    ...currentOptions,
+    isMobileDevice,
+  };
+};
 
 export default compose(genPoddaLoader(mapper))(Layout);

lib/ui/src/modules/ui/containers/stories_panel.js

@@ -13,14 +13,23 @@ import {
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
 
-  const { stories, selectedKind, selectedStory, uiOptions, storyFilter, shortcutOptions } = state;
   const {
-    name,
+    stories,
-    url,
+    selectedKind,
+    selectedStory,
+    uiOptions,
+    storyFilter,
+    shortcutOptions,
+    isMobileDevice,
+  } = state;
+
+  const {
     sortStoriesByKind,
     hierarchySeparator,
     hierarchyRootSeparator,
     sidebarAnimations,
+    name,
+    url,
   } = uiOptions;
 
   const preparedStories = prepareStoriesForHierarchy(
@@ -52,9 +61,9 @@ export const mapper = (state, props, { actions }) => {
 
     storyFilter,
     onStoryFilter: actionMap.ui.setStoryFilter,
-
     openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
     sidebarAnimations,
+    isMobileDevice,
     name,
     url,
   };

lib/ui/src/modules/ui/containers/stories_panel.test.js

@@ -12,7 +12,6 @@ describe('manager.ui.containers.stories_panel', () => {
         url: 'bar',
       };
       const selectStory = () => 'selectStory';
-      const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
       const setStoryFilter = () => 'setStoryFilter';
       const props = {};
       const env = {
@@ -21,7 +20,6 @@ describe('manager.ui.containers.stories_panel', () => {
             selectStory,
           },
           ui: {
-            toggleShortcutsHelp,
             setStoryFilter,
           },
         }),
@@ -57,7 +55,6 @@ describe('manager.ui.containers.stories_panel', () => {
       expect(result.storyFilter).toBe(null);
       expect(result.onSelectStory).toBe(selectStory);
       expect(result.onStoryFilter).toBe(setStoryFilter);
-      expect(result.openShortcutsHelp).toBe(toggleShortcutsHelp);
     });
 
     test('should filter stories according to the given filter', () => {

lib/ui/src/modules/ui/libs/is_mobile_device.js

@@ -0,0 +1,7 @@
+export default userAgent => {
+  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
+    return true;
+  }
+
+  return false;
+};

lib/ui/src/modules/ui/libs/is_mobile_device.test.js

@@ -0,0 +1,28 @@
+import isMobileDevice from './is_mobile_device';
+
+describe('manager.ui.libs.is_mobile_device', () => {
+  it('should detect if storybook is open on mobile device', () => {
+    // chrome
+    expect(
+      isMobileDevice(
+        'Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19'
+      )
+    ).toEqual(true);
+
+    expect(
+      isMobileDevice('Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0')
+    ).toEqual(true);
+
+    expect(
+      isMobileDevice(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36'
+      )
+    ).toEqual(false);
+
+    expect(
+      isMobileDevice(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6'
+      )
+    ).toEqual(false);
+  });
+});

lib/ui/src/modules/ui/routes.js

@@ -6,11 +6,12 @@ import StoriesPanel from './containers/stories_panel';
 import AddonPanel from './containers/addon_panel';
 import ShortcutsHelp from './containers/shortcuts_help';
 import SearchBox from './containers/search_box';
+import Header from './containers/header';
 
 export default function(injectDeps, { clientStore, provider, domNode }) {
+  const state = clientStore.getAll();
   // generate preview
   const Preview = () => {
-    const state = clientStore.getAll();
     const preview = provider.renderPreview(state.selectedKind, state.selectedStory);
     return preview;
   };
@@ -22,6 +23,7 @@ export default function(injectDeps, { clientStore, provider, domNode }) {
 
   const root = (
     <Container>
+      {state.isMobileDevice && <Header />}
       <Layout
         storiesPanel={() => <StoriesPanel />}
         preview={() => <Preview />}