Use Brand with Script Link component on services with variants

[Bopchy]

Resolves #4009

Overall change:
Use Brand with ScriptLink component on services with variants.

Code changes:

• Update Brand version number.
• Add ScriptLink and SkipLink components to Brand.
• Update existing snapshots and tests.
• Update config to include service variants, script link text and script link offscreen text for UKChina, Serbian and Zhongwen.
• Add unit tests.
• Add onClick handler that sets the variant preference cookie when the user interacts with the link.
• Add setPreferredVariantCookie() to UserContext.

---

• I have assigned myself to this PR and the corresponding issues
• I have added labels to this PR for the relevant pod(s) affected by these changes
• I have assigned this PR to the Simorgh project

Testing:

• 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 npm run test:e2e:interactive)
• This PR requires manual testing

[PriyaKR]

Testing:

Noticed few issues across cross browser and device testing

• On desktop browsers when on http://localhost:7080/ukchina/trad and then click one of the links on the top nav and then click the brand svg it gets redirected to http://localhost:7080/ukchina/trad but for a short time http://localhost:7080/ukchina/simp url is seen
• On mobile browsers when on http://localhost:7080/ukchina/trad and then click one of the links on the top nav and then click the brand svg it gets redirected to http://localhost:7080/ukchina/simp and not to http://localhost:7080/ukchina/trad
• Also on IE9 the service variant button appears to be in wrong place just below the brand svg not an issue on test env.

[Bopchy]

On desktop browsers when on http://localhost:7080/ukchina/trad and then click one of the links on the top nav and then click the brand svg it gets redirected to http://localhost:7080/ukchina/trad but for a short time http://localhost:7080/ukchina/simp url is seen should be resolved by #4976.

Seeing http://localhost:7080/ukchina/simp for a short time before it redirects to http://localhost:7080/ukchina/trad is being caused by the default variant being accessed before the cookie redirect happens

[Bopchy]

Regarding Also on IE9 the service variant button appears to be in wrong place just below the brand svg not an issue on test env., the service variant button appears just below the brand svg only on small screen widths on IE, which is in-line with the designs

[PriyaKR]

@Bopchy i see the IE9 issue happening on wider screens.

[Bopchy]

The IE9 issue (pictured below) is happening because IE9 doesn't fully support display: flex which has been used to style the div.SvgWrapper, which contains all the <Banner /> links. As such the contents of display: flex are not properly positioned out of the box. This has been documented here.

Will not be fixing this though as IE9 is not on the list of supported browsers

[Bopchy]

On mobile browsers when on http://localhost:7080/ukchina/trad and then click one of the links on the top nav and then click the brand svg it gets redirected to http://localhost:7080/ukchina/simp and not to http://localhost:7080/ukchina/trad is happening because the preferred variant cookie is not being set on mobile - so clicking on the brand svg redirects to the default variant

This should be fixed in #5038

[Bopchy]

Travis failures will be fixed in https://github.com/bbc/simorgh/tree/integrate-new-navigation once this work is merged, as the same failures are happening in parent branch as well

[PriyaKR]

@Bopchy I am now seeing the mobile issue mentioned above on desktop as well.May be we should tweak the issue saying Cookie redirects do not work on mobile and desktop

[PriyaKR]

I have updated the issue #5038 to include the desktop issue as well.So this PR can be merged now as separate issue is being created for the bugs mentioned above.