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

FIX header themed stories

Browse Source
This commit is contained in:
Norbert de Langen 2020-06-29 16:14:31 +02:00
parent e918453413
commit ea5b35754c
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
2 changed files with 104 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/src/components/sidebar/Brand.tsx
View File

@ -5,7 +5,7 @@ import { StorybookLogo } from '@storybook/components';
export const StorybookLogoStyled = styled(StorybookLogo)({
width: 'auto',
height: 22,
height: '22px !important',
display: 'block',
});

191
lib/ui/src/components/sidebar/Heading.stories.tsx
View File

@ -1,12 +1,9 @@
import React from 'react';
import { themes, ThemeProvider, ensure } from '@storybook/theming';
import { ThemeProvider, useTheme } from '@storybook/theming';
import { action } from '@storybook/addon-actions';
import { Heading } from './Heading';
const { light } = themes;
const theme = ensure(light);
export default {
component: Heading,
title: 'UI/Sidebar/Heading',
@ -37,92 +34,110 @@ export const menuHighlighted = () => <Heading menuHighlighted menu={menuItems} /
export const standardData = { menu: menuItems };
export const standard = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: undefined,
url: undefined,
image: undefined,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const standard = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: undefined,
url: undefined,
image: undefined,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};
export const standardNoLink = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: undefined,
url: null,
image: undefined,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const standardNoLink = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: undefined,
url: null,
image: undefined,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};
export const linkAndText = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title',
url: 'https://example.com',
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const linkAndText = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title',
url: 'https://example.com',
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};
export const onlyText = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title',
url: null,
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const onlyText = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title',
url: null,
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};
export const longText = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title is way to long to actually fit',
url: null,
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const longText = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My title is way to long to actually fit',
url: null,
image: null,
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};
export const customBrandImage = () => (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My Title',
url: 'https://example.com',
image: 'https://via.placeholder.com/150x22',
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
export const customBrandImage = () => {
const theme = useTheme();
return (
<ThemeProvider
theme={{
...theme,
brand: {
title: 'My Title',
url: 'https://example.com',
image: 'https://via.placeholder.com/150x22',
},
}}
>
<Heading menu={menuItems} />
</ThemeProvider>
);
};