Merge branch 'master' of https://github.com/IBM/carbon-components-angular into storybook-styles

Author: youda97

src/checkbox/checkbox.component.ts

@@ -70,7 +70,12 @@ export class CheckboxChange {
 			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
-		<label [for]="id" class="bx--checkbox-label">
+		<label
+			[for]="id"
+			class="bx--checkbox-label"
+			[ngClass]="{
+				'bx--skeleton' : skeleton
+			}">
 			<ng-content></ng-content>
 		</label>
 	`,
@@ -107,6 +112,10 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 * Set to `true` for a disabled checkbox.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to `true` for a loading checkbox.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Sets the name attribute on the `input` element.
 	 */

src/checkbox/checkbox.stories.ts

@@ -28,4 +28,7 @@ storiesOf("Checkbox", module).addDecorator(
 			onChange: action("Change fired!"),
 			onIndeterminateChange: action("Indeterminate change fired!")
 		}
-	}));
+	}))
+	.add("Skeleton", () => ({
+		template: `<ibm-checkbox skeleton="true"></ibm-checkbox>`
+}));

src/code-snippet/code-snippet.component.ts

@@ -31,9 +31,18 @@ export enum SnippetType {
 
 		<ng-template #notInline>
 			<div class="bx--snippet-container" [attr.aria-label]="translations.CODE_SNIPPET_TEXT">
-				<pre><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre>
+				<ng-container *ngIf="skeleton">
+					<span *ngIf="display === 'single'; else multiSkeleton"></span>
+					<ng-template #multiSkeleton>
+						<span></span>
+						<span></span>
+						<span></span>
+					</ng-template>
+				</ng-container>
+				<pre *ngIf="!skeleton"><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre>
 			</div>
 			<button
+				*ngIf="!skeleton"
 				class="bx--snippet-button"
 				[attr.aria-label]="translations.COPY_CODE"
 				(click)="onCopyButtonClicked()"
@@ -118,6 +127,7 @@ export class CodeSnippet {
 	@Input() feedbackTimeout = 2000;
 
 	@HostBinding("class.bx--snippet--expand") @Input() expanded = false;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 
 	@HostBinding("class.bx--snippet") snippetClass = true;
 	@HostBinding("class.bx--snippet--single") get snippetSingleClass() {

src/code-snippet/code-snippet.stories.ts

@@ -66,4 +66,13 @@ storiesOf("CodeSnippet", module).addDecorator(
 			inlineCode,
 			theme: select("Theme", ["dark", "light"], "dark")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<div style="width: 800px">
+				<ibm-code-snippet display="single" skeleton="true"></ibm-code-snippet>
+				<br>
+				<ibm-code-snippet display="multi" skeleton="true"></ibm-code-snippet>
+			</div>
+		`
 	}));

src/number-input/number.component.spec.ts

@@ -86,6 +86,7 @@ describe("Number", () => {
 	});
 
 	it("should display control buttons", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.queryAll(By.css("button"))[0].nativeElement;
 		buttonDown = fixture.debugElement.queryAll(By.css("button"))[1].nativeElement;
 		expect(buttonUp.className.includes("bx--number__control-btn")).toEqual(true);
@@ -95,6 +96,7 @@ describe("Number", () => {
 	});
 
 	it("should increment value when button up is clicked", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".up-icon")).nativeElement;
 		component.value = 1;
 		buttonUp.click();
@@ -103,6 +105,7 @@ describe("Number", () => {
 	});
 
 	it("should not increment value if max is reached", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".up-icon")).nativeElement;
 		component.value = 100;
 		component.max = 100;
@@ -112,6 +115,7 @@ describe("Number", () => {
 	});
 
 	it("should decrement value when button down is clicked", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".down-icon")).nativeElement;
 		component.value = 1;
 		buttonUp.click();
@@ -120,6 +124,7 @@ describe("Number", () => {
 	});
 
 	it("should not decrement value min is reached", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".down-icon")).nativeElement;
 		component.value = 0;
 		component.min = 0;

src/number-input/number.component.ts

