feat(switch): #68 Add small version of switch component

Author: esuau

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,8 +23,8 @@ 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;
 	});
 
@@ -40,4 +41,21 @@ describe("SwitchComponent", () => {
 		fixture.detectChanges();
 		expect(component.checked).toBe(false, "setting to off");
 	});
+
+	it("should display small version of switch when size equals sm", () => {
+		component.size = "sm";
+		component.ngOnInit();
+		fixture.detectChanges();
+		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(true);
+	});
+
+	it("should display SVG in small version of switch", () => {
+		component.size = "sm";
+		component.ngOnInit();
+		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

@@ -66,11 +66,18 @@ export class SwitchChange {
 			(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: [
 		{
@@ -134,5 +141,9 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
 		this.renderer.addClass(labelEl, labelClass);
 		this.renderer.addClass(buttonEl, buttonClass);
 		*/
+		if (this.size === "sm") {
+			const inputEl = this.elementRef.nativeElement.querySelector("input");
+			this.renderer.addClass(inputEl, "bx--toggle--small");
+		}
 	}
 }

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 [size]="'sm'"></ibm-switch>
+		`,
 		props: {
 			disabled: boolean("disabled", false)
 		}