Merge pull request #230 from mobi/v1.2.1

V1.2.1
mobi · Oct 4, 2019 · 9084167 · 9084167
2 parents 925b803 + f82612e
commit 9084167
Show file tree

Hide file tree

Showing 31 changed files with 240 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # Goponents
 
-###### Currently `v1.2.0`
+###### Currently `v1.2.1`
 
-This project houses a set of UI components for Angular and designed around the 'Go' design system.
+This project houses a set of UI components for Angular 7+ and designed around the 'Go' design system.
 
 # Getting Started
 1. Take a look at our [code of conduct](https://github.com/mobi/goponents/blob/master/CODE_OF_CONDUCT.md)
@@ -22,7 +22,7 @@ This project houses a set of UI components for Angular and designed around the '
    ```
 5. Start a development test server:
    ```bash
-   ng serve
+   ng serve --project=go-tester
    ```
    _This will serve the go-tester directory at `localhost:4200`_
 6. In a separate tab, start the tests for the go-lib components:
@@ -81,31 +81,39 @@ To do this properly, you must export each individual file within the `public_api
 
 ### Components Available
 
-| Component    | Notes                                  |
-|--------------|----------------------------------------|
-| accordion    | Available                              |
-| button       | Available                              |
-| card         | Available                              |
-| icon         | Available                              |
-| modal        | Available                              |
-| off-canvas   | Available                              |
-| table        | Available                              |
-| toasts       | Available                              |
-|--------------|----------------------------------------|
-| input        | Priority                               |
-| textarea     | Priority                               |
-| combobox     | Priority                               |
-| checkbox     | Priority                               |
-| copy button  | Priority                               |
-| radio        | Priority                               |
-| datepicker   | Will Need                              |
-| autocomplete | Will Need                              |
-| masked input | Will Need                              |
-|--------------|----------------------------------------|
-| tabs         | Idea                                   |
-| badge        | Idea                                   |
-| tooltip      | Idea                                   |
-| slide toggle | Idea                                   |
-| timepicker   | Idea                                   |
-| wysiwyg editor | Idea                                 |
+| Component      | Notes                                  |
+|----------------|----------------------------------------|
+| accordion      | Available                              |
+| badge          | Available                              |
+| button         | Available                              |
+| card           | Available                              |
+| checkbox       | Available                              |
+| checkbox group | Available                              |
+| copy button    | Available                              |
+| datepicker     | Available                              |
+| header         | Available                              |
+| icon           | Available                              |
+| icon button    | Available                              |
+| input          | Available                              |
+| hint           | Available                              |
+| layout         | Available                              |
+| modal          | Available                              |
+| off-canvas     | Available                              |
+| radio          | Available                              |
+| radio group    | Available                              |
+| select         | Available                              |
+| search         | Available                              |
+| side nav       | Available                              |
+| slide toggle   | Available                              |
+| table          | Available                              |
+| textarea       | Available                              |
+| toasts         | Available                              |
+|----------------|----------------------------------------|
+| autocomplete   | Will Need                              |
+| masked input   | Will Need                              |
+|----------------|----------------------------------------|
+| tabs           | Idea                                   |
+| tooltip        | Idea                                   |
+| timepicker     | Idea                                   |
+| wysiwyg        | Idea                                   |
 
diff --git a/projects/go-lib/package.json b/projects/go-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tangoe/goponents",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mobi/goponents.git"

diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html
@@ -3,6 +3,7 @@
        [ngClass]="{ 'go-header__left--collapsed': isNavCollapsed() }">
     <go-icon-button class="go-header__menu"
              buttonIcon="menu"
+             buttonSize="medium"
              buttonTitle="Menu"
              (handleClick)="toggleSideMenu()">
     </go-icon-button>

diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss
@@ -7,7 +7,7 @@ $breakpoint-header-mobile-small: 500px;
   background: $theme-light-bg;
   box-shadow: $global-box-shadow;
   display: flex;
-  height: 4rem;
+  height: $header-height;
   justify-content: space-between;
   position: relative;
   z-index: z-index(navigation);
@@ -65,7 +65,7 @@ $breakpoint-header-mobile-small: 500px;
   width: 15.5rem;
 
   @media (max-width: $breakpoint-mobile) {
-    height: 4rem;
+    height: $header-height;
   }
 }
 
