feat(empty-state): added empty-state (#DS-2572)

angular.json

@@ -809,6 +809,35 @@
                 }
             }
         },
+        "dev-empty-state": {
+            "projectType": "application",
+            "root": "packages/components-dev/empty-state",
+            "sourceRoot": "packages/components-dev/empty-state",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/components-dev/empty-state",
+                        "tsConfig": "packages/components-dev/empty-state/tsconfig.app.json",
+                        "index": "packages/components-dev/index.html",
+                        "main": "packages/components-dev/empty-state/main.ts",
+                        "polyfills": "packages/components-dev/polyfills.ts",
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "buildTarget": "dev-empty-state:build"
+                    }
+                }
+            }
+        },
         "dev-form-field": {
             "projectType": "application",
             "root": "packages/components-dev/form-field",

package.json

@@ -214,6 +214,7 @@
         "dev:date-formatter-moment": "ng serve dev-date-formatter-moment --port 3003",
         "dev:divider": "ng serve dev-divider --port 3003",
         "dev:dl": "ng serve dev-dl --port 3003",
+        "dev:empty-state": "ng serve dev-empty-state --port 3003",
         "dev:dropdown": "ng serve dev-dropdown --port 3003",
         "dev:flex-layout": "ng serve dev-flex-layout --port 3003",
         "dev:form-field": "ng serve dev-form-field --port 3003",

packages/components-dev/empty-state/main.ts

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { DemoModule } from './module';
+
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    // tslint:disable-next-line:no-console
+    .catch((error) => console.error(error));

packages/components-dev/empty-state/module.ts

@@ -0,0 +1,42 @@
+/* tslint:disable:no-console no-reserved-keywords */
+import {
+    ChangeDetectionStrategy,
+    Component,
+    NgModule,
+    ViewEncapsulation
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+import { KbqIconModule } from '@koobiq/components/icon';
+import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
+
+
+@Component({
+    selector: 'app',
+    templateUrl: 'template.html',
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DemoComponent {
+    protected readonly styles = KbqButtonStyles;
+    protected readonly colors = KbqComponentColors;
+}
+
+
+@NgModule({
+    declarations: [DemoComponent],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        KbqEmptyStateModule,
+        KbqButtonModule,
+        KbqIconModule
+    ],
+    bootstrap: [DemoComponent]
+})
+export class DemoModule {}

packages/components-dev/empty-state/styles.scss

@@ -0,0 +1,19 @@
+@use '../main';
+
+
+.dev-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.dev-box {
+    width: 500px;
+    height: 500px;
+
+    margin: 4px;
+    border: 1px solid red;
+
+    display: flex;
+    flex-direction: column;
+}

packages/components-dev/empty-state/template.html

@@ -0,0 +1,72 @@
+<div class="dev-container">
+    <div class="dev-box">
+        default center
+        <kbq-empty-state>
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>
+    </div>
+
+    <div class="dev-box">
+        default top
+        <kbq-empty-state [alignTop]="true">
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>
+    </div>
+
+    <div class="dev-box">
+        big center
+        <kbq-empty-state [big]="true">
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>
+    </div>
+
+    <div class="dev-box">
+        big top
+        <kbq-empty-state [big]="true" [alignTop]="true">
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>
+    </div>
+
+    <div class="dev-box">
+        big top error
+        <kbq-empty-state [big]="true" [alignTop]="true" [errorColor]="true">
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>
+    </div>
+</div>
+

packages/components-dev/empty-state/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.dev.json",
+    "files": [
+        "module.ts",
+        "../polyfills.ts"
+    ],
+    "include": ["**/*.ts"]
+}

packages/components/core/styles/_koobiq-theme.scss

@@ -17,6 +17,7 @@
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
@@ -72,6 +73,7 @@
     @include kbq-dl-theme($theme);
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
+    @include kbq-empty-state-theme($theme);
     @include kbq-form-field-theme($theme);
     @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
@@ -131,6 +133,7 @@
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
     @include kbq-dropdown-typography($config);
+    @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);

packages/components/core/styles/theming/_components-theming.scss

@@ -683,6 +683,11 @@
         dd: map-get($tokens, 'description-list-#{$scheme}-description-color')
     );
 
