Toolbar standalone (#326)

* starting files for list-toolbar

* Add standalone toolbar component

Also:
  - tweak input-group and search styles to not use table display since
we can use flex instead.
  - Used toolbar component in search demo.

TODO:
  - toolbar unit tests
  - toolbar visual tests
  - toolbar docs
  - use toolbar in list-toolbar component

* Remove list-toolbar stuff and add unit tests for standalone toolbar

* Update search screenshots for new input group styles and toolbar component

src/app/components/demo-components.service.ts

@@ -523,6 +523,27 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Toolbar',
+        icon: 'bars',
+        // tslint:disable-next-line
+        summary: `The toolbar component displays a SKY UX-themed toolbar.`,
+        url: '/components/toolbar',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'toolbar-demo.component.html',
+              fileContents: require('!!raw!./toolbar/toolbar-demo.component.html')
+            },
+            {
+              name: 'toolbar-demo.component.ts',
+              fileContents: require('!!raw!./toolbar/toolbar-demo.component.ts'),
+              componentName: 'SkyToolbarDemoComponent',
+              bootstrapSelector: 'sky-toolbar-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Wait',
         icon: 'spinner',

src/app/components/search/search-demo.component.html

@@ -1,29 +1,20 @@
-<style>
-  .sky-demo-search-bar {
-    position: relative;
-    padding: 5px;
-  }
-  .sky-demo-search-bar-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 0;
-
-  }
-</style>
-
-<div class="sky-demo-search-bar">
-  <button
-    class="sky-btn sky-btn-default sky-demo-search-bar-item"
-    (click)="searchApplied('Robert')"
-  >
-    Predefined search text
-  </button>
-  <sky-search
-    [searchText]="searchText"
-    (searchApply)="searchApplied($event)"
+<sky-toolbar>
+  <sky-toolbar-item>
+    <button
+      class="sky-btn sky-btn-default sky-demo-search-bar-item"
+      (click)="searchApplied('Robert')"
     >
-  </sky-search>
-</div>
+      Predefined search text
+    </button>
+  </sky-toolbar-item>
+  <sky-toolbar-item>
+    <sky-search
+      [searchText]="searchText"
+      (searchApply)="searchApplied($event)"
+      >
+    </sky-search>
+  </sky-toolbar-item>
+</sky-toolbar>
 <div>
   <sky-repeater expandMode="none">
     <sky-repeater-item *ngFor="let item of displayedItems">

src/app/components/toolbar/index.html

@@ -0,0 +1,11 @@
+<sky-demo-page title="Toolbar">
+  <sky-demo-page-summary>
+    The toolbar component displays a SKY UX-themed toolbar. The <code>sky-toolbar</code> component should be used in conjunction with the <code>sky-toolbar-item</code> child component.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-example>
+    <sky-toolbar-demo></sky-toolbar-demo>
+    <sky-demo-page-code demoName="Toolbar"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>

src/app/components/toolbar/toolbar-demo.component.html

@@ -0,0 +1,8 @@
+<sky-toolbar>
+  <sky-toolbar-item>
+    <button class="sky-btn sky-btn-default">Button 1</button>
+  </sky-toolbar-item>
+  <sky-toolbar-item>
+    <button class="sky-btn sky-btn-default">Button 2</button>
+  </sky-toolbar-item>
+</sky-toolbar>

src/app/components/toolbar/toolbar-demo.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-toolbar-demo',
+  templateUrl: './toolbar-demo.component.html'
+})
+export class SkyToolbarDemoComponent {
+
+}

src/core.ts

@@ -26,6 +26,7 @@ import { SkyRadioModule } from './modules/radio';
 import { SkyRepeaterModule } from './modules/repeater';
 import { SkySearchModule } from './modules/search';
 import { SkyTabsModule } from './modules/tabs';
+import { SkyToolbarModule } from './modules/toolbar';
 import { SkyTilesModule } from './modules/tiles';
 import { SkyWaitModule } from './modules/wait';
 
@@ -56,6 +57,7 @@ import { SkyWaitModule } from './modules/wait';
     SkySearchModule,
     SkyTabsModule,
     SkyTilesModule,
+    SkyToolbarModule,
     SkyWaitModule
   ]
 })
@@ -87,6 +89,7 @@ export * from './modules/repeater';
 export * from './modules/search';
 export * from './modules/tabs';
 export * from './modules/tiles';
