Merge pull request #892 from mobi/Feature#814

[Feature] Progress Bar

projects/go-lib/src/lib/components/go-badge/go-badge.component.spec.ts

@@ -22,4 +22,42 @@ describe('GoBadgeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe("badgeClasses()", () => {
+    beforeEach(() => {
+      component.badgeStyles = {};
+    });
+
+    it("returns an object that sets go-badge--positive to true based on type", () => {
+      expect(component.badgeStyles["go-badge--positive"]).toBeFalsy();
+
+      component.badgeColor = "positive";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-badge--positive"]).toBe(true);
+    });
+
+    it("returns an object that set go-badge--negative to true based on type", () => {
+      expect(component.badgeStyles["go-badge--negative"]).toBeFalsy();
+
+      component.badgeColor = "negative";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-badge--negative"]).toBe(true);
+    });
+
+    it("returns an object that set go-badge--neutral to true based on type", () => {
+      expect(component.badgeStyles["go-badge--neutral"]).toBeFalsy();
+
+      component.badgeColor = "neutral";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-badge--neutral"]).toBe(true);
+    });
+
+    it("returns an object that set go-badge--dot to true based on type", () => {
+      expect(component.badgeStyles["go-badge--dot"]).toBeFalsy();
+
+      component.displayData = false;
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-badge--dot"]).toBe(true);
+    });
+  });
 });

projects/go-lib/src/lib/components/go-progress-bar/go-progress-bar.component.html

@@ -0,0 +1,35 @@
+<div class="go-progress-bar" tabindex="-1">
+  <ng-container
+    *ngTemplateOutlet="mode === 'determinate' ? determinate : indeterminate"
+  >
+  </ng-container>
+</div>
+
+<ng-template #determinate>
+  <div class="go-progress-bar__determinate">
+    <span class="go-progress-bar__determinate__left-label">
+      {{ leftLabel }}</span
+    >
+    <div class="go-progress-bar__determinate--track">
+      <div
+        class="go-progress-bar__determinate--indicator"
+        [ngStyle]="{ width: indicatorWidth + '%' }"
+      ></div>
+    </div>
+    <span class="go-progress-bar__determinate__right-label">{{
+      rightLabel
+    }}</span>
+  </div>
+</ng-template>
+
+<ng-template #indeterminate>
+  <div class="go-progress-bar__indeterminate">
+    <div class="go-progress-bar__indeterminate--track"></div>
+    <div
+      class="go-progress-bar__indeterminate--indicator go-progress-bar__indeterminate--primary-indicator"
+    ></div>
+    <div
+      class="go-progress-bar__indeterminate--indicator go-progress-bar__indeterminate--secondary-indicator"
+    ></div>
+  </div>
+</ng-template>

projects/go-lib/src/lib/components/go-progress-bar/go-progress-bar.component.scss

