FIX visual alignment && FIX snapshots && FIX stories with API change

lib/ui/src/components/sidebar/SidebarHeading.js

@@ -10,7 +10,7 @@ const BrandArea = styled.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   marginRight: theme.layoutMargin,
   '& > *': {
-    minHeight: 32,
+    minHeight: 28,
     maxWidth: '100%',
     height: 'auto',
     width: 'auto',
@@ -20,9 +20,9 @@ const BrandArea = styled.div(({ theme }) => ({
 
 const Logo = styled(StorybookLogo)({
   width: 'auto',
-  height: 32,
-  paddingTop: 5,
-  paddingBottom: 5,
+  paddingTop: 3,
+  paddingBottom: 3,
+  height: 28,
   display: 'block',
 });
 const Img = styled.img({

lib/ui/src/components/sidebar/SidebarHeading.stories.js

@@ -33,31 +33,59 @@ simple.storyData = { menu: menuItems };
 
 export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;
 
-export const customTitle = () => (
-  <ThemeProvider theme={{ ...theme, brand: { title: 'Custom title' } }}>
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const customTitleAndUrl = () => (
-  <ThemeProvider
-    theme={{
-      ...theme,
-      brand: { title: 'Custom title & link', url: 'https://storybook.js.org' },
-    }}
-  >
-    <SidebarHeading menu={menuItems} />
-  </ThemeProvider>
-);
-
-export const customBrandComponent = () => (
+export const standard = () => (
   <ThemeProvider
     theme={{
       ...theme,
       brand: {
-        title: 'Your Storybook',
-        url: 'https://storybook.js.org',
-        component: () => <a href="/yoursite">Custom component</a>,
+        title: undefined,
+        url: undefined,
+        image: undefined,
+      },
+    }}
+  >
+    <SidebarHeading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const standardNoLink = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: undefined,
+        url: null,
+        image: undefined,
+      },
+    }}
+  >
+    <SidebarHeading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const linkAndText = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My title',
+        url: 'https://example.com',
+        image: null,
+      },
+    }}
+  >
+    <SidebarHeading menu={menuItems} />
+  </ThemeProvider>
+);
+
+export const customBrandImage = () => (
+  <ThemeProvider
+    theme={{
+      ...theme,
+      brand: {
+        title: 'My Title',
+        url: 'https://example.com',
+        image: 'https://via.placeholder.com/150x22',
       },
     }}
   >