From 60484892f8a4edd044b0a4ee79c99ad0d35a6658 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 4 Dec 2020 00:05:14 +0100
Subject: [PATCH] Fix image misalignment when logo has no link

Additionally this refactors the Brand component for readability.
---
 lib/ui/src/components/sidebar/Brand.tsx | 61 ++++++++++---------------
 1 file changed, 24 insertions(+), 37 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
index ff45f35a5eb7..3d08654da09b 100644
--- 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>;
+});