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:https://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();