Banner component implementation, #2672

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 7.1.0
+- **New component** `IgxBannerComponent`:
+    - Allows the developer to easily display a highly templateable message that requires minimal user interaction (1-2 actions) to be dismissed. Read up more information about the IgxBannerComponent in the official [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/banner/README.md)
+
 ## 7.0.0
 - Updated package dependencies to Angular 7 ([#3000](https://github.com/IgniteUI/igniteui-angular/pull/3000))
 - Themes: Add dark schemas and mixins (PR [#3025](https://github.com/IgniteUI/igniteui-angular/pull/3025))

projects/igniteui-angular/src/lib/banner/README.md

@@ -0,0 +1,50 @@
+# igx-banner
+
+**igx-banner** supports banner component that is shown at the full width of the screen above the app content but below a Navigation Bar if available. A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)
+
+# Usage
+```html
+<igx-banner #banner>
+    This is default template's message!
+</igx-banner>
+```
+
+# API Summary
+
+### Inputs
+
+Inputs available on the **IgxBanner**:
+
+| Name                |      Type     |  Description                                             |
+|---------------------|:-------------:|----------------------------------------------------------|
+| `animationSettings`           | `{ openAnimation: AnimationRefMetadata, closeAnimation: AnimationRefMetadata }`     | Sets the open / close animations for the banner.                  |
+
+
+### Outputs
+
+A list of the events emitted by the **IgxBanner**:
+
+| Name                | Description                                                              | Cancelable |
+|---------------------|--------------------------------------------------------------------------|------------|
+| `onOpening`            | Fires before the banner is opened                                         | `true` |
+| `onOpened`            | Fires after the banner is opened                                          | `false` |
+| `onClosing`            | Fire before the banner is closed                                          | `true` |
+| `onClosed`            | Fires after the banner is closed                                          | `false`|
+
+### Getters
+
+Getters available on the **IgxBanner**:
+
+| Name                | Type          | Getter | Setter | Description                            |
+|---------------------|:-------------:|:------:|:------:|----------------------------------------|
+| `collapsed`         | boolean       | Yes    | No     |Gets whether `igx-banner` is collapsed. |
+
+### Methods
+
+Here is a list of all public methods exposed by **IgxBanner**:
+
+| Signature           | Description                                                              |
+|---------------------|--------------------------------------------------------------------------|
+| `open()`            | Opens the banner                                                         |
+| `close()`           | Closes the banner                                                        |
+| `toggle()`          | Toggles the banner                                                       |

projects/igniteui-angular/src/lib/banner/banner.component.html

@@ -0,0 +1,27 @@
+<igx-expansion-panel #expansionPanel [animationSettings]="animationSettings" (onCollapsed)="onExpansionPanelClose()" (onExpanded)="onExpansionPanelOpen()"
+    [collapsed]="collapsed" aria-live="polite" [attr.aria-hidden]="collapsed">
+    <igx-expansion-panel-body>
+        <div class="igx-banner">
+            <div class="igx-banner__message">
+                <div *ngIf="bannerIcon" class="igx-banner__illustration">
+                    <ng-content select="igx-icon"></ng-content>
+                </div>
+                <span class="igx-banner__text">
+                    <ng-content></ng-content>
+                </span>
+            </div>
+            <div class="igx-banner__actions">
+                <div class="igx-banner__row">
+                    <ng-container *ngIf="useDefaultTemplate">
+                        <button igxButton="flat" igxRipple (click)="close()">
+                            Dismiss
+                        </button>
+                    </ng-container>
+                    <ng-container *ngIf="!useDefaultTemplate">
+                        <ng-content select="igx-banner-actions"></ng-content>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </igx-expansion-panel-body>
+</igx-expansion-panel>