Merge pull request #21 from cal-smith/master

Add input and select components

Author: cal-smith

src/index.ts

@@ -19,3 +19,4 @@ export * from "./checkbox/checkbox.module";
 export * from "./switch/switch.module";
 export * from "./radio/radio.module";
 export * from "./input/input.module";
+export * from "./select/select.module";

src/input/input.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	selector: "[ibmText]"
+})
+export class TextInput {
+	@HostBinding("class") inputClass = "bx--text-input";
+}

src/input/input.module.ts

@@ -4,21 +4,23 @@ import { FormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
 
 // imports
-import { LabelComponent } from "../input/label.component";
-
-// exports
-export { LabelComponent } from "../input/label.component";
+import { LabelComponent } from "./label.component";
+import { TextInput } from "./input.directive";
 
 @NgModule({
 	declarations: [
-		LabelComponent
+		LabelComponent,
+		TextInput
 	],
 	exports: [
-		LabelComponent
+		LabelComponent,
+		TextInput
 	],
 	imports: [
 		CommonModule,
 		FormsModule,
 	]
 })
-export class InputModule { }
+class InputModule { }
+
+export { TextInput, LabelComponent, InputModule };

src/input/input.stories.ts

@@ -17,4 +17,9 @@ storiesOf("Input", module).addDecorator(
 			<input type="text" class="bx--text-input" placeholder="Optional placeholder text">
 		</ibm-label>
 	`
+	}))
+	.add("Input", () => ({
+		template: `
+			<input ibmText/>
+		`
 	}));

src/select/optgroup.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	// tslint:disable-next-line
+	selector: "optgroup"
+})
+export class OptGroup {
+	@HostBinding("class") inputClass = "bx--select-option";
+}

src/select/option.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	// tslint:disable-next-line
+	selector: "option"
+})
+export class Option {
+	@HostBinding("class") inputClass = "bx--select-option";
+}

src/select/select.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+	selector: "ibm-select",
+	template: `
+		<div class="bx--form-item">
+			<div class="bx--select">
+				<label [attr.for]="id" class="bx--label">{{label}}</label>
+				<select [attr.id]="id" class="bx--select-input">
+					<ng-content></ng-content>
+				</select>
+				<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+				<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
+				</svg>
+			</div>
+		</div>
+	`
+})
+export class Select {
+	static selectCount = 0;
+	@Input() label = "Select label";
+	@Input() id = `select-${Select.selectCount++}`;
+}

src/select/select.module.ts

@@ -0,0 +1,29 @@
+// modules
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+
+// imports
+import { Select } from "./select.component";
+import { Option } from "./option.directive";
+import { OptGroup } from "./optgroup.directive";
+
+@NgModule({
+	declarations: [
+		Select,
+		Option,
+		OptGroup
+	],
+	exports: [
+		Select,
+		Option,
+		OptGroup
+	],
+	imports: [
+		CommonModule,
+		FormsModule,
+	]
+})
+class SelectModule { }
+
+export { Select, Option, OptGroup, SelectModule };

src/select/select.stories.ts

@@ -0,0 +1,28 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+
+import { SelectModule } from "../";
+
+storiesOf("Select", module).addDecorator(
+	moduleMetadata({
+		imports: [SelectModule]
+	})
+)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+		<ibm-select>
+			<option value="" disabled selected hidden>Choose an option</option>
+          <option value="solong">A much longer option that is worth having around to check how text flows</option>
+          <optgroup label="Category 1">
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+          </optgroup>
+          <optgroup label="Category 2">
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+          </optgroup>
+		</ibm-select>
+	`
+	}));