Merge pull request #17714 from Tomastomaslol/issue-17227-UI-for-toggl…

…ing-addons-panel

UI: Button for toggling addons panel

lib/ui/src/components/preview/toolbar.tsx

@@ -16,6 +16,7 @@ import { PreviewProps } from './utils/types';
 import { copyTool } from './tools/copy';
 import { ejectTool } from './tools/eject';
 import { menuTool } from './tools/menu';
+import { addonsTool } from './tools/addons';
 
 export const getTools = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TOOL));
 
@@ -108,7 +109,7 @@ export const createTabsTool = (tabs: Addon[]): Addon => ({
 });
 
 export const defaultTools: Addon[] = [zoomTool];
-export const defaultToolsExtra: Addon[] = [fullScreenTool, ejectTool, copyTool];
+export const defaultToolsExtra: Addon[] = [addonsTool, fullScreenTool, ejectTool, copyTool];
 
 const useTools = (
   getElements: API['getElements'],

lib/ui/src/components/preview/tools/addons.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { IconButton, Icons } from '@storybook/components';
+import { Consumer, Combo } from '@storybook/api';
+import { Addon } from '@storybook/addons';
+
+const menuMapper = ({ api, state }: Combo) => ({
+  isVisible: state.layout.showPanel,
+  singleStory: state.singleStory,
+  panelPosition: state.layout.panelPosition,
+  toggle: () => api.togglePanel(),
+});
+
+export const addonsTool: Addon = {
+  title: 'addons',
+  id: 'addons',
+  match: ({ viewMode }) => viewMode === 'story',
+  render: () => (
+    <Consumer filter={menuMapper}>
+      {({ isVisible, toggle, singleStory, panelPosition }) =>
+        !singleStory &&
+        !isVisible && (
+          <>
+            <IconButton aria-label="Show addons" key="addons" onClick={toggle} title="Show addons">
+              <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
+            </IconButton>
+          </>
+        )
+      }
+    </Consumer>
+  ),
+};