From d61a90eb2cee7b1feac0db3e2c02859c7a64d180 Mon Sep 17 00:00:00 2001 From: jpveooys <66470099+jpveooys@users.noreply.github.com> Date: Mon, 29 Jun 2020 13:50:47 +0100 Subject: [PATCH] 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. --- .../src/fragments/_masthead.scss | 2 +- .../src/library/pages/components/masthead.md | 17 +++++++++++++- .../components/Masthead/Masthead.stories.tsx | 22 +++++++++++++++++++ .../src/components/Masthead/Masthead.test.tsx | 14 +++++++++++- .../src/components/Masthead/Masthead.tsx | 14 ++++++++---- 5 files changed, 62 insertions(+), 7 deletions(-) diff --git a/packages/css-framework/src/fragments/_masthead.scss b/packages/css-framework/src/fragments/_masthead.scss index ab723d786b..af9a71d3b0 100644 --- a/packages/css-framework/src/fragments/_masthead.scss +++ b/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"); } } diff --git a/packages/docs-site/src/library/pages/components/masthead.md b/packages/docs-site/src/library/pages/components/masthead.md index 3f47caa0e6..2b9433694b 100644 --- a/packages/docs-site/src/library/pages/components/masthead.md +++ b/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 ', 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', Required: 'False', + Default: '', Description: 'Navigation for the MastHead.', }, { Name: 'notifications', Type: 'React.ReactElement', 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', 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.', }, ]} /> diff --git a/packages/react-component-library/src/components/Masthead/Masthead.stories.tsx b/packages/react-component-library/src/components/Masthead/Masthead.stories.tsx index cf92d91683..0c32187503 100644 --- a/packages/react-component-library/src/components/Masthead/Masthead.stories.tsx +++ b/packages/react-component-library/src/components/Masthead/Masthead.stories.tsx @@ -87,6 +87,28 @@ stories.add('Without search', () => ) stories.add('Custom logo', () => ) +stories.add('Without logo', () => ( + +)) + +stories.add('Without logo, with navigation', () => ( + + Get started} + isActive + /> + Styles} /> + Components} /> + About} /> + + )} + /> +)) + stories.add('all but navigation', () => ( } diff --git a/packages/react-component-library/src/components/Masthead/Masthead.test.tsx b/packages/react-component-library/src/components/Masthead/Masthead.test.tsx index 68b86097b8..ec02012977 100644 --- a/packages/react-component-library/src/components/Masthead/Masthead.test.tsx +++ b/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() + }) + + it("doesn't render a logo", () => { + expect(wrapper.queryByTestId('logo')).toBeNull() + }) + }) + describe('and a user', () => { beforeEach(() => { props.user = ( diff --git a/packages/react-component-library/src/components/Masthead/Masthead.tsx b/packages/react-component-library/src/components/Masthead/Masthead.tsx index 2cead5fd54..7fe29b7624 100644 --- a/packages/react-component-library/src/components/Masthead/Masthead.tsx +++ b/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 Logo?: React.ComponentType @@ -36,20 +37,23 @@ function getServiceName( ...link.props, children: ( <> - + {Logo && } {title} ), - className: 'rn-masthead__service-name', + className: classNames('rn-masthead__service-name', { + 'rn-masthead__service--has-logo': Logo, + }), }) } export const Masthead: React.FC = ({ + hasDefaultLogo = true, hasUnreadNotification, homeLink, - Logo = DefaultLogo, + Logo, nav, notifications, onSearch, @@ -68,6 +72,8 @@ export const Masthead: React.FC = ({ 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 = ({ return (
- {getServiceName(homeLink, Logo, title)} + {getServiceName(homeLink, DisplayLogo, title)}
{onSearch && (