feat(snackbar): create ui-snackbar component

add snackbar to commit scope list
add forgotten theme
tests and some updates
unit tests

Author: sergiubologa

commitlint.config.js

@@ -15,6 +15,8 @@ module.exports = {
                 'scroll-into-view',
                 'virtual-scroll-range-loader',
                 'virtual-scroll-viewport-resize',
+                'snackbar',
+                'pipes',
             ];
 
             return [2, 'always', scopeList];

projects/angular/_uipath-angular.theme.scss

@@ -1,7 +1,12 @@
 @import "./components/ui-suggest/src/ui-suggest.theme";
 @import "./components/ui-grid/src/ui-grid.theme";
+@import "./components/ui-snackbar/src/ui-snackbar.theme";
 
 @mixin uipath-angular-theme($theme) {
   @include ui-suggest-theme($theme);
   @include ui-grid-theme($theme);
 }
+
+@mixin uipath-snackbar-theme($theme, $snackbar-theme: null) {
+  @include ui-snackbar-theme($theme, $snackbar-theme);
+}

projects/angular/components/ui-snackbar/package.json

@@ -0,0 +1,3 @@
+{
+    "ngPackage": {}
+}

projects/angular/components/ui-snackbar/src/_ui-snackbar.theme.scss

@@ -0,0 +1,68 @@
+$light-gray: rgb(234, 238, 240);
+$dark-gray: rgb(51, 51, 51);
+$red: rgb(207,41,41);
+$dark-orange: rgb(255, 99, 37);
+$green: rgb(124, 199, 108);
+
+$default-success: ('text': $light-gray, 'background': mix($green, $dark-gray, 80));
+$default-warning: ('text':  $light-gray, 'background': mix($dark-orange, $dark-gray, 80));
+$default-error: ('text':  $light-gray, 'background': mix($red, $dark-gray, 80));
+$default-info: ('text': null, 'background': null);
+$default-snackbar-theme: ('success': $default-success, 'warning': $default-warning, 'error': $default-error, 'info': $default-info);
+
+@mixin ui-snackbar-theme($theme, $snackbar-theme) {
+    @if $snackbar-theme == null {
+        $snackbar-theme: $default-snackbar-theme;
+    }
+
+    $success: map-get($snackbar-theme, 'success');
+    $warning: map-get($snackbar-theme, 'warning');
+    $error: map-get($snackbar-theme, 'error');
+    $info: map-get($snackbar-theme, 'info');
+
+    $success-text-color: map-get($success, 'text');
+    $success-background-color: map-get($success, 'background');
+    $warning-text-color: map-get($warning, 'text');
+    $warning-background-color: map-get($warning, 'background');
+    $error-text-color: map-get($error, 'text');
+    $error-background-color: map-get($error, 'background');
+    $info-text-color: map-get($info, 'text');
+    $info-background-color: map-get($info, 'background');
+
+    .ui-snackbar {
+        &-success,
+        &-warning,
+        &-error,
+        &-info {
+            mat-icon {
+                color: inherit;
+            }
+        }
+
+        &-success {
+            color: $success-text-color;
+            background-color: $success-background-color;
+        }
+
+        &-warning {
+            color: $warning-text-color;
+            background-color: $warning-background-color;
+        }
+
+        &-error {
+            color: $error-text-color;
+            background-color: $error-background-color;
+        }
+
+        &-info {
+            color: $info-text-color;
+            background-color: $info-background-color;
+        }
+
+        &-dismiss {
+            .mat-icon-button:hover {
+                color: inherit !important;
+            }
+        }
+    }
+}

projects/angular/components/ui-snackbar/src/public_api.ts

@@ -0,0 +1,3 @@
+export * from './ui-snackbar.component';
+export { UiSnackBarModule } from './ui-snackbar.module';
+export { UiSnackbarIntlService } from './ui-snackbar-intl.service';

projects/angular/components/ui-snackbar/src/ui-snackbar-intl.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UiSnackbarIntlService } from './ui-snackbar-intl.service';
+
+describe('Service: UiSnackbarIntlService', () => {
+    beforeEach(() => TestBed.configureTestingModule({
+        providers: [UiSnackbarIntlService],
+    }));
+
+    it('should create', () => {
+        const service: UiSnackbarIntlService = TestBed.get(UiSnackbarIntlService);
+        expect(service).toBeTruthy();
+        expect(service.closeAriaLabel).toEqual('Close');
+    });
+ });

projects/angular/components/ui-snackbar/src/ui-snackbar-intl.service.ts

@@ -0,0 +1,17 @@
+import {
+  Injectable,
+  OnDestroy,
+} from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class UiSnackbarIntlService implements OnDestroy {
+    public closeAriaLabel = 'Close';
+    protected _destroyed$ = new Subject<void>();
+
+    ngOnDestroy() {
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
+}

projects/angular/components/ui-snackbar/src/ui-snackbar.component.html

@@ -0,0 +1,13 @@
+<div class="ui-snackbar-container">
+    <div class="ui-snackbar-message">
+        <mat-icon *ngIf="data.icon">{{data.icon}}</mat-icon>
+        <span [innerHTML]="data.message | nl2br"></span>
+    </div>
+    <div class="ui-snackbar-dismiss">
+        <button [attr.aria-label]="data.closeAriaLabel"
+                (click)="snackBarRef.dismiss()"
+                mat-icon-button>
+            <mat-icon>close</mat-icon>
+        </button>
+    </div>
+</div>

projects/angular/components/ui-snackbar/src/ui-snackbar.component.scss

@@ -0,0 +1,25 @@
+.ui-snackbar {
+    &-container {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-message,
+    &-dismiss {
+        display: flex;
+        align-items: center;
+    }
+
+    &-message {
+        mat-icon {
+            margin-right: 10px;
+        }
+        span {
+            overflow-y: auto;
+            max-height: calc(100vh - 80px);
+            font-size: 14.5px;
+            line-height: 1.35em;
+            word-break: break-word;
+        }
+    }
+}