+export * from './modules/toolbar';
 export * from './modules/wait';
 
 export const SKY_PROVIDERS: any[] = [

src/modules/search/fixtures/search.component.visual-fixture.html

@@ -1,36 +1,26 @@
 <style type="text/css">
-  .sky-search-docs-inline {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
   input.sky-form-control.sky-search-input {
     color: transparent;
     text-shadow: 0px 0px 0px #000;
   }
 
-  .sky-search-docs-toolbar {
-    padding: 5px;
-    position: relative;
-  }
-
 </style>
 
-<div style="background-color: #fff;">
-  <div id="screenshot-search-full">
-    <div class="sky-search-docs-toolbar">
-      <div class="sky-search-docs-inline">
-          <button
-            type="button"
-            (click)="applySearchText('Robert')"
-            class="sky-btn sky-btn-secondary">
-            Set search text
-          </button>
-      </div>
+<div id="screenshot-search-full">
+  <sky-toolbar>
+    <sky-toolbar-item>
+        <button
+          type="button"
+          (click)="applySearchText('Robert')"
+          class="sky-btn sky-btn-secondary">
+          Set search text
+        </button>
+    </sky-toolbar-item>
+    <sky-toolbar-item>
       <sky-search
           [searchText]="searchText"
           (searchApply)="applySearchText(searchText)">
       </sky-search>
-    </div>
-  </div>
+    </sky-toolbar-item>
+  </sky-toolbar>
 </div>

src/modules/search/search.component.scss

@@ -2,7 +2,7 @@
 
 @media (min-width: $sky-screen-sm-min) {
     .sky-search-input-container {
-        max-width: 300px;
+        min-width: 300px;
     }
 }
 
@@ -52,10 +52,12 @@
 
 .sky-search-item-dismiss {
     flex-shrink: 0;
+    display: flex;
 }
 
 .sky-search-item-input {
     flex-grow: 1;
+    display: flex;
 }
 
 /*  This is needed or else the input will be tiny
@@ -128,9 +130,3 @@
       border: 2px solid $sky-color-green;
       padding: 5px 11px;
 }
-
-.sky-search-container {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 0;
-}

src/modules/toolbar/fixtures/toolbar.component.fixture.html

@@ -0,0 +1,10 @@
+<div id="screenshot-toolbar">
+  <sky-toolbar>
+    <sky-toolbar-item>
+      <button class="sky-btn sky-btn-default">Button 1</button>
+    </sky-toolbar-item>
+    <sky-toolbar-item>
+      <button class="sky-btn sky-btn-default">Button 2</button>
+    </sky-toolbar-item>
+  </sky-toolbar>
+</div>

src/modules/toolbar/fixtures/toolbar.component.fixture.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './toolbar.component.fixture.html'
+})
+export class ToolbarTestComponent {
+}

src/modules/toolbar/fixtures/toolbar.component.visual-fixture.html

@@ -0,0 +1,10 @@
+<div id="screenshot-toolbar">
+  <sky-toolbar>
+    <sky-toolbar-item>
+      <button class="sky-btn sky-btn-default">Button 1</button>
+    </sky-toolbar-item>
+    <sky-toolbar-item>
+      <button class="sky-btn sky-btn-default">Button 2</button>
+    </sky-toolbar-item>
+  </sky-toolbar>
+</div>

src/modules/toolbar/fixtures/toolbar.component.visual-fixture.ts

@@ -0,0 +1,29 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { SkyModule } from '../../../../src/core';
+
+import { Bootstrapper } from '../../../../visual/bootstrapper';
+
+@Component({
+  selector: 'sky-demo-app',
+  templateUrl: './toolbar.component.visual-fixture.html'
+})
+class AppComponent {
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    SkyModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+class AppModule { }
+
+Bootstrapper.bootstrapModule(AppModule);

src/modules/toolbar/index.ts

@@ -0,0 +1,3 @@
+export { SkyToolbarComponent } from './toolbar.component';
+export { SkyToolbarItemComponent } from './toolbar-item.component';
+export { SkyToolbarModule } from './toolbar.module';

src/modules/toolbar/toolbar-item.component.html

@@ -0,0 +1,3 @@
+<div class="sky-toolbar-item">
+  <ng-content></ng-content>
+</div>

src/modules/toolbar/toolbar-item.component.scss

@@ -0,0 +1,5 @@
+@import '../../scss/mixins';
+
+.sky-toolbar-item {
+    margin-right: $sky-margin-half;
+}

src/modules/toolbar/toolbar-item.component.ts

@@ -0,0 +1,12 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-toolbar-item',
+  styleUrls: ['./toolbar-item.component.scss'],
+  templateUrl: './toolbar-item.component.html'
+})
+export class SkyToolbarItemComponent {
+
+}

src/modules/toolbar/toolbar.component.html

@@ -0,0 +1,3 @@
+<div class="sky-toolbar-container">
+  <ng-content></ng-content>
+</div>

src/modules/toolbar/toolbar.component.scss

@@ -0,0 +1,11 @@
+@import '../../scss/mixins';
+
+.sky-toolbar-container {
+    min-height: $sky-toolbar-min-height;
+    background-color: $sky-toolbar-background-color;
+    padding: $sky-padding-half $sky-padding;
+    @include sky-border(dark, top, bottom);
+    display: flex;
+    align-items: center;
+    position: relative;
+}

src/modules/toolbar/toolbar.component.spec.ts

@@ -0,0 +1,38 @@
+import {
+  TestBed
+} from '@angular/core/testing';
+
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ToolbarTestComponent } from './fixtures/toolbar.component.fixture';
+
+import { SkyToolbarModule } from '.';
+
+import { expect } from '../testing';
+
+describe('toolbar component', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ToolbarTestComponent
+      ],
+      imports: [
+        BrowserModule,
+        SkyToolbarModule
+      ]
+    });
+  });
+
+  it('should create a toolbar with transcluded items', () => {
+    let fixture = TestBed.createComponent(ToolbarTestComponent);
+    let el = fixture.nativeElement as HTMLElement;
+
+    fixture.detectChanges();
+
+    let buttonEls = el.querySelectorAll('.sky-toolbar-container .sky-toolbar-item .sky-btn');
+
+    expect(buttonEls.item(0)).toHaveText('Button 1');
+    expect(buttonEls.item(1)).toHaveText('Button 2');
+
+  });
+});

src/modules/toolbar/toolbar.component.ts

@@ -0,0 +1,12 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-toolbar',
+  styleUrls: ['./toolbar.component.scss'],
+  templateUrl: './toolbar.component.html'
+})
+export class SkyToolbarComponent {
+
+}

src/modules/toolbar/toolbar.component.visual-spec.js

@@ -0,0 +1,13 @@
+describe('Toolbar', function () {
+  'use strict';
+
+  it('should match previous toolbar screenshot', function () {
+    return browser
+      .setupTest('/toolbar.html')
+      .compareScreenshot({
+        screenshotName: 'toolbar',
+        selector: '#screenshot-toolbar',
+        checkAccessibility: true
+      });
+  });
+});