@@ -84,7 +84,7 @@ $breakpoint-header-mobile-small: 500px;
 
   @media (max-width: $breakpoint-mobile) {
     flex: auto;
-    height: 4rem;
+    height: $header-height;
     order: 2;
     width: 100vw;
   }
@@ -105,7 +105,7 @@ $breakpoint-header-mobile-small: 500px;
 
   @media (max-width: $breakpoint-mobile) {
     flex: 1;
-    height: 4rem;
+    height: $header-height;
     justify-content: flex-end;
     padding: 0 1rem;
   }

diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html
@@ -7,7 +7,7 @@
 >
   <go-icon
     [icon]="buttonIcon"
-    iconClass="go-icon--small"
+    [iconClass]="iconClass"
     class="go-icon-button__icon"
   ></go-icon>
 </button>
diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss
@@ -17,7 +17,11 @@
     display: flex;
   }
 
-  &:hover, &:active, &:focus {
+  &:hover, &:focus {
     background: $theme-light-bg-hover;
   }
+
+  &:active {
+    background: transparent;
+  }
 }
diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts
@@ -1,18 +1,32 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output
+} from '@angular/core';
 
 @Component({
   selector: 'go-icon-button',
   templateUrl: './go-icon-button.component.html',
   styleUrls: ['./go-icon-button.component.scss']
 })
