From 1932ea5f1c51e040886b6344c0e8edf7e4e8452e Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Fri, 13 Jul 2018 14:49:27 -0400 Subject: [PATCH 01/23] sky-icon component --- .../icon/fixtures/icon.component.fixture.html | 1 + .../icon/fixtures/icon.component.fixture.ts | 9 ++++ src/modules/icon/icon.component.html | 5 ++ src/modules/icon/icon.component.spec.ts | 51 +++++++++++++++++++ src/modules/icon/icon.component.ts | 16 ++++++ src/modules/icon/icon.module.ts | 17 +++++++ src/modules/icon/index.ts | 2 + 7 files changed, 101 insertions(+) create mode 100644 src/modules/icon/fixtures/icon.component.fixture.html create mode 100644 src/modules/icon/fixtures/icon.component.fixture.ts create mode 100644 src/modules/icon/icon.component.html create mode 100644 src/modules/icon/icon.component.spec.ts create mode 100644 src/modules/icon/icon.component.ts create mode 100644 src/modules/icon/icon.module.ts create mode 100644 src/modules/icon/index.ts diff --git a/src/modules/icon/fixtures/icon.component.fixture.html b/src/modules/icon/fixtures/icon.component.fixture.html new file mode 100644 index 000000000..3e4c4a456 --- /dev/null +++ b/src/modules/icon/fixtures/icon.component.fixture.html @@ -0,0 +1 @@ + diff --git a/src/modules/icon/fixtures/icon.component.fixture.ts b/src/modules/icon/fixtures/icon.component.fixture.ts new file mode 100644 index 000000000..c0a33462a --- /dev/null +++ b/src/modules/icon/fixtures/icon.component.fixture.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-test-cmp', + templateUrl: './icon.component.fixture.html' +}) +export class IconTestComponent { + public icon: string = 'circle'; +} diff --git a/src/modules/icon/icon.component.html b/src/modules/icon/icon.component.html new file mode 100644 index 000000000..9d4e574a7 --- /dev/null +++ b/src/modules/icon/icon.component.html @@ -0,0 +1,5 @@ + diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts new file mode 100644 index 000000000..4ec8080a2 --- /dev/null +++ b/src/modules/icon/icon.component.spec.ts @@ -0,0 +1,51 @@ +import { + TestBed, + ComponentFixture +} from '@angular/core/testing'; + +import { + SkyIconModule +} from '.'; + +import { + IconTestComponent +} from './fixtures/icon.component.fixture'; +import { + expect +} from '@blackbaud/skyux-builder/runtime/testing/browser'; + +describe('Icon component', () => { + let fixture: ComponentFixture; + let cmp: IconTestComponent; + let element: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + IconTestComponent + ], + imports: [ + SkyIconModule + ] + }); + + fixture = TestBed.createComponent(IconTestComponent); + cmp = fixture.componentInstance as IconTestComponent; + element = fixture.nativeElement as HTMLElement; + }); + + it ('should display an icon based on the given icon', () => { + fixture.detectChanges(); + expect(cmp.icon).toBe('circle'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle'); + expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(true); + }); + + it ('should display something other than circle', () => { + cmp.icon = 'broom'; + fixture.detectChanges(); + expect(cmp.icon).toBe('broom'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom'); + expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(true); + }); +}); diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts new file mode 100644 index 000000000..cb7b6646a --- /dev/null +++ b/src/modules/icon/icon.component.ts @@ -0,0 +1,16 @@ +import { + Component, + Input, + ChangeDetectionStrategy +} from '@angular/core'; + +@Component({ + selector: 'sky-icon', + styleUrls: ['./icon.component.scss'], + templateUrl: './icon.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SkyIconComponent { + @Input() + public icon: string = ''; +} diff --git a/src/modules/icon/icon.module.ts b/src/modules/icon/icon.module.ts new file mode 100644 index 000000000..f5c522510 --- /dev/null +++ b/src/modules/icon/icon.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SkyIconComponent } from './icon.component'; + +@NgModule({ + declarations: [ + SkyIconComponent + ], + imports: [ + CommonModule + ], + exports: [ + SkyIconComponent + ] +}) +export class SkyIconModule { } diff --git a/src/modules/icon/index.ts b/src/modules/icon/index.ts new file mode 100644 index 000000000..0bf3c38f1 --- /dev/null +++ b/src/modules/icon/index.ts @@ -0,0 +1,2 @@ +export { SkyIconComponent } from './icon.component'; +export { SkyIconModule } from './icon.module'; From 2c37daab3dc8163c55ee339e51ef8cfac46cabef Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Mon, 16 Jul 2018 09:23:50 -0400 Subject: [PATCH 02/23] finishing up component --- src/modules/icon/icon.component.spec.ts | 5 +++-- src/modules/icon/icon.component.ts | 4 ++-- src/modules/icon/icon.module.ts | 4 ---- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index 4ec8080a2..4432e43aa 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -1,6 +1,6 @@ import { - TestBed, - ComponentFixture + ComponentFixture, + TestBed } from '@angular/core/testing'; import { @@ -10,6 +10,7 @@ import { import { IconTestComponent } from './fixtures/icon.component.fixture'; + import { expect } from '@blackbaud/skyux-builder/runtime/testing/browser'; diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts index cb7b6646a..4386c71a8 100644 --- a/src/modules/icon/icon.component.ts +++ b/src/modules/icon/icon.component.ts @@ -1,7 +1,7 @@ import { + ChangeDetectionStrategy, Component, - Input, - ChangeDetectionStrategy + Input } from '@angular/core'; @Component({ diff --git a/src/modules/icon/icon.module.ts b/src/modules/icon/icon.module.ts index f5c522510..79ca5f612 100644 --- a/src/modules/icon/icon.module.ts +++ b/src/modules/icon/icon.module.ts @@ -1,5 +1,4 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { SkyIconComponent } from './icon.component'; @@ -7,9 +6,6 @@ import { SkyIconComponent } from './icon.component'; declarations: [ SkyIconComponent ], - imports: [ - CommonModule - ], exports: [ SkyIconComponent ] From 534682e9c1e24fb0a5dbb19681d0e7b95a4408f2 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Mon, 16 Jul 2018 09:38:36 -0400 Subject: [PATCH 03/23] created demo for sky-icon component --- src/demos/icon/icon-demo.component.html | 1 + src/demos/icon/icon-demo.component.ts | 9 +++++++++ src/demos/icon/index.ts | 1 + 3 files changed, 11 insertions(+) create mode 100644 src/demos/icon/icon-demo.component.html create mode 100644 src/demos/icon/icon-demo.component.ts create mode 100644 src/demos/icon/index.ts diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html new file mode 100644 index 000000000..c5caa9fb0 --- /dev/null +++ b/src/demos/icon/icon-demo.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/demos/icon/icon-demo.component.ts b/src/demos/icon/icon-demo.component.ts new file mode 100644 index 000000000..b0347fd6a --- /dev/null +++ b/src/demos/icon/icon-demo.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-icon-demo', + templateUrl: './icon-demo.component.html' +}) +export class SkyActionButtonDemoComponent { + public icon: string = 'circle'; +} diff --git a/src/demos/icon/index.ts b/src/demos/icon/index.ts new file mode 100644 index 000000000..bebf18128 --- /dev/null +++ b/src/demos/icon/index.ts @@ -0,0 +1 @@ +export * from './icon-demo.component'; \ No newline at end of file From 47922443036603fc7fed4cbd02ab576f34a398ec Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Mon, 16 Jul 2018 10:33:01 -0400 Subject: [PATCH 04/23] added imports and exports to core, demo, and index --- src/core.ts | 3 +++ src/demo.ts | 2 ++ src/demos/demo.service.ts | 17 +++++++++++++++++ src/demos/icon/icon-demo.component.ts | 2 +- src/demos/index.ts | 1 + 5 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/core.ts b/src/core.ts index cbce611a5..d662e66a0 100644 --- a/src/core.ts +++ b/src/core.ts @@ -33,6 +33,7 @@ import { SkyFilterModule } from './modules/filter'; import { SkyFluidGridModule } from './modules/fluid-grid/fluid-grid.module'; import { SkyFlyoutModule } from './modules/flyout/flyout.module'; import { SkyGridModule } from './modules/grid'; +import { SkyIconModule } from './modules/icon'; import { SkyHelpInlineModule } from './modules/help-inline'; import { SkyInfiniteScrollModule } from './modules/infinite-scroll'; import { SkyKeyInfoModule } from './modules/key-info'; @@ -95,6 +96,7 @@ import { SkyWaitModule } from './modules/wait'; SkyFluidGridModule, SkyFlyoutModule, SkyGridModule, + SkyIconModule, SkyHelpInlineModule, SkyInfiniteScrollModule, SkyKeyInfoModule, @@ -160,6 +162,7 @@ export * from './modules/fluid-grid'; export * from './modules/flyout'; export * from './modules/format'; export * from './modules/grid'; +export * from './modules/icon'; export * from './modules/help-inline'; export * from './modules/infinite-scroll'; export * from './modules/key-info'; diff --git a/src/demo.ts b/src/demo.ts index f4e2e0d45..c192beadf 100644 --- a/src/demo.ts +++ b/src/demo.ts @@ -38,6 +38,7 @@ import { SkyFlyoutDemoComponent, SkyGridDemoComponent, SkyHelpInlineDemoComponent, + SkyIconDemoComponent, SkyInfiniteScrollDemoComponent, SkyKeyInfoDemoComponent, SkyLabelDemoComponent, @@ -119,6 +120,7 @@ const components = [ SkyFlyoutDemoComponent, SkyFlyoutDemoInternalComponent, SkyGridDemoComponent, + SkyIconDemoComponent, SkyHelpInlineDemoComponent, SkyInfiniteScrollDemoComponent, SkyKeyInfoDemoComponent, diff --git a/src/demos/demo.service.ts b/src/demos/demo.service.ts index 218f667f7..015b9c12f 100644 --- a/src/demos/demo.service.ts +++ b/src/demos/demo.service.ts @@ -24,6 +24,7 @@ import { SkyFlyoutDemoComponent, SkyGridDemoComponent, SkyHelpInlineDemoComponent, + SkyIconDemoComponent, SkyInfiniteScrollDemoComponent, SkyKeyInfoDemoComponent, SkyLabelDemoComponent, @@ -451,6 +452,22 @@ export class SkyDemoService { } ] }, + { + name: 'Icon', + component: SkyIconDemoComponent, + files: [ + { + name: 'icon-demo.component.html', + fileContents: require('!!raw-loader!./icon/icon-demo.component.html') + }, + { + name: 'icon-demo.component.ts', + fileContents: require('!!raw-loader!./icon/icon-demo.component.ts'), + componentName: 'SkyIconDemoComponent', + bootstrapSelector: 'sky-icon-demo' + } + ] + }, { name: 'Infinite scroll', component: SkyInfiniteScrollDemoComponent, diff --git a/src/demos/icon/icon-demo.component.ts b/src/demos/icon/icon-demo.component.ts index b0347fd6a..20b9ae935 100644 --- a/src/demos/icon/icon-demo.component.ts +++ b/src/demos/icon/icon-demo.component.ts @@ -4,6 +4,6 @@ import { Component } from '@angular/core'; selector: 'sky-icon-demo', templateUrl: './icon-demo.component.html' }) -export class SkyActionButtonDemoComponent { +export class SkyIconDemoComponent { public icon: string = 'circle'; } diff --git a/src/demos/index.ts b/src/demos/index.ts index 2bcbeddd9..465d6fe7a 100644 --- a/src/demos/index.ts +++ b/src/demos/index.ts @@ -17,6 +17,7 @@ export * from './fluid-grid'; export * from './flyout'; export * from './grid'; export * from './help-inline'; +export * from './icon'; export * from './infinite-scroll'; export * from './key-info'; export * from './label'; From 9b898bf8a39289ea34ddc11236f8f587be7a442e Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Mon, 16 Jul 2018 14:24:22 -0400 Subject: [PATCH 05/23] Added the visual test --- .../src/app/icon/icon-visual.component.html | 2 ++ .../src/app/icon/icon-visual.component.ts | 9 +++++++++ .../src/app/icon/icon.visual-spec.ts | 15 +++++++++++++++ skyux-spa-visual-tests/src/app/icon/index.html | 1 + 4 files changed, 27 insertions(+) create mode 100644 skyux-spa-visual-tests/src/app/icon/icon-visual.component.html create mode 100644 skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts create mode 100644 skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts create mode 100644 skyux-spa-visual-tests/src/app/icon/index.html diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html new file mode 100644 index 000000000..342260ad9 --- /dev/null +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html @@ -0,0 +1,2 @@ +This is a circle +This is a broom \ No newline at end of file diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts new file mode 100644 index 000000000..8c7e6d61e --- /dev/null +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'icon-visual', + templateUrl: './icon-visual.component.html' +}) +export class IconVisualComponent { + public icon: string = ''; +} \ No newline at end of file diff --git a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts new file mode 100644 index 000000000..d77e7ee59 --- /dev/null +++ b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts @@ -0,0 +1,15 @@ +import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; + +describe('icon', () => { + it('should show the icon', () => { + return SkyVisualTest + .setupTest('icon') + .then(() => { + SkyVisualTest.moveCursorOffScreen(); + return SkyVisualTest.compareScreenshot({ + screenshotName: 'icon', + selector: '#screenshot-icon' + }); + }); + }); +}); \ No newline at end of file diff --git a/skyux-spa-visual-tests/src/app/icon/index.html b/skyux-spa-visual-tests/src/app/icon/index.html new file mode 100644 index 000000000..6c051cf61 --- /dev/null +++ b/skyux-spa-visual-tests/src/app/icon/index.html @@ -0,0 +1 @@ + \ No newline at end of file From b58160dc9040507c51c7473e3b345aa81b21d37a Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Mon, 16 Jul 2018 16:21:35 -0400 Subject: [PATCH 06/23] Fixing unit tests --- src/modules/icon/icon.component.spec.ts | 6 +++--- src/modules/icon/icon.component.ts | 1 - src/modules/icon/icon.module.ts | 4 ++++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index 4432e43aa..fa21368fd 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -15,7 +15,7 @@ import { expect } from '@blackbaud/skyux-builder/runtime/testing/browser'; -describe('Icon component', () => { +fdescribe('Icon component', () => { let fixture: ComponentFixture; let cmp: IconTestComponent; let element: HTMLElement; @@ -39,7 +39,7 @@ describe('Icon component', () => { fixture.detectChanges(); expect(cmp.icon).toBe('circle'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle'); - expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(true); + expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); it ('should display something other than circle', () => { @@ -47,6 +47,6 @@ describe('Icon component', () => { fixture.detectChanges(); expect(cmp.icon).toBe('broom'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom'); - expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(true); + expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); }); diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts index 4386c71a8..05645f8f7 100644 --- a/src/modules/icon/icon.component.ts +++ b/src/modules/icon/icon.component.ts @@ -6,7 +6,6 @@ import { @Component({ selector: 'sky-icon', - styleUrls: ['./icon.component.scss'], templateUrl: './icon.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) diff --git a/src/modules/icon/icon.module.ts b/src/modules/icon/icon.module.ts index 79ca5f612..d95fd7539 100644 --- a/src/modules/icon/icon.module.ts +++ b/src/modules/icon/icon.module.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; import { SkyIconComponent } from './icon.component'; +import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ SkyIconComponent ], + imports: [ + CommonModule + ], exports: [ SkyIconComponent ] From 57eeff6f24317752b3c00ee6715cb8c10eefefb2 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Tue, 17 Jul 2018 09:11:05 -0400 Subject: [PATCH 07/23] Fixing TSLint issues --- skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts | 2 +- skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts index 8c7e6d61e..6399cfd81 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts @@ -6,4 +6,4 @@ import { Component } from '@angular/core'; }) export class IconVisualComponent { public icon: string = ''; -} \ No newline at end of file +} diff --git a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts index d77e7ee59..f8a8c39dc 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts @@ -1,6 +1,6 @@ import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; -describe('icon', () => { +fdescribe('icon', () => { it('should show the icon', () => { return SkyVisualTest .setupTest('icon') @@ -12,4 +12,4 @@ describe('icon', () => { }); }); }); -}); \ No newline at end of file +}); From 581ddcb7241b824c04861ffe494a909b1a44a4b1 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Tue, 17 Jul 2018 10:44:44 -0400 Subject: [PATCH 08/23] Fixed visual test --- .../src/app/icon/icon-visual.component.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html index 342260ad9..8b58409fb 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html @@ -1,2 +1,4 @@ -This is a circle -This is a broom \ No newline at end of file +
+ This is a circle + This is a broom +
\ No newline at end of file From 752c8cbe26e5d6639bea74647f11151caa656ba0 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Tue, 17 Jul 2018 10:51:37 -0400 Subject: [PATCH 09/23] updating visual test --- skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts index f8a8c39dc..69acc1b1f 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts @@ -1,6 +1,6 @@ import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; -fdescribe('icon', () => { +describe('icon', () => { it('should show the icon', () => { return SkyVisualTest .setupTest('icon') From 26a7c87469ea7e8ffe954c09ee2a2a8ed851fa43 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Tue, 17 Jul 2018 11:22:19 -0400 Subject: [PATCH 10/23] fixing TSLint errors --- src/demos/icon/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demos/icon/index.ts b/src/demos/icon/index.ts index bebf18128..5b6cb9876 100644 --- a/src/demos/icon/index.ts +++ b/src/demos/icon/index.ts @@ -1 +1 @@ -export * from './icon-demo.component'; \ No newline at end of file +export * from './icon-demo.component'; From 16cd7aaf95d6f57a26073a730f6b6fc36bd4982d Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Tue, 17 Jul 2018 13:40:59 -0400 Subject: [PATCH 11/23] fdescribe to describe --- src/modules/icon/icon.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index fa21368fd..62ce118bc 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -15,7 +15,7 @@ import { expect } from '@blackbaud/skyux-builder/runtime/testing/browser'; -fdescribe('Icon component', () => { +describe('Icon component', () => { let fixture: ComponentFixture; let cmp: IconTestComponent; let element: HTMLElement; From 12eba0503a0c6df4997c3c31137243fffc94de73 Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Wed, 18 Jul 2018 10:49:24 -0400 Subject: [PATCH 12/23] Merged master --- .../src/app/icon/icon-visual.component.html | 8 ++--- .../src/app/icon/icon-visual.component.ts | 12 +++---- .../src/app/icon/icon.visual-spec.ts | 4 ++- ...orpicker-template-driven-demo.component.ts | 2 +- src/demos/icon/icon-demo.component.html | 2 +- src/demos/icon/icon-demo.component.ts | 8 ++--- .../timepicker/timepicker-demo.component.html | 8 +++++ .../timepicker/timepicker-demo.component.ts | 4 +++ src/locales/resources_en_US.json | 4 +++ .../colorpicker-input.directive.ts | 36 +++++++++++++------ .../colorpicker/colorpicker.component.spec.ts | 28 +++++++++++++++ .../colorpicker/colorpicker.service.ts | 2 +- .../icon/fixtures/icon.component.fixture.ts | 6 ++-- src/modules/icon/icon.component.html | 6 ++-- src/modules/icon/icon.component.spec.ts | 6 ++-- src/modules/icon/icon.component.ts | 2 +- src/modules/icon/icon.module.ts | 13 +++++-- src/modules/icon/index.ts | 4 +-- .../tiles/tile/tile-title.component.ts | 3 +- src/modules/tiles/tile/tile.component.scss | 6 ---- .../timepicker/timepicker-component.spec.ts | 20 +++++++++-- .../timepicker/timepicker.directive.ts | 17 ++++----- src/modules/toast/toaster.component.scss | 1 + src/scss/_variables.scss | 4 +++ 24 files changed, 147 insertions(+), 59 deletions(-) diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html index 8b58409fb..a4a5e8b88 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html @@ -1,4 +1,4 @@ -
- This is a circle - This is a broom -
\ No newline at end of file +
+ + +
diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts index 6399cfd81..86d657f81 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import { + Component +} from '@angular/core'; @Component({ - selector: 'icon-visual', - templateUrl: './icon-visual.component.html' + selector: 'icon-visual', + templateUrl: './icon-visual.component.html' }) -export class IconVisualComponent { - public icon: string = ''; -} +export class IconVisualComponent { } diff --git a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts index 69acc1b1f..526f2a412 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/icon/icon.visual-spec.ts @@ -1,4 +1,6 @@ -import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; +import { + SkyVisualTest +} from '../../../config/utils/visual-test-commands'; describe('icon', () => { it('should show the icon', () => { diff --git a/src/demos/colorpicker/colorpicker-template-driven-demo.component.ts b/src/demos/colorpicker/colorpicker-template-driven-demo.component.ts index 143e40775..3d29644b4 100644 --- a/src/demos/colorpicker/colorpicker-template-driven-demo.component.ts +++ b/src/demos/colorpicker/colorpicker-template-driven-demo.component.ts @@ -12,7 +12,7 @@ import { }) export class SkyColorpickerTemplateDrivenDemoComponent { public model: any = { - favoriteColor: '#00f' + favoriteColor: 'rgb(0, 0, 225)' }; public swatches = [ diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html index c5caa9fb0..fe0b4a62b 100644 --- a/src/demos/icon/icon-demo.component.html +++ b/src/demos/icon/icon-demo.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/demos/icon/icon-demo.component.ts b/src/demos/icon/icon-demo.component.ts index 20b9ae935..ee0d628a0 100644 --- a/src/demos/icon/icon-demo.component.ts +++ b/src/demos/icon/icon-demo.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import { + Component +} from '@angular/core'; @Component({ selector: 'sky-icon-demo', templateUrl: './icon-demo.component.html' }) -export class SkyIconDemoComponent { - public icon: string = 'circle'; -} +export class SkyIconDemoComponent { } diff --git a/src/demos/timepicker/timepicker-demo.component.html b/src/demos/timepicker/timepicker-demo.component.html index 7d5a7b196..d847c3df2 100644 --- a/src/demos/timepicker/timepicker-demo.component.html +++ b/src/demos/timepicker/timepicker-demo.component.html @@ -24,6 +24,14 @@

Selected time is {{selectedTime1?.local}}
+

+ +


diff --git a/src/demos/timepicker/timepicker-demo.component.ts b/src/demos/timepicker/timepicker-demo.component.ts index def554e72..423179400 100644 --- a/src/demos/timepicker/timepicker-demo.component.ts +++ b/src/demos/timepicker/timepicker-demo.component.ts @@ -11,4 +11,8 @@ export class SkyTimepickerDemoComponent { public selectedTime1: any = '8:30 PM'; public selectedTime2: any = '20:30'; public selectedTime3: any = '02:00:00-0400'; + + public clearSelectedTime() { + this.selectedTime1 = undefined; + } } diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json index 1b4a0ca8f..bed2714cf 100644 --- a/src/locales/resources_en_US.json +++ b/src/locales/resources_en_US.json @@ -95,6 +95,10 @@ "_description": "aria label for the hex input", "message": "Hex:" }, + "colorpicker_input_default_label": { + "_description": "The label for the colorpicker component's input field for screen readers when the consumer has not specified a label.", + "message": "Color value" + }, "colorpicker_preset_color": { "_description": "Label for the preset colors", "message": "Preset Color:" diff --git a/src/modules/colorpicker/colorpicker-input.directive.ts b/src/modules/colorpicker/colorpicker-input.directive.ts index 12dd2d78d..83a0b09b9 100644 --- a/src/modules/colorpicker/colorpicker-input.directive.ts +++ b/src/modules/colorpicker/colorpicker-input.directive.ts @@ -1,16 +1,15 @@ import { - ElementRef, Directive, + ElementRef, forwardRef, HostListener, Input, OnChanges, + OnDestroy, OnInit, Renderer, - SimpleChanges, - OnDestroy + SimpleChanges } from '@angular/core'; - import { AbstractControl, ControlValueAccessor, @@ -19,15 +18,23 @@ import { Validator } from '@angular/forms'; -import { SkyColorpickerService } from './colorpicker.service'; -import { SkyColorpickerComponent } from './colorpicker.component'; - +import { + SkyColorpickerService +} from './colorpicker.service'; +import { + SkyColorpickerComponent +} from './colorpicker.component'; import { SkyColorpickerHsva, SkyColorpickerOutput } from './types'; +import { + SkyResourcesService +} from '../resources'; -import { Subscription } from 'rxjs/Subscription'; +import { + Subscription +} from 'rxjs/Subscription'; // tslint:disable:no-forward-ref no-use-before-declare const SKY_COLORPICKER_VALUE_ACCESSOR = { @@ -87,7 +94,8 @@ export class SkyColorpickerInputDirective constructor( private elementRef: ElementRef, private renderer: Renderer, - private service: SkyColorpickerService + private service: SkyColorpickerService, + private skyResourceService: SkyResourcesService ) { } @HostListener('input', ['$event']) @@ -123,7 +131,15 @@ export class SkyColorpickerInputDirective this._onChange(newColor); }); - this.skyColorpickerInput.setColorFromString(this.initialColor); + this.skyColorpickerInput.setColorFromString(this.initialColor); + + /// Set aria-label as default, if not set + if (!this.elementRef.nativeElement.getAttribute('aria-label')) { + this.renderer.setElementAttribute( + this.elementRef.nativeElement, + 'aria-label', + this.skyResourceService.getString('colorpicker_input_default_label')); + } const typeAttr = element.getAttribute('type'); if (typeAttr && typeAttr === 'hidden') { diff --git a/src/modules/colorpicker/colorpicker.component.spec.ts b/src/modules/colorpicker/colorpicker.component.spec.ts index fc439febc..084476150 100644 --- a/src/modules/colorpicker/colorpicker.component.spec.ts +++ b/src/modules/colorpicker/colorpicker.component.spec.ts @@ -164,6 +164,19 @@ describe('Colorpicker Component', () => { colorpickerComponent = component.colorpickerComponent; }); + it('should add aria-label to input if not specified', fakeAsync(() => { + fixture.detectChanges(); + tick(); + expect(nativeElement.querySelector('input').getAttribute('aria-label')).toBe('Color value'); + })); + + it('should not add aria-label to input when one was specified', fakeAsync(() => { + nativeElement.querySelector('input').setAttribute('aria-label', 'Best picker'); + fixture.detectChanges(); + tick(); + expect(nativeElement.querySelector('input').getAttribute('aria-label')).toBe('Best picker'); + })); + it('should output RGBA', fakeAsync(() => { component.selectedOutputFormat = 'rgba'; openColorpicker(nativeElement, fixture); @@ -187,6 +200,21 @@ describe('Colorpicker Component', () => { verifyColorpicker(nativeElement, '#fff', '255, 255, 255'); })); + it('should handle RGB initial color', fakeAsync(() => { + fixture.detectChanges(); + fixture.destroy(); + + fixture = TestBed.createComponent(ColorpickerTestComponent); + nativeElement = fixture.nativeElement as HTMLElement; + component = fixture.componentInstance; + + component.selectedOutputFormat = 'rgba'; + component.selectedColor = 'rgb(0,0,255)'; + + openColorpicker(nativeElement, fixture); + verifyColorpicker(nativeElement, 'rgba(0,0,255,1)', '0, 0, 255'); + })); + it('should output HEX', fakeAsync(() => { component.selectedOutputFormat = 'hex'; openColorpicker(nativeElement, fixture); diff --git a/src/modules/colorpicker/colorpicker.service.ts b/src/modules/colorpicker/colorpicker.service.ts index 2f5e46e3f..2b7640850 100644 --- a/src/modules/colorpicker/colorpicker.service.ts +++ b/src/modules/colorpicker/colorpicker.service.ts @@ -106,7 +106,7 @@ export class SkyColorpickerService { const hue = hsva.hue; const saturation = hsva.saturation; const value = hsva.value; - const alpha = hsva.alpha; + const alpha = hsva.alpha || hsva.alpha === 0 ? hsva.alpha : 1; const i = Math.floor(hue * 6); const f = hue * 6 - i; const p = value * (1 - saturation); diff --git a/src/modules/icon/fixtures/icon.component.fixture.ts b/src/modules/icon/fixtures/icon.component.fixture.ts index c0a33462a..a787c875d 100644 --- a/src/modules/icon/fixtures/icon.component.fixture.ts +++ b/src/modules/icon/fixtures/icon.component.fixture.ts @@ -1,9 +1,11 @@ -import { Component } from '@angular/core'; +import { + Component +} from '@angular/core'; @Component({ selector: 'sky-test-cmp', templateUrl: './icon.component.fixture.html' }) export class IconTestComponent { - public icon: string = 'circle'; + public icon = 'circle'; } diff --git a/src/modules/icon/icon.component.html b/src/modules/icon/icon.component.html index 9d4e574a7..6a436c23c 100644 --- a/src/modules/icon/icon.component.html +++ b/src/modules/icon/icon.component.html @@ -1,5 +1,5 @@ - + [ngClass]="'fa-' + icon" +> diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index 62ce118bc..c147c134c 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -5,7 +5,7 @@ import { import { SkyIconModule -} from '.'; +} from './icon.module'; import { IconTestComponent @@ -35,14 +35,14 @@ describe('Icon component', () => { element = fixture.nativeElement as HTMLElement; }); - it ('should display an icon based on the given icon', () => { + it('should display an icon based on the given icon', () => { fixture.detectChanges(); expect(cmp.icon).toBe('circle'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); - it ('should display something other than circle', () => { + it('should display something other than circle', () => { cmp.icon = 'broom'; fixture.detectChanges(); expect(cmp.icon).toBe('broom'); diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts index 05645f8f7..78f3a12a4 100644 --- a/src/modules/icon/icon.component.ts +++ b/src/modules/icon/icon.component.ts @@ -11,5 +11,5 @@ import { }) export class SkyIconComponent { @Input() - public icon: string = ''; + public icon: string; } diff --git a/src/modules/icon/icon.module.ts b/src/modules/icon/icon.module.ts index d95fd7539..8901c16b2 100644 --- a/src/modules/icon/icon.module.ts +++ b/src/modules/icon/icon.module.ts @@ -1,7 +1,14 @@ -import { NgModule } from '@angular/core'; +import { + NgModule +} from '@angular/core'; -import { SkyIconComponent } from './icon.component'; -import { CommonModule } from '@angular/common'; +import { + CommonModule +} from '@angular/common'; + +import { + SkyIconComponent +} from './icon.component'; @NgModule({ declarations: [ diff --git a/src/modules/icon/index.ts b/src/modules/icon/index.ts index 0bf3c38f1..4837ca018 100644 --- a/src/modules/icon/index.ts +++ b/src/modules/icon/index.ts @@ -1,2 +1,2 @@ -export { SkyIconComponent } from './icon.component'; -export { SkyIconModule } from './icon.module'; +export * from './icon.component'; +export * from './icon.module'; diff --git a/src/modules/tiles/tile/tile-title.component.ts b/src/modules/tiles/tile/tile-title.component.ts index 00f78733a..3afa38e10 100644 --- a/src/modules/tiles/tile/tile-title.component.ts +++ b/src/modules/tiles/tile/tile-title.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'sky-tile-title', - templateUrl: './tile-title.component.html' + templateUrl: './tile-title.component.html', + styleUrls: ['./tile-title.component.scss'] }) export class SkyTileTitleComponent { } diff --git a/src/modules/tiles/tile/tile.component.scss b/src/modules/tiles/tile/tile.component.scss index 1f4e34df6..0d3a11e53 100644 --- a/src/modules/tiles/tile/tile.component.scss +++ b/src/modules/tiles/tile/tile.component.scss @@ -19,12 +19,6 @@ cursor: pointer; } -.sky-tile-title { - @include sky-section-heading(); - margin: 0; - padding: $sky-padding $sky-tile-header-tool-padding; -} - .sky-tile-summary { @include sky-headline(); color: $sky-text-color-action-primary; diff --git a/src/modules/timepicker/timepicker-component.spec.ts b/src/modules/timepicker/timepicker-component.spec.ts index 74e1b5b9a..650d4084f 100644 --- a/src/modules/timepicker/timepicker-component.spec.ts +++ b/src/modules/timepicker/timepicker-component.spec.ts @@ -46,12 +46,11 @@ describe('Timepicker', () => { let inputEl = element.querySelector('input'); inputEl.value = text; inputEl.dispatchEvent(inputEvent); - tick(); compFixture.detectChanges(); inputEl.dispatchEvent(changeEvent); - tick(); compFixture.detectChanges(); + tick(); } let fixture: ComponentFixture; @@ -147,11 +146,28 @@ describe('Timepicker', () => { it('should handle input change with a string with the expected timeFormat', fakeAsync(() => { component.timeFormat = 'hh'; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); setInput(nativeElement, '2:55 AM', fixture); expect(nativeElement.querySelector('input').value).toBe('2:55 AM'); expect(component.selectedTime.local).toEqual('2:55 AM'); })); + it('should handle undefined date', fakeAsync(() => { + component.timeFormat = 'hh'; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + setInput(nativeElement, '2:55 AM', fixture); + component.selectedTime = undefined; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + expect(nativeElement.querySelector('input').value).toBe(''); + expect(nativeElement.querySelector('input')).not.toHaveCssClass('ng-invalid'); + })); + it('should apply aria-label to the timepicker input when none is provided', () => { fixture.detectChanges(); expect(nativeElement.querySelector('input').getAttribute('aria-label')).toBe('Time input field.'); diff --git a/src/modules/timepicker/timepicker.directive.ts b/src/modules/timepicker/timepicker.directive.ts index 45d1fda5d..bcc7321c0 100644 --- a/src/modules/timepicker/timepicker.directive.ts +++ b/src/modules/timepicker/timepicker.directive.ts @@ -147,21 +147,22 @@ export class SkyTimepickerInputDirective implements } private writeModelValue(model: SkyTimepickerTimeOutput) { let setElementValue: string; - if (model) { - /* istanbul ignore next */ - if (moment(model).format(model.customFormat) === 'Invalid date') { - setElementValue = ''; - } else { - setElementValue = moment(model).format(model.customFormat); - } - this.renderer.setElementProperty(this.elRef.nativeElement, 'value', setElementValue); + /* istanbul ignore next */ + if (model && moment(model).format(model.customFormat) === 'Invalid date') { + setElementValue = ''; + } else if (model) { + setElementValue = moment(model).format(model.customFormat); + } else { + setElementValue = ''; } + this.renderer.setElementProperty(this.elRef.nativeElement, 'value', setElementValue); this.skyTimepickerInput.selectedTime = model; } private formatter(time: any) { if (time && typeof time !== 'string' && 'local' in time) { return time; } if (typeof time === 'string') { + if (time.length === 0) { return ''; } let currentFormat: string; let formatTime: SkyTimepickerTimeOutput; if (this.timeFormat === 'hh') { diff --git a/src/modules/toast/toaster.component.scss b/src/modules/toast/toaster.component.scss index 3399a3641..890dcef38 100644 --- a/src/modules/toast/toaster.component.scss +++ b/src/modules/toast/toaster.component.scss @@ -11,4 +11,5 @@ padding-bottom: $sky-margin-double; padding-right: $sky-margin-double; padding-top: 50px; + z-index: $sky-toaster-z-index; } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 241baa9cc..b81b340ce 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -103,6 +103,10 @@ $sky-fluid-grid-columns: 12 !default; $sky-flyout-z-index: 1001 !default; // omnibar is 1000, help is 9999: // end flyout +// begin toast +$sky-toaster-z-index: 1051 !default; // modal is 1050: +// end toast + // begin grid $sky-grid-odd-background-color: $sky-color-gray-01 !default; $sky-grid-even-background-color: $sky-color-white !default; From a2422f9e4726e8c7c36dc987854fa6ee491e8c63 Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Wed, 18 Jul 2018 10:51:50 -0400 Subject: [PATCH 13/23] Fixed missing tile style sheet --- src/modules/tiles/tile/tile-title.component.scss | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/modules/tiles/tile/tile-title.component.scss diff --git a/src/modules/tiles/tile/tile-title.component.scss b/src/modules/tiles/tile/tile-title.component.scss new file mode 100644 index 000000000..bfd65fffd --- /dev/null +++ b/src/modules/tiles/tile/tile-title.component.scss @@ -0,0 +1,7 @@ +@import "../../../scss/mixins"; + +.sky-tile-title { + @include sky-section-heading(); + margin: 0; + padding: $sky-padding $sky-tile-header-tool-padding; +} From ac41d78aab590dbe95f6105de1eda991eb97d1ed Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Wed, 18 Jul 2018 10:58:37 -0400 Subject: [PATCH 14/23] Updated demo --- src/demos/icon/icon-demo.component.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html index fe0b4a62b..7e6d209cc 100644 --- a/src/demos/icon/icon-demo.component.html +++ b/src/demos/icon/icon-demo.component.html @@ -1 +1,10 @@ + + + + + + + + + From 325bfad357af6334a1801eb7fe7b740f2ec2f6f4 Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Wed, 18 Jul 2018 11:01:55 -0400 Subject: [PATCH 15/23] Added more icons to visual test --- .../src/app/icon/icon-visual.component.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html index a4a5e8b88..a6916fe08 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html @@ -1,4 +1,12 @@
+ + + + + + + +
From cdecb5aadb2462ba895aaf165c20629b1f34e7b0 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 10:11:28 -0400 Subject: [PATCH 16/23] Allow for multiple classes --- src/demos/icon/icon-demo.component.html | 20 ++++++++++---------- src/modules/icon/icon.component.html | 4 ++-- src/modules/icon/icon.component.ts | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html index 7e6d209cc..7f5a339fe 100644 --- a/src/demos/icon/icon-demo.component.html +++ b/src/demos/icon/icon-demo.component.html @@ -1,10 +1,10 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/src/modules/icon/icon.component.html b/src/modules/icon/icon.component.html index 6a436c23c..ba30d0b4a 100644 --- a/src/modules/icon/icon.component.html +++ b/src/modules/icon/icon.component.html @@ -1,5 +1,5 @@ diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts index 78f3a12a4..5d44059de 100644 --- a/src/modules/icon/icon.component.ts +++ b/src/modules/icon/icon.component.ts @@ -12,4 +12,20 @@ import { export class SkyIconComponent { @Input() public icon: string; + + @Input() + public size: string; + + @Input() + public fixedWidth: boolean = true; + + public get classList() { + let list: string[] = []; + list.push('fa-' + this.icon); + list.push('fa-' + this.size); + if (this.fixedWidth === true) { + list.push('fa-fw'); + } + return list; + } } From beec5db6e213c5f4226896aefa3bd89bf998e31b Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 13:34:44 -0400 Subject: [PATCH 17/23] Fixed unit test --- src/demos/icon/icon-demo.component.html | 2 +- src/modules/icon/fixtures/icon.component.fixture.html | 2 +- src/modules/icon/fixtures/icon.component.fixture.ts | 2 ++ src/modules/icon/icon.component.html | 4 ++-- src/modules/icon/icon.component.spec.ts | 6 +++++- src/modules/icon/icon.component.ts | 6 ++++-- 6 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html index 7f5a339fe..93e4bf23a 100644 --- a/src/demos/icon/icon-demo.component.html +++ b/src/demos/icon/icon-demo.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/modules/icon/fixtures/icon.component.fixture.html b/src/modules/icon/fixtures/icon.component.fixture.html index 3e4c4a456..4eec92e2f 100644 --- a/src/modules/icon/fixtures/icon.component.fixture.html +++ b/src/modules/icon/fixtures/icon.component.fixture.html @@ -1 +1 @@ - + diff --git a/src/modules/icon/fixtures/icon.component.fixture.ts b/src/modules/icon/fixtures/icon.component.fixture.ts index a787c875d..6c18e25ef 100644 --- a/src/modules/icon/fixtures/icon.component.fixture.ts +++ b/src/modules/icon/fixtures/icon.component.fixture.ts @@ -8,4 +8,6 @@ import { }) export class IconTestComponent { public icon = 'circle'; + public size = '3x'; + public fixedWidth = false; } diff --git a/src/modules/icon/icon.component.html b/src/modules/icon/icon.component.html index ba30d0b4a..3ba8ea974 100644 --- a/src/modules/icon/icon.component.html +++ b/src/modules/icon/icon.component.html @@ -1,5 +1,5 @@ diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index c147c134c..acb69f917 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -37,16 +37,20 @@ describe('Icon component', () => { it('should display an icon based on the given icon', () => { fixture.detectChanges(); - expect(cmp.icon).toBe('circle'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-3x'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-fw'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); it('should display something other than circle', () => { cmp.icon = 'broom'; + cmp.size = 'xs'; + cmp.fixedWidth = true; fixture.detectChanges(); expect(cmp.icon).toBe('broom'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-xs'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); }); diff --git a/src/modules/icon/icon.component.ts b/src/modules/icon/icon.component.ts index 5d44059de..f011e22ab 100644 --- a/src/modules/icon/icon.component.ts +++ b/src/modules/icon/icon.component.ts @@ -19,10 +19,12 @@ export class SkyIconComponent { @Input() public fixedWidth: boolean = true; - public get classList() { + public classList(): string[] { let list: string[] = []; list.push('fa-' + this.icon); - list.push('fa-' + this.size); + if (this.size !== '') { + list.push('fa-' + this.size); + } if (this.fixedWidth === true) { list.push('fa-fw'); } From 1f2b52fbb008b1cce4d4ddc8f6adb301f0a28cca Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 14:22:12 -0400 Subject: [PATCH 18/23] Added unit test to check for optional fixedWidth --- src/modules/icon/fixtures/icon.component.fixture.html | 2 +- src/modules/icon/icon.component.spec.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/modules/icon/fixtures/icon.component.fixture.html b/src/modules/icon/fixtures/icon.component.fixture.html index 4eec92e2f..50e89cb62 100644 --- a/src/modules/icon/fixtures/icon.component.fixture.html +++ b/src/modules/icon/fixtures/icon.component.fixture.html @@ -1 +1 @@ - + diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index acb69f917..2f17f8d67 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -15,7 +15,7 @@ import { expect } from '@blackbaud/skyux-builder/runtime/testing/browser'; -describe('Icon component', () => { +fdescribe('Icon component', () => { let fixture: ComponentFixture; let cmp: IconTestComponent; let element: HTMLElement; @@ -39,7 +39,7 @@ describe('Icon component', () => { fixture.detectChanges(); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-3x'); - expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-fw'); + expect(element.querySelector('.sky-icon')).not.toHaveCssClass('fa-fw'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); @@ -51,6 +51,7 @@ describe('Icon component', () => { expect(cmp.icon).toBe('broom'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-xs'); + expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-fw'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); }); From 7ea881cd62d19e1c5af561508b6628560033e226 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 15:01:50 -0400 Subject: [PATCH 19/23] Checks to see how many classes there are --- src/modules/icon/icon.component.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index 2f17f8d67..8b6b1fa7e 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -41,17 +41,18 @@ fdescribe('Icon component', () => { expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-3x'); expect(element.querySelector('.sky-icon')).not.toHaveCssClass('fa-fw'); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); + expect(element.querySelector('.sky-icon').classList.length).toBe(4); }); it('should display something other than circle', () => { cmp.icon = 'broom'; - cmp.size = 'xs'; + cmp.size = ''; cmp.fixedWidth = true; fixture.detectChanges(); expect(cmp.icon).toBe('broom'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom'); - expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-xs'); expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-fw'); + expect(element.querySelector('.sky-icon').classList.length).toBe(4); expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe('true'); }); }); From 257b8e43770ea76fadfa8b6dd8cf76736588d516 Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 15:02:43 -0400 Subject: [PATCH 20/23] fdescribe to describe --- src/modules/icon/icon.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/icon/icon.component.spec.ts b/src/modules/icon/icon.component.spec.ts index 8b6b1fa7e..89c11fd7f 100644 --- a/src/modules/icon/icon.component.spec.ts +++ b/src/modules/icon/icon.component.spec.ts @@ -15,7 +15,7 @@ import { expect } from '@blackbaud/skyux-builder/runtime/testing/browser'; -fdescribe('Icon component', () => { +describe('Icon component', () => { let fixture: ComponentFixture; let cmp: IconTestComponent; let element: HTMLElement; From da17078065b798de02be4af5bee1e4f67c7c685d Mon Sep 17 00:00:00 2001 From: Harsh Jain Date: Thu, 19 Jul 2018 16:15:28 -0400 Subject: [PATCH 21/23] Fixed PR suggestions --- .../src/app/icon/icon-visual.component.html | 43 ++++++++++++---- src/demos/icon/icon-demo.component.html | 51 +++++++++++++++---- .../icon/fixtures/icon.component.fixture.html | 6 ++- src/modules/icon/icon.component.html | 3 +- src/modules/icon/icon.component.spec.ts | 18 +++++-- src/modules/icon/icon.component.ts | 6 +-- 6 files changed, 97 insertions(+), 30 deletions(-) diff --git a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html index a6916fe08..11edcef8d 100644 --- a/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html +++ b/skyux-spa-visual-tests/src/app/icon/icon-visual.component.html @@ -1,12 +1,33 @@ -
- - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + +
diff --git a/src/demos/icon/icon-demo.component.html b/src/demos/icon/icon-demo.component.html index 93e4bf23a..c01165ad8 100644 --- a/src/demos/icon/icon-demo.component.html +++ b/src/demos/icon/icon-demo.component.html @@ -1,10 +1,41 @@ - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/src/modules/icon/fixtures/icon.component.fixture.html b/src/modules/icon/fixtures/icon.component.fixture.html index 50e89cb62..9192bd3c2 100644 --- a/src/modules/icon/fixtures/icon.component.fixture.html +++ b/src/modules/icon/fixtures/icon.component.fixture.html @@ -1 +1,5 @@ - + + diff --git a/src/modules/icon/icon.component.html b/src/modules/icon/icon.component.html index 3ba8ea974..16aefe755 100644 --- a/src/modules/icon/icon.component.html +++ b/src/modules/icon/icon.component.html @@ -1,4 +1,5 @@ -