Fix image misalignment when logo has no link

Additionally this refactors the Brand component for readability.
storybookjs · Dec 3, 2020 · 6048489 · 6048489
1 parent ab8e6ba
commit 6048489
Showing 1 changed file with 24 additions and 37 deletions.
diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
@@ -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>;
+});