simorgh
simorgh copied to clipboard
provide colours, spacing, MQs through ThemeProvider
Resolves WSTEAMA-124
Overall change: Set up theming with Emotion's ThemeProvider to provide colours, media queries, and spacings.
This makes it possible to use theming more easily in styles for our new TSX components.
Creates a new component called ThemeProvider
that wraps Emotion's ThemeProvider and uses Loadable Components to code/bundle split each service's theme data.
Later PRs will add typography and brand logos into theme provider.
Testing This PR does not change any UI or use any of the theming yet. All this PR does is wrap the Layout component with the ThemeProvider. Because of this, I think testing should be light on this one. If there are any issues, it will be JS bundle related i.e. broken javascript, lazy images not loading etc.
Code changes:
- adds README.md
- adds
ThemeProvider
tocomponents
dir - adds a theme file for every service and exports the
ThemeProvider
for that service using awithThemeProvider
function -
ThemeProvider/index.tsx
uses full dynamic imports to select the service's theme and code split
- [ ] I have assigned myself to this PR and the corresponding issues
- [ ] I have added the
cross-team
label to this PR if it requires visibility across World Service teams - [ ] I have assigned this PR to the Simorgh project
- [ ] (BBC contributors only) This PR follows the repository use guidelines
Testing:
- [x] Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
- [ ] If necessary, I have run the local E2E non-smoke tests relevant to my changes (
CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn test:e2e:interactive
) - [x] This PR requires manual testing
Should we disable the react/prop-types
eslint rule for our .tsx
files? Shouldn't need it since TS will be doing the type checking for us. E.g, this should be valid: