feat(ApplicationMenu): add possibility to not use react-router

kronostechnologies · Sep 17, 2021 · ee61c35 · ee61c35
1 parent b44ce25
commit ee61c35
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/packages/react/src/components/application-menu/application-menu.test.tsx b/packages/react/src/components/application-menu/application-menu.test.tsx
@@ -48,4 +48,18 @@ describe('Application Menu', () => {
 
         expect(skipLink.exists()).toBe(true);
     });
+
+    describe('logo', () => {
+        it('should use react-router-link when usesReactRouter is true', () => {
+            const wrapper = shallow(<ApplicationMenu usesReactRouter>test</ApplicationMenu>);
+
+            expect(getByTestId(wrapper, 'logo-react-router-link').exists()).toBe(true);
+        });
+
+        it('should use html-link when usesReactRouter is false', () => {
+            const wrapper = shallow(<ApplicationMenu usesReactRouter={false}>test</ApplicationMenu>);
+
+            expect(getByTestId(wrapper, 'logo-html-link').exists()).toBe(true);
+        });
+    });
 });
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
@@ -71,6 +71,7 @@ exports[`Application Menu Matches the snapshot (desktop) 1`] = `
   <a
     aria-label="Home"
     class="c1"
+    data-testid="logo-react-router-link"
     href="/"
   >
     <svg
@@ -187,6 +188,7 @@ exports[`Application Menu Matches the snapshot (mobile) 1`] = `
   <a
     aria-label="Home"
     class="c1"
+    data-testid="logo-react-router-link"
     href="/"
   >
     <svg
@@ -323,6 +325,7 @@ exports[`Application Menu mobileDrawerContent prop adds a side drawer and burger
   <a
     aria-label="Home"
     class="c1"
+    data-testid="logo-react-router-link"
     href="/"
   >
     <svg

diff --git a/packages/react/src/components/application-menu/application-menu.tsx b/packages/react/src/components/application-menu/application-menu.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentProps, ReactElement, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { SkipLink } from '../skip-link/skip-link';
@@ -28,7 +28,7 @@ const Header = styled.header<{ device: DeviceType }>`
     position: relative;
 `;
 
-const LogoWrapper = styled(Link)`
+const LinkStyles = css`
     align-items: center;
     display: flex;
     font-size: 1.5rem;
@@ -41,6 +41,14 @@ const LogoWrapper = styled(Link)`
     }
 `;
 
+const ReactRouterLink = styled(Link).attrs({ 'aria-label': 'Home' })`
+    ${LinkStyles}
+`;
+
+const HtmlLink = styled.a.attrs({ 'aria-label': 'Home' })`
+    ${LinkStyles}
+`;
+
 const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMobile?: boolean }>`
     background-color: ${({ theme }) => theme.greys.white};
     transform: translateY(-50%);
@@ -64,6 +72,7 @@ interface ApplicationMenuProps {
     /** Right-side content */
     children: ReactNode;
     className?: string;
+    customLogo?: ReactNode;
     /**
      * Sets logo href
      * @default /
@@ -72,30 +81,33 @@ interface ApplicationMenuProps {
     /** What will be displayed inside the mobile drawer */
     mobileDrawerContent?: ReactNode;
     skipLinkHref?: string;
-
-    customLogo?: ReactNode;
+    usesReactRouter?: boolean;
 }
 
 export function ApplicationMenu({
     appName = 'default',
     children,
     className,
+    customLogo,
     logoHref = '/',
     mobileDrawerContent,
     skipLinkHref,
-    customLogo,
+    usesReactRouter = true,
 }: ApplicationMenuProps): ReactElement {
     const { device, isMobile } = useDeviceContext();
+    const appLogo = customLogo ?? <Logo name={appName} mobile={isMobile} />;
 
     return (
         <Header className={className} device={device}>
             {skipLinkHref && (
                 <StyledSkipLink data-testid="skip-link" href={skipLinkHref} />
             )}
 
-            <LogoWrapper to={logoHref} aria-label="Home">
-                {customLogo ?? <Logo name={appName} mobile={isMobile} />}
-            </LogoWrapper>
+            {usesReactRouter ? (
+                <ReactRouterLink data-testid="logo-react-router-link" to={logoHref}>{appLogo}</ReactRouterLink>
+            ) : (
+                <HtmlLink data-testid="logo-html-link" href={logoHref}>{appLogo}</HtmlLink>
+            )}
 
             <Content mobileDrawerContent={mobileDrawerContent}>
                 {children}

diff --git a/packages/storybook/stories/application-menu.stories.tsx b/packages/storybook/stories/application-menu.stories.tsx
@@ -68,3 +68,9 @@ export const WithSkipLinkAndUserProfile: Story = () => (
         />
     </ApplicationMenu>
 );
+
+export const WithoutReactRouter: Story = () => (
+    <ApplicationMenu usesReactRouter={false} logoHref="https://www.google.com/">
+        <p>Hello world</p>
+    </ApplicationMenu>
+);