+ {
}
+ {getOptionsList(this.props.shortcutOptions).map((val, ind) => option(val, ind))}
+ {shorcuts}
+ {
}
+
-
{name}
@@ -58,7 +37,6 @@ const Header = ({ openShortcutsHelp, name, url }) => (
);
Header.propTypes = {
- openShortcutsHelp: PropTypes.func,
name: PropTypes.string,
url: PropTypes.string,
};
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js b/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
index 506044fb1986..aba5c96dd7b3 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/header.test.js
@@ -3,12 +3,13 @@ import { shallow } from 'enzyme';
import Header from './header.js';
describe('manager.ui.components.left_panel.header', () => {
- test('should fire openShortcutsHelp when clicked on shortcut button', () => {
- const openShortcutsHelp = jest.fn();
- const wrap = shallow(
);
-
- wrap.find('button').simulate('click');
-
- expect(openShortcutsHelp).toHaveBeenCalled();
+ it('should render the Title and URL', () => {
+ const title = 'Storybook UI';
+ const url = 'www.example.com';
+ const wrap = shallow(
);
+ const h3 = wrap.find('h3').first();
+ expect(h3.text()).toEqual(title);
+ const link = wrap.find('a').first();
+ expect(link.props().href).toEqual(url);
});
});
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
index 974a5dc69263..7df82e433314 100755
--- a/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/index.js
@@ -1,30 +1,38 @@
import PropTypes from 'prop-types';
import React from 'react';
import Header from './header';
+import Menu from './menu';
import Stories from './stories';
import TextFilter from './text_filter';
import pick from 'lodash.pick';
const scrollStyle = {
- height: 'calc(100vh - 105px)',
+ flexGrow: 1,
marginTop: 10,
+ marginLeft: 10,
overflowY: 'auto',
};
const mainStyle = {
- padding: '10px 0 10px 10px',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ height: '100%',
};
const storyProps = ['stories', 'selectedKind', 'selectedStory', 'onSelectStory'];
const LeftPanel = props => (
-
-
props.onStoryFilter('')}
- onChange={text => props.onStoryFilter(text)}
- />
+
+
+ props.onStoryFilter('')}
+ onChange={text => props.onStoryFilter(text)}
+ />
+
+
{props.stories ? : null}
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/menu.js b/packages/storybook-ui/src/modules/ui/components/left_panel/menu.js
new file mode 100644
index 000000000000..8fc33ebc94ad
--- /dev/null
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/menu.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import CoreMenu from '../../containers/core_menu';
+import { colorScheme } from '../theme';
+
+const rootStyle = {
+ backgroundColor: colorScheme.block,
+ padding: 6,
+ paddingTop: 2,
+ marginTop: 10,
+};
+
+const Menu = () => (
+
+
+
+);
+
+export default Menu;
diff --git a/packages/storybook-ui/src/modules/ui/components/left_panel/menu.test.js b/packages/storybook-ui/src/modules/ui/components/left_panel/menu.test.js
new file mode 100644
index 000000000000..8c8694312fc5
--- /dev/null
+++ b/packages/storybook-ui/src/modules/ui/components/left_panel/menu.test.js
@@ -0,0 +1,14 @@
+const { describe, it } = global;
+import React from 'react';
+import { shallow } from 'enzyme';
+import Menu from './menu.js';
+import { colorScheme } from '../theme';
+
+describe('manager.ui.components.left_panel.menu', () => {
+ it('should have theme based background color', () => {
+ const wrap = shallow();
+
+ const root = wrap.find('div').first();
+ expect(root.props().style.backgroundColor).toEqual(colorScheme.block);
+ });
+});
diff --git a/packages/storybook-ui/src/modules/ui/components/theme.js b/packages/storybook-ui/src/modules/ui/components/theme.js
index 5f2962469ba1..82ac468685db 100755
--- a/packages/storybook-ui/src/modules/ui/components/theme.js
+++ b/packages/storybook-ui/src/modules/ui/components/theme.js
@@ -1,7 +1,23 @@
-export const baseFonts = {
- fontFamily: `
- -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
- "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
- `,
- color: '#444',
-};
+export const colorScheme = {
+ block: '#e2e2e2',
+ layoutAlt: '#f7f7f7',
+ canvasAlt: '#ffffff',
+
+ text: '#444',
+ layout: '#f7f7f7',
+ canvas: '#ffffff',
+ iconsOpacity: 0.6,
+};
+
+export const baseFonts = {
+ fontFamily: `
+ -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+ "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+ `,
+ color: colorScheme.text,
+};
+
+export const floating = {
+ zIndex: 10,
+ boxShadow: '1px 1px 6px rgba(0, 0, 0, 0.4)',
+};
diff --git a/packages/storybook-ui/src/modules/ui/containers/core_menu.js b/packages/storybook-ui/src/modules/ui/containers/core_menu.js
new file mode 100644
index 000000000000..d78d5814cca8
--- /dev/null
+++ b/packages/storybook-ui/src/modules/ui/containers/core_menu.js
@@ -0,0 +1,20 @@
+import CoreMenu from '../components/core_menu';
+import genPoddaLoader from '../libs/gen_podda_loader';
+import compose from '../../../compose';
+
+export const mapper = (state, props, { actions }) => {
+ const actionMap = actions();
+ const { selectedKind, selectedStory, shortcutOptions } = state;
+
+ const data = {
+ selectedKind,
+ selectedStory,
+ shortcutOptions,
+ emulShortcuts: actionMap.shortcuts.handleEvent,
+ openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
+ };
+
+ return data;
+};
+
+export default compose(genPoddaLoader(mapper))(CoreMenu);
diff --git a/packages/storybook-ui/src/modules/ui/containers/core_menu.test.js b/packages/storybook-ui/src/modules/ui/containers/core_menu.test.js
new file mode 100644
index 000000000000..fb38817c7cdb
--- /dev/null
+++ b/packages/storybook-ui/src/modules/ui/containers/core_menu.test.js
@@ -0,0 +1,33 @@
+const { describe, it } = global;
+import { mapper } from './core_menu';
+
+describe('manager.ui.containers.core_menu', () => {
+ describe('mapper', () => {
+ it('should give correct data', () => {
+ const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
+ const handleEvent = () => 'handleEvent';
+
+ const state = {
+ selectedKind: 'aa',
+ selectedStory: 'bb',
+ shortcutOptions: { actions: 'cc' },
+ emulShortcuts: handleEvent,
+ openShortcutsHelp: toggleShortcutsHelp,
+ };
+ const props = {};
+ const env = {
+ actions: () => ({
+ ui: {
+ toggleShortcutsHelp,
+ },
+ shortcuts: {
+ handleEvent,
+ },
+ }),
+ };
+
+ const data = mapper(state, props, env);
+ expect(data).toEqual(state);
+ });
+ });
+});
diff --git a/packages/storybook-ui/src/modules/ui/containers/layout.js b/packages/storybook-ui/src/modules/ui/containers/layout.js
index 2abed63b41d1..4d4e89d82d6a 100755
--- a/packages/storybook-ui/src/modules/ui/containers/layout.js
+++ b/packages/storybook-ui/src/modules/ui/containers/layout.js
@@ -1,9 +1,11 @@
-import pick from 'lodash.pick';
-import Layout from '../components/layout';
-import genPoddaLoader from '../libs/gen_podda_loader';
-import compose from '../../../compose';
-
-export const mapper = ({ shortcutOptions }) =>
- pick(shortcutOptions, 'showLeftPanel', 'showDownPanel', 'goFullScreen', 'downPanelInRight');
-
-export default compose(genPoddaLoader(mapper))(Layout);
+import pick from 'lodash.pick';
+import Layout from '../components/layout';
+import genPoddaLoader from '../libs/gen_podda_loader';
+import compose from '../../../compose';
+
+export const mapper = ({ shortcutOptions, floatingBoxOptions }) => ({
+ ...pick(shortcutOptions, 'showLeftPanel', 'showDownPanel', 'goFullScreen', 'downPanelInRight'),
+ ...pick(floatingBoxOptions, 'showFloatingBox', 'floatingBoxPosition'),
+});
+
+export default compose(genPoddaLoader(mapper))(Layout);
diff --git a/packages/storybook-ui/src/modules/ui/index.js b/packages/storybook-ui/src/modules/ui/index.js
index 321a4c535a0c..416ddd178602 100755
--- a/packages/storybook-ui/src/modules/ui/index.js
+++ b/packages/storybook-ui/src/modules/ui/index.js
@@ -3,12 +3,17 @@ import actions from './actions';
import initPanels from './configs/init_panels';
import handleRouting from './configs/handle_routing';
import handleKeyEvents from './configs/handle_keyevents';
+import { boxPositions } from '../../libs/menu_positions';
export default {
routes,
actions,
defaultState: {
showShortcutsHelp: false,
+ floatingBoxOptions: {
+ showFloatingBox: true,
+ floatingBoxPosition: boxPositions.BOTTOM_LEFT,
+ },
},
load(c, a) {
initPanels(c, a);