feat(ApplicationMenu): add appTitleDesktop prop

kronostechnologies · Nov 29, 2021 · 51e7dbc · 51e7dbc
1 parent 6a9dfda
commit 51e7dbc
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 3 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
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
-import { renderWithProviders } from '../../test-utils/renderer';
+import { renderWithProviders, mountWithProviders } from '../../test-utils/renderer';
 import { ApplicationMenu } from './application-menu';
 import { SkipLinkProps } from '../skip-link/skip-link';
 
@@ -79,5 +79,23 @@ describe('Application Menu', () => {
 
             expect(getByTestId(wrapper, 'logo-html-link').exists()).toBe(true);
         });
+
+        it('contains app-title when appTitleDesktop prop is set given device is desktop', () => {
+            const wrapper = mountWithProviders(
+                <ApplicationMenu appTitleDesktop="test">test</ApplicationMenu>,
+                { wrappingComponentProps: { staticDevice: 'desktop' } },
+            );
+
+            expect(getByTestId(wrapper, 'app-title').exists()).toBe(true);
+        });
+
+        it('does not contain app-title when device is mobile', () => {
+            const wrapper = mountWithProviders(
+                <ApplicationMenu appTitleDesktop="test">test</ApplicationMenu>,
+                { wrappingComponentProps: { staticDevice: 'mobile' } },
+            );
+
+            expect(getByTestId(wrapper, 'app-title').exists()).toBe(false);
+        });
     });
 });
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
@@ -54,6 +54,8 @@ exports[`Application Menu Matches the snapshot (desktop) 1`] = `
   font-size: 1.5rem;
   font-weight: var(--font-bold);
   height: 100%;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c1:focus {
@@ -171,6 +173,8 @@ exports[`Application Menu Matches the snapshot (mobile) 1`] = `
   font-size: 1.5rem;
   font-weight: var(--font-bold);
   height: 100%;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c1:focus {
@@ -308,6 +312,8 @@ exports[`Application Menu mobileDrawerContent prop adds a side drawer and burger
   font-size: 1.5rem;
   font-weight: var(--font-bold);
   height: 100%;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .c1:focus {

diff --git a/packages/react/src/components/application-menu/application-menu.tsx b/packages/react/src/components/application-menu/application-menu.tsx
@@ -34,6 +34,7 @@ const LinkStyles = css`
     font-size: 1.5rem;
     font-weight: var(--font-bold);
     height: 100%;
+    text-decoration: none;
 
     ${focus}
     > * {
@@ -49,6 +50,18 @@ const HtmlLink = styled.a.attrs({ 'aria-label': 'Home' })`
     ${LinkStyles}
 `;
 
+const StyledSpan = styled.span`
+    border-left: 1px solid ${({ theme }) => theme.main['primary-1.3']};
+    color: ${({ theme }) => theme.greys.white};
+    font-size: 1rem;
+    font-weight: var(--font-normal);
+    height: unset;
+    line-height: 1.5rem;
+    margin-left: var(--spacing-2x);
+    padding-left: var(--spacing-2x);
+    width: max-content;
+`;
+
 const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMobile?: boolean }>`
     background-color: ${({ theme }) => theme.greys.white};
     transform: translateY(-50%);
@@ -69,6 +82,8 @@ const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMo
 interface ApplicationMenuProps {
     /** Set the app name to get the proper logos */
     appName?: LogoName;
+    /** Sets app title which appears next to logo on desktop */
+    appTitleDesktop?: string;
     /** Right-side content */
     children: ReactNode;
     className?: string;
@@ -86,6 +101,7 @@ interface ApplicationMenuProps {
 
 export function ApplicationMenu({
     appName = 'default',
+    appTitleDesktop,
     children,
     className,
     customLogo,
@@ -97,6 +113,17 @@ export function ApplicationMenu({
     const { device, isMobile } = useDeviceContext();
     const appLogo = customLogo ?? <Logo name={appName} mobile={isMobile} />;
 
+    function renderLogoContent(): ReactElement {
+        return (
+            <>
+                {appLogo}
+                {(!isMobile && appTitleDesktop) && (
+                    <StyledSpan data-testid="app-title">{appTitleDesktop}</StyledSpan>
+                )}
+            </>
+        );
+    }
+
     return (
         <Header className={className} device={device}>
             {skipLink && (
@@ -105,9 +132,13 @@ export function ApplicationMenu({
             )}
 
             {usesReactRouter ? (
-                <ReactRouterLink data-testid="logo-react-router-link" to={logoHref}>{appLogo}</ReactRouterLink>
+                <ReactRouterLink data-testid="logo-react-router-link" to={logoHref}>
+                    {renderLogoContent()}
+                </ReactRouterLink>
             ) : (
-                <HtmlLink data-testid="logo-html-link" href={logoHref}>{appLogo}</HtmlLink>
+                <HtmlLink data-testid="logo-html-link" href={logoHref}>
+                    {renderLogoContent()}
+                </HtmlLink>
             )}
 
             <Content mobileDrawerContent={mobileDrawerContent}>

diff --git a/packages/storybook/stories/application-menu.stories.tsx b/packages/storybook/stories/application-menu.stories.tsx
@@ -42,6 +42,12 @@ export const WithCustomLogo: Story = () => (
     </ApplicationMenu>
 );
 
+export const WithAppTitleDesktop: Story = () => (
+    <ApplicationMenu appTitleDesktop="App title">
+        <p>Hello world</p>
+    </ApplicationMenu>
+);
+
 export const WithMobileDrawer: Story = () => (
     <ApplicationMenu mobileDrawerContent={drawerContent}>
         <p>Hello world</p>