Merge pull request #239 from youda97/master

feat(inline-loading): Add inline loading component

Author: zvonimirfras

src/index.ts

@@ -11,6 +11,7 @@ export * from "./dropdown/dropdown.module";
 export * from "./forms/forms.module";
 export * from "./i18n/i18n.module";
 export * from "./icon/icon.module";
+export * from "./inline-loading/inline-loading.module";
 export * from "./input/input.module";
 export * from "./link/link.module";
 export * from "./list-group/list-group.module";

src/inline-loading/inline-loading.component.ts

@@ -0,0 +1,84 @@
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter,
+	HostBinding
+} from "@angular/core";
+
+@Component({
+	selector: "ibm-inline-loading",
+	template: `
+		<div class="bx--inline-loading__animation">
+			<div
+				*ngIf="success === false"
+				class="bx--loading bx--loading--small">
+				<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+					<circle cx="0" cy="0" r="37.5"></circle>
+				</svg>
+			</div>
+			<svg
+				*ngIf="success === true"
+				class="bx--inline-loading__checkmark-container bx--inline-loading__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+				<polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
+			</svg>
+		</div>
+		<p *ngIf="success === false" class="bx--inline-loading__text">{{loadingText}}</p>
+		<p *ngIf="success === true" class="bx--inline-loading__text">{{successText}}</p>
+	`
+})
+export class InlineLoading {
+	/**
+	 * Specify the text description for the loading state.
+	 *
+	 * @memberof InlineLoading
+	 */
+	@Input() loadingText;
+	/**
+	 * Specify the text description for the success state.
+	 *
+	 * @memberof InlineLoading
+	 */
+	@Input() successText;
+	/**
+	 * Provide a delay for the `setTimeout` for success.
+	 *
+	 * @memberof InlineLoading
+	 */
+	@Input() successDelay = 1500;
+
+	/**
+	 * Returns value `true` if the component is in the success state.
+	 */
+	@Input() get success() {
+		return this._success;
+	}
+	/**
+	 * Set the component's state to match the parameter and emits onSuccess if it exits.
+	 */
+	set success (success: boolean) {
+		this._success = success;
+		if (this._success) {
+			setTimeout(() => {
+				this.onSuccess.emit();
+			}, this.successDelay);
+		}
+	}
+
+	/**
+	 * Emits event after the success state is active
+	 *
+	 * @type {EventEmitter<any>}
+	 * @memberof InlineLoading
+	 */
+	@Output() onSuccess: EventEmitter<any> = new EventEmitter();
+
+	@HostBinding("class.bx--inline-loading") loadingClass = true;
+
+	/**
+	 * Set to `true` if the action is completed successfully.
+	 *
+	 * @memberof InlineLoading
+	 */
+	protected _success = false;
+}

src/inline-loading/inline-loading.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { InlineLoading } from "./inline-loading.component";
+
+export { InlineLoading } from "./inline-loading.component";
+
+@NgModule({
+	declarations: [InlineLoading],
+	exports: [InlineLoading],
+	imports: [CommonModule]
+})
+export class InlineLoadingModule { }

src/inline-loading/inline-loading.spec.ts

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

src/inline-loading/inline-loading.stories.ts

@@ -0,0 +1,25 @@
+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 { InlineLoadingModule, ButtonModule } from "../";
+
+storiesOf("Inline Loading", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [InlineLoadingModule, ButtonModule]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<ibm-inline-loading #loading (onSuccess)="onSuccess()" [loadingText]="loadingText" [successText]="successText"></ibm-inline-loading>
+			<button ibmButton (click)="loading.success = !loading.success">Toggle state</button>
+		`,
+		props: {
+			onSuccess: action("onSuccess"),
+			loadingText: "Loading data...",
+			successText: "Data loaded."
+		}
+	}));