-export class GoIconButtonComponent {
+export class GoIconButtonComponent implements OnChanges {
+
+  iconClass: string = '';
+
   @Input() buttonDisabled: boolean;
   @Input() buttonIcon: string;
+  @Input() buttonSize: string = 'small';
   @Input() buttonTitle: string;
 
-  @Output() handleClick = new EventEmitter();
+  @Output() handleClick: EventEmitter<void> = new EventEmitter();
+
+  ngOnChanges(): void {
+    this.iconClass = 'go-icon--' + this.buttonSize;
+  }
 
-  public clicked(): void {
+  clicked(): void {
     this.handleClick.emit();
   }
 }
diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss
@@ -20,6 +20,7 @@ body {
 .go-layout__content {
   display: flex;
   flex-grow: 1;
+  height: calc(100vh - #{$header-height});
 }
 
 .go-layout__route-container {

diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts
@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { GoLayoutComponent } from './go-layout.component';
@@ -19,6 +20,7 @@ describe('GoLayoutComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ GoLayoutComponent ],
       imports: [
+        BrowserAnimationsModule,
         GoLoaderModule,
         GoModalModule,
         GoOffCanvasModule,

diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts
@@ -1,6 +1,4 @@
 import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
@@ -22,8 +20,6 @@ import { GoLayoutComponent } from './go-layout.component';
   ],
   imports: [
     // Angular
-    BrowserAnimationsModule,
-    BrowserModule,
     CommonModule,
     RouterModule,
     // Goponents

diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss b/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss
@@ -1,9 +1,21 @@
 @import '../../../styles/variables';
 @import '../../../styles/mixins';
 
-$loader-sizes: (small: 50px, medium: 100px, large: 150px);
-$loader-speeds: (outer: 1.25s, middle: 1s, inner: .75s);
+$loader-sizes: (
+  small: 50px,
+  medium: 100px,
+  large: 150px
+);
+
+$loader-speeds: (
+  outer: 1.25s,
+  middle: 1s,
+  inner: .75s
+);
+
 $loader-colors: (
+  light: $base-light,
+  dark: $base-dark,
   negative: $ui-color-negative,
   neutral: $ui-color-neutral,
   positive: $ui-color-positive

diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts
@@ -10,24 +10,23 @@ import { fadeTemplateAnimation } from '../../animations/fade.animation';
   ]
 })
 export class GoLoaderComponent {
+
   @Input() loaderSize: string = 'medium';
   @Input() loaderType: string = 'neutral';
 
   @HostBinding('@fadeTemplate')
   public fadeTemplate: boolean = true;
 
-  //#region Public Methods
-
   loaderClasses(): object {
     return {
       'go-loader--small': this.loaderSize === 'small',
       'go-loader--medium': this.loaderSize === 'medium',
       'go-loader--large': this.loaderSize === 'large',
+      'go-loader--light': this.loaderType === 'light',
+      'go-loader--dark': this.loaderType === 'dark',
       'go-loader--negative': this.loaderType === 'negative',
       'go-loader--neutral': this.loaderType === 'neutral',
       'go-loader--positive': this.loaderType === 'positive'
     };
   }
-
-  //#endregion
 }
diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts
@@ -1,4 +1,3 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 
 import { GoIconModule } from '../go-icon/go-icon.module';
@@ -11,7 +10,6 @@ import { NgModule } from '@angular/core';
     GoLoaderComponent
   ],
   imports: [
-    BrowserAnimationsModule,
     CommonModule,
     GoIconModule
   ],

diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts
@@ -1,19 +1,15 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { GoOffCanvasComponent } from "./go-off-canvas.component";
-import { GoOffCanvasDirective } from "./go-off-canvas.directive";
+import { GoOffCanvasComponent } from './go-off-canvas.component';
+import { GoOffCanvasDirective } from './go-off-canvas.directive';
 
 @NgModule({
   declarations: [
     GoOffCanvasComponent,
     GoOffCanvasDirective
   ],
   imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
     CommonModule
   ],
   exports: [

diff --git a/projects/go-lib/src/lib/components/go-search/go-search.module.ts b/projects/go-lib/src/lib/components/go-search/go-search.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { GoIconModule } from '../go-icon/go-icon.module';
 import { GoLoaderModule } from '../go-loader/go-loader.module';
@@ -12,8 +10,6 @@ import { GoSearchComponent } from './go-search.component';
 @NgModule({
   declarations: [GoSearchComponent],
   imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
     CommonModule,
     GoIconModule,
     GoLoaderModule,

diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html
@@ -1,17 +1,34 @@
 <div class="go-nav-item"
      [attr.title]="navItem.description">
   <a class="go-nav-item__link"
+     *ngIf="!navItem.isExternalLink"
      [routerLinkActive]="['go-nav-item__link--active']"
-     [routerLink]="[navItem.route]"
-     [routerLinkActiveOptions]="{exact:true}">
-    <go-icon [icon]="navItem.routeIcon"
-             iconClass="go-nav-group__icon"
-             *ngIf="navItem.routeIcon">
+     [routerLink]="[navItem.route]">
+    <ng-container *ngTemplateOutlet="navItemInner"></ng-container>
+  </a>
+
+  <a class="go-nav-item__link"
+     *ngIf="navItem.isExternalLink"
+     [href]="navItem.route"
+     [target]="navItem.externalLinkTarget ? navItem.externalLinkTarget : '_blank'"
+     rel="noreferrer">
+    <ng-container *ngTemplateOutlet="navItemInner"></ng-container>
+    <go-icon *ngIf="!navItem.externalLinkTarget || navItem.externalLinkTarget === '_blank'"
+             icon="launch"
+             iconClass="go-nav-group__icon">
     </go-icon>
-    <span [ngClass]="{ 'go-nav-item__title--with-icon': navItem.routeIcon }"
-          class="go-nav-item__title"
-          *ngIf="navService.navOpen">
-      {{navItem.routeTitle}}
-    </span>
   </a>
 </div>
+
+<ng-template #navItemInner>
+  <go-icon [icon]="navItem.routeIcon"
+           iconClass="go-nav-group__icon"
+           *ngIf="navItem.routeIcon">
+  </go-icon>
+  <span [ngClass]="{ 'go-nav-item__title--with-icon': navItem.routeIcon }"
+        class="go-nav-item__title"
+        *ngIf="navService.navOpen">
+    {{navItem.routeTitle}}
+  </span>
+</ng-template>
+