This repository has been archived by the owner on Aug 13, 2023. It is now read-only.
Update psammead-navigation to require colours as props #4187
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
jimjohnsonrollings
added
the
cross-team
jimjohnsonrollings
added
ws-articles
packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
Outdated
Show resolved
Hide resolved
jimjohnsonrollings
changed the title
andrewscfc
reviewed
Jan 13, 2021
packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
Outdated
Show resolved
Hide resolved
|
|
||
| import notes from '../README.md'; | ||
|
|
||
| const defaultBrandBackgroundColour = '#B80000'; |
There was a problem hiding this comment.
Should this use a constant here?
There was a problem hiding this comment.
This is used for the background colour of the brand component when shown in storybook, not by the navigation component, so I didn't feel it was relevant to the change I was making.
| @@ -21,6 +21,9 @@ const navigationUlComponent = ( | |||
| currentPageText="Current page" | |||
| service="news" | |||
| data-navigation="test_navigation" | |||
| brandForegroundColour="#FDFDFD" | |||
There was a problem hiding this comment.
Throughout these tests I'd imagine the colours should refer to constants rather than being hardcoded?
There was a problem hiding this comment.
What benefit would that give?
packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
Show resolved
Hide resolved
Co-authored-by: Andrew Bennett <[email protected]>
andrewscfc
approved these changes
Jan 13, 2021
joshcoventry
approved these changes
Jan 14, 2021
|
LGTM.. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Resolves #3123
Overall change:
Upgrades psammead-navigation so that it will work for non-Red brands
Code changes:
brandBackgroundColourprop to set the background of the navigationbrandBackgroundColourfor the fade in ScrollableNavigation, including adding a new function to generate the value for the transparencybrandBorderColourfor the separator line where the nav wraps onto a second rowbrandHighlightColourfor the current page indicator, and the hover/active state bordersbrandForegroundColourfor the text in the navTesting notes
In Storybook, this can be tested by viewing the Navigation stories and changing the service drop-down to Sport, which has different values to News for all colours
Screenshots
Screenshots from Storybook with
newsandsportselected