Header: Support custom logos #1281
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
0d947ff to
0186674
Compare
…to be added chore: add test cases to the Header component to support testing the logo prop fix: remove unused import
0186674 to
6eb6963
Compare
components/header/src/Header.tsx
Outdated
| @@ -94,6 +96,7 @@ export const Header: FC<HeaderProps> = ({ | |||
| serviceName, | |||
| signOutHref, | |||
| signOutText = 'Sign out', | |||
| logo, | |||
There was a problem hiding this comment.
Would slightly prefer logo: _logo, as that's a style we use elsewhere.
But that's purely stylistic, and I'm happy to fix that later if it doesn't make sense.
There was a problem hiding this comment.
Happy to align with your coding standards
There was a problem hiding this comment.
This has been updated
added 4 commits
January 27, 2025 10:31
… test case to mock the <CrownLogo> and <CoatLogo> components
Comment on lines
+91
to
+92
| expect(screen.getByTestId('custom-logo')).toBeInTheDocument() | ||
| expect(screen.queryByTestId('crownLogo')).not.toBeInTheDocument() |
There was a problem hiding this comment.
I suspect there will be a way to do this with getByRole('img') and maybe getByLabelText() but it's not a big deal and I'm happy to have a dig around later.
Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
Co-authored-by: Daniel A.C. Martin <daniel-ac-martin@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This feature adds the ability to override the logo displayed in the
Headercomponent.Different government organisations have different logo requirements including removing the header logo altogether
To pass in a different header logo simply add the
logoprop to theHeadercomponent and pass in anyReactNode, or pass innullto remove the logo altogether.Note that thegovUK={true}prop will take precedence over the custom logo.Example usage: