Added sectioned form component (#1068)

skyux-spa-visual-tests/src/app/home.component.ts

@@ -38,6 +38,7 @@ export class HomeComponent {
     'radio',
     'repeater',
     'search',
+    'sectioned-form',
     'sort',
     'tabs',
     'text-expand',

skyux-spa-visual-tests/src/app/sectioned-form/demo-address-form.component.html

@@ -0,0 +1,11 @@
+<div class="sky-emphasized" style="margin-bottom: 5px;">
+  <label>Home</label>
+</div>
+<div>410 17th Street</div>
+<div>Denver, CO 80202-4402</div>
+
+<div class="sky-emphasized" style="margin: 5px 0 5px 0;">
+  <label>Vacation</label>
+</div>
+<div>3345 Franciscan Way</div>
+<div>Tampa, FL 10255-0098</div>

skyux-spa-visual-tests/src/app/sectioned-form/demo-address-form.component.ts

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

skyux-spa-visual-tests/src/app/sectioned-form/demo-information-form.component.html

@@ -0,0 +1,41 @@
+<div style="display: flex;">
+  <div style="margin-right: 10px; flex: 1;">
+    <label 
+      for="inputName" 
+      class="sky-control-label"
+      [ngClass]="{'sky-control-label-required': nameRequired}"
+    >
+      Name
+    </label>
+    <input 
+      class="sky-form-control"
+      [ngModel]="name"
+      (ngModelChange)="nameChange($event)"
+      id="inputName" 
+      type="text"
+    >
+  </div>
+  <div style="margin-right: 10px; flex: 1;">
+    <label 
+      for="inputId" 
+      class="sky-control-label"
+    >
+      Id
+    </label>
+    <input 
+      class="sky-form-control"
+      [ngModel]="id"
+      id="inputId" 
+      type="text" 
+    >
+  </div>
+</div>
+
+<div style="margin-top: 10px;">
+  <sky-checkbox [(ngModel)]="nameRequired">
+    <sky-checkbox-label>
+      Mark 'Name' required
+    </sky-checkbox-label>
+  </sky-checkbox>
+</div>
+

skyux-spa-visual-tests/src/app/sectioned-form/demo-information-form.component.ts

@@ -0,0 +1,37 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'sky-demo-information-form',
+  templateUrl: './demo-information-form.component.html'
+})
+export class SkyDemoInformationFormComponent {
+  public name: string = '';
+  public id: string = '5324901';
+
+  @Output()
+  public requiredChange = new EventEmitter<boolean>();
+
+  private _nameRequired: boolean = false;
+
+  public get nameRequired() {
+    return this._nameRequired;
+  }
+
+  public set nameRequired(value: boolean) {
+    this._nameRequired = value;
+    this.emitRequiredChange();
+  }
+
+  public nameChange(newName: string) {
+    this.name = newName;
+    this.emitRequiredChange();
+  }
+
+  private emitRequiredChange() {
+    if (this.nameRequired && !this.name) {
+      this.requiredChange.emit(true);
+    } else {
+      this.requiredChange.emit(false);
+    }
+  }
+}

skyux-spa-visual-tests/src/app/sectioned-form/demo-phone-form.component.html

@@ -0,0 +1,11 @@
+<div> 
+  <div>
+    <span class="sky-emphasized">Home</span> 303.997.3301
+  </div>
+  <div>
+    <span class="sky-emphasized">Mobile</span> 888.387.1211
+  </div>
+  <div>
+    <span class="sky-emphasized">Work</span> 303.997.2000
+  </div>
+</div>

skyux-spa-visual-tests/src/app/sectioned-form/demo-phone-form.component.ts

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

skyux-spa-visual-tests/src/app/sectioned-form/index.html

@@ -0,0 +1 @@
+<sectioned-form-visual></sectioned-form-visual>

skyux-spa-visual-tests/src/app/sectioned-form/sectioned-form-visual.component.html

@@ -0,0 +1,15 @@
+<div id="screenshot-sectioned-form" style="padding-left: 15px;">
+  <sky-sectioned-form>
+    <sky-sectioned-form-section heading="Basic information">
+      <sky-demo-information-form >
+      </sky-demo-information-form>
+    </sky-sectioned-form-section>
+    <sky-sectioned-form-section heading="Addresses" itemCount="2" active="true">
+      <sky-demo-address-form></sky-demo-address-form>
+    </sky-sectioned-form-section>
+    <sky-sectioned-form-section heading="Phone numbers" itemCount="3">
+      <sky-demo-phone-form></sky-demo-phone-form>
+    </sky-sectioned-form-section>
+  </sky-sectioned-form>
+</div>
+

skyux-spa-visual-tests/src/app/sectioned-form/sectioned-form-visual.component.ts

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'sectioned-form-visual',
+  templateUrl: './sectioned-form-visual.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SectionedFormVisualComponent {}

skyux-spa-visual-tests/src/app/sectioned-form/sectioned-form.visual-spec.ts

