diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts new file mode 100644 index 0000000000..85efc9e5db --- /dev/null +++ b/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 + * + * + * ``` + * + * 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; + } + } +} diff --git a/src/button/button.module.ts b/src/button/button.module.ts new file mode 100644 index 0000000000..90af01b04a --- /dev/null +++ b/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 { } diff --git a/src/button/button.stories.ts b/src/button/button.stories.ts new file mode 100644 index 0000000000..28adf10e4c --- /dev/null +++ b/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: ` + +

+ +

+ +

+ +

+ +

+ + ` + })) + .add("Small", () => ({ + template: ` + +

+ +

+ +

+ +

+ +

+ + ` + })); diff --git a/src/index.ts b/src/index.ts index ae57ed33b3..de47fa6545 100644 --- a/src/index.ts +++ b/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";