Logos: Refactoring a bit how logos are rendered (#21421)

public/app/core/components/Branding/Branding.tsx

@@ -1,18 +1,23 @@
 import React, { FC } from 'react';
 
 export interface BrandComponentProps {
-  className: string;
+  className?: string;
 }
 
-export const LogoIcon: FC<BrandComponentProps> = ({ className }) => {
+export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
+  return (
+    <>
+      <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />
+      <div className="logo-wordmark" />
+    </>
+  );
+};
+
+export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
   return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
 };
 
-export const Wordmark: FC<BrandComponentProps> = ({ className }) => {
-  return <div className={className} />;
-};
-
 export class Branding {
-  static LogoIcon = LogoIcon;
-  static Wordmark = Wordmark;
+  static LoginLogo = LoginLogo;
+  static MenuLogo = MenuLogo;
 }

public/app/core/components/Login/LoginPage.tsx

@@ -12,8 +12,7 @@ export const LoginPage: FC = () => {
     <div className="login container">
       <div className="login-content">
         <div className="login-branding">
-          <Branding.LogoIcon className="logo-icon" />
-          <Branding.Wordmark className="logo-wordmark" />
+          <Branding.LoginLogo className="logo-icon" />
         </div>
         <LoginCtrl>
           {({

public/app/core/components/sidemenu/SideMenu.tsx

@@ -4,6 +4,7 @@ import TopSection from './TopSection';
 import BottomSection from './BottomSection';
 import config from 'app/core/config';
 import { CoreEvents } from 'app/types';
+import { Branding } from 'app/core/components/Branding/Branding';
 
 const homeUrl = config.appSubUrl || '/';
 
@@ -15,7 +16,7 @@ export class SideMenu extends PureComponent {
   render() {
     return [
       <a href={homeUrl} className="sidemenu__logo" key="logo">
-        <img src="public/img/grafana_icon.svg" alt="Grafana" />
+        <Branding.MenuLogo />
       </a>,
       <div className="sidemenu__logo_small_breakpoint" onClick={this.toggleSideMenuSmallBreakpoint} key="hamburger">
         <i className="fa fa-bars" />

public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap

@@ -7,10 +7,7 @@ Array [
     href="/"
     key="logo"
   >
-    <img
-      alt="Grafana"
-      src="public/img/grafana_icon.svg"
-    />
+    <Component />
   </a>,
   <div
     className="sidemenu__logo_small_breakpoint"