@@ -0,0 +1,91 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by, browser } from 'protractor';
+
+describe('Sectioned form', () => {
+
+  it('should match previous sectioned form screenshot', () => {
+    return SkyVisualTest.setupTest('sectioned-form')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+
+  it('should match previous sectioned form screenshot after clicking first tab', () => {
+    return SkyVisualTest.setupTest('sectioned-form')
+    .then(() => {
+
+      let tabs = element.all(by.css('sky-vertical-tab'));
+
+      // click first tab
+      tabs.get(0).click();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form-first',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+
+  it('should match previous sectioned form screenshot after clicking second tab', () => {
+    return SkyVisualTest.setupTest('sectioned-form')
+    .then(() => {
+
+      let tabs = element.all(by.css('sky-vertical-tab'));
+
+      // click second tab
+      tabs.get(1).click();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form-second',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+
+  it('should match previous sectioned form screenshot on mobile', () => {
+    return SkyVisualTest.setupTest('sectioned-form', 480)
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form-mobile',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+
+  it('should match previous sectioned form screenshot after resizing to mobile', () => {
+    return SkyVisualTest.setupTest('sectioned-form')
+    .then(() => {
+
+      // resize to mobile
+      browser.driver.manage().window().setSize(480, 800);
+      browser.sleep(1000);
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form-to-mobile',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+
+  it('should match previous sectioned form screenshot after resizing to widescreen', () => {
+    return SkyVisualTest.setupTest('sectioned-form')
+    .then(() => {
+
+      // resize to mobile
+      browser.driver.manage().window().setSize(480, 800);
+      browser.sleep(1000);
+
+      // resize to widescreen
+      browser.driver.manage().window().setSize(1000, 800);
+      browser.sleep(1000);
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sectioned-form-to-widescreen',
+        selector: '#screenshot-sectioned-form'
+      });
+    });
+  });
+});

src/app/app-extras.module.ts

@@ -13,6 +13,10 @@ import { SkyTilesDemoTile1Component } from './components/tiles/tiles-demo-tile1.
 import { SkyTilesDemoTile2Component } from './components/tiles/tiles-demo-tile2.component';
 import { SkyWizardDemoFormComponent } from './components/wizard/wizard-demo-form.component';
 
+import {
+  SkySectionedModalFormDemoComponent
+} from './components/sectioned-form/sectioned-modal-form-demo.component';
+
 import { SkyDemoComponentsModule } from './components/demo-components.module';
 
 require('style-loader!./styles.scss');
@@ -25,7 +29,8 @@ require('style-loader!./styles.scss');
     SkyTilesDemoTile2Component,
     SkyWizardDemoFormComponent,
     SkyFilterDemoModalComponent,
-    SkyListFiltersModalDemoComponent
+    SkyListFiltersModalDemoComponent,
+    SkySectionedModalFormDemoComponent
   ],
   imports: [
     SkyDemoComponentsModule,

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

@@ -872,6 +872,66 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Sectioned form',
+        icon: 'object-group',
+        // tslint:disable-next-line
+        summary: `A sectioned form combines multiple forms and allows users to target specific, independent areas.`,
+        url: '/components/sectioned-form',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'sectioned-form-demo.component.html',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/sectioned-form-demo.component.html')
+            },
+            {
+              name: 'sectioned-form-demo.component.ts',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/sectioned-form-demo.component.ts'),
+              componentName: 'SkySectionedFormDemoComponent',
+              bootstrapSelector: 'sky-sectioned-form-demo'
+            },
+            {
+              name: 'sectioned-modal-form-demo.component.html',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/sectioned-modal-form-demo.component.html')
+            },
+            {
+              name: 'sectioned-modal-form-demo.component.ts',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/sectioned-modal-form-demo.component.ts')
+            },
+            {
+              name: 'demo-address-form.component.html',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/demo-address-form.component.html')
+            },
+            {
+              name: 'demo-address-form.component.ts',
+              fileContents: require('!!raw-loader!./sectioned-form/demo-address-form.component.ts')
+            },
+            {
+              name: 'demo-information-form.component.html',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/demo-information-form.component.html')
+            },
+            {
+              name: 'demo-information-form.component.ts',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./sectioned-form/demo-information-form.component.ts')
+            },
+            {
+              name: 'demo-phone-form.component.html',
+              fileContents: require('!!raw-loader!./sectioned-form/demo-phone-form.component.html')
+            },
+            {
+              name: 'demo-phone-form.component.ts',
+              fileContents: require('!!raw-loader!./sectioned-form/demo-phone-form.component.ts')
+            }
+          ];
+        }
+      },
       {
         name: 'Sort',
         icon: 'sort',

src/app/components/sectioned-form/demo-address-form.component.html

@@ -0,0 +1,11 @@
+<div class="sky-emphasized" style="margin-bottom: 5px;">
+  <label>Home</label>
+</div>
+<div>410 17th Street</div>
+<div>Denver, CO 80202-4402</div>
+
+<div class="sky-emphasized" style="margin: 5px 0 5px 0;">
+  <label>Vacation</label>
+</div>
+<div>3345 Franciscan Way</div>
+<div>Tampa, FL 10255-0098</div>

src/app/components/sectioned-form/demo-address-form.component.ts

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