Merge pull request #197 from esuau/feat/switch

feat(switch): Add small version of swich component

Author: zvonimirfras

src/dialog/tooltip/tooltip.stories.ts

@@ -9,7 +9,7 @@ storiesOf("Tooltip", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				DialogModule,
+				DialogModule
 			]
 		})
 	)

src/switch/switch.component.spec.ts

@@ -5,13 +5,14 @@ import { DebugElement } from "@angular/core";
 import { StaticIconModule } from "../icon/static-icon.module";
 
 import { SwitchComponent } from "./switch.component";
+import { CheckboxComponent } from "../checkbox/checkbox.module";
 
 describe("SwitchComponent", () => {
 	let component: SwitchComponent;
 	let fixture: ComponentFixture<SwitchComponent>;
-	let de: DebugElement;
-	let el: HTMLElement;
+	let labelElement: HTMLElement;
 	let buttonElement: HTMLElement;
+	let svgElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -22,15 +23,22 @@ describe("SwitchComponent", () => {
 
 		fixture = TestBed.createComponent(SwitchComponent);
 		component = fixture.componentInstance;
-		de = fixture.debugElement.query(By.css("label"));
-		el = de.nativeElement;
+		fixture.detectChanges();
+		labelElement = fixture.debugElement.query(By.css("label")).nativeElement;
 		buttonElement = fixture.debugElement.query(By.css("input")).nativeElement;
 	});
 
 	it("should work", () => {
 		expect(component instanceof SwitchComponent).toBe(true);
 	});
 
+	it("should have input with class 'bx--toggle'", () => {
+		expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
+		component.size = "sm";
+		fixture.detectChanges();
+		expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
+	});
+
 	it("should change state", () => {
 		buttonElement.click();
 		fixture.detectChanges();
@@ -40,4 +48,20 @@ describe("SwitchComponent", () => {
 		fixture.detectChanges();
 		expect(component.checked).toBe(false, "setting to off");
 	});
+
+	it("should display small version of switch when size equals sm", () => {
+		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(false);
+		component.size = "sm";
+		fixture.detectChanges();
+		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(true);
+	});
+
+	it("should display SVG in small version of switch", () => {
+		component.size = "sm";
+		fixture.detectChanges();
+		labelElement = fixture.debugElement.query(By.css("label")).nativeElement;
+		expect(fixture.debugElement.query(By.css("svg")).nativeElement).not.toBeNull();
+		expect(labelElement.innerHTML).toContain("bx--toggle__check");
+	});
+
 });

src/switch/switch.component.ts

@@ -1,18 +1,10 @@
 import { CheckboxComponent } from "../checkbox/checkbox.component";
 import {
-	ChangeDetectionStrategy,
 	ChangeDetectorRef,
 	Component,
-	ElementRef,
-	EventEmitter,
-	forwardRef,
-	Input,
-	OnInit,
-	Output,
-	Renderer2,
-	ViewChild
+	Input
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 
 /**
@@ -61,16 +53,26 @@ export class SwitchChange {
 	template: `
 		<input
 			class="bx--toggle"
+			[ngClass]="{
+				'bx--toggle--small': size === 'sm'
+			}"
 			[id]="id"
 			type="checkbox"
 			(click)="onClick($event)"
 			[disabled]="disabled"
 			[attr.aria-checked]="checked">
-		<label class="bx--toggle__label" [for]="id">
+		<label *ngIf="size === 'md'" class="bx--toggle__label" [for]="id">
 			<span class="bx--toggle__text--left">Off</span>
 			<span class="bx--toggle__appearance"></span>
 			<span class="bx--toggle__text--right">On</span>
 		</label>
+		<label *ngIf="size === 'sm'" class="bx--toggle__label" [for]="id">
+			<span class="bx--toggle__appearance">
+				<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
+					<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
+				</svg>
+			</span>
+		</label>
 	`,
 	providers: [
 		{
@@ -80,7 +82,7 @@ export class SwitchChange {
 		}
 	]
 })
-export class SwitchComponent extends CheckboxComponent implements OnInit {
+export class SwitchComponent extends CheckboxComponent {
 	/**
 	 * Variable used for creating unique ids for switch components.
 	 * @type {number}
@@ -107,32 +109,10 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
 	/**
 	 * Creates an instance of SwitchComponent.
 	 * @param {ChangeDetectorRef} changeDetectorRef
-	 * @param {ElementRef} elementRef
-	 * @param {Renderer2} renderer
 	 * @memberof SwitchComponent
 	 */
-	constructor(protected changeDetectorRef: ChangeDetectorRef, private elementRef: ElementRef, private renderer: Renderer2) {
+	constructor(protected changeDetectorRef: ChangeDetectorRef) {
 		super(changeDetectorRef);
 		SwitchComponent.switchCount++;
 	}
-
-	/**
-	 * Builds variant classes and appends them to the switch and label elements.
-	 * @memberof SwitchComponent
-	 */
-	ngOnInit() {
-		/* TODO: remove and extend in neutrino
-		// Build variant classes
-		const labelClass = `toggle-label${this.size !== "md" ? `--${this.size}` : ""}`;
-		const buttonClass = `toggle${this.size !== "md" ? `--${this.size}` : ""}`;
-
-		// Get elements
-		const labelEl = this.elementRef.nativeElement.querySelector("label");
-		const buttonEl = this.elementRef.nativeElement.querySelector("button");
-
-		// Add classes to elements
-		this.renderer.addClass(labelEl, labelClass);
-		this.renderer.addClass(buttonEl, buttonClass);
-		*/
-	}
 }

src/switch/switch.stories.ts

@@ -10,7 +10,10 @@ storiesOf("Switch", module).addDecorator(
 )
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
-		template: `<ibm-switch [disabled]="disabled"></ibm-switch>`,
+		template: `
+			<ibm-switch [disabled]="disabled"></ibm-switch>
+			<ibm-switch [disabled]="disabled" size="sm"></ibm-switch>
+		`,
 		props: {
 			disabled: boolean("disabled", false)
 		}