Remove shortcut helper when shortcuts are disabled

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

@@ -50,19 +50,22 @@ const linkStyle = {
   borderRadius: 2,
 };
 
-const Header = ({ openShortcutsHelp, name, url }) => (
+const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp }) => (
   <div style={wrapperStyle}>
     <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
       <h3 style={headingStyle}>{name}</h3>
     </a>
-    <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
-      ⌘
-    </button>
+    {enableShortcutsHelp && (
+      <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
+        ⌘
+      </button>
+    )}
   </div>
 );
 
 Header.defaultProps = {
   openShortcutsHelp: null,
+  enableShortcutsHelp: true,
   name: '',
   url: '',
 };
@@ -71,6 +74,7 @@ Header.propTypes = {
   openShortcutsHelp: PropTypes.func,
   name: PropTypes.string,
   url: PropTypes.string,
+  enableShortcutsHelp: PropTypes.bool,
 };
 
 export default Header;

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

@@ -45,11 +45,23 @@ class StoriesPanel extends Component {
   }
 
   render() {
-    const { name, onStoryFilter, openShortcutsHelp, storyFilter, url } = this.props;
+    const {
+      name,
+      onStoryFilter,
+      openShortcutsHelp,
+      storyFilter,
+      url,
+      shortcutOptions,
+    } = this.props;
 
     return (
       <div style={mainStyle}>
-        <Header name={name} url={url} openShortcutsHelp={openShortcutsHelp} />
+        <Header
+          name={name}
+          url={url}
+          openShortcutsHelp={shortcutOptions.enableShortcuts && openShortcutsHelp}
+          enableShortcutsHelp={shortcutOptions.enableShortcuts}
+        />
         <TextFilter
           text={storyFilter}
           onClear={() => onStoryFilter('')}
@@ -68,6 +80,7 @@ StoriesPanel.defaultProps = {
   openShortcutsHelp: null,
   name: '',
   url: '',
+  shortcutOptions: null,
 };
 
 StoriesPanel.propTypes = {
@@ -84,6 +97,16 @@ StoriesPanel.propTypes = {
   openShortcutsHelp: PropTypes.func,
   name: PropTypes.string,
   url: PropTypes.string,
+  shortcutOptions: PropTypes.objectof(
+    PropTypes.shape({
+      goFullScreen: PropTypes.bool,
+      showStoriesPanel: PropTypes.bool,
+      showAddonPanel: PropTypes.bool,
+      showSearchBox: PropTypes.bool,
+      addonPanelInRight: PropTypes.bool,
+      enableShortcuts: PropTypes.bool,
+    })
+  ),
 };
 
 export default StoriesPanel;

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

@@ -13,7 +13,7 @@ import {
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
 
-  const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
+  const { stories, selectedKind, selectedStory, uiOptions, storyFilter, shortcutOptions } = state;
   const {
     name,
     url,
@@ -48,6 +48,7 @@ export const mapper = (state, props, { actions }) => {
     selectedStory,
     selectedHierarchy,
     onSelectStory: actionMap.api.selectStory,
+    shortcutOptions,
 
     storyFilter,
     onStoryFilter: actionMap.ui.setStoryFilter,