GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +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)({ export const StorybookLogoStyled = styled(StorybookLogo)({
width: 'auto', width: 'auto',
height: 22, height: '22px !important',
display: 'block', display: 'block',
}); });

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

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