feat(theme): add progress-bar component (#459)

DEV_DOCS.md

@@ -223,6 +223,7 @@ For example, if you wanna add getting started article you have to do the followi
 
 ### Component block
 
+
 If you have to render all the information about componend parsed with typedoc
 you have to use component blocks:
 
@@ -342,6 +343,46 @@ To start a new release (publish the framework packages on NPM) you need:
 8. build demo with npm run build:prod
 9. upload demo using `scp -r dist/ server_details`
 
+
+# create a new component guide
+- create directory in `src/framework/theme/components/your-component` with following files:
+````
+your-component.component.ts (component file)
+your-component.module.ts (module file)
+your-component.component.html (optional, html file)
+your-component.component.scss (optional, common styles for your component)
+_your-component.component.theme.scss (optional, styles that depends on theme vars)
+
+````
+
+- register your component in framework
+````
+src/framework/theme/index.ts (add exports of your component and module)
+src/framework/theme/styles/global/_components.scss (if you create _your-component.component.theme.scss you have to register mixin) 
+
+````
+
+- tests
+````
+src/framework/theme/components/your-component/your-component.spec.ts if you want to test basic rendering
+e2e/your-component.e2e-spec.ts if you need to test complex actions such as user interaction
+````
+
+- register your component in docs
+````
+add it to docs/structure.ts
+
+src/playground/your-component/your-component-showcase.component.ts (create example usage of your component)
+src/playground/your-component/your-component-showcase.component.html (most probably looks like <nb-your-component></nb-your-component>)
+
+src/playground/playground.module.ts (register your component in module)
+src/playground/playground-routing.module.ts (routing)
+
+your-component.component.ts  (add line in docs section-  * @stacked-example(Your component, your-component/your-component-showcase.component)
+````
+- after `npm run docs:serve` you can see your component at `http://localhost:4100/#/docs/components/your-component` 
+
+
 # TODO
  - steps to start the development
  - describe framework and demo dependencies

docs/app/app.module.ts

@@ -15,7 +15,9 @@ import {
   NbLayoutModule,
   NbMenuModule,
   NbTabsetModule,
-  NbCheckboxModule, NbSearchModule,
+  NbProgressBarModule,
+  NbCheckboxModule, 
+  NbSearchModule,
 } from '@nebular/theme';
 import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
@@ -37,6 +39,7 @@ export const DOCS = new InjectionToken<any>('Docs Structure');
     NbLayoutModule,
     NbTabsetModule,
     NbCheckboxModule,
+    NbProgressBarModule,
     NbMenuModule.forRoot(),
     NbThemeModule.forRoot({ name: '' }),
     NbSidebarModule.forRoot(),

docs/structure.ts

@@ -231,6 +231,13 @@ export const structure = [
           'NbCheckboxComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Progress Bar',
+        source: [
+          'NbProgressBarComponent',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Badge',

e2e/popover.e2e-spec.ts

@@ -191,4 +191,13 @@ describe('nb-popover', () => {
       done();
     })
   });
+
+  it('have to hide popover when host removed', done => {
+    element(contentTemplate).click();
+    expect(element(popover).isPresent()).toBeTruthy();
+    browser.get('#/').then(() => {
+      expect(element(popover).isPresent()).toBeFalsy();
+      done();
+    })
+  });
 });

src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-progress-bar-theme() {
+
+  .progress-container {
+    height: nb-theme(progress-bar-height);
+    border-radius: nb-theme(progress-bar-radius);
+    background-color: nb-theme(progress-bar-bg);
+    &.xlg {
+      .progress-value {
+        font-size: nb-theme(progress-bar-font-size-xlg);
+      }
+      height: nb-theme(progress-bar-height-xlg);
+    }
+    &.lg {
+      .progress-value {
+        font-size: nb-theme(progress-bar-font-size-lg);
+      }
+      height: nb-theme(progress-bar-height-lg);
+    }
+    &.sm {
+      .progress-value {
+        font-size: nb-theme(progress-bar-font-size-sm);
+      }
+      height: nb-theme(progress-bar-height-sm);
+    }
+    &.xs {
+      .progress-value {
+        font-size: nb-theme(progress-bar-font-size-xs);
+      }
+      height: nb-theme(progress-bar-height-xs);
+    }
+  }
+  .progress-value {
+    background-color: nb-theme(progress-bar-default-bg);
+    color: nb-theme(progress-bar-font-color);
+    font-size: nb-theme(progress-bar-font-size);
+    font-weight: nb-theme(progress-bar-font-weight);
+    line-height: nb-theme(progress-bar-line-height);
+    transition-duration: nb-theme(progress-bar-animation-duration);
+    transition-property: width, background-color;
+    &.primary {
+      background-color: nb-theme(progress-bar-primary-bg);
+    }
+    &.info {
+      background-color: nb-theme(progress-bar-info-bg);
+    }
+    &.success {
+      background-color: nb-theme(progress-bar-success-bg);
+    }
+    &.warning {
+      background-color: nb-theme(progress-bar-warning-bg);
+    }
+    &.danger {
+      background-color: nb-theme(progress-bar-danger-bg);
+    }
+  }
+}
+

src/framework/theme/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  display: block;
+}
+
+.progress-container {
+  overflow: hidden;
+}
+
+.progress-value {
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+}

