Merge branch 'master' into icon-checkbox

src/locales/resources_en_US.json

@@ -523,6 +523,10 @@
     "_description": "Placeholder text in grid search box",
     "message": "Find in this list"
   },
+  "help_inline_button_title": {
+    "_description": "The title for the help button.",
+    "message": "Show help content"
+  },
   "link_records_item_info_match": {
     "_description": "",
     "message": "A possible match has been identified for this record. Would you like to link it?"

src/modules/help-inline/fixtures/help-inline-fixtures.module.ts

@@ -1,19 +1,24 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
 
-import { SkyHelpInlineModule } from '../';
+import {
+  CommonModule
+} from '@angular/common';
+
+import { SkyHelpInlineModule } from '../help-inline.module';
 import { HelpInlineTestComponent } from './help-inline.component.fixture';
 
 @NgModule({
-    declarations: [
-        HelpInlineTestComponent
-    ],
-    imports: [
-        CommonModule,
-        SkyHelpInlineModule
-    ],
-    exports: [
-        HelpInlineTestComponent
-    ]
+  declarations: [
+    HelpInlineTestComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyHelpInlineModule
+  ],
+  exports: [
+    HelpInlineTestComponent
+  ]
 })
 export class SkyInlineHlpeFixturesModule { }

src/modules/help-inline/fixtures/help-inline.component.fixture.html

@@ -1,3 +1,3 @@
 <sky-help-inline
-    (actionClick)="buttonClicked()">
+  (actionClick)="buttonClicked()">
 </sky-help-inline>

src/modules/help-inline/fixtures/help-inline.component.fixture.ts

@@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
-    selector: 'sky-test-cmp',
-    templateUrl: './help-inline.component.fixture.html'
+  selector: 'sky-test-cmp',
+  templateUrl: './help-inline.component.fixture.html'
 })
 export class HelpInlineTestComponent {
-    public buttonIsClicked: boolean = false;
+  public buttonIsClicked = false;
 
-    public buttonClicked() {
-        this.buttonIsClicked = true;
-    }
+  public buttonClicked() {
+    this.buttonIsClicked = true;
+  }
 }

src/modules/help-inline/help-inline.component.html

@@ -1,6 +1,7 @@
 <button
-    class="sky-help-inline fa fa-info-circle"
-    (click)="buttonClicked()"
-    [attr.aria-label]="'show_help_content' | skyResources"
-    >
-</button>
+  class="sky-help-inline"
+  type="button"
+  (click)="onClick()"
+  [attr.title]="'help_inline_button_title' | skyResources">
+  <i class="fa fa-info-circle" aria-hidden="true"></i>
+</button>

src/modules/help-inline/help-inline.component.scss

@@ -6,8 +6,10 @@
   background-color: transparent;
   border: none;
   display: inline-block;
+
   &:hover {
     color: darken($sky-text-color-action-primary, 10%);
     transition: color $sky-transition-time-short;
+    cursor: pointer;
   }
 }

src/modules/help-inline/help-inline.component.spec.ts

@@ -1,39 +1,46 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import {
+  DebugElement
+} from '@angular/core';
 
-import { BrowserModule, By } from '@angular/platform-browser';
+import {
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+
+import {
+  BrowserModule,
+  By
+} from '@angular/platform-browser';
 
-import { HelpInlineTestComponent } from './fixtures/help-inline.component.fixture';
 import { SkyHelpInlineModule } from '../help-inline/help-inline.module';
+import { HelpInlineTestComponent } from './fixtures/help-inline.component.fixture';
 
 describe('Help inline component', () => {
-    let fixture: ComponentFixture<HelpInlineTestComponent>;
-    let cmp: HelpInlineTestComponent;
-    let el: HTMLElement;
-    let debugElement: DebugElement;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [
-                HelpInlineTestComponent
-            ],
-            imports: [
-                BrowserModule,
-                SkyHelpInlineModule
-            ]
-        });
-
-        fixture = TestBed.createComponent(HelpInlineTestComponent);
-        cmp = fixture.componentInstance as HelpInlineTestComponent;
-        el = fixture.nativeElement as HTMLElement;
-        debugElement = fixture.debugElement;
-
-        fixture.detectChanges();
-    });
+  let fixture: ComponentFixture<HelpInlineTestComponent>;
+  let cmp: HelpInlineTestComponent;
+  let debugElement: DebugElement;
 
-    it('should emit a click event on button click', () => {
-        debugElement.query(By.css('.sky-help-inline')).triggerEventHandler('click', undefined);
-        fixture.detectChanges();
-        expect(cmp.buttonIsClicked).toBe(true);
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        HelpInlineTestComponent
+      ],
+      imports: [
+        BrowserModule,
+        SkyHelpInlineModule
+      ]
     });
+
+    fixture = TestBed.createComponent(HelpInlineTestComponent);
+    cmp = fixture.componentInstance as HelpInlineTestComponent;
+    debugElement = fixture.debugElement;
+
+    fixture.detectChanges();
+  });
+
+  it('should emit a click event on button click', () => {
+    debugElement.query(By.css('.sky-help-inline')).triggerEventHandler('click', undefined);
+    fixture.detectChanges();
+    expect(cmp.buttonIsClicked).toBe(true);
+  });
 });

src/modules/help-inline/help-inline.component.ts

@@ -1,15 +1,19 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output
+} from '@angular/core';
 
 @Component({
-    selector: 'sky-help-inline',
-    styleUrls: ['./help-inline.component.scss'],
-    templateUrl: './help-inline.component.html'
+  selector: 'sky-help-inline',
+  templateUrl: './help-inline.component.html',
+  styleUrls: ['./help-inline.component.scss']
 })
 export class SkyHelpInlineComponent {
-    @Output()
-    public actionClick = new EventEmitter<any>();
+  @Output()
+  public actionClick = new EventEmitter<any>();
 
-    public buttonClicked() {
-        this.actionClick.emit();
-    }
+  public onClick() {
+    this.actionClick.emit();
+  }
 }

src/modules/help-inline/help-inline.module.ts

@@ -1,19 +1,27 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyResourcesModule
+} from '../resources';
 
 import { SkyHelpInlineComponent } from './help-inline.component';
-import { SkyResourcesModule } from '../resources';
 
 @NgModule({
-    declarations: [
-        SkyHelpInlineComponent
-    ],
-    imports: [
-        CommonModule,
-        SkyResourcesModule
-    ],
-    exports: [
-        SkyHelpInlineComponent
-    ]
+  declarations: [
+    SkyHelpInlineComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyResourcesModule
+  ],
+  exports: [
+    SkyHelpInlineComponent
+  ]
 })
 export class SkyHelpInlineModule { }