feat(PPDSC-2005) Layer manager

[pdimova]

PPDSC-2005

What

1. Background - we need a better way to organize layers ( stacking context ) without using a z-index.
2. What did you do: two new components Layer and Layer organizer
   2.1. Layer takes all children and renders them into a portal, attached to the document body or LayerOrganizer
   2.2. LayerOrganizer is a placeholder in which Layer can be rendered, without a LayerORganizer the Layers will be attached to the body
   2.3. Others:
   • Added NewskitProvided which includes: ThemeProvider, InstrumentationProvider, MediaQueryProvider & LayerOrganizer
   • withMediaQueryProvider removed from Select, since NewskitProvider contains MediaQueryProvider
   • Updated themeprovider/newskitprovider docs
   • Updated storybook config to use NewskitProvider
   • Updated test-utils to use NewskitProvider

• SSR Consideration: React Portals don't render on the server ( they are client only feature ) which means during SSR the content of the Layers will be rendered in "normal" flow, and when client code kicks in, the layer content will be transferred via the portal at the end of the page ( Layer Organizer / document.body ). This behaviour can be seen in our home page using the Drawer ( pages/index.tsx )

• breaking change: This is a breaking change since we remove Z-Index from components, and render them outside app "root". This means they can collision with other components with z-index ( non newskit ones )
  For example Virgin Radio:
  This is how broken is Drawer in Virgin Radio since there are components that have zIndex
  

In order to fix that we need to add <LayerOrganizer zIndex={99999} > so that create a new stacking context for our Layers.

BREAKING CHANGE: Layers render outside "root" app

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[mutebg]

wow, that is super simple and clever at the same time, great job @pdimova

[Xin00163]

We have now added z-index to new components like tooltip & popover. Do they need to be removed in this PR? @mutebg

[mutebg]

We have now added z-index to new components like tooltip & popover. Do they need to be removed in this PR? @mutebg

We might do that in another ticket, don't want to spend another 1 month doing so, we also need to check how these components render in the portal, I assume it won't be a problem but