Merge branch 'master' into skeleton-breadcrumb

Author: zvonimirfras

src/button/button.directive.ts

@@ -37,6 +37,7 @@ export class Button implements OnInit {
 	@HostBinding("class.bx--btn--ghost") ghost = false;
 	@HostBinding("class.bx--btn--danger") danger = false;
 	@HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--btn--sm") smallSize = false;
 
 	ngOnInit() {

src/button/button.stories.ts

@@ -29,4 +29,11 @@ storiesOf("Button", module)
 		props: {
 			size: select("Size of the buttons", ["normal", "sm"], "normal")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<button ibmButton skeleton="true"></button>
+			&nbsp;
+			<button ibmButton skeleton="true" size="sm"></button>
+		`
 	}));

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/input/input.directive.ts

@@ -21,6 +21,7 @@ export class TextInput {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-input") inputClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-input--light") get isLightTheme() {
 		return this.theme === "light";
 	}

src/input/input.stories.ts

@@ -33,4 +33,21 @@ storiesOf("Input", module).addDecorator(
 		props: {
 			theme: select("Theme", ["dark", "light"], "dark")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-label skeleton="true">
+				<input ibmText skeleton="true">
+			</ibm-label>
+			<br>
+			<input ibmText skeleton="true">
+		</div>
+		<br><br>
+		<div style="width: 160px">
+			<ibm-label skeleton="true">
+				<div ibmTextArea skeleton="true"></div>
+			</ibm-label>
+		</div>
+		`
 	}));

src/input/label.component.ts

@@ -31,7 +31,14 @@ import {
 @Component({
 	selector: "ibm-label",
 	template: `
-		<label [for]="labelInputID" class="bx--label"><ng-content></ng-content></label>
+		<label
+			[for]="labelInputID"
+			class="bx--label"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}">
+			<ng-content></ng-content>
+		</label>
 		<ng-content select="input,textarea,div"></ng-content>
 	`
 })
@@ -55,6 +62,10 @@ export class Label implements AfterContentInit {
 	 * @memberof Label
 	 */
 	@Input() labelState: "success" | "warning" | "error" | "" = "";
+	/**
+	 * Set to `true` for a loading label.
+	 */
+	@Input() skeleton = false;
 
 	@HostBinding("class.bx--form-item") labelClass = true;
 

src/input/text-area.directive.ts

@@ -21,6 +21,7 @@ export class TextArea {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-area") baseClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-area--light") get isLightTheme() {
 		return this.theme === "light";
 	}