feat(Masthead): Add ability to have no service logo

This adds a new `hasDefaultLogo` prop to `Masthead` to control whether a default logo is used when no logo is specified.

This also fixes some misaligned columns in the docs for the `Masthead` props.

packages/css-framework/src/fragments/_masthead.scss

@@ -34,7 +34,7 @@ $masthead-main-height: 58px;
     box-shadow: 0 0 0 0.2rem rgba(f.color("action", "700") , 0.5);
   }
 
-  .rn-masthead__title {
+  &.rn-masthead__service--has-logo .rn-masthead__title {
     margin-left: f.spacing("4");
   }
 }

packages/docs-site/src/library/pages/components/masthead.md

@@ -129,6 +129,13 @@ Aside from the active page links (an example of these states is shown in the [Ta
 
 ### Properties
 <DataTable caption="MastHead" data={[
+  {
+    Name: 'hasDefaultLogo',
+    Type: 'boolean',
+    Required: 'False',
+    Default: 'True',
+    Description: 'If `true`, a default logo is used when `Logo` is not passed. If `false`, no logo is displayed when `Logo` is not passed.',
+  },
   {
     Name: 'hasUnreadNotification',
     Type: 'boolean',
@@ -140,48 +147,56 @@ Aside from the active page links (an example of these states is shown in the [Ta
     Name: 'homeLink',
     Type: 'React.ReactElement<LinkTypes>',
     Required: 'False',
+    Default: '',
     Description: 'A `Link` which will contain the `href` for sending the user back to home.',
   },
   {
     Name: 'Logo',
     Type: 'React. ComponentType',
     Required: 'False',
-    Description: 'A 21x19 logo or if none is provided a default is used.',
+    Default: '',
+    Description: 'A 21x19 logo. If no value is passed, the behaviour depends on the value of `hasDefaultLogo`.',
   },
   {
     Name: 'nav',
     Type: 'React.ReactElement<ScrollableNavProps>',
     Required: 'False',
+    Default: '',
     Description: 'Navigation for the MastHead.',
   },
   {
     Name: 'notifications',
     Type: 'React.ReactElement<NotificationsProps>',
     Required: 'False',
+    Default: '',
     Description: 'This property contains the content for the Notifications Popover. These are recent notifications, including read status, and a link to read them.',
   },
   {
     Name: 'onSearch',
     Type: '(term: string) => void',
     Required: 'False',
+    Default: '',
     Description: 'If a search function is provided the searchbox is shown and the function called on submission.',
   },
   {
     Name: 'searchPlaceholder',
     Type: 'String',
     Required: 'False',
+    Default: '',
     Description: 'Provide a placeholder attribute for the search text input if desired.',
   },
   {
     Name: 'title',
     Type: 'String',
     Required: 'True',
+    Default: '',
     Description: 'A service name that will be displayed next to the logo',
   },
   {
     Name: 'user',
     Type: 'React.ReactElement<MastheadUserProps>',
     Required: 'False',
+    Default: '',
     Description: 'If your application has a User Profile page, specify a `MastheadUser` to add their initials to the Avatar sub-component. This Avatar provides a link to the User’s profile.',
   },
 ]} />

packages/react-component-library/src/components/Masthead/Masthead.stories.tsx

@@ -87,6 +87,28 @@ stories.add('Without search', () => <Masthead title="Test" />)
 
 stories.add('Custom logo', () => <Masthead title="Test" Logo={CustomLogo} />)
 
+stories.add('Without logo', () => (
+  <Masthead title="Test" hasDefaultLogo={false} />
+))
+
+stories.add('Without logo, with navigation', () => (
+  <Masthead
+    title="Test"
+    hasDefaultLogo={false}
+    nav={(
+      <MastheadNav>
+        <MastheadNavItem
+          link={<Link href="/home">Get started</Link>}
+          isActive
+        />
+        <MastheadNavItem link={<Link href="/styles">Styles</Link>} />
+        <MastheadNavItem link={<Link href="/components">Components</Link>} />
+        <MastheadNavItem link={<Link href="/about">About</Link>} />
+      </MastheadNav>
+    )}
+  />
+))
+
 stories.add('all but navigation', () => (
   <Masthead
     homeLink={<Link href="/" />}

packages/react-component-library/src/components/Masthead/Masthead.test.tsx

@@ -18,7 +18,7 @@ describe('Masthead', () => {
   let wrapper: RenderResult
   let props: MastheadProps
 
-  describe('When the title it provided', () => {
+  describe('When the title is provided', () => {
     beforeEach(() => {
       props = {
         title: 'Test masthead',
@@ -62,6 +62,18 @@ describe('Masthead', () => {
       })
     })
 
+    describe('and hasDefaultLogo is false', () => {
+      beforeEach(() => {
+        props.hasDefaultLogo = false
+
+        wrapper = render(<Masthead {...props} />)
+      })
+
+      it("doesn't render a logo", () => {
+        expect(wrapper.queryByTestId('logo')).toBeNull()
+      })
+    })
+
     describe('and a user', () => {
       beforeEach(() => {
         props.user = (

packages/react-component-library/src/components/Masthead/Masthead.tsx

@@ -14,6 +14,7 @@ import { Searchbar } from '../Searchbar'
 import { useMastheadSearch } from './useMastheadSearch'
 
 export interface MastheadProps {
+  hasDefaultLogo?: boolean
   hasUnreadNotification?: boolean
   homeLink?: React.ReactElement<LinkTypes>
   Logo?: React.ComponentType
@@ -36,20 +37,23 @@ function getServiceName(
     ...link.props,
     children: (
       <>
-        <Logo />
+        {Logo && <Logo />}
         <span className="rn-masthead__title" data-testid="masthead-servicename">
           {title}
         </span>
       </>
     ),
-    className: 'rn-masthead__service-name',
+    className: classNames('rn-masthead__service-name', {
+      'rn-masthead__service--has-logo': Logo,
+    }),
   })
 }
 
 export const Masthead: React.FC<MastheadProps> = ({
+  hasDefaultLogo = true,
   hasUnreadNotification,
   homeLink,
-  Logo = DefaultLogo,
+  Logo,
   nav,
   notifications,
   onSearch,
@@ -68,6 +72,8 @@ export const Masthead: React.FC<MastheadProps> = ({
     toggleSearch,
   } = useMastheadSearch()
 
+  const DisplayLogo = Logo ?? (hasDefaultLogo ? DefaultLogo : null)
+
   const classes = classNames('rn-masthead', {
     'rn-masthead--show-search': showSearch,
     'rn-masthead--show-notifications': showNotifications,
@@ -90,7 +96,7 @@ export const Masthead: React.FC<MastheadProps> = ({
   return (
     <div className={classes} data-testid="masthead" ref={mastheadContainerRef}>
       <div className="rn-masthead__main">
-        {getServiceName(homeLink, Logo, title)}
+        {getServiceName(homeLink, DisplayLogo, title)}
 
         <div className="rn-masthead__options">
           {onSearch && (