simorgh icon indicating copy to clipboard operation
simorgh copied to clipboard

provide colours, spacing, MQs through ThemeProvider

Open jroebu14 opened this issue 1 year ago • 1 comments

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 to components dir
  • adds a theme file for every service and exports the ThemeProvider for that service using a withThemeProvider 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

jroebu14 avatar Aug 09 '22 10:08 jroebu14

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: Screenshot 2022-08-09 at 1 57 57 pm

amoore108 avatar Aug 09 '22 12:08 amoore108