Merge pull request #160 from panpan-lin/angular-directive-carbon-links

Create an Angular Directive for Carbon link

Author: zvonimirfras

src/index.ts

@@ -12,6 +12,7 @@ export * from "./forms/forms.module";
 export * from "./i18n/i18n.module";
 export * from "./icon/icon.module";
 export * from "./input/input.module";
+export * from "./link/link.module";
 export * from "./list-group/list-group.module";
 export * from "./loading/loading.module";
 export * from "./modal/modal.module";
@@ -26,5 +27,3 @@ export * from "./switch/switch.module";
 export * from "./table/table.module";
 export * from "./tabs/tabs.module";
 export * from "./tiles/tiles.module";
-export * from "./toggle/toggle.module";
-export * from "./utils/position";

src/link/link.directive.ts

@@ -0,0 +1,47 @@
+import {
+	Directive,
+	HostBinding,
+	Input
+} from "@angular/core";
+
+/**
+ * A convinence directive for applying styling to a link.
+ *
+ * Example:
+ *
+ * ```hmtl
+ * <a href="#" ibmLink>A link</a>
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.
+ */
+@Directive({
+	selector: "[ibmLink]"
+})
+
+export class Link {
+	@HostBinding("class.bx--link") baseClass = true;
+
+	/**
+	 * Automatically set to `-1` when link is disabled.
+	 * @memberof Link
+	 */
+	@HostBinding("attr.tabindex") tabindex;
+
+	/**
+	 * Set to true to disable link.
+	 * @memberof Link
+	 */
+	@Input()
+	@HostBinding("attr.aria-disabled")
+	set disabled(disabled: boolean) {
+		this._disabled = disabled;
+		this.tabindex = this.disabled ? -1 : null;
+	}
+
+	get disabled(): boolean {
+		return this._disabled;
+	}
+
+	private _disabled;
+}

src/link/link.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Link } from "./link.directive";
+
+export { Link } from "./link.directive";
+
+@NgModule({
+	declarations: [
+		Link
+	],
+	exports: [
+		Link
+	],
+	imports: [
+		CommonModule
+	]
+})
+export class LinkModule {}

src/link/link.spec.ts

@@ -0,0 +1,50 @@
+import { TestBed, ComponentFixture } from "@angular/core/testing";
+import { Component, Input, DebugElement } from "@angular/core";
+import { By } from "@angular/platform-browser";
+
+import { Link } from "./link.directive";
+
+describe("Link", () => {
+	it("should create a Link", () => {
+		TestBed.configureTestingModule({
+			declarations: [TestLinkComponent, Link]
+		});
+
+		let fixture: ComponentFixture<TestLinkComponent> = TestBed.createComponent(TestLinkComponent);
+		let component: TestLinkComponent = fixture.componentInstance;
+		fixture.detectChanges();
+
+		expect(component).toBeTruthy();
+		const directiveEl = fixture.debugElement.query(By.directive(Link));
+		expect(directiveEl).not.toBeNull();
+		expect(directiveEl.attributes["aria-disabled"]).toBe(null);
+		expect(directiveEl.attributes["tabindex"]).toBe(null);
+		expect(directiveEl.attributes["href"]).toBe("https://angular.carbondesignsystem.com/");
+	});
+
+	it("should create a disabled link", () => {
+		TestBed.configureTestingModule({
+			declarations: [TestDisabledLinkComponent, Link]
+		});
+
+		let fixture: ComponentFixture<TestDisabledLinkComponent> = TestBed.createComponent(TestDisabledLinkComponent);
+		let component: TestDisabledLinkComponent = fixture.componentInstance;
+		fixture.detectChanges();
+
+		const directiveEl = fixture.debugElement.query(By.directive(Link));
+		expect(directiveEl.attributes["aria-disabled"]).toBe("true");
+		expect(directiveEl.attributes["tabindex"]).toBe("-1");
+	});
+});
+
+@Component({
+	template: `<a href="https://angular.carbondesignsystem.com/" ibmLink>link</a>`
+})
+class TestLinkComponent {
+}
+
+@Component({
+	template: `<a href="https://angular.carbondesignsystem.com/" [disabled]="1+1===2" ibmLink>link</a>`
+})
+class TestDisabledLinkComponent {
+}

src/link/link.stories.ts

@@ -0,0 +1,22 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+
+import { LinkModule } from "../";
+
+storiesOf("Link", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [
+				LinkModule
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<a href="#" ibmLink [disabled]="disabled">link</a>
+		`,
+		props: {
+			disabled: boolean("disabled", false)
+		}
+	}));