+    $empty-state: (
+        title: map-get($tokens, 'empty-state-#{$scheme}-title'),
+        color: map-get($tokens, 'empty-state-#{$scheme}-color')
+    );
+
     $form-field: (
         default: (
             border: map-get($tokens, 'form-field-#{$scheme}-default-border-color'),
@@ -1922,6 +1927,7 @@
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
+        empty-state: $empty-state,
         file-upload: $file-upload,
         form-field: $form-field,
         form-field-hint: $form-field-hint,

packages/components/empty-state/_empty-state-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
+
+@mixin kbq-empty-state-theme($theme) {
+    $empty-state: map.get($theme, components, empty-state);
+
+    .kbq-empty-state_normal-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
+        }
+    }
+
+    .kbq-empty-state_error-color {
+        .kbq-empty-state-title {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+
+        .kbq-empty-state-text {
+            color: kbq-css-variable(empty-state-title, map.get($theme, foreground, error));
+        }
+    }
+}
+
+@mixin kbq-empty-state-typography($config) {
+    .kbq-empty-state_normal {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, normal-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, normal-text);
+        }
+    }
+
+    .kbq-empty-state_big {
+        .kbq-empty-state-title {
+            @include kbq-typography-css-variables(empty-state, big-title);
+        }
+
+        .kbq-empty-state-text {
+            @include kbq-typography-css-variables(empty-state, big-text);
+        }
+    }
+
+    .kbq-empty-state-title,
+    .kbq-empty-state-text {
+        text-align: center;
+    }
+}

packages/components/empty-state/empty-state.component.html

@@ -0,0 +1,7 @@
+<ng-content select="[kbq-empty-state-icon]"></ng-content>
+
+<ng-content select="[kbq-empty-state-title]"></ng-content>
+
+<ng-content select="[kbq-empty-state-text]"></ng-content>
+
+<ng-content select="[kbq-empty-state-actions]"></ng-content>

packages/components/empty-state/empty-state.component.spec.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { fakeAsync, TestBed } from '@angular/core/testing';
+import { BrowserModule, By } from '@angular/platform-browser';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+import {
+    KbqEmptyState,
+    KbqEmptyStateTitle,
+    KbqEmptyStateText,
+    KbqEmptyStateActions,
+    KbqEmptyStateModule, KbqEmptyStateIcon
+} from './index';
+
+
+describe('KbqEmptyState', () => {
+    beforeEach(fakeAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                BrowserModule,
+                CommonModule,
+                KbqEmptyStateModule
+            ],
+            declarations: [EmptyStateWithParams]
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    it('should init and set classes', () => {
+        const fixture = TestBed.createComponent(EmptyStateWithParams);
+
+        const emptyState = fixture.debugElement.query(By.directive(KbqEmptyState))
+        const emptyStateIcon = fixture.debugElement.query(By.directive(KbqEmptyStateIcon))
+        const emptyStateTitle = fixture.debugElement.query(By.directive(KbqEmptyStateTitle))
+        const emptyStateText = fixture.debugElement.query(By.directive(KbqEmptyStateText))
+        const emptyStateActions = fixture.debugElement.query(By.directive(KbqEmptyStateActions))
+
+        expect(emptyState.nativeElement.classList).toContain('kbq-empty-state');
+        expect(emptyStateIcon.nativeElement.classList).toContain('kbq-empty-state-icon');
+        expect(emptyStateTitle.nativeElement.classList).toContain('kbq-empty-state-title');
+        expect(emptyStateText.nativeElement.classList).toContain('kbq-empty-state-text');
+        expect(emptyStateActions.nativeElement.classList).toContain('kbq-empty-state-actions');
+    });
+});
+
+
+@Component({
+    selector: 'empty-state-with-params',
+    template: `
+        <kbq-empty-state>
+            <i kbq-icon-item="mc-bell_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+            <div kbq-empty-state-title>kbq-empty-state-title</div>
+            <div kbq-empty-state-text>kbq-empty-state-text</div>
+            <div kbq-empty-state-actions>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 1</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 2</button>
+                <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme"> Action 3</button>
+            </div>
+        </kbq-empty-state>`
+})
+class EmptyStateWithParams {
+    protected readonly styles = KbqButtonStyles;
+    protected readonly colors = KbqComponentColors;
+}