From 372253f6d2e6657ba67ac31cbbb6390f3f13150f Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Tue, 23 Oct 2018 13:19:58 +0200
Subject: [PATCH 1/6] feat(switch): IBM/carbon-components-angular#68 Add small
 version of switch component

---
 src/switch/switch.component.spec.ts | 26 ++++++++++++++++++++++----
 src/switch/switch.component.ts      | 13 ++++++++++++-
 src/switch/switch.stories.ts        |  5 ++++-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/switch/switch.component.spec.ts b/src/switch/switch.component.spec.ts
index 288c6f2765..49ec1f4d99 100644
--- a/src/switch/switch.component.spec.ts
+++ b/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");
+	});
+
 });
diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
index cc0320b7d5..3ae87c4181 100644
--- a/src/switch/switch.component.ts
+++ b/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");
+		}
 	}
 }
diff --git a/src/switch/switch.stories.ts b/src/switch/switch.stories.ts
index f3a69912b2..1baba9fa3b 100644
--- a/src/switch/switch.stories.ts
+++ b/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)
 		}

From b1811dd76749b0f77596982d29a322fa6cc25d90 Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Tue, 23 Oct 2018 19:37:31 +0200
Subject: [PATCH 2/6] fix(switch): IBM/carbon-components-angular#197 Add
 missing 'disabled' attribute

---
 src/switch/switch.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/switch/switch.stories.ts b/src/switch/switch.stories.ts
