GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:11:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove last use of DOCS_MODE

Browse Source
This commit is contained in:
Tom Coleman 2022-07-18 12:14:49 +10:00
parent 285214671d
commit f630174073
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/ui/src/components/sidebar/TreeNode.tsx
View File

@ -1,11 +1,9 @@
import { styled } from '@storybook/theming'; import { styled } from '@storybook/theming';
import type { Color, Theme } from '@storybook/theming'; import type { Color, Theme } from '@storybook/theming';
import { Icons } from '@storybook/components'; import { Icons } from '@storybook/components';
import global from 'global';
import { transparentize } from 'polished'; import { transparentize } from 'polished';
import React, { FunctionComponent, ComponentProps } from 'react'; import React, { FunctionComponent, ComponentProps } from 'react';
import { Combo, Consumer } from '@storybook/api';
const { DOCS_MODE } = global;
export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({
display: 'inline-block', display: 'inline-block',
@ -24,13 +22,15 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp
const iconColors = { const iconColors = {
light: { light: {
document: DOCS_MODE ? 'secondary' : '#ff8300', document: '#ff8300',
docsModeDocument: 'secondary',
bookmarkhollow: 'seafoam', bookmarkhollow: 'seafoam',
component: 'secondary', component: 'secondary',
folder: 'ultraviolet', folder: 'ultraviolet',
}, },
dark: { dark: {
document: DOCS_MODE ? 'secondary' : 'gold', document: 'gold',
docsModeDocument: 'secondary',
bookmarkhollow: 'seafoam', bookmarkhollow: 'seafoam',
component: 'secondary', component: 'secondary',
folder: 'primary', folder: 'primary',
@ -46,9 +46,11 @@ const TypeIcon = styled(Icons)(
marginRight: 5, marginRight: 5,
flex: '0 0 auto', flex: '0 0 auto',
}, },
({ theme, icon, symbol = icon }) => { ({ theme, icon, symbol = icon, docsMode }) => {
const colors = theme.base === 'dark' ? iconColors.dark : iconColors.light; const colors = theme.base === 'dark' ? iconColors.dark : iconColors.light;
const color = colors[symbol as keyof typeof colors]; const colorKey: keyof typeof colors =
docsMode && symbol === 'document' ? 'docsModeDocument' : symbol;
const color = colors[colorKey];
return { color: isColor(theme, color) ? theme.color[color] : color }; return { color: isColor(theme, color) ? theme.color[color] : color };
} }
); );
@ -164,10 +166,14 @@ export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>>
export const DocumentNode: FunctionComponent<ComponentProps<typeof LeafNode>> = React.memo( export const DocumentNode: FunctionComponent<ComponentProps<typeof LeafNode>> = React.memo(
({ theme, children, ...props }) => ( ({ theme, children, ...props }) => (
<Consumer filter={({ state }: Combo) => ({ docsMode: state.docsMode })}>
{({ docsMode }) => (
<LeafNode tabIndex={-1} {...props}> <LeafNode tabIndex={-1} {...props}>
<TypeIcon symbol="document" /> <TypeIcon symbol="document" docsMode={docsMode} />
{children} {children}
</LeafNode> </LeafNode>
)}
</Consumer>
) )
); );

2
lib/ui/src/components/sidebar/__tests__/Sidebar.test.tsx
View File

@ -8,8 +8,6 @@ import type { RenderResult } from '@testing-library/react';
import { Sidebar } from '../Sidebar'; import { Sidebar } from '../Sidebar';
import type { SidebarProps } from '../Sidebar'; import type { SidebarProps } from '../Sidebar';
global.DOCS_MODE = false;
const DOCS_NAME = 'Docs'; const DOCS_NAME = 'Docs';
const factory = (props: Partial<SidebarProps>): RenderResult => { const factory = (props: Partial<SidebarProps>): RenderResult => {