Merge pull request #438 from cal-smith/pill

feat(tag): add tag component

Author: zvonimirfras

.storybook/experimental.component.ts

@@ -1,13 +1,27 @@
-import { Component, AfterViewInit, OnDestroy } from "@angular/core";
+import {
+	Component,
+	AfterViewInit,
+	OnDestroy,
+	Input,
+	Output,
+	EventEmitter
+} from "@angular/core";
 import { ExperimentalService } from "../src/experimental.module";
 
 @Component({
 	selector: "app-experimental-component",
 	template: ``
 })
 export class ExperimentalComponenent implements AfterViewInit, OnDestroy {
+	@Input() set isExperimental(value: boolean) {
+		this.experimental.isExperimental = value;
+		this.isExperimentalChange.emit(this.experimental.isExperimental);
+	}
+	@Output() isExperimentalChange = new EventEmitter();
+
 	constructor(protected experimental: ExperimentalService) {
 		experimental.isExperimental = false;
+		this.isExperimentalChange.emit(this.isExperimental);
 	}
 
 	ngAfterViewInit() {
@@ -30,5 +44,6 @@ export class ExperimentalComponenent implements AfterViewInit, OnDestroy {
 		} else {
 			this.experimental.isExperimental = false;
 		}
+		this.isExperimentalChange.emit(this.experimental.isExperimental);
 	}
 }

src/index.ts

@@ -13,6 +13,7 @@ export * from "./dropdown/dropdown.module";
 export * from "./experimental.module";
 export * from "./file-uploader/file-uploader.module";
 export * from "./forms/forms.module";
+export * from "./grid/grid.module";
 export * from "./i18n/i18n.module";
 export * from "./icon/icon.module";
 export * from "./inline-loading/inline-loading.module";
@@ -35,6 +36,6 @@ export * from "./structured-list/structured-list.module";
 export * from "./switch/switch.module";
 export * from "./table/table.module";
 export * from "./tabs/tabs.module";
+export * from "./tag/tag.module";
 export * from "./tiles/tiles.module";
 export * from "./ui-shell/ui-shell.module";
-export * from "./grid/grid.module";

src/tag/tag.component.ts

@@ -0,0 +1,37 @@
+import {
+	Component,
+	Input,
+	HostBinding
+} from "@angular/core";
+
+/**
+ * Supported tag types for carbon v9
+ */
+export type TagType = "beta" | "community" | "custom" | "dedicated" | "experimental" | "ibm" | "local" | "private" | "third-party";
+
+/**
+ * Supported tag types for carbon v10
+ */
+export type TagTypeExperimental = "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "cool-gray" | "warm-gray";
+
+/**
+ * Component that represents a tag for labelling/categorizing using keywords
+ */
+@Component({
+	selector: "ibm-tag",
+	template: `<ng-content></ng-content>`
+})
+export class Tag {
+	/**
+	 * type of the tag determines the styling
+	 *
+	 * Reference `TagType` for v9 applications, and `TagTypeExperimental` for v10/v9 experimental mode applications
+	 */
+	@Input() type: TagType | TagTypeExperimental = "ibm";
+
+	@Input() class = "";
+
+	@HostBinding("attr.class") get attrClass() {
+		return `bx--tag bx--tag--${this.type} ${this.class}`;
+	}
+}

src/tag/tag.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Tag } from "./tag.component";
+
+export * from "./tag.component";
+
+@NgModule({
+	declarations: [ Tag ],
+	exports: [ Tag ],
+	imports: [ CommonModule ]
+})
+export class TagModule { }

src/tag/tag.stories.ts

@@ -0,0 +1,45 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withKnobs } from "@storybook/addon-knobs/angular";
+
+import { TagModule } from "../tag/tag.module";
+import { ExperimentalComponenent } from "../../.storybook/experimental.component";
+import { ExperimentalModule } from "../experimental.module";
+
+storiesOf("Tag", module)
+	.addDecorator(
+		moduleMetadata({
+			declarations: [
+				ExperimentalComponenent
+			],
+			imports: [
+				TagModule,
+				ExperimentalModule
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<app-experimental-component [(isExperimental)]="experimental"></app-experimental-component>
+			<ibm-tag [type]="(!experimental ? 'ibm' : 'warm-gray')" class="foo {{test}}">{{ !experimental ? "IBM" : "Warm-gray" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'beta' : 'red')">{{ !experimental ?  "Beta" : "Red" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'community' : 'magenta')">{{ !experimental ?  "Community" : "Magenta" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'custom' : 'purple')">{{ !experimental ?  "Custom" : "Purple" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'dedicated' : 'blue')">{{ !experimental ?  "Dedicated" : "Blue" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'experimental' : 'cyan')">{{ !experimental ?  "Experimental" : "Cyan" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'local' : 'teal')">{{ !experimental ?  "Local" : "Teal" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'private' : 'green')">{{ !experimental ?  "Private" : "Green" }}</ibm-tag>
+			<br><br>
+			<ibm-tag [type]="(!experimental ? 'third-party' : 'cool-gray')">{{ !experimental ?  "Third-party" : "Cool-gray" }}</ibm-tag>
+		`,
+		props: {
+			experimental: false
+		}
+	}));