index 1baba9fa3b..a0bd359187 100644
--- a/src/switch/switch.stories.ts
+++ b/src/switch/switch.stories.ts
@@ -12,7 +12,7 @@ storiesOf("Switch", module).addDecorator(
 	.add("Basic", () => ({
 		template: `
 		<ibm-switch [disabled]="disabled"></ibm-switch>
-		<ibm-switch [size]="'sm'"></ibm-switch>
+		<ibm-switch [disabled]="disabled" [size]="'sm'"></ibm-switch>
 		`,
 		props: {
 			disabled: boolean("disabled", false)

From 22860d1b2d57db7419cb51ae44f8dd6a9908bdd5 Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Tue, 23 Oct 2018 20:04:28 +0200
Subject: [PATCH 3/6] fix(switch): IBM/carbon-components-angular#197 Use
 ngClass instead of renderer

---
 src/switch/switch.component.spec.ts |  3 +--
 src/switch/switch.component.ts      | 40 ++++++-----------------------
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/src/switch/switch.component.spec.ts b/src/switch/switch.component.spec.ts
index 49ec1f4d99..6428d79d6d 100644
--- a/src/switch/switch.component.spec.ts
+++ b/src/switch/switch.component.spec.ts
@@ -43,15 +43,14 @@ describe("SwitchComponent", () => {
 	});
 
 	it("should display small version of switch when size equals sm", () => {
+		expect(buttonElement.className.includes("bx--toggle--small")).toEqual(false);
 		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();
diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
index 3ae87c4181..168c5985c6 100644
--- a/src/switch/switch.component.ts
+++ b/src/switch/switch.component.ts
@@ -1,18 +1,11 @@
 import { CheckboxComponent } from "../checkbox/checkbox.component";
 import {
-	ChangeDetectionStrategy,
 	ChangeDetectorRef,
 	Component,
-	ElementRef,
-	EventEmitter,
-	forwardRef,
 	Input,
-	OnInit,
-	Output,
-	Renderer2,
-	ViewChild
+	OnInit
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 
 /**
@@ -60,7 +53,10 @@ export class SwitchChange {
 	selector: "ibm-switch",
 	template: `
 		<input
-			class="bx--toggle"
+			[ngClass]="{
+				'bx--toggle': true,
+				'bx--toggle--small': size === 'sm'
+			}"
 			[id]="id"
 			type="checkbox"
 			(click)="onClick($event)"
@@ -114,11 +110,9 @@ 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++;
 	}
@@ -127,23 +121,5 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
 	 * 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);
-		*/
-		if (this.size === "sm") {
-			const inputEl = this.elementRef.nativeElement.querySelector("input");
-			this.renderer.addClass(inputEl, "bx--toggle--small");
-		}
-	}
+	ngOnInit() { }
 }

From 5b6f8b5a81f0fdecf7215649a85c7c9793d83596 Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Wed, 24 Oct 2018 01:15:20 +0200
Subject: [PATCH 4/6] IBM/carbon-components-angular#197 Perform code cleaning

---
 src/switch/switch.component.ts | 11 ++---------
 src/switch/switch.stories.ts   |  4 ++--
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
index 168c5985c6..b4d9f73a42 100644
--- a/src/switch/switch.component.ts
+++ b/src/switch/switch.component.ts
@@ -2,8 +2,7 @@ import { CheckboxComponent } from "../checkbox/checkbox.component";
 import {
 	ChangeDetectorRef,
 	Component,
-	Input,
-	OnInit
+	Input
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -83,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}
@@ -116,10 +115,4 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
 		super(changeDetectorRef);
 		SwitchComponent.switchCount++;
 	}
-
-	/**
-	 * Builds variant classes and appends them to the switch and label elements.
-	 * @memberof SwitchComponent
-	 */
-	ngOnInit() { }
 }
diff --git a/src/switch/switch.stories.ts b/src/switch/switch.stories.ts
index a0bd359187..145edf958b 100644
--- a/src/switch/switch.stories.ts
+++ b/src/switch/switch.stories.ts
@@ -11,8 +11,8 @@ storiesOf("Switch", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<ibm-switch [disabled]="disabled"></ibm-switch>
-		<ibm-switch [disabled]="disabled" [size]="'sm'"></ibm-switch>
+			<ibm-switch [disabled]="disabled"></ibm-switch>
+			<ibm-switch [disabled]="disabled" size="sm"></ibm-switch>
 		`,
 		props: {
 			disabled: boolean("disabled", false)

From 864babe204b60376e751b9b04302f99a6f2d95c6 Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Wed, 24 Oct 2018 01:18:09 +0200
Subject: [PATCH 5/6] Remove unnecessary trailing comma

---
 src/dialog/tooltip/tooltip.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dialog/tooltip/tooltip.stories.ts b/src/dialog/tooltip/tooltip.stories.ts
index bd0ccee5af..e5cf26332e 100644
--- a/src/dialog/tooltip/tooltip.stories.ts
+++ b/src/dialog/tooltip/tooltip.stories.ts
@@ -9,7 +9,7 @@ storiesOf("Tooltip", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				DialogModule,
+				DialogModule
 			]
 		})
 	)

From f8ed01a1459a5ae9ca8be7ca5d1f1cdb16f8574e Mon Sep 17 00:00:00 2001
From: esuau <evan.suau@etu.u-pec.fr>
Date: Wed, 24 Oct 2018 20:37:48 +0200
Subject: [PATCH 6/6] IBM/carbon-components-angular#197 Restore immutable class
 in native attribute

---
 src/switch/switch.component.spec.ts | 7 +++++++
 src/switch/switch.component.ts      | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/switch/switch.component.spec.ts b/src/switch/switch.component.spec.ts
index 6428d79d6d..a79b6051bd 100644
--- a/src/switch/switch.component.spec.ts
+++ b/src/switch/switch.component.spec.ts
@@ -32,6 +32,13 @@ describe("SwitchComponent", () => {
 		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();
diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
index b4d9f73a42..9eedd6649e 100644
--- a/src/switch/switch.component.ts
+++ b/src/switch/switch.component.ts
@@ -52,8 +52,8 @@ export class SwitchChange {
 	selector: "ibm-switch",
 	template: `
 		<input
+			class="bx--toggle"
 			[ngClass]="{
-				'bx--toggle': true,
 				'bx--toggle--small': size === 'sm'
 			}"
 			[id]="id"