feat(design): implement skeleton UI for DaffMediaGalleryComponent (#2208

)
graycoreio · May 16, 2023 · 964d0ce · 964d0ce
1 parent 1bd3faf
commit 964d0ce
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 4 deletions.
diff --git a/apps/design-land/src/app/media-gallery/media-gallery.component.html b/apps/design-land/src/app/media-gallery/media-gallery.component.html
@@ -5,12 +5,21 @@ <h2>Thumbnail</h2>
 <p><code>[daffThumbnail]</code>should be used as a directive with <code>&lt;daff-image&gt;</code>. (View <a href="/image">Image Documentation</a>)</p>
 <p>It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the <code>&lt;daff-media-renderer&gt;</code> component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.</p>
 
+<h2>Usage</h2>
+
+<h3>Basic Media Gallery</h3>
 <design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
 
+<h3>Skeleton Media Gallery</h3>
+<p>A skeleton media gallery is used to display a low fidelity representation of a media gallery before it's loaded on the page. It helps to improve load times perceived by users.</p>
+
+<design-land-example-viewer-container example="skeleton-media-gallery"></design-land-example-viewer-container>
+
 <h2>Image Aspect Ratio</h2>
 <p>It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.</p>
 
 <p>The thumbnail dimension is set to <code>80x80</code> pixels, so the recommended aspect ratio is <code>1:1</code>. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.</p>
+
 <design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
 
 <h2>Accessibility</h2>

diff --git a/libs/design/media-gallery/examples/src/examples.ts b/libs/design/media-gallery/examples/src/examples.ts
@@ -1,7 +1,9 @@
 import { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';
 import { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';
+import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery/skeleton-media-gallery.component';
 
 export const MEDIA_GALLERY_EXAMPLES = [
   BasicMediaGalleryComponent,
   MismatchedSizesMediaGalleryComponent,
+  SkeletonMediaGalleryComponent,
 ];
diff --git a/libs/design/media-gallery/examples/src/public_api.ts b/libs/design/media-gallery/examples/src/public_api.ts
@@ -4,3 +4,5 @@ export { BasicMediaGalleryModule } from './basic-media-gallery/basic-media-galle
 export { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';
 export { MismatchedSizesMediaGalleryModule } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module';
 export { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';
+export { SkeletonMediaGalleryComponent } from './skeleton-media-gallery/skeleton-media-gallery.component';
+export { SkeletonMediaGalleryModule } from './skeleton-media-gallery/skeleton-media-gallery.module';
diff --git a/...n/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.html b/...n/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.html
@@ -0,0 +1,7 @@
+<daff-media-gallery [skeleton]="true">
+	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80" alt="Drink" width="946" height="946"></daff-image>
+	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Drink" width="946" height="946"></daff-image>
+	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Fruits" width="946" height="946"></daff-image>
+	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Lemons" width="946" height="946"></daff-image>
+	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Avocado" width="946" height="946"></daff-image>
+</daff-media-gallery>
diff --git a/...ign/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.ts b/...ign/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.ts
@@ -0,0 +1,15 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'skeleton-media-gallery',
+  templateUrl: './skeleton-media-gallery.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonMediaGalleryComponent {
+
+
+}
diff --git a/...design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts b/...design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+
+import {
+  DaffMediaGalleryModule,
+  DaffImageModule,
+} from '@daffodil/design';
+
+import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';
+
+@NgModule({
+  declarations: [
+    SkeletonMediaGalleryComponent,
+  ],
+  exports: [
+    SkeletonMediaGalleryComponent,
+  ],
+  imports: [
+    DaffImageModule,
+    DaffMediaGalleryModule,
+  ],
+  providers: [],
+})
+export class SkeletonMediaGalleryModule { }
diff --git a/libs/design/src/molecules/media-gallery/media-gallery-theme.scss b/libs/design/src/molecules/media-gallery/media-gallery-theme.scss
@@ -16,5 +16,13 @@
 				border: 1px solid theming.daff-color($gray);
 			}
 		}
+
+		&.daff-skeleton {
+			.daff-thumbnail {
+				&--selected {
+					border: none;
+				}
+			}
+		}
 	}
 }
diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.scss b/libs/design/src/molecules/media-gallery/media-gallery.component.scss
@@ -1,5 +1,6 @@
 @use '../../../scss/interactions';
 @use '../../../scss/layout';
+@use '../../../scss/state';
 
 :host(.daff-media-gallery) {
 	// stylelint-disable-next-line scss/comment-no-loud
@@ -14,7 +15,7 @@
 
 	::ng-deep {
 		.daff-thumbnail {
-			@include interactions.clickable;
+			@include interactions.clickable();
 			display: inline-block;
 			height: 64px;
 			width: 64px;
@@ -36,6 +37,26 @@
 			}
 		}
 	}
+
+	&.daff-skeleton {
+		::ng-deep {
+			.daff-thumbnail {
+				@include state.skeleton-screen(72px, 72px);
+
+				@include layout.breakpoint(big-tablet) {
+					@include state.skeleton-screen(80px, 80px);
+				}
+			}
+
+			img {
+				opacity: 0;
+			}
+		}
+
+		#{$root}__selected-thumbnail {
+			@include state.skeleton-screen(100%, 100%);
+		}
+	}
 }
 
 .daff-media-gallery {
@@ -54,6 +75,7 @@
 		display: block;
 		flex-grow: 1;
 		order: 1;
+		position: relative;
 
 		@include layout.breakpoint(big-tablet) {
 			order: 2;

diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.spec.ts b/libs/design/src/molecules/media-gallery/media-gallery.component.spec.ts
@@ -15,12 +15,13 @@ import { daffThumbnailCompatToken } from './thumbnail/thumbnail-compat.token';
 import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
 
 @Component({
-  template: `<daff-media-gallery [name]="nameValue">
+  template: `<daff-media-gallery [name]="nameValue" [skeleton]="skeleton">
 		<div daffThumbnail></div>
 	</daff-media-gallery>`,
 })
 class WrapperComponent {
   nameValue: string;
+  skeleton = false;
 }
 
 @Component({
@@ -77,6 +78,10 @@ describe('DaffMediaGalleryComponent', () => {
     expect(component.name).toEqual(stubName);
   });
 
+  it('should take a skeleton as input', () => {
+    expect(component.skeleton).toEqual(wrapper.skeleton);
+  });
+
   it('should remove the gallery from the registry when the gallery is destroyed', () => {
     spyOn(registry, 'remove');
     component.ngOnDestroy();

diff --git a/libs/design/src/molecules/media-gallery/media-gallery.component.ts b/libs/design/src/molecules/media-gallery/media-gallery.component.ts
@@ -10,6 +10,10 @@ import {
 } from '@angular/core';
 
 import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
+import {
+  daffSkeletonableMixin,
+  DaffSkeletonable,
+} from '../../core/skeletonable/public_api';
 import { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';
 import { DAFF_MEDIA_GALLERY_TOKEN } from './media-gallery-token';
 import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
@@ -23,7 +27,7 @@ class DaffMediaGalleryBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+const _daffMediaGalleryBase = daffSkeletonableMixin(daffArticleEncapsulatedMixin((DaffMediaGalleryBase)));
 
 @Component({
   selector: 'daff-media-gallery',
@@ -34,8 +38,11 @@ const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
   ],
+  // todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['skeleton'],
 })
-export class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
+export class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, DaffSkeletonable, OnInit, OnDestroy {
   /**
    * Adds a class for styling the media gallery
    */