feat(design)!: remove deprecated layout and size properties in `D…

…affHeroComponent` (#2870)

BREAKING CHANGE: `layout` and `size` have been removed from the codebase. Use `textAlignment` and `compact` instead.

apps/design-land/src/app/hero/hero.component.html

@@ -44,9 +44,3 @@ <h2>Gridded Heroes</h2>
 
 <h3>Hero with Two Columns</h3>
 <design-land-example-viewer-container example="hero-with-grid"></design-land-example-viewer-container>
-
-<h2>Size</h2>
-<p>The <code>size</code> property will be deprecated in v1.0.0. <code>compact</code> will be replaced by the <code>DaffCompactable</code> interface.</p>
-
-<h2>Layout</h2>
-<p>The <code>layout</code> property will be deprecated in v1.0.0</p>

libs/design/hero/README.md

@@ -46,9 +46,3 @@ Heros are flexible enough to support grids within them.
 
 ### Hero with Two Columns
 <design-land-example-viewer-container example="hero-with-grid"></design-land-example-viewer-container>
-
-## Size
-The `size` property will be deprecated in v1.0.0. `compact` will be replaced by the `DaffCompactable` interface.
-
-## Layout
-The `layout` property will be deprecated in v1.0.0

libs/design/hero/src/hero/hero.component.scss

@@ -65,29 +65,6 @@
 		}
 	}
 
-	// centered will be deprecated in v1.0.0
-	&--centered {
-		#{$root}__title {
-			margin: 0 auto;
-			text-align: center;
-		}
-
-		#{$root}__subtitle {
-			margin: 24px auto 0;
-			text-align: center;
-		}
-	}
-
-	// small and compact will be deprecated in v1.0.0
-	&--small,
-	&--compact {
-		padding: 50px 25px;
-
-		@include layout.breakpoint(mobile) {
-			padding: 50px;
-		}
-	}
-
 	&.daff-compact {
 		padding: 48px 24px;
 

libs/design/hero/src/hero/hero.component.spec.ts

@@ -14,18 +14,12 @@ import {
   DaffTextAlignment,
 } from '@daffodil/design';
 
-import {
-  DaffHeroComponent,
-  DaffHeroLayout,
-  DaffHeroSize,
-} from './hero.component';
+import { DaffHeroComponent } from './hero.component';
 
 @Component({
-  template: `<daff-hero [layout]="layout" [size]="size" [color]="color" [textAlignment]="textAlignment" [compact]="compact"></daff-hero>`,
+  template: `<daff-hero [color]="color" [textAlignment]="textAlignment" [compact]="compact"></daff-hero>`,
 })
 class WrapperComponent {
-  layout: DaffHeroLayout;
-  size: DaffHeroSize;
   color: DaffPalette;
   textAlignment: DaffTextAlignment;
   compact = false;
@@ -65,45 +59,6 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
     });
   });
 
-  describe('setting the layout', () => {
-    it('should not set a default layout', () => {
-      expect(component.layout).toBeFalsy();
-      expect(de.nativeElement.classList.contains('daff-hero--centered')).toBeFalsy();
-    });
-
-    describe('when layout="centered"', () => {
-      it('should add a class of "daff-hero--centered" to the host element', () => {
-        wrapper.layout = 'centered';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-hero--centered')).toBeTruthy();
-      });
-    });
-  });
-
-  describe('setting the size', () => {
-    it('should not set a default size', () => {
-      expect(component.layout).toBeFalsy();
-      expect(de.nativeElement.classList.contains('daff-hero--small')).toBeFalsy();
-      expect(de.nativeElement.classList.contains('daff-hero--compact')).toBeFalsy();
-    });
-
-    describe('when size="small"', () => {
-      it('should add a class of "daff-hero--compact" to the host element', () => {
-        wrapper.size = 'small';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-hero--compact')).toBeTruthy();
-      });
-    });
-
-    describe('when size="compact"', () => {
-      it('should add a class of "daff-hero--compact" to the host element', () => {
-        wrapper.size = 'compact';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-hero--compact')).toBeTruthy();
-      });
-    });
-  });
-
   describe('using a color variant of a hero', () => {
     it('should set a color class on the hero', () => {
       wrapper.color = 'primary';

libs/design/hero/src/hero/hero.component.ts

@@ -1,7 +1,6 @@
 import {
   Component,
   ViewEncapsulation,
-  Input,
   ElementRef,
   ChangeDetectionStrategy,
   HostBinding,
@@ -19,23 +18,6 @@ import {
   daffTextAlignmentMixin,
 } from '@daffodil/design';
 
-/**
- * @deprecated See {@link DaffTextAlignable}
- */
-export type DaffHeroLayout = 'centered' | undefined;
-export enum DaffHeroLayoutEnum {
-  Centered = 'centered'
-}
-
-/**
- * @deprecated See {@link DaffCompactable}
- */
-export type DaffHeroSize = 'compact' | 'small' | undefined;
-export enum DaffHeroSizeEnum {
-  Compact = 'compact',
-  Small = 'small'
-}
-
 /**
  * An _elementRef and an instance of renderer2 are needed for the hero mixins
  */
@@ -59,17 +41,6 @@ const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixi
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
-
-  /**
-   * @deprecated See {@link DaffTextAlignable}
-   */
-  @Input() layout: DaffHeroLayout;
-
-  /**
-   * @deprecated See {@link DaffCompactable}
-   */
-  @Input() size: DaffHeroSize;
-
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
     super(elementRef, renderer);
   }
@@ -78,18 +49,4 @@ export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, D
    * @docs-private
    */
   @HostBinding('class.daff-hero') class = true;
-
-  /**
-   * @deprecated See {@link DaffTextAlignable}
-   */
-  @HostBinding('class.daff-hero--centered') get centered() {
-	  return this.layout === DaffHeroLayoutEnum.Centered;
-  }
-
-  /**
-   * @deprecated See {@link DaffCompactable}
-   */
-  @HostBinding('class.daff-hero--compact') get compactClass() {
-	  return this.size === DaffHeroSizeEnum.Compact || this.compact === true || this.size === DaffHeroSizeEnum.Small;
-  }
 }