v1.15.1

projects/go-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangoe/goponents",
-  "version": "1.14.2",
+  "version": "1.15.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mobi/goponents.git"

projects/go-lib/src/lib/components/go-badge/go-badge.component.scss

@@ -1,5 +1,5 @@
 @import '../../../../styles/variables';
-@import '../../../../styles//mixins';
+@import '../../../../styles/mixins';
 
 .go-badge {
   @include z-index(1);

projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.html

@@ -0,0 +1,6 @@
+<span class="go-pill-badge-container">
+  <ng-content></ng-content>
+  <span class="go-pill-badge" [ngClass]="badgeStyles">
+    {{ badgeData | uppercase }}
+  </span>
+</span>

projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.scss

@@ -0,0 +1,30 @@
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+.go-pill-badge-container {
+  display: inline-flex;
+}
+
+.go-pill-badge {
+  border-radius: .75rem;
+  font-size: 10px;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+  padding: 6px 8px;
+
+  &--info {
+    border: 1px solid $ui-color-neutral;
+    color: $ui-color-neutral;
+  }
+
+  &--success {
+    border: 1px solid $ui-color-positive;
+    color: $ui-color-positive;
+  }
+
+  &--error {
+    border: 1px solid $ui-color-negative;
+    color: $ui-color-negative;
+  }
+}

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

@@ -0,0 +1,54 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { GoPillBadgeComponent } from "./go-pill-badge.component";
+
+describe("GoPillBadgeComponent", () => {
+  let component: GoPillBadgeComponent;
+  let fixture: ComponentFixture<GoPillBadgeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GoPillBadgeComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoPillBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("badgeClasses()", () => {
+    beforeEach(() => {
+      component.badgeStyles = {};
+    });
+
+    it("returns an object that sets go-pill-badge--success to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--success"]).toBeFalsy();
+
+      component.type = "success";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--success"]).toBe(true);
+    });
+
+    it("returns an object that set go-pill-badge--error to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--error"]).toBeFalsy();
+
+      component.type = "error";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--error"]).toBe(true);
+    });
+
+    it("returns an object that set go-pill-badge--info to true based on type", () => {
+      expect(component.badgeStyles["go-pill-badge--info"]).toBeFalsy();
+
+      component.type = "info";
+      component.ngOnChanges();
+      expect(component.badgeStyles["go-pill-badge--info"]).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'go-pill-badge',
+  templateUrl: './go-pill-badge.component.html',
+  styleUrls: ['./go-pill-badge.component.scss'],
+})
+export class GoPillBadgeComponent implements OnChanges {
+  badgeStyles: object;
+
+  @Input() badgeData: string;
+  @Input() type: string = 'info';
+
+  ngOnChanges(): void {
+    this.badgeStyles = this.badgeClasses();
+  }
+
+  badgeClasses(): object {
+    return {
+      'go-pill-badge--success': this.type === 'success',
+      'go-pill-badge--error': this.type === 'error',
+      'go-pill-badge--info': this.type === 'info',
+    };
+  }
+}

projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoPillBadgeComponent } from './go-pill-badge.component';
+
+@NgModule({
+  declarations: [GoPillBadgeComponent],
+  imports: [CommonModule],
+  exports: [GoPillBadgeComponent],
+})
+export class GoBadgePillModule {}

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

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { GoAccordionModule } from './components/go-accordion/go-accordion.module';
 import { GoActionSheetModule } from './components/go-action-sheet/go-action-sheet.module';
 import { GoBadgeModule } from './components/go-badge/go-badge.module';
+import { GoBadgePillModule } from './components/go-pill-badge/go-pill-badge.module';
 import { GoButtonGroupModule } from './components/go-button-group/go-button-group.module';
 import { GoButtonModule } from './components/go-button/go-button.module';
 import { GoCardModule } from './components/go-card/go-card.module';
@@ -40,6 +41,7 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoAccordionModule,
     GoActionSheetModule,
     GoBadgeModule,
+    GoBadgePillModule,
     GoButtonGroupModule,
     GoButtonModule,
     GoCardModule,
@@ -76,6 +78,7 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoAccordionModule,
     GoActionSheetModule,
     GoBadgeModule,
+    GoBadgePillModule,
     GoButtonGroupModule,
     GoButtonModule,
     GoCardModule,

projects/go-lib/src/public_api.ts

@@ -19,6 +19,10 @@ export * from './lib/components/go-action-sheet/go-panel/go-panel.component';
 export * from './lib/components/go-badge/go-badge.component';
 export * from './lib/components/go-badge/go-badge.module';
 
+// v2 Badge
+export * from './lib/components/go-pill-badge/go-pill-badge.component';
+export * from './lib/components/go-pill-badge/go-pill-badge.module';
+
 // Button
 export * from './lib/components/go-button/go-split-button-option.model';
 export * from './lib/components/go-button/go-button.component';

projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html

@@ -1,139 +1 @@
-<header class="go-page-title">
-  <h1 class="go-heading-1">{{ pageTitle }}</h1>
-  <a
-  [href]="linkToSource"
-  target="_blank">
-    <go-button buttonVariant="neutral"> View on GitHub </go-button>
-  </a>
-</header>
-
-<section class="go-container">
-  <go-card class="go-column go-column--100" id="usage">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Usage</h2>
-      <go-copy cardId="usage" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container class="go-container" go-card-content>
-
-      <div class="go-column go-column--100">
-        <!-- Intro -->
-        <p class="go-body-copy">
-          The <code class="code-block--inline">&lt;go-badge&gt;</code>
-          component should be used for times when we want to show a short notification
-          to a user over an icon for more information. A good example of this would be
-          the number of notifications a user has over an icon that goes to their
-          notifications.
-        </p>
-      </div>
-
-      <div class="go-column go-column--100">
-        <!-- Bindings -->
-        <h3 class="go-heading-3">Bindings</h3>
-        <code [highlight]="componentBindings"></code>
-      </div>
-
-      <div class="go-column go-column--100">
-        <h4 class="go-heading-4">badgeData</h4>
-        <p class="go-body-copy">
-          This is the text or data that we want to show up inside of the badge
-        </p>
-      </div>
-
-      <div class="go-column go-column--100">
-        <h4 class="go-heading-4">badgeColor</h4>
-        <p class="go-body-copy">
-          The color can be one of three things <code class="code-block--inline">neutral</code>,
-          <code class="code-block--inline">positive</code> or <code class="code-block--inline">negative</code>.
-          These will denote what type of badge it is whether it's a good thing, bad thing or just information. The badgeColor
-          defaults to `neutral`
-        </p>
-      </div>
-
-      <div class="go-column go-column--100 go-column--no-padding">
-        <h4 class="go-heading-4">displayData</h4>
-        <p class="go-body-copy">
-          This can be used to override whether the information inside of the badge shows up or not.
-          Setting this to false will cause the badge to just be an empty circle without displaying
-          the `badgeData`.
-        </p>
-      </div>
-
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="basic-example">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Basic Example</h2>
-      <go-copy cardId="basic-example" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <p class="go-body-copy">
-        The badge uses content projection to apply itself to an inline element inside of it. You
-        can apply it to any element by wrapping the element in the <code class="code-block--inline">go-badge</code>
-      </p>
-
-      <h3 class="go-heading-3">Icon</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50 go-column--no-padding">
-          <code [highlight]="iconBadge"></code>
-        </div>
-        <div class="go-column go-column--50 go-column--no-padding">
-          <go-badge badgeData="12">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="badge-color">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Badge Color</h2>
-      <go-copy cardId="badge-color" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <h3 class="go-heading-3">Positive</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50">
-          <code [highlight]="iconBadgePositive"></code>
-        </div>
-        <div class="go-column go-column--50">
-          <go-badge badgeData="12" badgeColor="positive">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-
-      <h3 class="go-heading-3">Negative</h3>
-      <section class="go-container">
-        <div class="go-column go-column--50 go-column--no-padding">
-          <code [highlight]="iconBadgeNegative"></code>
-        </div>
-        <div class="go-column go-column--50 go-column--no-padding">
-          <go-badge badgeData="12" badgeColor="negative">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-
-  <go-card class="go-column go-column--100" id="display-data">
-    <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Display Data</h2>
-      <go-copy cardId="display-data" goCopyCardLink></go-copy>
-    </ng-container>
-    <ng-container go-card-content>
-      <section class="go-container">
-        <div class="go-column go-column--75 go-column--no-padding">
-          <code [highlight]="iconBadgeDisplay"></code>
-        </div>
-        <div class="go-column go-column--25 go-column--no-padding">
-          <go-badge badgeData="really long text that we want to hide" [displayData]="false">
-            <go-icon icon="notifications"></go-icon>
-          </go-badge>
-        </div>
-      </section>
-    </ng-container>
-  </go-card>
-</section>
+<app-sub-nav [menuItems]="menuItems"></app-sub-nav>

projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavGroup } from '../../../../../../../go-lib/src/public_api';
+
+@Component({
+  selector: 'app-badge-docs',
+  templateUrl: './badge-docs.component.html'
+})
+export class BadgeDocsComponent {
+  menuItems: Array<NavGroup> = [
+    {
+      routeTitle: 'Badges', subRoutes: [
+        { route: './', routeTitle: 'Positioned' },
+        { route: './pill', routeTitle: 'Pill' },
+      ]
+    }
+  ];
+}