feat: Add Angular skeleton elements

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: [
   ],

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';

libs/angular-components/src/experimental/skeleton/skeleton-card.component.html

@@ -0,0 +1,15 @@
+<goa-card isSkeleton="true">
+  <goa-card-thumb-image
+    *ngIf="showImage"
+    url="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+  ></goa-card-thumb-image>
+  <goa-card-header
+    ><div><span>Lorem ipsum dolor sit amet elit</span></div></goa-card-header
+  >
+  <goa-card-content>
+    <goa-skeleton-grid-column rows="1"></goa-skeleton-grid-column>
+    <goa-skeleton-grid-column rows="1"></goa-skeleton-grid-column>
+    <goa-skeleton-grid-column rows="1"></goa-skeleton-grid-column>
+    <goa-skeleton-grid-column rows="1"></goa-skeleton-grid-column>
+  </goa-card-content>
+</goa-card>

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() {}
+}

libs/angular-components/src/experimental/skeleton/skeleton-element.component.html

@@ -0,0 +1 @@
+<div [ngClass]="elementClass"></div>

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';

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() {}
+}

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';
+
+<Meta
+  title="Experimental/Components/SkeletonElement"
+  component={GoASkeletonImageContentComponent}
+  argTypes={{
+    rows: 5,
+    showImage: false,
+  }}
+  decorators={[
+    moduleMetadata({
+      declarations: [
+        GoASkeletonImageContentComponent,
+        GoASkeletonElementComponent,
+        GoASkeletonGridColumnComponent,
+        GoASkeletonContentComponent,
+        GoALoadingCardComponent,
+        GoACardComponent,
+        GoACardFooterComponent,
+        GoACardHeaderComponent,
+        GoACardThumbImageComponent,
+        GoACardContentComponent,
+      ],
+    }),
+  ]}
+/>
+
+# GoASkeletonElement
+
+A skeleton load element provides visual feedback to users while a content heavy page or element is loading.
+
+## Variations
+
+<Canvas>
+  <Story
+    name="Skeleton Image Content"
+    height={300}
+    args={{
+      rows: 5,
+    }}
+  >
+    {(args) => {
+      return {
+        template: `<goa-skeleton-image-content [rows]="rows"></goa-skeleton-image-content>`,
+        props: args,
+      };
+    }}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Content without a title"
+    height={300}
+    args={{
+      rows: 5,
+    }}
+  >
+    {(args) => {
+      return {
+        template: `<goa-skeleton-grid-column [rows]="rows"></goa-skeleton-grid-column>`,
+        props: args,
+      };
+    }}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Skeleton Content"
+    height={300}
+    args={{
+      rows: 5,
+    }}
+  >
+    {(args) => {
+      return {
+        template: `<goa-skeleton-content [rows]="rows"></goa-skeleton-content>`,
+        props: args,
+      };
+    }}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Skeleton Card"
+    height={100}
+    args={{
+      showImage: true,
+    }}
+  >
+    {(args) => {
+      return {
+        template: `<div style="display:'flex'; gap:'8px'">
+            <goa-skeleton-card [showImage]="showImage"></goa-skeleton-card>
+            </div>
+         `,
+        props: args,
+      };
+    }}
+  </Story>
+</Canvas>
+
+```html
+<goa-skeleton-image-content [rows]="5"></goa-skeleton-image-content>
+
+<goa-skeleton-content [rows]="5"></goa-skeleton-content>
+
+<goa-skeleton-card [showImage]="true" />
+
+<goa-skeleton-grid-column [rows]="5"></goa-skeleton-grid-column>
+```
+
+## Usage guidelines
+
+<DoDont
+  dos={
+    'Show multiple elements within a larger component as individual information containers'
+  }
+  donts={
+    'Compile several elements that may have different loading durations into one container'
+  }
+/>
+
+<DoDont
+  dos={
+    'Include only the most important information containers that make the component recognizable'
+  }
+  donts={
+    'Show every single element as information containers in your skeleton load'
+  }
+/>
+
+<DoDont
+  dos={'Format bones so that they are conducive to a gradual content loading'}
+  donts={'Oversimplify the component so that it is not recognizable'}
+/>

libs/angular-components/src/experimental/skeleton/skeleton-grid-column.component.html

@@ -0,0 +1,8 @@
+<div className="skeleton-content">
+  <div>
+    <goa-skeleton-element
+      type="text"
+      *ngFor="let i of arr(rows).fill(1)"
+    ></goa-skeleton-element>
+  </div>
+</div>

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() {}
+}

libs/angular-components/src/experimental/skeleton/skeleton-image-content.component.html

@@ -0,0 +1,9 @@
+<div class="skeleton-image-content">
+  <goa-skeleton-element type="thumbnail"></goa-skeleton-element>
+  <div class="skeleton-image-content__text">
+    <goa-skeleton-element
+      type="title"
+      *ngFor="let i of arr(rows).fill(1)"
+    ></goa-skeleton-element>
+  </div>
+</div>

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() {}
+}

libs/angular-components/src/experimental/skeleton/skeleton-titled-content.component.html

@@ -0,0 +1,10 @@
+<div className="skeleton-content">
+  <div>
+    <goa-skeleton-element type="title"></goa-skeleton-element>
+
+    <goa-skeleton-element
+      type="text"
+      *ngFor="let i of arr(rows).fill(1)"
+    ></goa-skeleton-element>
+  </div>
+</div>

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() {}
+}

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"
 >
   <div class="goa-poster">
     <ng-content select="goa-card-thumb-image"></ng-content>

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() { }