Merge pull request #200 from youda97/master

Add loading components

Author: zvonimirfras

src/i18n/en.json

@@ -63,6 +63,9 @@
 			"RESET_SEARCH": "Reset search"
 		}
 	},
+	"LOADING": {
+		"TITLE": "Loading"
+	},
 	"MODAL": {
 		"CLOSE": "Close modal"
 	},

src/index.ts

@@ -24,3 +24,4 @@ export * from "./tiles/tiles.module";
 export * from "./progress-indicator/progress-indicator.module";
 export * from "./i18n/i18n.module";
 export * from "./pagination/pagination.module";
+export * from "./loading/loading.module";

src/loading/loading.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { Loading } from "./loading.component";
+import { I18nModule } from "../i18n/i18n.module";
+
+describe("Loading", () => {
+	let component: Loading;
+	let fixture: ComponentFixture<Loading>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [Loading],
+			imports: [I18nModule]
+		});
+
+		fixture = TestBed.createComponent(Loading);
+		component = fixture.componentInstance;
+	});
+
+	it("should work", () => {
+		expect(component instanceof Loading).toBe(true);
+	});
+});

src/loading/loading.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, HostBinding } from "@angular/core";
+import { I18n } from "./../i18n/i18n.module";
+
+@Component({
+	selector: "ibm-loading",
+	template: `
+		<div
+			[ngClass]="{'bx--loading--small': size === 'sm'}"
+			class="bx--loading">
+			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+				<title>{{title}}</title>
+				<circle cx="0" cy="0" r="37.5" />
+			</svg>
+		</div>
+	`
+})
+export class Loading {
+	/**
+	 * Accessible title for the loading circle.
+	 * Defaults to the `LOADING.TITLE` value from the i18n service.
+	 */
+	@Input() title = this.i18n.get().LOADING.TITLE;
+
+	/**
+	 * Specify the size of the button
+	 * @type {("normal" | "sm")}
+	 * @memberof Loading
+	 */
+	@Input() size: "normal" | "sm" = "normal";
+
+	/**
+	 * Set to `true` to make loader with an overlay.
+	 * @type {boolean}
+	 * @memberof Loading
+	 */
+	@Input() @HostBinding("class.bx--loading-overlay") overlay = false;
+
+	constructor(private i18n: I18n) {}
+}

src/loading/loading.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Loading } from "./loading.component";
+import { I18nModule } from "./../i18n/i18n.module";
+
+export { Loading } from "./loading.component";
+
+@NgModule({
+	declarations: [Loading],
+	exports: [Loading],
+	imports: [CommonModule, I18nModule]
+})
+export class LoadingModule {}

src/loading/loading.stories.ts

@@ -0,0 +1,22 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+
+import { LoadingModule } from "../";
+
+storiesOf("Loading", module).addDecorator(
+	moduleMetadata({
+		imports: [LoadingModule]
+	})
+)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+		<ibm-loading [overlay]="true"></ibm-loading>
+		`
+	}))
+	.add("Small", () => ({
+		template: `
+		<ibm-loading size="sm"></ibm-loading>
+		`
+	}));