Add Context Panel

[vishwam]

This PR adds a Context Panel (flyout in RM terms) to the Fluent Controls, since it's now a common shared component in the new design language intended for App Settings, Documentation etc. The styling is mostly the same as the ContentPanel that Vincenzo added as part of the new Masthead, but after last week's discussion, the design has been changed to be more generic so we can reuse the panel outside the Masthead as well.

Usage:

<ContextPanel 
    header='Hello'
    footer={<Btn icon='cancel' onClick={()=> alert('cancel triggered')} attr={{ container: { autoFocus: true }}}>Cancel</Btn>}
    onClose={()=> alert('cancel triggered')}
>
    This is context panel 1          
</ContextPanel>

The ContextPanel takes in the following properties:

interface ContextPanelProperties {
    onClose: React.EventHandler<any>;
    header: React.ReactNode;
    children?: React.ReactNode;
    footer?: React.ReactNode;
}

I used the slots pattern mainly because:

1. We want to force all context panels to have a header and close button.
2. The container styling requires the children to be placed in a very specific order (close button -> header -> content -> footer), so it's easy for consumers to get it wrong.

There's a big discussion going on in the community about this approach vs named components (see Dan Abramov's comments for an example), so let me know what you guys think. The other approach, roughly, is:

<ContextPanel>
    <ContextPanel.CloseButton onClick={...} />
    <ContextPanel.Header>Foo</ContextPanel.Header>
    <ContextPanel.Content>Bar</ContextPanel.Content>
    <ContextPanel.Footer>Baz</ContextPanel.Footer>
</ContextPanel>

Since this is now a generic component, the ContextPanel now renders through a portal under a dedicated root div in the shell.