Merge pull request #340 from youda97/skeleton-code-snippet

feat(code-snippet): Add skeleton state

Author: zvonimirfras

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