Merge pull request #13355 from kylegach/patch-1

UI: Fix display of custom brand image
storybookjs · Dec 4, 2020 · 6872814 · 6872814
1 parent c752fad
commit 6872814
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 39 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>;
+});
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -131,3 +131,57 @@ export const customBrandImage = () => {
     </ThemeProvider>
   );
 };
+
+export const customBrandImageTall = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: 'My Title',
+          url: 'https://example.com',
+          image: 'https://via.placeholder.com/100x150',
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
+
+export const customBrandImageUnsizedSVG = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: 'My Title',
+          url: 'https://example.com',
+          image: 'https://s.cdpn.io/91525/potofgold.svg',
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
+
+export const noBrand = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: null,
+          url: null,
+          image: null,
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
@@ -13,7 +13,7 @@ const BrandArea = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
   color: theme.color.defaultText,
-  marginRight: 40,
+  marginRight: 20,
   display: 'flex',
   width: '100%',
   alignItems: 'center',
@@ -22,8 +22,8 @@ const BrandArea = styled.div(({ theme }) => ({
   '& > *': {
     maxWidth: '100%',
     height: 'auto',
-    width: 'auto',
     display: 'block',
+    flex: '1 1 auto',
   },
 }));