feat: added examples

apps/docs/src/app/components/documentation-items.ts

@@ -213,6 +213,15 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     hasExamples: false,
                     examples: ['dropdown-types']
                 },
+                {
+                    id: 'empty-state',
+                    name: 'Empty state',
+                    svgPreview: 'empty-state',
+                    hasApi: true,
+                    apiId: 'empty-state',
+                    hasExamples: false,
+                    examples: ['empty-state-types']
+                },
                 {
                     id: 'icon',
                     name: 'Icon',

packages/components/empty-state/empty-state.md

@@ -0,0 +1,51 @@
+Компонент-заглушка для пустых состояний или сообщений об ошибке. Рамка не является частью компонента, а показана только для иллюстраций к статье.
+
+<!-- example(empty-state-default) -->
+### Size
+
+Для заглушек на весь экран можно использовать блок с элементами увеличенного размера
+
+<!-- example(empty-state-big) -->
+
+### Align
+
+Содержимое может быть выровнено по центру или по верхнеу краю
+
+<!-- example(empty-state-align) -->
+
+### Error
+
+Компонент Empty State можно использовать для показа сообщения об ошибке. В этом состоянии текст становится красным.
+
+<!-- example(empty-state-error) -->
+
+### Content
+#### Иллюстрация
+
+Размер иллюстрации можно менять. Иллюстрация большого размера подойдет для полноэкранных заглушек. Если нужна заглушка лишь для отдельного блока, то можно сделать иллюстрацию компактной или вовсе отказаться от нее.
+
+<!-- example(empty-state-content) -->
+
+В компоненте с центральным выраниванием и иллюстрацией появляется дополнительный нижний отступ, который поднимает копозицию выше для оптической компенсации.
+
+### Иконка
+
+В качестве иллюстрации можно вставить иконку
+
+<!-- example(empty-state-icon) -->
+
+### Заголовок
+
+<!-- example(empty-state-title) -->
+
+### Действия
+
+Под тектом можно разместить одно или несколько действий: кнопки, ссылки и псевдоссылки.
+
+<!-- example(empty-state-actions) -->
+
+<!-- example(empty-state-actions2) -->
+
+### Только текст
+
+<!-- example(empty-state-text-only) -->

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

@@ -10,7 +10,7 @@
     flex-direction: column;
     align-items: center;
 
-    height: 100%;
+    flex: 1;
 
     &.kbq-empty-state_normal {
         padding:

packages/docs-examples/components/empty-state/empty-state-actions/empty-state-actions-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-actions/empty-state-actions-example.html

@@ -0,0 +1,13 @@
+<kbq-empty-state>
+    <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+    <div class="layout-row layout-align-center" kbq-empty-state-actions style="min-width: 340px">
+        <button class="layout-margin-right-s" kbq-button [kbqStyle]="styles.Filled" [color]="colors.Contrast">
+            Создать группу
+        </button>
+
+        <button kbq-button [kbqStyle]="styles.Filled" [color]="colors.ContrastFade">
+            Объединить группы
+        </button>
+    </div>
+</kbq-empty-state>
+

packages/docs-examples/components/empty-state/empty-state-actions/empty-state-actions-example.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+
+/**
+ * @title empty-state-actions
+ */
+@Component({
+    selector: 'empty-state-actions-example',
+    templateUrl: 'empty-state-actions-example.html',
+    styleUrls: ['empty-state-actions-example.css']
+})
+export class EmptyStateActionsExample {
+    readonly styles = KbqButtonStyles;
+    readonly colors = KbqComponentColors;
+}

packages/docs-examples/components/empty-state/empty-state-actions2/empty-state-actions2-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-actions2/empty-state-actions2-example.html

@@ -0,0 +1,14 @@
+<kbq-empty-state>
+    <div 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>

packages/docs-examples/components/empty-state/empty-state-actions2/empty-state-actions2-example.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+
+/**
+ * @title empty-state-actions2
+ */
+@Component({
+    selector: 'empty-state-actions2-example',
+    templateUrl: 'empty-state-actions2-example.html',
+    styleUrls: ['empty-state-actions2-example.css']
+})
+export class EmptyStateActions2Example {
+    readonly styles = KbqButtonStyles;
+    readonly colors = KbqComponentColors;
+}

packages/docs-examples/components/empty-state/empty-state-align/empty-state-align-example.css

@@ -0,0 +1,9 @@
+.docs-empty-state-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.docs-empty-state-container .kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-align/empty-state-align-example.html

@@ -0,0 +1,20 @@
+<div class="docs-empty-state-container">
+    <kbq-empty-state class="flex">
+        <div kbq-empty-state-title>Нет групп</div>
+        <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+        <div kbq-empty-state-actions>
+            <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme">+ Создать группу</button>
+        </div>
+    </kbq-empty-state>
+
+    <kbq-empty-state class="flex" [alignTop]="true">
+        <div kbq-empty-state-title>Нет групп</div>
+        <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+        <div kbq-empty-state-actions>
+            <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme">+ Создать группу</button>
+        </div>
+    </kbq-empty-state>
+</div>
+
+
+

packages/docs-examples/components/empty-state/empty-state-align/empty-state-align-example.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+
+/**
+ * @title empty-state-align
+ */
+@Component({
+    selector: 'empty-state-align-example',
+    templateUrl: 'empty-state-align-example.html',
+    styleUrls: ['empty-state-align-example.css']
+})
+export class EmptyStateAlignExample {
+    readonly colors = KbqComponentColors;
+    readonly styles = KbqButtonStyles;
+}

packages/docs-examples/components/empty-state/empty-state-big/empty-state-big-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-big/empty-state-big-example.html

@@ -0,0 +1,9 @@
+<kbq-empty-state [big]="true">
+    <div kbq-empty-state-title>Нет групп</div>
+    <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+    <div kbq-empty-state-actions>
+        <button kbq-button [kbqStyle]="'transparent'" [color]="'theme'">+ Создать группу</button>
+    </div>
+</kbq-empty-state>
+
+

packages/docs-examples/components/empty-state/empty-state-big/empty-state-big-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title empty-state-big
+ */
+@Component({
+    selector: 'empty-state-big-example',
+    templateUrl: 'empty-state-big-example.html',
+    styleUrls: ['empty-state-big-example.css']
+})
+export class EmptyStateBigExample {}

packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.css

@@ -0,0 +1,9 @@
+.docs-empty-state-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.docs-empty-state-container .kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.html

@@ -0,0 +1,32 @@
+<div class="docs-empty-state-container">
+    <kbq-empty-state class="flex">
+        <div kbq-empty-state-icon>
+            <img src="assets/images/empty-state/4_Empty_F_1psW.png" width="192" height="192">
+        </div>
+        <div kbq-empty-state-title>Нет групп</div>
+        <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+        <div kbq-empty-state-actions>
+            <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme">
+                <i kbq-icon="mc-plus_16"></i>
+                + Создать группу
+            </button>
+        </div>
+    </kbq-empty-state>
+
+    <kbq-empty-state class="flex">
+        <div kbq-empty-state-icon>
+            <img src="assets/images/empty-state/4_Empty_F_1psW.png" width="80" height="80">
+        </div>
+        <div kbq-empty-state-title>Нет групп</div>
+        <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+        <div kbq-empty-state-actions>
+            <button kbq-button [kbqStyle]="styles.Transparent" [color]="colors.Theme">
+                <i kbq-icon="mc-plus_16"></i>
+                + Создать группу
+            </button>
+        </div>
+    </kbq-empty-state>
+</div>
+
+
+

packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+
+/**
+ * @title empty-state-content
+ */
+@Component({
+    selector: 'empty-state-content-example',
+    templateUrl: 'empty-state-content-example.html',
+    styleUrls: ['empty-state-content-example.css']
+})
+export class EmptyStateContentExample {
+    readonly colors = KbqComponentColors;
+    readonly styles = KbqButtonStyles;
+}

packages/docs-examples/components/empty-state/empty-state-default/empty-state-default-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-default/empty-state-default-example.html

@@ -0,0 +1,9 @@
+<kbq-empty-state>
+    <div kbq-empty-state-title>Нет групп</div>
+    <div kbq-empty-state-text>Агенты можно объединить в группу и назначить им одни и те же политики</div>
+    <div kbq-empty-state-actions>
+        <button kbq-button [kbqStyle]="'transparent'" [color]="'theme'">+ Создать группу</button>
+    </div>
+</kbq-empty-state>
+
+

packages/docs-examples/components/empty-state/empty-state-default/empty-state-default-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title empty-state-default
+ */
+@Component({
+    selector: 'empty-state-default-example',
+    templateUrl: 'empty-state-default-example.html',
+    styleUrls: ['empty-state-default-example.css']
+})
+export class EmptyStateDefaultExample {}

packages/docs-examples/components/empty-state/empty-state-error/empty-state-error-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-error/empty-state-error-example.html

@@ -0,0 +1,10 @@
+<kbq-empty-state [errorColor]="true">
+    <i kbq-icon-item="mc-error_16" [fade]="true" [big]="true" [color]="'contrast'" kbq-empty-state-icon></i>
+    <div kbq-empty-state-title>Не удалось показать записи</div>
+    <div kbq-empty-state-text>Проблема с сетью или подключением к БД. Попробуйте еще раз или обратитесь к администратору.</div>
+    <div kbq-empty-state-actions>
+        <button kbq-button [kbqStyle]="'transparent'" [color]="'theme'">Обновить</button>
+    </div>
+</kbq-empty-state>
+
+

packages/docs-examples/components/empty-state/empty-state-error/empty-state-error-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title empty-state-error
+ */
+@Component({
+    selector: 'empty-state-error-example',
+    templateUrl: 'empty-state-error-example.html',
+    styleUrls: ['empty-state-error-example.css']
+})
+export class EmptyStateErrorExample {}

packages/docs-examples/components/empty-state/empty-state-icon/empty-state-icon-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-icon/empty-state-icon-example.html

@@ -0,0 +1,7 @@
+<kbq-empty-state>
+    <div kbq-empty-state-icon>
+        <i kbq-icon-item="mc-info_16" [fade]="true" [big]="true" [color]="'contrast'"></i>
+    </div>
+    <div kbq-empty-state-text>This should detail the actions you can take on this screen, as well as why it’s valuable.</div>
+</kbq-empty-state>
+

packages/docs-examples/components/empty-state/empty-state-icon/empty-state-icon-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title empty-state-icon
+ */
+@Component({
+    selector: 'empty-state-icon-example',
+    templateUrl: 'empty-state-icon-example.html',
+    styleUrls: ['empty-state-icon-example.css']
+})
+export class EmptyStateIconExample {}

packages/docs-examples/components/empty-state/empty-state-text-only/empty-state-text-only-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}

packages/docs-examples/components/empty-state/empty-state-text-only/empty-state-text-only-example.html

@@ -0,0 +1,3 @@
+<kbq-empty-state>
+    <div kbq-empty-state-text>Нет информации</div>
+</kbq-empty-state>

packages/docs-examples/components/empty-state/empty-state-text-only/empty-state-text-only-example.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors } from '@koobiq/components/core';
+
+
+/**
+ * @title empty-state-text-only
+ */
+@Component({
+    selector: 'empty-state-text-only-example',
+    templateUrl: 'empty-state-text-only-example.html',
+    styleUrls: ['empty-state-text-only-example.css']
+})
+export class EmptyStateTextOnlyExample {
+    readonly styles = KbqButtonStyles;
+    readonly colors = KbqComponentColors;
+}

packages/docs-examples/components/empty-state/empty-state-title/empty-state-title-example.css

@@ -0,0 +1,3 @@
+.kbq-empty-state {
+    min-height: 216px;
+}