From eef92a97a9a28865c5b718269d20b51ffe0521d3 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 12 Jun 2020 16:10:22 -0400 Subject: [PATCH 01/10] Create directive --- .../go-copy/go-copy-doc-link.directive.ts | 22 +++++++++++++++++++ .../components/go-copy/go-copy.component.scss | 6 +++++ .../lib/components/go-copy/go-copy.module.ts | 7 ++++-- 3 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts new file mode 100644 index 000000000..eded3f2b9 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts @@ -0,0 +1,22 @@ +import { Directive, ElementRef, EventEmitter, OnInit, Output } from '@angular/core'; +import { Router } from '@angular/router'; + +@Directive({ + selector: '[goCopyDocLink]' +}) +export class GoCopyDocLinkDirective implements OnInit { + + @Output() url: EventEmitter = new EventEmitter(); + + constructor( + private elementRef: ElementRef, + private router: Router + ) { + this.url.emit(this.router.url); + } + + ngOnInit(): void { + this.elementRef.nativeElement.classList.add('go-copy--card-header'); + } + +} diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy.component.scss b/projects/go-lib/src/lib/components/go-copy/go-copy.component.scss index d121dc970..e03c62329 100644 --- a/projects/go-lib/src/lib/components/go-copy/go-copy.component.scss +++ b/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; diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy.module.ts b/projects/go-lib/src/lib/components/go-copy/go-copy.module.ts index 93395f9b8..9e546a7c5 100644 --- a/projects/go-lib/src/lib/components/go-copy/go-copy.module.ts +++ b/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 ] }) From 09e579a34d4c9638238fa4a86d8aa13310c4f55e Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 12 Jun 2020 16:33:34 -0400 Subject: [PATCH 02/10] Set copy text and title via directive --- .../go-copy/go-copy-doc-link.directive.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts index eded3f2b9..3719cabfb 100644 --- a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts +++ b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts @@ -1,22 +1,20 @@ -import { Directive, ElementRef, EventEmitter, OnInit, Output } from '@angular/core'; -import { Router } from '@angular/router'; +import { Directive, ElementRef, Host, OnInit } from '@angular/core'; +import { GoCopyComponent } from './go-copy.component'; @Directive({ selector: '[goCopyDocLink]' }) export class GoCopyDocLinkDirective implements OnInit { - @Output() url: EventEmitter = new EventEmitter(); - constructor( private elementRef: ElementRef, - private router: Router - ) { - this.url.emit(this.router.url); - } + @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; } } From f6128f454e628bf9f05c8edce82b009473c313c4 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 12 Jun 2020 16:34:11 -0400 Subject: [PATCH 03/10] Add go-header--inline class --- projects/go-lib/src/styles/_typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/go-lib/src/styles/_typography.scss b/projects/go-lib/src/styles/_typography.scss index fe4cfede3..7b947d4be 100644 --- a/projects/go-lib/src/styles/_typography.scss +++ b/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); From db34320f2527e2d94a852fd668883ebaa63b7cb5 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 15 Jun 2020 10:42:56 -0400 Subject: [PATCH 04/10] Add cardId Input --- .../lib/components/go-copy/go-copy-doc-link.directive.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts index 3719cabfb..616a80b51 100644 --- a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts +++ b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Host, OnInit } from '@angular/core'; +import { Directive, ElementRef, Host, Input, OnInit } from '@angular/core'; import { GoCopyComponent } from './go-copy.component'; @Directive({ @@ -6,6 +6,8 @@ import { GoCopyComponent } from './go-copy.component'; }) export class GoCopyDocLinkDirective implements OnInit { + @Input() cardId: string; + constructor( private elementRef: ElementRef, @Host() private baseComponent: GoCopyComponent @@ -13,8 +15,8 @@ export class GoCopyDocLinkDirective implements OnInit { 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.elementRef.nativeElement.title = 'Copy the URL to this card'; + this.baseComponent.text = `${window.location.href}/#${this.cardId}`; } } From 46bcd25f0f92107002ef80526e5385582c0dfb5c Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 15 Jun 2020 14:47:01 -0400 Subject: [PATCH 05/10] Add tests --- .../go-copy-doc-link.directive.spec.ts | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts new file mode 100644 index 000000000..3f6d8fd2b --- /dev/null +++ b/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: `` +}) +class TestParentComponent {} + +fdescribe('GoCopyDocLinkDirective', () => { + let fixture: ComponentFixture; + 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'); + }); + }); +}); From 69fd65c621eb6b75028e205dbd02a1be176e1866 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 15 Jun 2020 16:42:06 -0400 Subject: [PATCH 06/10] fdescribe --- .../lib/components/go-copy/go-copy-doc-link.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts index 3f6d8fd2b..469c77efa 100644 --- a/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts +++ b/projects/go-lib/src/lib/components/go-copy/go-copy-doc-link.directive.spec.ts @@ -10,7 +10,7 @@ import { GoIconModule } from '../go-icon/go-icon.module'; }) class TestParentComponent {} -fdescribe('GoCopyDocLinkDirective', () => { +describe('GoCopyDocLinkDirective', () => { let fixture: ComponentFixture; let elementRef: ElementRef; let goCopyComponent: GoCopyComponent; From 57585cac3cfaf16724725bd8545cc28af48d95a2 Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Tue, 16 Jun 2020 12:33:14 -0400 Subject: [PATCH 07/10] use css only to manage padding for button --- .../lib/components/go-button/go-button.component.html | 2 +- .../lib/components/go-button/go-button.component.scss | 9 ++------- .../src/lib/components/go-button/go-button.component.ts | 5 ----- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.html b/projects/go-lib/src/lib/components/go-button/go-button.component.html index 724d8951a..84f3217f7 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.html +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.html @@ -19,7 +19,7 @@ [disabled]="buttonDisabled || isProcessing" *ngIf="buttonIcon"> - + diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss index f7bde9c8a..00d3f6f39 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.scss +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.scss @@ -42,15 +42,10 @@ .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 { diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.ts b/projects/go-lib/src/lib/components/go-button/go-button.component.ts index dc92bcbd0..2357934a4 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.ts +++ b/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 = new EventEmitter(); - @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; From 3ea3dbc55c2c1829d7d66e15e883ff4192f89fae Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Tue, 16 Jun 2020 12:49:00 -0400 Subject: [PATCH 08/10] remove tests --- .../go-button/go-button.component.spec.ts | 31 ------------------- 1 file changed, 31 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.spec.ts b/projects/go-lib/src/lib/components/go-button/go-button.component.spec.ts index da522c533..3edbfe12c 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.spec.ts +++ b/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', () => { From 834bfde9dc1681b8346f20a06ea50f9d33e2b57c Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Wed, 17 Jun 2020 13:55:52 -0400 Subject: [PATCH 09/10] fix padding on icon only button to make it a square --- .../src/lib/components/go-button/go-button.component.html | 3 ++- .../src/lib/components/go-button/go-button.component.scss | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.html b/projects/go-lib/src/lib/components/go-button/go-button.component.html index 84f3217f7..2b79c49ec 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.html +++ b/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"> - + diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss index 00d3f6f39..cc43c140f 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.scss +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.scss @@ -44,6 +44,10 @@ display: inline-flex; } +.go-button--icon-only { + padding: calc(.625rem - 1px) .625rem; +} + .go-button__icon ~ .go-button__text:not(:empty) { padding-left: .5rem; } From 25fb751c451a8f558333acecccfb7e8ce0734e54 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 18 Jun 2020 15:54:43 -0400 Subject: [PATCH 10/10] Updates app for 1.5.9 --- README.md | 2 +- projects/go-lib/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 35a82f46f..bedd1fac1 100644 --- a/README.md +++ b/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. diff --git a/projects/go-lib/package.json b/projects/go-lib/package.json index 51eee1e8f..298bf5543 100644 --- a/projects/go-lib/package.json +++ b/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"