src/framework/theme/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Input } from '@angular/core';
+
+/**
+ * Progress Bar is a component for indicating progress.
+ *
+ * Simple usage:
+ *
+ * ```html
+ * <nb-progress-bar [value]="50"></nb-progress-bar>
+ * ```
+ *
+ * Progress bar accepts property `value` in range 0-100
+ * @stacked-example(Progress bar, progress-bar/progress-bar-showcase.component)
+ *
+ * Progress bar background could be configured by providing a `status` property:
+ * @stacked-example(Progress bar status, progress-bar/progress-bar-status.component)
+ *
+ * Progress bar size (height and font-size) could be configured by providing a `size` property:
+ * @stacked-example(Progress bar size, progress-bar/progress-bar-size.component)
+ *
+ * `displayValue` property shows current value inside progress bar. It's also possible to add custom text inside:
+ * @stacked-example(Progress bar value, progress-bar/progress-bar-value.component)
+ *
+ * Progress bar supports `width` and `background-color` transition:
+ * @stacked-example(Progress bar interactive, progress-bar/progress-bar-interactive.component)
+ *
+ * @styles
+ *
+ * progress-bar-height-xlg:
+ * progress-bar-height-lg:
+ * progress-bar-height:
+ * progress-bar-height-sm:
+ * progress-bar-height-xs:
+ * progress-bar-font-size-xlg:
+ * progress-bar-font-size-lg:
+ * progress-bar-font-size:
+ * progress-bar-font-size-sm:
+ * progress-bar-font-size-xs:
+ * progress-bar-radius:
+ * progress-bar-bg-color:
+ * progress-bar-font-color:
+ * progress-bar-font-weight:
+ * progress-bar-default-bg-color:
+ * progress-bar-primary-bg-color:
+ * progress-bar-success-bg-color:
+ * progress-bar-info-bg-color:
+ * progress-bar-warning-bg-color:
+ * progress-bar-danger-bg-color:
+ */
+@Component({
+  selector: 'nb-progress-bar',
+  styleUrls: ['./progress-bar.component.scss'],
+  template: `
+    <div class="progress-container {{ size ? '' + size : '' }}">
+      <div class="progress-value {{ status ? '' + status : '' }}" [style.width.%]="value">
+        <span *ngIf="displayValue">{{ value }}%</span>
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+})
+export class NbProgressBarComponent {
+
+  /**
+   * Progress bar value in percent (0 - 100)
+   * @type {number}
+   * @private
+   */
+  @Input() value: number = 0;
+
+  /**
+   * Progress bar background (primary, info success, warning, danger)
+   * @param {string} val
+   */
+  @Input() status: string;
+
+  /**
+   * Progress bar size (xs, sm, lg, xlg)
+   * @param {string} val
+   */
+  @Input() size: string;
+
+  /**
+   * Displays value inside progress bar
+   * @param {string} val
+   */
+  @Input() displayValue: boolean = false;
+
+}

src/framework/theme/components/progress-bar/progress-bar.module.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+
+import { NbSharedModule } from '../shared/shared.module';
+import { NbProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+  imports: [
+    NbSharedModule,
+  ],
+  declarations: [NbProgressBarComponent],
+  exports: [NbProgressBarComponent],
+})
+export class NbProgressBarModule { }

src/framework/theme/components/progress-bar/progress-bar.spec.ts

@@ -0,0 +1,60 @@
+import { NbProgressBarComponent } from './progress-bar.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+describe('Component: NbProgressBar', () => {
+
+  let progressBar: NbProgressBarComponent;
+  let fixture: ComponentFixture<NbProgressBarComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NbProgressBarComponent],
+    });
+
+    fixture = TestBed.createComponent(NbProgressBarComponent);
+    progressBar = fixture.componentInstance;
+  });
+
+  it('Setting value 50 should set width to 50%', () => {
+    progressBar.value = 50;
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement
+        .query(By.css('.progress-value')).nativeElement.style.width)
+      .toBe('50%');
+  });
+
+  it('Setting status danger should set class danger', () => {
+    progressBar.status = 'danger';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement
+        .query(By.css('.progress-value')).nativeElement.classList.contains('danger'))
+      .toBeTruthy()
+  });
+
+  it('Setting size sm should set class sm', () => {
+    progressBar.size = 'sm';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement
+        .query(By.css('.progress-container')).nativeElement.classList.contains('sm'))
+      .toBeTruthy()
+  });
+
+  it('Setting displayValue should create span with value label', () => {
+    progressBar.value = 40;
+    progressBar.displayValue = true;
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement
+        .query(By.css('.progress-value span')).nativeElement.innerHTML)
+      .toContain('40%')
+  });
+
+});

src/framework/theme/index.ts

@@ -31,3 +31,5 @@ export * from './components/popover/popover.directive';
 export * from './components/popover/popover.module';
 export * from './components/context-menu/context-menu.directive';
 export * from './components/context-menu/context-menu.module';
+export * from './components/progress-bar/progress-bar.component';
+export * from './components/progress-bar/progress-bar.module';

src/framework/theme/styles/global/_components.scss

@@ -16,6 +16,7 @@
 @import '../../components/actions/actions.component.theme';
 @import '../../components/search/search.component.theme';
 @import '../../components/checkbox/checkbox.component.theme';
+@import '../../components/progress-bar/progress-bar.component.theme';
 @import '../../components/badge/badge.component.theme';
 @import '../../components/popover/popover.component.theme';
 @import '../../components/context-menu/context-menu.component.theme';
@@ -34,6 +35,7 @@
   @include nb-actions-theme();
   @include nb-search-theme();
   @include nb-checkbox-theme();
+  @include nb-progress-bar-theme();
   @include nb-badge-theme();
   @include nb-popover-theme();
   @include nb-context-menu-theme();