Merge branch 'master' into skeleton-structured-list

Author: zvonimirfras

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>
+		`
 	}));