diff --git a/libs/angular-components/src/experimental/components.module.ts b/libs/angular-components/src/experimental/components.module.ts
index 11d55f3d4..bf25869ab 100644
--- a/libs/angular-components/src/experimental/components.module.ts
+++ b/libs/angular-components/src/experimental/components.module.ts
@@ -4,20 +4,30 @@ import { GoABadgeComponent } from './badge/badge.component';
import { GoAAppVersionHeaderComponent } from './app-version-header/app-version-header.component';
import { GoAPageLoadIndicatorComponent } from './page-load-indicator/page-load-indicator.component';
import { GoAElementLoadIndicatorComponent } from './element-load-indicator/element-load-indicator.component';
+import { GoASkeletonImageContentComponent } from './skeleton/skeleton-image-content.component';
+import { GoASkeletonElementComponent } from './skeleton/skeleton-element.component';
+import { GoALoadingCardComponent } from './skeleton/skeleton-card.component';
+import { GoACardComponent } from '../lib/card/card.component';
@NgModule({
- imports: [CommonModule],
+ imports: [CommonModule, GoACardComponent],
exports: [
GoABadgeComponent,
GoAAppVersionHeaderComponent,
GoAPageLoadIndicatorComponent,
- GoAElementLoadIndicatorComponent
+ GoAElementLoadIndicatorComponent,
+ GoASkeletonImageContentComponent,
+ GoASkeletonElementComponent,
+ GoALoadingCardComponent,
],
declarations: [
GoABadgeComponent,
GoAAppVersionHeaderComponent,
GoAPageLoadIndicatorComponent,
- GoAElementLoadIndicatorComponent
+ GoAElementLoadIndicatorComponent,
+ GoASkeletonImageContentComponent,
+ GoASkeletonElementComponent,
+ GoALoadingCardComponent,
],
providers: [
],
diff --git a/libs/angular-components/src/experimental/index.ts b/libs/angular-components/src/experimental/index.ts
index c6cfb4c5a..3c867f0fa 100644
--- a/libs/angular-components/src/experimental/index.ts
+++ b/libs/angular-components/src/experimental/index.ts
@@ -2,4 +2,7 @@ export * from './badge/badge.component';
export * from './app-version-header/app-version-header.component';
export * from './page-load-indicator/page-load-indicator.component';
export * from './element-load-indicator/element-load-indicator.component';
+export * from './skeleton/skeleton-image-content.component';
+export * from './skeleton/skeleton-element.component';
export * from './components.module';
+export * from '../lib/card/card.component';
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-card.component.html b/libs/angular-components/src/experimental/skeleton/skeleton-card.component.html
new file mode 100644
index 000000000..2adb57451
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-card.component.html
@@ -0,0 +1,15 @@
+
+
+ Lorem ipsum dolor sit amet elit
+
+
+
+
+
+
+
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-card.component.ts b/libs/angular-components/src/experimental/skeleton/skeleton-card.component.ts
new file mode 100644
index 000000000..6b8c5d5f7
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-card.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'goa-skeleton-card',
+ templateUrl: './skeleton-card.component.html',
+ styleUrls: [],
+})
+export class GoALoadingCardComponent implements OnInit {
+ constructor() {}
+
+ @Input() showImage: true;
+
+ /**
+ * @ignore
+ */
+ ngOnInit() {}
+}
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-element.component.html b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.html
new file mode 100644
index 000000000..6504a380f
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-element.component.scss b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.scss
new file mode 100644
index 000000000..a88f05661
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.scss
@@ -0,0 +1,2 @@
+@import '../../../../core-css/src/lib/styles/skeleton-element/skeleton.scss';
+@import '../../../../core-css/src/lib/styles/card/card.scss';
\ No newline at end of file
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-element.component.ts b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.ts
new file mode 100644
index 000000000..e844c2662
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-element.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'goa-skeleton-element',
+ templateUrl: './skeleton-element.component.html',
+ styleUrls: ['./skeleton-element.component.scss'],
+})
+export class GoASkeletonElementComponent implements OnInit {
+ @Input() type:
+ | 'text'
+ | 'avatar'
+ | 'title'
+ | 'paragraph'
+ | 'thumbnail'
+ | 'card' = 'text';
+
+ constructor() {}
+
+ get elementClass(): string {
+ return `skeleton ${this.type}`;
+ }
+
+ /**
+ * @ignore
+ */
+ ngOnInit() {}
+}
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-element.stories.mdx b/libs/angular-components/src/experimental/skeleton/skeleton-element.stories.mdx
new file mode 100644
index 000000000..ea200bbf1
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-element.stories.mdx
@@ -0,0 +1,160 @@
+import { DoDont } from '@abgov/shared/storybook-common';
+import { GoASkeletonImageContentComponent } from './skeleton-image-content.component';
+import { GoASkeletonElementComponent } from './skeleton-element.component';
+import { GoASkeletonGridColumnComponent } from './skeleton-grid-column.component';
+import { GoASkeletonContentComponent } from './skeleton-titled-content.component';
+import { GoALoadingCardComponent } from './skeleton-card.component';
+import {
+ Meta,
+ Canvas,
+ Story,
+ ArgsTable,
+ Description,
+} from '@storybook/addon-docs/blocks';
+import { moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import {
+ GoACardComponent,
+ GoACardFooterComponent,
+ GoACardHeaderComponent,
+ GoACardThumbImageComponent,
+ GoACardContentComponent,
+} from '../../lib/card/card.component';
+
+
+
+# GoASkeletonElement
+
+A skeleton load element provides visual feedback to users while a content heavy page or element is loading.
+
+## Variations
+
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+```
+
+## Usage guidelines
+
+
+
+
+
+
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.html b/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.html
new file mode 100644
index 000000000..a9f676217
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.html
@@ -0,0 +1,8 @@
+
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.ts b/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.ts
new file mode 100644
index 000000000..d96fcb718
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'goa-skeleton-grid-column',
+ templateUrl: './skeleton-grid-column.component.html',
+ styleUrls: ['./skeleton-element.component.scss'],
+})
+export class GoASkeletonGridColumnComponent implements OnInit {
+ @Input() rows = 1;
+
+ arr = Array;
+
+ constructor() {}
+
+ /**
+ * @ignore
+ */
+ ngOnInit() {}
+}
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.html b/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.html
new file mode 100644
index 000000000..7850f143f
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.html
@@ -0,0 +1,9 @@
+
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.ts b/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.ts
new file mode 100644
index 000000000..beadf2406
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'goa-skeleton-image-content',
+ templateUrl: './skeleton-image-content.component.html',
+ styleUrls: ['./skeleton-element.component.scss'],
+})
+export class GoASkeletonImageContentComponent implements OnInit {
+ @Input() rows = 1;
+
+ arr = Array;
+ constructor() {}
+
+ /**
+ * @ignore
+ */
+ ngOnInit() {}
+}
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.html b/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.html
new file mode 100644
index 000000000..f5db2f0b4
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.html
@@ -0,0 +1,10 @@
+
diff --git a/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.ts b/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.ts
new file mode 100644
index 000000000..97b674b34
--- /dev/null
+++ b/libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'goa-skeleton-content',
+ templateUrl: './skeleton-titled-content.component.html',
+ styleUrls: ['./skeleton-element.component.scss'],
+})
+export class GoASkeletonContentComponent implements OnInit {
+ @Input() rows = 1;
+
+ arr = Array;
+
+ constructor() {}
+
+ /**
+ * @ignore
+ */
+ ngOnInit() {}
+}
diff --git a/libs/angular-components/src/lib/card/card.component.html b/libs/angular-components/src/lib/card/card.component.html
index 8000bde01..9aaa6b59b 100644
--- a/libs/angular-components/src/lib/card/card.component.html
+++ b/libs/angular-components/src/lib/card/card.component.html
@@ -2,7 +2,7 @@
class="goa-card"
[ngClass]="{
'card-auto': cardSize === 'auto'
- }"
+ }" [attr.data-skeleton]="isSkeleton ? '' : null"
>
diff --git a/libs/angular-components/src/lib/card/card.component.ts b/libs/angular-components/src/lib/card/card.component.ts
index 9ef747dc3..25509420c 100644
--- a/libs/angular-components/src/lib/card/card.component.ts
+++ b/libs/angular-components/src/lib/card/card.component.ts
@@ -22,6 +22,7 @@ export class GoACardComponent implements OnInit {
*/
@Input() cardSize: 'full' | 'auto' = 'full';
@Input() titleUrl: string;
+ @Input() isSkeleton: false;
constructor() { }