@@ -30,15 +30,17 @@ export class NumberChange {
 @Component({
 	selector: "ibm-number",
 	template: `
+		<label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
 		<div
 			data-numberinput
 			class="bx--number"
 			[ngClass]="{
 				'bx--number--light': theme === 'light',
 				'bx--number--nolabel': !label,
-				'bx--number--helpertext': helperText
+				'bx--number--helpertext': helperText,
+				'bx--skeleton' : skeleton
 			}">
-			<label *ngIf="label" [for]="id" class="bx--label">{{label}}</label>
+			<label *ngIf="!skeleton && label" [for]="id" class="bx--label">{{label}}</label>
 			<input
 				type="number"
 				[id]="id"
@@ -47,7 +49,7 @@ export class NumberChange {
 				[max]="max"
 				[disabled]="disabled"
 				[required]="required"/>
-			<div class="bx--number__controls">
+			<div *ngIf="!skeleton" class="bx--number__controls">
 				<button
 					class="bx--number__control-btn up-icon"
 					(click)="onIncrement()">
@@ -90,6 +92,10 @@ export class Number implements ControlValueAccessor {
 	 * Set to `true` for a disabled number input.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to `true` for a loading number component.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * The unique id for the number component.
 	 */

src/number-input/number.stories.ts

@@ -29,4 +29,14 @@ storiesOf("Number", module).addDecorator(
 			max: number("max", 100),
 			disabled: boolean("disabled", false)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<div style="width: 75px;">
+			<ibm-number [label]="label" skeleton="true"></ibm-number>
+			</div>
+		`,
+		props: {
+			label: text("label", "Number Input Label")
+		}
 	}));

src/pagination/pagination.component.ts

@@ -36,8 +36,19 @@ import { BehaviorSubject } from "rxjs";
 @Component({
 	selector: "ibm-pagination",
 	template: `
-	<div class="bx--pagination">
-		<div class="bx--pagination__left">
+	<div
+		class="bx--pagination"
+		[ngClass]="{
+			'bx--skeleton' : skeleton
+		}">
+
+		<div *ngIf="skeleton" class="bx--pagination__left">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+			<p class="bx--skeleton__text" style="width: 35px"></p>
+			<p class="bx--skeleton__text" style="width: 105px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__left">
 			<span class="bx--pagination__text">{{itemsPerPageText | async}}</span>
 			<div class="bx--form-item">
 				<div class="bx--select bx--select--inline">
@@ -76,7 +87,12 @@ import { BehaviorSubject } from "rxjs";
 				{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}
 			</span>
 		</div>
-		<div class="bx--pagination__right bx--pagination--inline">
+
+		<div *ngIf="skeleton" class="bx--pagination__right bx--pagination--inline">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__right bx--pagination--inline">
 			<span class="bx--pagination__text">{{totalPagesText | i18nReplace:{current: currentPage, last: lastPage} | async}}</span>
 			<button
 				class="bx--pagination__button bx--pagination__button--backward"
@@ -139,6 +155,10 @@ import { BehaviorSubject } from "rxjs";
 export class Pagination {
 	static paginationCounter = 0;
 
+	/**
+	 * Set to `true` for a loading pagination component.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * `PaginationModel` with the information about pages you're controlling.
 	 *

src/pagination/pagination.stories.ts

@@ -18,12 +18,14 @@ import { PaginationModel } from "./pagination-model.class";
 	template: `
 		<ibm-pagination
 			[model]="model"
+			[skeleton]="skeleton"
 			(selectPage)="selectPage($event)">
 		</ibm-pagination>
 	`
 })
 class PaginationStory implements OnInit {
 	@Input() model = new PaginationModel();
+	@Input() skeleton = false;
 
 	@Input() get totalDataLength() {
 		return this.model.totalDataLength;
@@ -65,5 +67,13 @@ storiesOf("Pagination", module).addDecorator(
 		props: {
 			totalDataLength: number("totalDataLength", 105)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<app-pagination [totalDataLength]="totalDataLength" [skeleton]="true"></app-pagination>
+		`,
+		props: {
+			totalDataLength: number("totalDataLength", 105)
+		}
 	}));
 

src/progress-indicator/progress-indicator.component.ts

@@ -3,7 +3,13 @@ import { Component, Input } from "@angular/core";
 @Component({
 	selector: "ibm-progress-indicator",
 	template: `
-	<ul data-progress data-progress-current class="bx--progress">
+	<ul
+		data-progress
+		data-progress-current
+		class="bx--progress"
+		[ngClass]="{
+			'bx--skeleton': skeleton
+		}">
 		<li
 		class="bx--progress-step bx--progress-step--{{step.state}}"
 		*ngFor="let step of steps; let i = index">
@@ -27,5 +33,15 @@ import { Component, Input } from "@angular/core";
 	`
 })
 export class ProgressIndicator {
+	static skeletonSteps(stepCount: number) {
+		const steps = [];
+		for (let i = 0; i < stepCount; i++) {
+			steps.push({"state": ["incomplete"]});
+		}
+
+		return steps;
+	}
+
 	@Input() steps = [];
+	@Input() skeleton = false;
 }