Add global styles to psammead-styles

[EinsteinNjoroge]

Resolves #330

Overall change: Add global styles to psammead-styles and export it without fonts

Code changes:

• Add global styles to psammead-styles and export it without fonts
• Add tests and snapshot

---

• I have assigned myself to this PR and the corresponding issues
• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[EinsteinNjoroge]

I'm not sure about this implementation, kindly confirm I'm on the right track

[dr3]

Hey :) I see the issue says "Our font-faces should not be included initially, since they will vary depending on the service" but I would expect ${({ fonts }) => fonts && createFontStyles(fonts)} to stay in here, so we can pass the fonts in in simorgh?

They will vary on service, but we can call it like <GlobalStyles fonts={arrayOfServiceFonts} /> :)

Otherwise, this PR looks great :)

[dr3]

Looks great, just a couple things :)

[sareh]

Looks good so far! I've suggested some changes here.

[sareh]

Thanks for the changes. Suggested an update to the example.

[sareh]

Thanks for the update.

It'd be helpful to have example usage that uses our Psammead Styles fonts like this:

import GlobalStyles from '@bbc/psammead-styles/global-styles';
import {
  F_REITH_SANS_REGULAR,
  F_REITH_SERIF_MEDIUM,
} from '@bbc/psammead-styles/fonts';

<GlobalStyles fonts={[
      F_REITH_SANS_REGULAR,
      F_REITH_SERIF_MEDIUM,
    ]}
/>

Same for usage in the unit test & reference to the readme.

A note for others code reviewing this PR: A Storybook example would be difficult to isolate, so shouldn't be necessary for this work. After this package is updated we'll use it in the global Psammead Storybook setup. So it'll be in use throughout the Storybook application.

[sareh]

👍 Looks great.

[sareh]

@EinsteinCarrey After merging this in, we have two follow-up issues to use this package: #2112 bbc/simorgh#3718

[dr3]

LGTM, great work :)