feat(number): Implement with no label

Author: esuau

src/i18n/en.json

@@ -80,9 +80,6 @@
 	"NOTIFICATION": {
 		"CLOSE_BUTTON": "Close alert notification"
 	},
-	"NUMBER": {
-		"LABEL": "Number Input label"
-	},
 	"OVERFLOW_MENU": {
 		"OVERFLOW": "Overflow"
 	},

src/number-input/number.component.spec.ts

@@ -12,6 +12,7 @@ describe("Number", () => {
 	let containerElement: HTMLElement;
 	let buttonUp: HTMLButtonElement;
 	let buttonDown: HTMLButtonElement;
+	let labelElement: HTMLDivElement;
 	let helperTextElement: HTMLDivElement;
 
 	beforeEach(() => {
@@ -26,6 +27,7 @@ describe("Number", () => {
 		fixture = TestBed.createComponent(Number);
 		component = fixture.componentInstance;
 		inputElement = fixture.debugElement.query(By.css("input")).nativeElement;
+		containerElement = fixture.debugElement.query(By.css(".bx--number")).nativeElement;
 	});
 
 	it("should work", () => {
@@ -63,8 +65,20 @@ describe("Number", () => {
 		expect(inputElement.required).toEqual(true);
 	});
 
+	it("should bind input label", () => {
+		component.label = "Number Input";
+		fixture.detectChanges();
+		labelElement = fixture.debugElement.query(By.css(".bx--label")).nativeElement;
+		expect(labelElement.innerHTML.includes("Number Input")).toEqual(true);
+		expect(containerElement.className.includes("bx--number--nolabel")).toEqual(false);
+
+		component.label = null;
+		fixture.detectChanges();
+		expect(fixture.debugElement.query(By.css(".bx--label"))).toBeNull();
+		expect(containerElement.className.includes("bx--number--nolabel")).toEqual(true);
+	});
+
 	it("should bind input helperText", () => {
-		containerElement = fixture.debugElement.query(By.css(".bx--number")).nativeElement;
 		component.helperText = "Helper text here.";
 		fixture.detectChanges();
 		helperTextElement = fixture.debugElement.query(By.css(".bx--form__helper-text")).nativeElement;
@@ -116,7 +130,6 @@ describe("Number", () => {
 	});
 
 	it("should have dark and light theme", () => {
-		containerElement = fixture.debugElement.query(By.css(".bx--number")).nativeElement;
 		component.theme = "dark";
 		fixture.detectChanges();
 		expect(containerElement.className.includes("bx--number--light")).toEqual(false);

src/number-input/number.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
-import { I18n } from "../i18n/i18n.module";
 
 /**
  * Used to emit changes performed on number input components.
@@ -35,9 +34,10 @@ export class NumberChange {
 			class="bx--number"
 			[ngClass]="{
 				'bx--number--light': theme === 'light',
+				'bx--number--nolabel': !label,
 				'bx--number--helpertext': helperText
 			}">
-			<label [for]="id" class="bx--label">{{label}}</label>
+			<label *ngIf="label" [for]="id" class="bx--label">{{label}}</label>
 			<input
 				type="number"
 				[id]="id"
@@ -112,7 +112,7 @@ export class Number implements ControlValueAccessor {
 	/**
 	 * Sets the text inside the `label` tag.
 	 */
-	@Input() label = this.i18n.get().NUMBER.LABEL;
+	@Input() label;
 	/**
 	 * Sets the optional helper text.
 	 */
@@ -122,7 +122,11 @@ export class Number implements ControlValueAccessor {
 	 */
 	@Output() change = new EventEmitter<NumberChange>();
 
-	constructor(protected i18n: I18n) {
+	/**
+	 * Creates an instance of `Number`.
+	 * @memberof Number
+	 */
+	constructor() {
 		Number.numberCount++;
 	}
 

src/number-input/number.stories.ts

@@ -10,6 +10,24 @@ storiesOf("Number", module).addDecorator(
 )
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
+		template: `
+			<div style="width: 250px;">
+				<ibm-number
+					label="Number Input label"
+					[theme]="theme"
+					[min]="min"
+					[max]="max"
+					[disabled]="disabled"></ibm-number>
+			</div>
+		`,
+		props: {
+			theme: select("theme", ["dark", "light"], "dark"),
+			min: number("min", 0),
+			max: number("max", 100),
+			disabled: boolean("disabled", false)
+		}
+	}))
+	.add("With no label", () => ({
 		template: `
 			<div style="width: 250px;">
 				<ibm-number
@@ -30,6 +48,7 @@ storiesOf("Number", module).addDecorator(
 		template: `
 			<div style="width: 250px;">
 				<ibm-number
+					label="Number Input label"
 					helperText="Optional helper text here"
 					[theme]="theme"
 					[min]="min"