feat(design)!: remove DaffQtyDropdownComponent from `@daffodil/desi…

…gn` (#2864)

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

apps/demo/src/app/cart/components/cart-item/cart-item.component.html

@@ -13,7 +13,13 @@
       <span class="demo-cart-item__mobile-qty">Qty: </span>
       <span class="demo-cart-item__mobile-qty">{{item.qty}}</span>
       <span class="demo-cart-item__desktop-qty">
-        <daff-qty-dropdown [qty]="item.qty" [id]="item.item_id" (qtyChanged)="onQtyChanged($event)"></daff-qty-dropdown>
+        <daff-form-field>
+          <daff-quantity-field
+            [formControl]="quantity"
+            name="quantity"
+            [id]="quantityId">
+          </daff-quantity-field>
+        </daff-form-field>
       </span>
     </div>
     <div class="demo-cart-item__change">

apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts

@@ -4,28 +4,27 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffCartItem } from '@daffodil/cart';
-import {
-  DaffCartItemDelete,
-  DaffCartItemUpdate,
-} from '@daffodil/cart/state';
+import { DaffCartItemDelete } from '@daffodil/cart/state';
 import {
   DaffCartStateTestingModule,
   MockDaffCartFacade,
 } from '@daffodil/cart/state/testing';
 import { DaffCartItemFactory } from '@daffodil/cart/testing';
 import {
-  DaffQtyDropdownModule,
-  DaffQtyDropdownComponent,
+  DaffQuantityFieldComponent,
+  DaffQuantityFieldModule,
 } from '@daffodil/design';
 import { DaffProductImageFactory } from '@daffodil/product/testing';
 
 import { CartItemComponent } from './cart-item.component';
 
