diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index d4698f53e6df..dcc6b06096c2 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -85,6 +85,7 @@ const meta = { refs: {}, status: {}, showCreateStoryButton: true, + isDevelopment: true, }, decorators: [ (storyFn) => ( diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 6f4cec12e686..bb3be73f425d 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -109,7 +109,6 @@ const useCombination = ( return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]); }; -const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; const isRendererReact = global.STORYBOOK_RENDERER === 'react'; export interface SidebarProps extends API_LoadedRefData { @@ -124,6 +123,7 @@ export interface SidebarProps extends API_LoadedRefData { onMenuClick?: HeadingProps['onMenuClick']; showCreateStoryButton?: boolean; indexJson?: StoryIndex; + isDevelopment?: boolean; } export const Sidebar = React.memo(function Sidebar({ // @ts-expect-error (non strict) @@ -138,6 +138,7 @@ export const Sidebar = React.memo(function Sidebar({ extra, menuHighlighted = false, enableShortcuts = true, + isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT', refs = {}, onMenuClick, showCreateStoryButton = isDevelopment && isRendererReact, @@ -229,7 +230,7 @@ export const Sidebar = React.memo(function Sidebar({ )} - {isMobile || isLoading ? null : } + {isMobile || isLoading ? null : } ); diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 18a9a83db9fb..8d7d2c42f488 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -6,6 +6,7 @@ import { SidebarBottomBase } from './SidebarBottom'; export default { component: SidebarBottomBase, args: { + isDevelopment: true, api: { clearNotification: fn(), emit: fn(), diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index b25defd9c4bd..f6aae845bee3 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -92,9 +92,15 @@ interface SidebarBottomProps { api: API; notifications: State['notifications']; status: State['status']; + isDevelopment?: boolean; } -export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => { +export const SidebarBottomBase = ({ + api, + notifications = [], + status = {}, + isDevelopment, +}: SidebarBottomProps) => { const spacerRef = useRef(null); const wrapperRef = useRef(null); const [warningsActive, setWarningsActive] = useState(false); @@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
- + {isDevelopment && ( + + )}
); }; -export const SidebarBottom = () => { +export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => { const api = useStorybookApi(); const { notifications, status } = useStorybookState(); - return ; + return ( + + ); }; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 5ca7bc8aa972..c020ebe53f09 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -229,7 +229,12 @@ export const TestingModule = ({ const testing = testProviders.length > 0; return ( - 0}> + 0} + >