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

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