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/stories_panel/header.js → 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 = {
-  background: '#F7F7F7',
-  marginBottom: 10,
+const wrapperStyle = isMobileDevice => ({
+  background: isMobileDevice ? 'none' : '#F7F7F7',
+  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 }) => (
-  <div style={wrapperStyle}>
-    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
+const Header = ({
+  openShortcutsHelp,
+  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}
-          minSize={150}
+          allowResize={isMobileDevice ? false : showStoriesPanel}
+          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__/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=""