feat(design)!: remove DaffImageGalleryComponent and `DaffImageListC…

…omponent` from `@daffodil/design` (#2863)

BREAKING CHANGE: `DaffImageGalleryComponent` has been removed from `@daffodil/design`. Use the `DaffMediaGalleryComponent` instead.

apps/demo/src/app/core/image-gallery/components/image-gallery.component.html

@@ -1,12 +1,9 @@
-<daff-image-gallery>
-  <img daff-active-image src="{{(selectedImage$ | async)}}">
-  <daff-gallery-image 
+<daff-media-gallery>
+  <daff-image daffThumbnail
     *ngFor="let image of images"
-    [selected]="image.url === (selectedImage$ | async)">
-
-    <img alt="{{image.label}}"
-      src="{{image.url}}" 
-      (click)="select(image.url)">
-
-  </daff-gallery-image>
-</daff-image-gallery>
+    alt="{{image.label}}"
+    src="{{image.url}}"
+    width="594"
+    height="737">
+  </daff-image>
+</daff-media-gallery>

apps/demo/src/app/core/image-gallery/components/image-gallery.component.spec.ts

@@ -9,14 +9,10 @@ import {
   provideMockStore,
   MockStore,
 } from '@ngrx/store/testing';
-import { cold } from 'jasmine-marbles';
 
-import { DaffImageGalleryModule } from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { ImageGalleryComponent } from './image-gallery.component';
-import { SetSelectedImageState } from '../actions/image-gallery.actions';
-import * as fromDemoImageGallery from '../reducers';
-
 
 const stubImages = [
   { url: '/assets/mh01-black_main.jpg', label: 'testlabel' },
@@ -32,14 +28,13 @@ describe('ImageGalleryComponent', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let imageGalleryContainer: ImageGalleryComponent;
-  const activeImageIndex = 0;
   let daffGalleryImages;
   let store: MockStore<any>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        DaffImageGalleryModule,
+        DaffMediaGalleryModule,
       ],
       declarations: [
         WrapperComponent,
@@ -57,12 +52,11 @@ describe('ImageGalleryComponent', () => {
     wrapper = fixture.componentInstance;
 
     store = TestBed.inject(MockStore);
-    store.overrideSelector(fromDemoImageGallery.selectSelectedImage, stubImages[activeImageIndex].url);
 
     fixture.detectChanges();
 
     imageGalleryContainer = fixture.debugElement.query(By.css('demo-image-gallery-container')).componentInstance;
-    daffGalleryImages = fixture.debugElement.queryAll(By.css('daff-gallery-image'));
+    daffGalleryImages = fixture.debugElement.queryAll(By.css('daff-media-gallery'));
   });
 
   afterAll(() => store.resetSelectors());
@@ -74,64 +68,4 @@ describe('ImageGalleryComponent', () => {
   it('should be able to take images as input', () => {
     expect(imageGalleryContainer.images).toEqual(stubImages);
   });
-
-  it('should render a daff-gallery-image for every image in images', () => {
-    expect(daffGalleryImages.length).toEqual(stubImages.length);
-  });
-
-  describe('on daff-gallery-image', () => {
-    describe('when daff-gallery-image is the selectedImage', () => {
-      it('should set selected to true', () => {
-        expect(daffGalleryImages[activeImageIndex].componentInstance.selected).toBeTruthy();
-      });
-    });
-
-    describe('when daff-gallery-image is not the selectedImage', () => {
-      it('should set selected to false', () => {
-        expect(daffGalleryImages[1].componentInstance.selected).toBeFalsy();
-      });
-    });
-  });
-
-  describe('when img is clicked', () => {
-
-    it('should call select with image.url', () => {
-      spyOn(imageGalleryContainer, 'select');
-      daffGalleryImages[activeImageIndex].query(By.css('img')).nativeElement.click();
-
-      expect(imageGalleryContainer.select).toHaveBeenCalledWith(imageGalleryContainer.images[activeImageIndex].url);
-    });
-  });
-
-  describe('ngOnInit', () => {
-
-    beforeEach(() => {
-      spyOn(imageGalleryContainer, 'select');
-      imageGalleryContainer.ngOnInit();
-    });
-
-    it('should call select with the first image', () => {
-      expect(imageGalleryContainer.select).toHaveBeenCalledWith(imageGalleryContainer.images[0].url);
-    });
-
-    it('should initialize selectedImage$', () => {
-      const expected = cold('a', { a: imageGalleryContainer.images[0].url });
-      expect(imageGalleryContainer.selectedImage$).toBeObservable(expected);
-
-    });
-  });
-
-  describe('select', () => {
-
-    beforeEach(() => {
-      spyOn(store, 'dispatch');
-    });
-
-    it('should call store.dispatch', () => {
-      const stubSelectedImage = stubImages[1].url;
-      imageGalleryContainer.select(stubSelectedImage);
-
-      expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedImageState(stubSelectedImage));
-    });
-  });
 });

apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts

@@ -10,26 +10,32 @@ import {
 } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
+import { daffThumbnailCompatToken } from '@daffodil/design/media-gallery';
+
 import { SetSelectedImageState } from '../actions/image-gallery.actions';
 import * as fromDemoImageGallery from '../reducers/index';
 
 @Component({
   selector: 'demo-image-gallery-container',
   templateUrl: './image-gallery.component.html',
   encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      provide: daffThumbnailCompatToken, useFactory: () => ImageGalleryComponent,
+    },
+  ],
 })
 export class ImageGalleryComponent implements OnInit {
 
   @Input() images;
-  selectedImage$: Observable<string>;
 
   constructor(
     private store: Store<fromDemoImageGallery.State>,
   ) {}
 
   ngOnInit() {
     this.select(this.images[0].url);
-    this.selectedImage$ = this.store.pipe(select(fromDemoImageGallery.selectSelectedImage));
   }
 
   select(image: string) {

apps/demo/src/app/core/image-gallery/image-gallery.module.ts

@@ -1,7 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffImageGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { ImageGalleryComponent } from './components/image-gallery.component';
 import { DemoImageGalleryStateModule } from './image-gallery.state.module';
@@ -10,7 +11,8 @@ import { DemoImageGalleryStateModule } from './image-gallery.state.module';
   imports: [
     CommonModule,
     DemoImageGalleryStateModule,
-    DaffImageGalleryModule,
+    DaffMediaGalleryModule,
+    DaffImageModule,
   ],
   declarations: [
     ImageGalleryComponent,

apps/design-land/src/app/app-routing.module.ts

@@ -26,7 +26,6 @@ export const appRoutes: Routes = [
       { path: 'list', loadChildren: () => import('./list/list.module').then(m => m.DesignLandListModule) },
       { path: 'loading-icon', loadChildren: () => import('./loading-icon/loading-icon.module').then(m => m.DesignLandLoadingIconModule) },
       { path: 'image', loadChildren: () => import('./image/image.module').then(m => m.DesignLandImageModule) },
-      { path: 'image-gallery', loadChildren: () => import('./image-gallery/image-gallery.module').then(m => m.DesignLandImageGalleryModule) },
       { path: 'input', loadChildren: () => import('./input/input.module').then(m => m.DesignLandInputModule) },
       { path: 'navbar', loadChildren: () => import('./navbar/navbar.module').then(m => m.DesignLandNavbarModule) },
       { path: 'media-gallery', loadChildren: () => import('./media-gallery/media-gallery.module').then(m => m.DesignLandMediaGalleryModule) },

apps/design-land/src/assets/nav.json

@@ -166,13 +166,6 @@
           "items": [],
           "data": {}
         },
-        {
-          "title": "Image Gallery",
-          "url": "image-gallery",
-          "id": "image-gallery",
-          "items": [],
-          "data": {}
-        },
         {
           "title": "Link Set",
           "url": "link-set",

libs/design/README.md

@@ -46,7 +46,6 @@ Refer to the [Upgrade Guide](./guides/upgrading.md).
 * [Callout](./src/molecules/callout/README.md)
 * [Card](./src/molecules/card/README.md)
 * [Hero](./src/molecules/hero/README.md)
-* [Image Gallery](./src/molecules/image-gallery/README.md)
 * [Image List](./src/molecules/image-list/README.md)
 * [Link Set](./src/molecules/link-set/README.md)
 * [List](./src/molecules/list/README.md)