feat(select): first pass at a basic select component

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

@@ -1,4 +1,4 @@
-import { Directive, Input, HostBinding } from "@angular/core";
+import { Directive, HostBinding } from "@angular/core";
 
 @Directive({
 	selector: "[ibmText]"

src/select/optgroup.directive.ts

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

src/select/option.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	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>
+	`
+	}));