(core) Adds new view as banner

Summary:
Diff removes view-as pill in the document breadcrumbs and add new view-as banner.

Note: Banners are still missing mechanism to handle several banners. As of now both doc-usage and view-as banners could show up at the same time.

Test Plan: Refactored existing test.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3732

app/client/components/Banner.ts

@@ -16,7 +16,7 @@ export interface BannerOptions {
    * Warning banners have a yellow background. Error banners have a red
    * background.
    */
-  style: 'warning' | 'error';
+  style: 'warning' | 'error' | 'info';
 
   /**
    * Optional variant of `content` to display when screen width becomes narrow.
@@ -40,6 +40,11 @@ export interface BannerOptions {
    */
   showExpandButton?: boolean;
 
+  /**
+   * If provided, applies the css class to the banner container.
+   */
+   bannerCssClass?: string;
+
   /**
    * Function that is called when the banner close button is clicked.
    *
@@ -59,7 +64,7 @@ export class Banner extends Disposable {
   }
 
   public buildDom() {
-    return cssBanner(
+    return cssBanner({class: this._options.bannerCssClass || ''},
       cssBanner.cls(`-${this._options.style}`),
       this._buildContent(),
       this._buildButtons(),
@@ -114,6 +119,11 @@ const cssBanner = styled('div', `
   gap: 16px;
   color: white;
 
+  &-info {
+    color: black;
+    background: #FFFACD;
+  }
+
   &-warning {
     background: #E6A117;
   }