@@ -0,0 +1,125 @@
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+@mixin label-style($float, $padding) {
+  float: $float;
+  padding: $padding;
+  font-weight: $weight-regular;
+  white-space: nowrap;
+}
+
+@mixin determinate-elem($width, $background-color) {
+  width: $width;
+  height: 10px;
+  background-color: $background-color;
+}
+
+@mixin indeterminate-elem($background-color) {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  background-color: $background-color;
+}
+
+.go-progress-bar {
+  &__determinate {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+
+    &__left-label {
+      @include label-style(left, 0 8px 0 0);
+    }
+
+    &__right-label {
+      @include label-style(right, 0 0 0 8px);
+    }
+
+    &--track {
+      @include determinate-elem(100%, $theme-light-app-bg);
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+    &--indicator {
+      @include determinate-elem(0%, $ui-color-primary);
+      transition: width 2s ease-in;
+      transition-timing-function: ease-in;
+    }
+  }
+
+  &__indeterminate {
+    backface-visibility: hidden;
+    border-radius: 5px;
+    height: 10px;
+    overflow: hidden;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+
+    &--track {
+      @include indeterminate-elem($theme-light-app-bg);
+    }
+
+    &--indicator {
+      @include indeterminate-elem($ui-color-primary);
+      backface-visibility: hidden;
+      transform-origin: top left;
+      transition: transform 250ms ease;
+    }
+
+    &--primary-indicator {
+      animation: primary-indeterminate-translate 2000ms infinite linear;
+      left: -99.166611%;
+    }
+
+    &--secondary-indicator {
+      animation: secondary-indeterminate-translate 2000ms infinite linear;
+      left: 0;
+    }
+  }
+}
+
+@keyframes primary-indeterminate-translate {
+  0% {
+    transform: translateX(0) scaleX(0.4);
+  }
+
+  20% {
+    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+    transform: translateX(20%) scaleX(0.2);
+  }
+
+  60% {
+    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+    transform: translateX(80%) scaleX(0.9);
+  }
+
+  100% {
+    transform: translateX(200%) scaleX(0.2);
+  }
+}
+
+@keyframes secondary-indeterminate-translate {
+  0% {
+    animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+    transform: translateX(0) scaleX(0);
+  }
+
+  25% {
+    animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+    transform: translateX(25%) scaleX(0.5);
+  }
+
+  60.35% {
+    animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+    transform: translateX(100%) scaleX(0.8);
+  }
+
+  100% {
+    transform: translateX(200%);
+  }
+}

projects/go-lib/src/lib/components/go-progress-bar/go-progress-bar.component.spec.ts

@@ -0,0 +1,49 @@
+import { SimpleChange, SimpleChanges } from "@angular/core";
+import {
+  async,
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from "@angular/core/testing";
+
+import { GoProgressBarComponent } from "./go-progress-bar.component";
+
+describe("GoProgressBarComponent", () => {
+  let component: GoProgressBarComponent;
+  let fixture: ComponentFixture<GoProgressBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GoProgressBarComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("ngOnChanges()", () => {
+    it("should test when value is undefined", fakeAsync(() => {
+      component.ngOnChanges({
+        value: new SimpleChange(undefined, undefined, false),
+      });
+
+      tick(500);
+      expect(component.indicatorWidth).toBe(undefined);
+    }));
+
+    it("should test when value is defined", fakeAsync(() => {
+      component.ngOnChanges({ value: new SimpleChange(undefined, 40, true) });
+
+      tick(501);
+      expect(component.indicatorWidth).toEqual(40);
+    }));
+  });
+});

projects/go-lib/src/lib/components/go-progress-bar/go-progress-bar.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'go-progress-bar',
+  templateUrl: './go-progress-bar.component.html',
+  styleUrls: ['./go-progress-bar.component.scss'],
+})
+export class GoProgressBarComponent implements OnChanges {
+  @Input() mode: 'determinate' | 'indeterminate' = 'determinate';
+  @Input() value: number;
+  @Input() leftLabel?: string;
+  @Input() rightLabel?: string;
+
+  indicatorWidth: number;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('value' in changes) {
+      setTimeout(() => {
+        this.indicatorWidth = changes.value.currentValue;
+      }, 500);
+    }
+  }
+}

projects/go-lib/src/lib/components/go-progress-bar/go-progress-bar.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoProgressBarComponent } from './go-progress-bar.component';
+
+
+
+@NgModule({
+  declarations: [GoProgressBarComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    GoProgressBarComponent
+  ]
+})
+export class GoProgressBarModule { }

projects/go-lib/src/lib/go-shared.module.ts

@@ -24,6 +24,7 @@ import { GoLayoutModule } from './components/go-layout/go-layout.module';
 import { GoLoaderModule } from './components/go-loader/go-loader.module';
 import { GoModalModule } from './components/go-modal/go-modal.module';
 import { GoOffCanvasModule } from './components/go-off-canvas/go-off-canvas.module';
+import { GoProgressBarModule } from './components/go-progress-bar/go-progress-bar.module';
 import { GoRadioModule } from './components/go-radio/go-radio.module';
 import { GoSearchModule } from './components/go-search/go-search.module';
 import { GoSelectModule } from './components/go-select/go-select.module';
@@ -72,7 +73,8 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoTextAreaModule,
     GoTimepickerModule,
     GoToasterModule,
-    GoToastModule
+    GoToastModule,
+    GoProgressBarModule
   ],
   exports: [
     GoAccordionModule,
@@ -108,7 +110,8 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoTableModule,
     GoTextAreaModule,
     GoToasterModule,
-    GoToastModule
+    GoToastModule,
+    GoProgressBarModule
   ]
 })
 

projects/go-lib/src/public_api.ts

@@ -198,6 +198,10 @@ export * from './lib/components/go-timepicker/go-time.component';
 export * from './lib/components/go-timepicker/go-timepicker.component';
 export * from './lib/components/go-timepicker/go-timepicker.module';
 
+// Progressbar
+export * from './lib/components/go-progress-bar/go-progress-bar.component';
+export * from './lib/components/go-progress-bar/go-progress-bar.module';
+
 /***** Utils *****/
 export * from './lib/utilities/form.utils';
 export * from './lib/utilities/colors.util';

projects/go-style-guide/src/app/app.component.ts

@@ -46,6 +46,7 @@ export class AppComponent {
       { route: 'ui-kit/off-canvas', routeTitle: 'Off Canvas' },
       { route: 'ui-kit/pills', routeTitle: 'Pills' },
       { route: 'ui-kit/portal', routeTitle: 'Portal' },
+      { route: 'ui-kit/progress-bar', routeTitle: 'Progress Bar' },
       { route: 'ui-kit/tabs', routeTitle: 'Tabs', },
       { route: 'ui-kit/table', routeTitle: 'Table'},
       { route: 'ui-kit/toast', routeTitle: 'Toast' },