GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +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',
}); });

35
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,7 +34,9 @@ export const menuHighlighted = () => <Heading menuHighlighted menu={menuItems} /
export const standardData = { menu: menuItems }; export const standardData = { menu: menuItems };
export const standard = () => ( export const standard = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -51,8 +50,11 @@ export const standard = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};
export const standardNoLink = () => ( export const standardNoLink = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -66,8 +68,11 @@ export const standardNoLink = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};
export const linkAndText = () => ( export const linkAndText = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -81,8 +86,11 @@ export const linkAndText = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};
export const onlyText = () => ( export const onlyText = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -96,8 +104,11 @@ export const onlyText = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};
export const longText = () => ( export const longText = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -111,8 +122,11 @@ export const longText = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};
export const customBrandImage = () => ( export const customBrandImage = () => {
const theme = useTheme();
return (
<ThemeProvider <ThemeProvider
theme={{ theme={{
...theme, ...theme,
@ -126,3 +140,4 @@ export const customBrandImage = () => (
<Heading menu={menuItems} /> <Heading menu={menuItems} />
</ThemeProvider> </ThemeProvider>
); );
};