Merge pull request #494 from youda97/toggle-label

fix(toggle): Add label and update knobs

Author: zvonimirfras

src/toggle/toggle.component.ts

@@ -42,6 +42,7 @@ export class ToggleChange {
 @Component({
 	selector: "ibm-toggle",
 	template: `
+		<div *ngIf="label" class="bx--label" [id]="ariaLabelledby">{{label}}</div>
 		<input
 			class="bx--toggle"
 			type="checkbox"
@@ -55,6 +56,7 @@ export class ToggleChange {
 			[required]="required"
 			[checked]="checked"
 			[disabled]="disabled"
+			[attr.aria-labelledby]="ariaLabelledby"
 			[attr.aria-checked]="checked"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
@@ -110,8 +112,11 @@ export class Toggle extends Checkbox {
 	get onText() {
 		return this._onText;
 	}
-
-
+	/**
+	 * Text that is set as the label of the toggle.
+	 * @type {(string)}
+	 */
+	@Input() label: string;
 	/**
 	 * Size of the toggle component.
 	 */

src/toggle/toggle.stories.ts

@@ -1,5 +1,10 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs, boolean, select } from "@storybook/addon-knobs/angular";
+import {
+	withKnobs,
+	boolean,
+	select,
+	text
+} from "@storybook/addon-knobs/angular";
 
 import { ToggleModule } from "../";
 
@@ -11,12 +16,22 @@ storiesOf("Toggle", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<ibm-toggle [disabled]="disabled" [checked]="checked" [size]="size"></ibm-toggle>
+			<ibm-toggle
+				[label]="labelText"
+				[onText]="onText"
+				[offText]="offText"
+				[disabled]="disabled"
+				[checked]="checked"
+				[size]="size">
+			</ibm-toggle>
 		`,
 		props: {
-			disabled: boolean("disabled", false),
-			checked: boolean("checked", false),
-			size: select("size", ["md", "sm"], "md")
+			disabled: boolean("Disabled", false),
+			checked: boolean("Checked", false),
+			size: select("Size", ["md", "sm"], "md"),
+			labelText: text("Label text", ""),
+			onText: text("On text", "On"),
+			offText: text("Off text", "Off")
 		}
 	}))
 	.add("Skeleton", () => ({