refactor(forms): move form related components to seperate modules

Author: cal-smith

src/forms/checkbox.component.spec.ts src/checkbox/checkbox.component.spec.tssrc/forms/checkbox.component.spec.ts renamed to src/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,24 @@
+// modules
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+
+// imports
+import { CheckboxComponent } from "./checkbox.component";
+
+// exports
+export { CheckboxComponent } from "./checkbox.component";
+
+@NgModule({
+	declarations: [
+		CheckboxComponent,
+	],
+	exports: [
+		CheckboxComponent,
+	],
+	imports: [
+		CommonModule,
+		FormsModule
+	]
+})
+export class CheckboxModule { }

src/forms/checkbox.component.ts src/checkbox/checkbox.component.tssrc/forms/checkbox.component.ts renamed to src/checkbox/checkbox.component.ts

@@ -0,0 +1,31 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+
+import { CheckboxModule } from "../";
+
+storiesOf("Checkbox", module).addDecorator(
+	moduleMetadata({
+		imports: [CheckboxModule]
+	})
+)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+		<ibm-checkbox
+			[checked]="checked"
+			[disabled]="disabled"
+			[indeterminate]="indeterminate"
+			(change)="onChange($event)"
+			(indeterminateChange)="onIndeterminateChange($event)">
+			Checkbox
+		</ibm-checkbox>
+	`,
+		props: {
+			checked: boolean("checked", false),
+			disabled: boolean("disabled", false),
+			indeterminate: boolean("indeterminate", false),
+			onChange: action("Change fired!"),
+			onIndeterminateChange: action("Indeterminate change fired!")
+		}
+	}));

src/checkbox/checkbox.module.ts

@@ -2,39 +2,37 @@
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
-import { StaticIconModule } from "./../icon/static-icon.module";
 
 // imports
-import { CheckboxComponent } from "./checkbox.component";
-import { SwitchComponent } from "./switch.component";
-import { RadioComponent, RadioGroup } from "./radio.component";
-import { LabelComponent } from "./label.component";
+import { CheckboxModule } from "../checkbox/checkbox.module";
+import { SwitchModule } from "../switch/switch.module";
+import { RadioModule } from "../radio/radio.module";
+import { InputModule } from "../input/input.module";
+import { ButtonModule } from "../button/button.module";
 
 // exports
-export { CheckboxComponent } from "./checkbox.component";
-export { SwitchComponent } from "./switch.component";
-export { RadioComponent, RadioGroup } from "./radio.component";
-export { LabelComponent } from "./label.component";
+export { CheckboxModule } from "../checkbox/checkbox.module";
+export { SwitchModule } from "../switch/switch.module";
+export { RadioModule } from "../radio/radio.module";
+export { InputModule } from "../input/input.module";
+export { ButtonModule } from "../button/button.module";
 
 @NgModule({
-	declarations: [
-		CheckboxComponent,
-		SwitchComponent,
-		RadioComponent,
-		RadioGroup,
-		LabelComponent
-	],
 	exports: [
-		CheckboxComponent,
-		SwitchComponent,
-		RadioComponent,
-		RadioGroup,
-		LabelComponent
+		CheckboxModule,
+		SwitchModule,
+		RadioModule,
+		InputModule,
+		ButtonModule
 	],
 	imports: [
 		CommonModule,
 		FormsModule,
-		StaticIconModule
+		CheckboxModule,
+		SwitchModule,
+		RadioModule,
+		InputModule,
+		ButtonModule
 	]
 })
 export class NFormsModule { }

src/checkbox/checkbox.stories.ts

@@ -15,3 +15,7 @@ export * from "./utils/position";
 export * from "./content-switcher/content-switcher.module";
 export * from "./accordion/accordion.module";
 export * from "./button/button.module";
+export * from "./checkbox/checkbox.module";
+export * from "./switch/switch.module";
+export * from "./radio/radio.module";
+export * from "./input/input.module";

src/forms/forms.module.ts

@@ -0,0 +1,24 @@
+// modules
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+
+// imports
+import { LabelComponent } from "../input/label.component";
+
+// exports
+export { LabelComponent } from "../input/label.component";
+
+@NgModule({
+	declarations: [
+		LabelComponent
+	],
+	exports: [
+		LabelComponent
+	],
+	imports: [
+		CommonModule,
+		FormsModule,
+	]
+})
+export class InputModule { }

src/forms/forms.stories.ts

@@ -0,0 +1,20 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+
+import { InputModule } from "../";
+
+storiesOf("Input", module).addDecorator(
+	moduleMetadata({
+		imports: [InputModule]
+	})
+)
+	.addDecorator(withKnobs)
+	.add("Label", () => ({
+		template: `
+		<ibm-label>
+			Some Title
+			<input type="text" class="bx--text-input" placeholder="Optional placeholder text">
+		</ibm-label>
+	`
+	}));

src/index.ts

@@ -2,7 +2,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { DebugElement } from "@angular/core";
-import { StaticIconModule } from "./../icon/static-icon.module";
+import { StaticIconModule } from "../icon/static-icon.module";
 
 import { LabelComponent } from "./label.component";