feat: add custom logo prop to the application menu component

kronostechnologies · Jun 3, 2021 · 005ee1e · 005ee1e
1 parent a9a4987
commit 005ee1e
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 2 deletions.
diff --git a/packages/react/src/components/application-menu/application-menu.test.tsx.snap b/packages/react/src/components/application-menu/application-menu.test.tsx.snap
diff --git a/packages/react/src/components/application-menu/application-menu.tsx b/packages/react/src/components/application-menu/application-menu.tsx
@@ -33,6 +33,9 @@ const LogoWrapper = styled(Link)`
     font-weight: var(--font-bold);
     height: 100%;
     ${focus}
+    > * {
+        height: 100%;
+    }
 `;
 
 interface HeadbandProps {
@@ -48,6 +51,8 @@ interface HeadbandProps {
     logoHref?: string;
     /** What will be displayed inside the mobile drawer */
     mobileDrawerContent?: ReactNode;
+
+    customLogo?: ReactNode;
 }
 
 export function ApplicationMenu({
@@ -56,13 +61,14 @@ export function ApplicationMenu({
     className,
     logoHref = '/',
     mobileDrawerContent,
+    customLogo,
 }: HeadbandProps): ReactElement {
     const { device, isMobile } = useDeviceContext();
 
     return (
         <Header className={className} device={device}>
             <LogoWrapper to={logoHref} aria-label="Home">
-                <Logo name={appName} mobile={isMobile} />
+                { customLogo ?? <Logo name={appName} mobile={isMobile} /> }
             </LogoWrapper>
 
             <Content mobileDrawerContent={mobileDrawerContent}>

diff --git a/packages/storybook/asset.d.ts b/packages/storybook/asset.d.ts
@@ -2,3 +2,8 @@ declare module "*.png" {
     const value: string;
     export default value;
 }
+
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}
diff --git a/packages/storybook/stories/application-menu.stories.tsx b/packages/storybook/stories/application-menu.stories.tsx
@@ -1,8 +1,9 @@
 import { ApplicationMenu } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, VoidFunctionComponent } from 'react';
 import { MobileDecorator } from './utils/device-context-decorator';
 import { RouterDecorator } from './utils/router-decorator';
+import CustomLogoSvg from './assets/customLogo.svg';
 
 export default {
     title: 'Application Menu',
@@ -33,6 +34,14 @@ export const WithAppName: Story = () => (
     </ApplicationMenu>
 );
 
+const CustomLogo: VoidFunctionComponent = () => <img src={CustomLogoSvg} />;
+
+export const WithCustomLogo: Story = () => (
+    <ApplicationMenu customLogo={<CustomLogo />}>
+        <p>Hello world</p>
+    </ApplicationMenu>
+);
+
 export const WithMobileDrawer: Story = () => (
     <ApplicationMenu mobileDrawerContent={drawerContent}>
         <p>Hello world</p>

diff --git a/packages/storybook/stories/assets/customLogo.svg b/packages/storybook/stories/assets/customLogo.svg