v1.5.9

README.md

@@ -1,6 +1,6 @@
 # Goponents
 
-###### Currently `v1.5.8`
+###### Currently `v1.5.9`
 
 This project houses a set of UI components for Angular 7+ and designed around the 'Go' design system.
 

projects/go-lib/package.json

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

projects/go-lib/src/lib/components/go-button/go-button.component.html

@@ -3,6 +3,7 @@
   (click)="clicked()"
   [disabled]="buttonDisabled || isProcessing"
   [ngClass]="classObject"
+  [class.go-button--icon-only]="buttonContent.childNodes.length == 0"
   [type]="buttonType">
   <span class="go-button__loader"
         *ngIf="isProcessing"
@@ -19,7 +20,7 @@
     [disabled]="buttonDisabled || isProcessing"
     *ngIf="buttonIcon">
   </go-icon>
-  <span #buttonContent>
+  <span #buttonContent class="go-button__text">
     <ng-content></ng-content>
   </span>
 </button>

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

@@ -42,15 +42,14 @@
 
 .go-button__icon {
   display: inline-flex;
-  padding-right: .5rem;
 }
 
 .go-button--icon-only {
   padding: calc(.625rem - 1px) .625rem;
+}
 
-  .go-button__icon {
-    padding: 0;
-  }
+.go-button__icon ~ .go-button__text:not(:empty) {
+  padding-left: .5rem;
 }
 
 .go-button--loading {

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

@@ -105,37 +105,6 @@ describe('GoButtonComponent', () => {
       expect(component.classObject['go-button--dark']).toBe(true);
       expect(component.classObject['go-button--loading']).toBe(true);
     });
-
-    it('returns an object that sets go-button--icon-only to false if buttonIcon is set and there is content in the button', () => {
-      component.buttonIcon = 'wizard';
-
-      component.ngOnChanges();
-
-      expect(component.classObject['go-button--icon-only']).toBeTruthy();
-
-      const goButtonTemplate: HTMLElement = fixture.nativeElement;
-      const buttonContentElement: HTMLButtonElement = goButtonTemplate.querySelector('button span:not(.go-button__loader)');
-      buttonContentElement.innerHTML = 'Harry Potter';
-      component.ngOnChanges();
-
-      expect(component.classObject['go-button--icon-only']).toBeFalsy();
-    });
-
-    it('returns an object that sets go-button--icon-only to true if buttonIcon is set and there is no content in the button', () => {
-      component.buttonIcon = 'wizard';
-      const goButtonTemplate: HTMLElement = fixture.nativeElement;
-      const buttonContentElement: HTMLButtonElement = goButtonTemplate.querySelector('button span:not(.go-button__loader)');
-      buttonContentElement.innerHTML = 'Harry Potter';
-
-      component.ngOnChanges();
-
-      expect(component.classObject['go-button--icon-only']).toBeFalsy();
-
-      buttonContentElement.innerHTML = null;
-      component.ngOnChanges();
-
-      expect(component.classObject['go-button--icon-only']).toBeTruthy();
-    });
   });
 
   describe('the template', () => {

projects/go-lib/src/lib/components/go-button/go-button.component.ts

@@ -1,12 +1,10 @@
 import {
   Component,
-  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
   OnInit,
   Output,
-  ViewChild
 } from '@angular/core';
 import { fadeTemplateAnimation } from '../../animations/fade.animation';
 
@@ -30,8 +28,6 @@ export class GoButtonComponent implements OnChanges, OnInit {
 
   @Output() handleClick: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  @ViewChild('buttonContent') buttonContent: ElementRef;
-
   clicked(): void {
     this.handleClick.emit(this.isProcessing);
   }
@@ -53,7 +49,6 @@ export class GoButtonComponent implements OnChanges, OnInit {
     this.classObject = {
       'go-button--dark': this.useDarkTheme,
       'go-button--loading': this.isProcessing,
-      'go-button--icon-only': this.buttonIcon && !this.buttonContent.nativeElement.innerHTML
     };
 
     this.classObject['go-button--' + this.buttonVariant] = true;

projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts

@@ -0,0 +1,54 @@
+import { Component, ElementRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GoCopyDocLinkDirective } from './go-copy-doc-link.directive';
+import { GoCopyComponent } from './go-copy.component';
+import { GoCopyModule } from './go-copy.module';
+import { GoIconModule } from '../go-icon/go-icon.module';
+
+@Component({
+  template: `<go-copy cardId="testId" goCopyDocLink></go-copy>`
+})
+class TestParentComponent {}
+
+describe('GoCopyDocLinkDirective', () => {
+  let fixture: ComponentFixture<TestParentComponent>;
+  let elementRef: ElementRef;
+  let goCopyComponent: GoCopyComponent;
+  let directive: GoCopyDocLinkDirective;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TestParentComponent
+      ],
+      imports: [
+        GoCopyModule,
+        GoIconModule
+      ]
+    });
+
+    fixture = TestBed.createComponent(TestParentComponent);
+    elementRef = fixture.elementRef;
+    goCopyComponent = TestBed.createComponent(GoCopyComponent).componentInstance;
+    directive = new GoCopyDocLinkDirective(elementRef, goCopyComponent);
+  });
+
+  it('creates an instance', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  describe('ngOnInit', () => {
+    it('adds a class of go-copy--card-header and sets the title of the element', () => {
+      directive.ngOnInit();
+      expect(elementRef.nativeElement.classList).toContain('go-copy--card-header');
+      expect(elementRef.nativeElement.title).toBe('Copy the URL to this card');
+    });
+
+
+    it('sets the text of the element with the current url and an id selector', () => {
+      directive.cardId = 'testId';
+      directive.ngOnInit();
+      expect(goCopyComponent.text).toBe('http://localhost:9876/context.html/#testId');
+    });
+  });
+});

projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Host, Input, OnInit } from '@angular/core';
+import { GoCopyComponent } from './go-copy.component';
+
+@Directive({
+  selector: '[goCopyDocLink]'
+})
+export class GoCopyDocLinkDirective implements OnInit {
+
+  @Input() cardId: string;
+
+  constructor(
+    private elementRef: ElementRef,
+    @Host() private baseComponent: GoCopyComponent
+  ) { }
+
+  ngOnInit(): void {
+    this.elementRef.nativeElement.classList.add('go-copy--card-header');
+    this.elementRef.nativeElement.title = 'Copy the URL to this card';
+    this.baseComponent.text = `${window.location.href}/#${this.cardId}`;
+  }
+
+}

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

@@ -2,6 +2,12 @@
   position: relative;
 }
 
+:host.go-copy--card-header {
+  position: absolute;
+  margin-left: 0.75rem;
+  padding-top: 0.25rem;
+}
+
 .go-copy__textarea {
   left: 99999px;
   position: absolute;

projects/go-lib/src/lib/components/go-copy/go-copy.module.ts

@@ -3,17 +3,20 @@ import { CommonModule } from '@angular/common';
 
 import { GoCopyComponent } from './go-copy.component';
 import { GoIconModule } from '../go-icon/go-icon.module';
+import { GoCopyDocLinkDirective } from './go-copy-doc-link.directive';
 
 @NgModule({
   declarations: [
-    GoCopyComponent
+    GoCopyComponent,
+    GoCopyDocLinkDirective
   ],
   imports: [
     CommonModule,
     GoIconModule
   ],
   exports: [
-    GoCopyComponent
+    GoCopyComponent,
+    GoCopyDocLinkDirective
   ]
 })
 

projects/go-lib/src/styles/_typography.scss

@@ -32,6 +32,10 @@ strong {
   @extend %element--no-margin;
 }
 
+.go-heading--inline {
+  display: inline;
+}
+
 .go-link {
   @include transition(all);