+
 @Component({ template: '<demo-cart-item [item]="cartItemValue"></demo-cart-item>' })
 class WrapperComponent {
   cartItemValue: DaffCartItem;
@@ -35,7 +34,7 @@ describe('CartItemComponent', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let cartItemComponent;
-  let qtyDropdownComponent: DaffQtyDropdownComponent;
+  let quantityFieldComponent: DaffQuantityFieldComponent;
   let router: Router;
   let cartItemFactory: DaffCartItemFactory;
   let productImageFactory: DaffProductImageFactory;
@@ -46,8 +45,9 @@ describe('CartItemComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        DaffQtyDropdownModule,
+        DaffQuantityFieldModule,
         DaffCartStateTestingModule,
+        ReactiveFormsModule,
       ],
       declarations: [
         CartItemComponent,
@@ -70,7 +70,7 @@ describe('CartItemComponent', () => {
 
     wrapper.cartItemValue = mockCartItem;
     cartItemComponent = fixture.debugElement.query(By.css('demo-cart-item'));
-    qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')).componentInstance;
+    quantityFieldComponent = fixture.debugElement.query(By.css('daff-quantity-field')).componentInstance;
 
     fixture.detectChanges();
   });
@@ -83,19 +83,8 @@ describe('CartItemComponent', () => {
     expect(cartItemComponent.componentInstance.item).toEqual(mockCartItem);
   });
 
-  it('renders a <daff-qty-dropdown>', () => {
-    expect(qtyDropdownComponent).not.toBeNull();
-  });
-
-  describe('on <daff-qty-dropdown>', () => {
-
-    it('sets qty', () => {
-      expect(qtyDropdownComponent.qty).toEqual(mockCartItem.qty);
-    });
-
-    it('sets id', () => {
-      expect(qtyDropdownComponent.id).toEqual(mockCartItem.item_id);
-    });
+  it('renders a <daff-quantity-field>', () => {
+    expect(quantityFieldComponent).not.toBeNull();
   });
 
   describe('redirectToProduct', () => {
@@ -127,16 +116,6 @@ describe('CartItemComponent', () => {
     });
   });
 
-  describe('when the user changes the quantity of the item', () => {
-
-    it('should notify state of the quantity change', () => {
-      const newQuantity = 3;
-      qtyDropdownComponent.qtyChanged.emit(newQuantity);
-
-      expect(facade.dispatch).toHaveBeenCalledWith(new DaffCartItemUpdate(mockCartItem.item_id, { qty: newQuantity }));
-    });
-  });
-
   describe('when the user clicks the remove button', () => {
 
     it('should remove the item from the cart', () => {

apps/demo/src/app/cart/components/cart-item/cart-item.component.ts

@@ -1,7 +1,13 @@
 import {
   Component,
+  Inject,
   Input,
+  OnInit,
 } from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+} from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { DaffCartItem } from '@daffodil/cart';
@@ -10,27 +16,38 @@ import {
   DaffCartItemDelete,
   DaffCartItemUpdate,
 } from '@daffodil/cart/state';
+import {
+  DaffBase64Service,
+  DaffBase64ServiceToken,
+} from '@daffodil/core';
 
 @Component({
   selector: 'demo-cart-item',
   templateUrl: './cart-item.component.html',
   styleUrls: ['./cart-item.component.scss'],
 })
-export class CartItemComponent {
+export class CartItemComponent implements OnInit {
 
   @Input() item: DaffCartItem;
+  quantity: UntypedFormControl;
 
   constructor(
     private router: Router,
     private facade: DaffCartFacade,
+    private formBuilder: UntypedFormBuilder,
+    @Inject(DaffBase64ServiceToken) private base64: DaffBase64Service,
   ) { }
 
-  redirectToProduct() {
-    this.router.navigateByUrl('/product/' + this.item.product_id);
+  ngOnInit() {
+    this.quantity = this.formBuilder.control(this.item.qty);
   }
 
-  onQtyChanged(qty) {
-    this.facade.dispatch(new DaffCartItemUpdate(this.item.item_id, { qty }));
+  get quantityId() {
+    return `cart-quantity-${this.base64.encode(this.item.id)}`;
+  }
+
+  redirectToProduct() {
+    this.router.navigateByUrl('/product/' + this.item.product_id);
   }
 
   removeItem() {

apps/demo/src/app/cart/components/cart-item/cart-item.module.ts

@@ -1,14 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffQtyDropdownModule } from '@daffodil/design';
+import {
+  DaffFormFieldModule,
+  DaffQuantityFieldModule,
+} from '@daffodil/design';
 
 import { CartItemComponent } from './cart-item.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    DaffQtyDropdownModule,
+    ReactiveFormsModule,
+    DaffFormFieldModule,
+    DaffQuantityFieldModule,
   ],
   declarations: [
     CartItemComponent,

apps/demo/src/app/product/components/product/product.component.html

@@ -11,7 +11,13 @@ <h1 class="demo-product__name">{{product.name}}</h1>
     <div class="demo-product__details">
       <div class="demo-product__qty">
         <span>Quantity</span>
-        <daff-qty-dropdown id="{{product.id}}" [qty]="qty" (qtyChanged)="onUpdateQty($event)"></daff-qty-dropdown>
+        <daff-form-field>
+          <daff-quantity-field
+            [formControl]="quantity"
+            name="quantity"
+            [id]="quantityId">
+          </daff-quantity-field>
+        </daff-form-field>
       </div>
       <div class="demo-product__button">
         <ng-content></ng-content>

apps/demo/src/app/product/components/product/product.component.spec.ts

@@ -7,15 +7,13 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import {
-  DaffQtyDropdownModule,
-  DaffQtyDropdownComponent,
-} from '@daffodil/design';
+import { DaffQuantityFieldModule } from '@daffodil/design';
 import { DaffAccordionModule } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffProduct } from '@daffodil/product';
@@ -41,16 +39,16 @@ describe('ProductComponent', () => {
   let productFactory: DaffProductFactory;
   let router;
   let stubProduct: DaffProduct;
-  let stubQty = 1;
   let productComponent: ProductComponent;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
+        ReactiveFormsModule,
         DaffContainerModule,
         DaffAccordionModule,
-        DaffQtyDropdownModule,
+        DaffQuantityFieldModule,
         NoopAnimationsModule,
       ],
       declarations: [
@@ -72,7 +70,6 @@ describe('ProductComponent', () => {
     router = TestBed.inject(Router);
     spyOn(router, 'navigateByUrl');
     wrapper.productValue = stubProduct;
-    wrapper.qtyValue = stubQty;
 
     fixture.detectChanges();
 
@@ -87,10 +84,6 @@ describe('ProductComponent', () => {
     expect(productComponent.product).toEqual(stubProduct);
   });
 
-  it('should be able to take a qty input', () => {
-    expect(productComponent.qty).toEqual(stubQty);
-  });
-
   describe('on <demo-image-gallery-container>', () => {
 
     it('should set images', () => {
@@ -100,51 +93,6 @@ describe('ProductComponent', () => {
     });
   });
 
-  describe('on <daff-qty-dropdown>', () => {
-
-    let qtyDropdownComponent: DaffQtyDropdownComponent;
-
-    beforeEach(() => {
-      qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')).componentInstance;
-    });
-
-    it('should set id', () => {
-      expect(qtyDropdownComponent.id.toString()).toEqual(stubProduct.id);
-    });
-
-    it('should set qty', () => {
-      expect(qtyDropdownComponent.qty).toEqual(stubQty);
-    });
-
-    it('should call updateQty.emit when qtyChanged is called', () => {
-      spyOn(productComponent.updateQty, 'emit');
-      const newQty = 2;
-      qtyDropdownComponent.qtyChanged.emit(newQty);
-
-      expect(productComponent.updateQty.emit).toHaveBeenCalledWith(newQty);
-    });
-  });
-
-  it('should call updateQtyFunction when updateQty is emitted', () => {
-    const payload = 4;
-    spyOn(wrapper, 'updateQtyFunction');
-
-    productComponent.updateQty.emit(payload);
-
-    expect(wrapper.updateQtyFunction).toHaveBeenCalledWith(payload);
-  });
-
-  describe('onUpdateQty', () => {
-
-    it('should call updateQty.emit', () => {
-      spyOn(productComponent.updateQty, 'emit');
-      stubQty = 4;
-      productComponent.onUpdateQty(stubQty);
-
-      expect(productComponent.updateQty.emit).toHaveBeenCalledWith(stubQty);
-    });
-  });
-
   describe('when product is null', () => {
 
     it('should redirect to the 404 not-found page', () => {

apps/demo/src/app/product/components/product/product.component.ts

@@ -5,9 +5,18 @@ import {
   EventEmitter,
   Output,
   ViewEncapsulation,
+  Inject,
 } from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+} from '@angular/forms';
 import { Router } from '@angular/router';
 
+import {
+  DaffBase64Service,
+  DaffBase64ServiceToken,
+} from '@daffodil/core';
 import { DaffProduct } from '@daffodil/product';
 
 @Component({
@@ -21,17 +30,26 @@ export class ProductComponent implements OnInit {
   @Input() qty: number;
   @Output() updateQty: EventEmitter<any> = new EventEmitter();
 
+  quantity: UntypedFormControl;
+
   constructor(
     private router: Router,
+    private formBuilder: UntypedFormBuilder,
+    @Inject(DaffBase64ServiceToken) private base64: DaffBase64Service,
   ) {}
 
   ngOnInit() {
     if (!this.product) {
       this.router.navigateByUrl('/404');
     }
+    this.quantity = this.formBuilder.control(this.qty);
   }
 
   onUpdateQty(qty: number) {
     this.updateQty.emit(qty);
   }
+
+  get quantityId() {
+    return `cart-quantity-${this.base64.encode(this.product.id)}`;
+  }
 }

apps/demo/src/app/product/components/product/product.module.ts

@@ -1,8 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
-
-import { DaffQtyDropdownModule } from '@daffodil/design';
+import {
+  DaffFormFieldModule,
+  DaffQuantityFieldModule,
+} from '@daffodil/design';
 import { DaffAccordionModule } from '@daffodil/design/accordion';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
@@ -13,11 +16,13 @@ import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.mo
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     ImageGalleryModule,
     DaffLoadingIconModule,
-    DaffQtyDropdownModule,
     DaffAccordionModule,
     DaffContainerModule,
+    DaffFormFieldModule,
+    DaffQuantityFieldModule,
   ],
   declarations: [
     ProductComponent,