Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Update psammead-navigation to take in colours #3123

Closed
1 task
sareh opened this issue Feb 12, 2020 · 0 comments · Fixed by #4187
Closed
1 task

Update psammead-navigation to take in colours #3123

sareh opened this issue Feb 12, 2020 · 0 comments · Fixed by #4187
Assignees
Labels
ux To be reviewed by UX before merging ws-articles Tasks for the WS Articles Team

Comments

@sareh
Copy link
Contributor

sareh commented Feb 12, 2020

Is your feature request related to a problem? Please describe.
Currently Psammead-navigation has hard-coded colours for:

C_WHITE - text and hover/focus colours
C_POSTBOX - background on navigation
Unnamed color '#eab3b3'; - border colour on nav items (white with 30% transparency over C_POSTBOX) - we should add this into Psammead Assets as a named colour. https://bbc.github.io/psammead/?path=/story/utilities-psammead-styles--colours

We should ensure we pass in these colours as props, so that we can then use Learning English colours for their navigation. e.g. C_LE_TEAL for navigation background, C_WHITE for text and hover/focus colours & following on from the pattern used above, a new hex colour for white with 30% transparency over C_LE_TEAL.

Describe the solution you'd like

  • We should ensure we add all relevant new colours to psammead-assets
  • Add colour themes to storybook helpers, so they're available for storybook (e.g. when you select learningenglish as a service, you have navigationColour value set to correct constant)
  • We should add props / enable theming for the psammead-navigation component.
  • Ensure Storybook and Tests are passing in the colour props.

This should be a major version update, since it should make the colours required props.
Then a Simorgh PR is needed to update Simorgh to use these, add colours into Service Config files and use them in the application by passing them to psammead-navigation.

Describe alternatives you've considered
N/A

Testing notes
[Tester to complete]

Dev insight: Will there be any potential regression? etc

  • This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.

@sareh sareh added Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. ws-home Tasks for the WS Home Team ux To be reviewed by UX before merging learning-english labels Feb 12, 2020
@joshcoventry joshcoventry added ws-articles Tasks for the WS Articles Team ws-media The World Service media stream and removed ws-home Tasks for the WS Home Team labels Jul 1, 2020
@jimjohnsonrollings jimjohnsonrollings self-assigned this Jan 6, 2021
@jimjohnsonrollings jimjohnsonrollings added cross-team For visibility for both World Service teams (Engage & Media) and removed Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. ws-articles Tasks for the WS Articles Team ws-media The World Service media stream labels Jan 6, 2021
@joshcoventry joshcoventry added ws-articles Tasks for the WS Articles Team and removed cross-team For visibility for both World Service teams (Engage & Media) labels Jan 11, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
ux To be reviewed by UX before merging ws-articles Tasks for the WS Articles Team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants