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 image misalignment when logo has no link

Browse Source 
Additionally this refactors the Brand component for readability.
This commit is contained in:
Gert Hengeveld 2020-12-04 00:05:14 +01:00 committed by GitHub
parent ab8e6baff1
commit 60484892f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,41 +31,28 @@ export const LogoLink = styled.a(({ theme }) => ({
},
}));
export const Brand = withTheme(
({
theme: {
brand: { title = 'Storybook', url = './', image },
},
}) => {
const targetValue = url === './' ? '' : '_blank';
if (image === undefined && url === null) {
return <StorybookLogoStyled alt={title} />;
}
if (image === undefined && url) {
return (
<LogoLink title={title} href={url} target={targetValue}>
<StorybookLogoStyled alt={title} />
</LogoLink>
);
}
if (image === null && url === null) {
return title;
}
if (image === null && url) {
return (
<LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />
);
}
if (image && url === null) {
return <Img src={image} alt={title} />;
}
if (image && url) {
return (
<LogoLink title={title} href={url} target={targetValue}>
<Img src={image} alt={title} />
</LogoLink>
);
}
return null;
export const Brand = withTheme(({ theme }) => {
const { title = 'Storybook', url = './', image } = theme.brand;
const targetValue = url === './' ? '' : '_blank';
// When image is explicitly set to null, enable custom HTML support
if (image === null) {
if (title === null) return null;
// eslint-disable-next-line react/no-danger
if (!url) return <div dangerouslySetInnerHTML={{ __html: title }} />;
return <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />;
}
);
const logo = image ? <Img src={image} alt={title} /> : <StorybookLogoStyled alt={title} />;
if (url) {
return (
<LogoLink title={title} href={url} target={targetValue}>
{logo}
</LogoLink>
);
}
// The wrapper div serves to prevent image misalignment
return <div>{logo}</div>;
});