Merge pull request #17 from cal-smith/master

feat(button): add button directive

src/button/button.directive.ts

@@ -0,0 +1,57 @@
+import {
+	Directive,
+	HostBinding,
+	Input,
+	OnInit
+} from "@angular/core";
+
+/**
+ * A convinence directive for applying styling to a button.
+ *
+ * Example:
+ *
+ * ```hmtl
+ * <button ibmButton>A button</button>
+ * <button ibmButton="secondary">A secondary button</button>
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
+ */
+@Directive({
+	selector: "[ibmButton]"
+})
+export class Button implements OnInit {
+	/**
+	 * sets the button type
+	 */
+	@Input() ibmButton: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary";
+	/**
+	 * Specify the size of the button
+	 */
+	@Input() size: "normal" | "sm" = "normal";
+	// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
+	@HostBinding("class") btnClass = "bx--btn";
+	@HostBinding("class.bx--btn--primary") primary = true;
+	@HostBinding("class.bx--btn--secondary") secondary = false;
+	@HostBinding("class.bx--btn--tertiary") tertiary = false;
+	@HostBinding("class.bx--btn--ghost") ghost = false;
+	@HostBinding("class.bx--btn--danger") danger = false;
+	@HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
+	@HostBinding("class.bx--btn--sm") smallSize = false;
+
+	ngOnInit() {
+		if (this.size === "sm") {
+			this.smallSize = true;
+		}
+		this.primary = false;
+		switch (this.ibmButton) {
+			case "primary": this.primary = true; break;
+			case "secondary": this.secondary = true; break;
+			case "tertiary": this.tertiary = true; break;
+			case "ghost": this.ghost = true; break;
+			case "danger": this.danger = true; break;
+			case "danger--primary": this.dangerPrimary = true; break;
+			default: this.primary = true; break;
+		}
+	}
+}

src/button/button.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Button } from "./button.directive";
+
+export { Button } from "./button.directive";
+
+@NgModule({
+	declarations: [Button],
+	exports: [Button],
+	imports: [CommonModule]
+})
+export class ButtonModule { }

src/button/button.stories.ts

@@ -0,0 +1,44 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withNotes } from "@storybook/addon-notes";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+
+import { ButtonModule } from "../";
+
+storiesOf("Button", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [ButtonModule]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<button ibmButton>A button</button>
+			<br><br>
+			<button ibmButton="secondary">A secondary button</button>
+			<br><br>
+			<button ibmButton="tertiary">A tertiary button</button>
+			<br><br>
+			<button ibmButton="ghost">A ghost button</button>
+			<br><br>
+			<button ibmButton="danger">A danger button</button>
+			<br><br>
+			<button ibmButton="danger--primary">A primary danger button</button>
+		`
+	}))
+	.add("Small", () => ({
+		template: `
+			<button ibmButton size="sm">A button</button>
+			<br><br>
+			<button ibmButton="secondary" size="sm">A secondary button</button>
+			<br><br>
+			<button ibmButton="tertiary" size="sm">A tertiary button</button>
+			<br><br>
+			<button ibmButton="ghost" size="sm">A ghost button</button>
+			<br><br>
+			<button ibmButton="danger" size="sm">A danger button</button>
+			<br><br>
+			<button ibmButton="danger--primary" size="sm">A primary danger button</button>
+		`
+	}));

src/index.ts

@@ -14,3 +14,4 @@ export * from "./pill-input/pill-input.module";
 export * from "./utils/position";
 export * from "./content-switcher/content-switcher.module";
 export * from "./accordion/accordion.module";
+export * from "./button/button.module";