Made fluid grid column inputs responsive. (#1962)

Resolves #1957

src/modules/fluid-grid/column.component.spec.ts

@@ -4,24 +4,30 @@ import {
   expect
 } from '@blackbaud/skyux-builder/runtime/testing/browser';
 
-import { SkyColumnComponent } from './column.component';
+import {
+  ColumnTestComponent
+} from './fixtures/column.component.fixture';
+import {
+  SkyColumnComponent
+} from './column.component';
 
 describe('SkyColumnComponent', () => {
-  let component: SkyColumnComponent;
-  let fixture: ComponentFixture<SkyColumnComponent>;
+  let component: ColumnTestComponent;
+  let fixture: ComponentFixture<ColumnTestComponent>;
   let element: HTMLElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        SkyColumnComponent
+        SkyColumnComponent,
+        ColumnTestComponent
       ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SkyColumnComponent);
+    fixture = TestBed.createComponent(ColumnTestComponent);
     component = fixture.componentInstance;
-    element = fixture.nativeElement;
+    element = fixture.nativeElement.querySelector('sky-column');
   });
 
   it('should add a class to the host element', () => {
@@ -30,14 +36,27 @@ describe('SkyColumnComponent', () => {
   });
 
   it('should add a class for small, medium, and large breakpoints', () => {
-    component.screenXSmall = 1;
-    component.screenSmall = 1;
-    component.screenMedium = 2;
-    component.screenLarge = 5;
     fixture.detectChanges();
     expect(element.className).toContain('sky-column-xs-1');
     expect(element.className).toContain('sky-column-sm-1');
     expect(element.className).toContain('sky-column-md-2');
     expect(element.className).toContain('sky-column-lg-5');
   });
+
+  it('should update the classnames when the inputs change', () => {
+    fixture.detectChanges();
+    expect(element.className).toContain('sky-column-xs-1');
+    expect(element.className).toContain('sky-column-sm-1');
+    expect(element.className).toContain('sky-column-md-2');
+    expect(element.className).toContain('sky-column-lg-5');
+    component.xsSize = 2;
+    component.smallSize = 3;
+    component.mediumSize = 7;
+    component.largeSize = 4;
+    fixture.detectChanges();
+    expect(element.className).toContain('sky-column-xs-2');
+    expect(element.className).toContain('sky-column-sm-3');
+    expect(element.className).toContain('sky-column-md-7');
+    expect(element.className).toContain('sky-column-lg-4');
+  });
 });

src/modules/fluid-grid/column.component.ts

@@ -2,15 +2,18 @@ import {
   Component,
   HostBinding,
   Input,
-  OnInit
+  OnInit,
+  SimpleChanges,
+  OnChanges
 } from '@angular/core';
 
 @Component({
   selector: 'sky-column',
   templateUrl: './column.component.html',
   styleUrls: ['./column.component.scss']
 })
-export class SkyColumnComponent implements OnInit {
+export class SkyColumnComponent implements OnInit, OnChanges {
+
   @Input()
   public screenXSmall: number;
 
@@ -26,6 +29,12 @@ export class SkyColumnComponent implements OnInit {
   @HostBinding('class')
   private classnames: string;
 
+  public ngOnChanges(changes: SimpleChanges) {
+    if (changes.screenXSmall || changes.screenSmall || changes.screenMedium || changes.screenLarge) {
+      this.classnames = this.getClassNames();
+    }
+  }
+
   public getClassNames(): string {
     let classnames = [
       'sky-column'

src/modules/fluid-grid/fixtures/column.component.fixture.html

@@ -0,0 +1,8 @@
+<sky-column
+  [screenXSmall]="xsSize"
+  [screenSmall]="smallSize"
+  [screenMedium]="mediumSize"
+  [screenLarge]="largeSize"
+>
+  Test Column
+</sky-column>

src/modules/fluid-grid/fixtures/column.component.fixture.ts

@@ -0,0 +1,16 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './column.component.fixture.html'
+})
+export class ColumnTestComponent {
+
+  public xsSize = 1;
+  public smallSize = 1;
+  public mediumSize = 2;
+  public largeSize = 5;
+
+}