feat(design)!: remove deprecated properties and directives from `Daff…

…ListComponent` (#2871)

BREAKING CHANGE: `mode` and `daffListSubheader` have been removed from the codebase. use `<daff-list>` and `<daff-nav-list>` for modes, and subheader styles will automatically apply to the first child item within a list item.

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

@@ -16,11 +16,3 @@ <h2>Multi-line List</h2>
 <h2>List with Icons</h2>
 <p>To add an icon to a list item, use the <code>daffPrefix</code> or <code>daffSuffix</code> attributes for the appropriate placements.</p>
 <design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
-
-<h2>Deprecation Notice</h2>
-<p>The <code>mode</code> property will be deprecated in v1.0.0.</p>
-<ul>
-  <li><code>mode="navigation"</code> is replaced with <code>&lt;daff-nav-list&gt;</code>.</li>
-  <li><code>mode="link"</code> is replaced with <code>&lt;daff-nav-list&gt;</code>.</li>
-  <li><code>mode="multiline"</code> is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a <code>&lt;daff-list-item&gt;</code>.</li>
-</ul>

libs/design/list/README.md

@@ -20,10 +20,3 @@ For lists that have multiple lines per item, wrap each line appropriately with a
 To add an icon to a list item, use the `daffPrefix` or `daffSuffix` attributes for the appropriate placements.
 
 <design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
-
-## Deprecation Notice
-The `mode` property will be deprecated in v1.0.0.
-
-- `mode="navigation"` is replaced with `<daff-nav-list>`.
-- `mode="link"` is replaced with `<daff-nav-list>`.
-- `mode="multiline"` is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a `<daff-list-item>`.

libs/design/list/src/list-theme.scss

@@ -19,40 +19,6 @@
 				}
 			}
 		}
-
-		// link and navigation deprecated in v1.0.0
-		&--link,
-		&--navigation {
-			a {
-				&:hover {
-					color: theming.daff-color($neutral, 80);
-				}
-			}
-		}
-
-		// deprecated in v1.0.0
-		&--navigation {
-			.daff-list-item {
-				&:hover {
-					background-color: theming.daff-illuminate($base, $neutral, 1);
-				}
-			}
-		}
-
-		// deprecated in v1.0.0
-		&--multi-line {
-			.daff-list-item {
-				&__content {
-					*:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
-						color: $base-contrast;
-					}
-
-					*:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
-						color: theming.daff-illuminate($base-contrast, $neutral, 3);
-					}
-				}
-			}
-		}
 	}
 
 	.daff-nav-list {

libs/design/list/src/list.module.ts

@@ -5,7 +5,6 @@ import { DaffPrefixSuffixModule } from '@daffodil/design';
 
 import { DaffListComponent } from './list/list.component';
 import { DaffListItemComponent } from './list-item/list-item.component';
-import { DaffListSubheaderDirective } from './list-subheader/list-subheader.directive';
 
 @NgModule({
   imports: [
@@ -14,12 +13,10 @@ import { DaffListSubheaderDirective } from './list-subheader/list-subheader.dire
   ],
   declarations: [
     DaffListComponent,
-    DaffListSubheaderDirective,
     DaffListItemComponent,
   ],
   exports: [
     DaffListComponent,
-    DaffListSubheaderDirective,
     DaffListItemComponent,
     DaffPrefixSuffixModule,
   ],

libs/design/list/src/list/list.component.scss

@@ -43,52 +43,6 @@
 
 .daff-list {
 	@include daff-list();
-
-	// .daff-list__subheader deprecated in v1.0.0
-	&__subheader {
-		@include t.embolden;
-		@include t.uppercase;
-		font-size: 1rem;
-		padding: 0 0 25px;
-	}
-
-	// link and navigation deprecated in v1.0.0
-	&--link,
-	&--navigation {
-		a {
-			text-decoration: none;
-		}
-	}
-
-	// deprecated in v1.0.0
-	&--multi-line {
-		.daff-list-item {
-			padding: 15px 0;
-
-			&:first-of-type {
-				padding: 0 0 15px;
-			}
-
-			&:last-of-type {
-				padding: 15px 0 0;
-			}
-
-			&__content {
-				*:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
-					@include t.embolden;
-					font-size: 1rem;
-					line-height: 1.5rem;
-					margin: 0 0 10px;
-					padding: 0;
-				}
-
-				*:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
-	}
 }
 
 .daff-nav-list {

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

@@ -9,20 +9,15 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import {
-  DaffListComponent,
-  DaffListMode,
-} from './list.component';
+import { DaffListComponent } from './list.component';
 
 @Component({
   template: `
     <daff-list [mode]="mode"></daff-list>
     <daff-nav-list></daff-nav-list>
   `,
 })
-class WrapperComponent {
-  mode: DaffListMode;
-}
+class WrapperComponent {}
 
 describe('@daffodil/design/list | DaffListComponent', () => {
   let wrapper: WrapperComponent;
@@ -78,35 +73,4 @@ describe('@daffodil/design/list | DaffListComponent', () => {
       expect(navList.role).toBe('navigation');
     });
   });
-
-  describe('setting the mode', () => {
-    it('should not set a default mode', () => {
-      expect(component.mode).toBeFalsy();
-      expect(de.nativeElement.classList.contains('daff-list--multi-line')).toBeFalsy();
-    });
-
-    describe('when mode="multi-line"', () => {
-      it('should add a class of "daff-list--multi-line" to the host element', () => {
-        wrapper.mode = 'multi-line';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-list--multi-line')).toBeTruthy();
-      });
-    });
-
-    describe('when mode="link"', () => {
-      it('should add a class of "daff-list--link" to the host element', () => {
-        wrapper.mode = 'link';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-list--link')).toBeTruthy();
-      });
-    });
-
-    describe('when mode="navigation"', () => {
-      it('should add a class of "daff-list--navigation" to the host element', () => {
-        wrapper.mode = 'navigation';
-        fixture.detectChanges();
-        expect(de.nativeElement.classList.contains('daff-list--navigation')).toBeTruthy();
-      });
-    });
-  });
 });

libs/design/list/src/list/list.component.ts

@@ -2,25 +2,13 @@ import {
   Component,
   ViewEncapsulation,
   ChangeDetectionStrategy,
-  Input,
   HostBinding,
   ElementRef,
   Renderer2,
 } from '@angular/core';
 
 import { daffArticleEncapsulatedMixin } from '@daffodil/design';
 
-/**
- * @deprecated
- * DaffListMode will be completely deprecated in v1.0.0
- * */
-export type DaffListMode = 'multi-line' | 'link' | 'navigation' | undefined;
-export enum DaffListModeEnum {
-  Multiline = 'multi-line',
-  Link = 'link',
-  Navigation = 'navigation'
-}
-
 export type DaffListType = 'daff-list' | 'daff-nav-list';
 
 enum DaffListTypeEnum {
@@ -48,42 +36,13 @@ const _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
 })
 
 export class DaffListComponent extends _daffListBase {
-  /**
-   * @deprecated
-   * */
-  @Input() mode: DaffListMode;
-
   /**
    * @docs-private
    */
   @HostBinding('class.daff-list') get list() {
     return this.listType === DaffListTypeEnum.Default;
   }
 
-  /**
-   * @docs-private
-   * @deprecated
-   * */
-  @HostBinding('class.daff-list--multi-line') get multiline() {
-    return this.mode === DaffListModeEnum.Multiline;
-  }
-
-  /**
-   * @docs-private
-   * @deprecated
-   * */
-  @HostBinding('class.daff-list--link') get link() {
-    return this.mode === DaffListModeEnum.Link;
-  }
-
-  /**
-   * @docs-private
-   * @deprecated
-   * */
-  @HostBinding('class.daff-list--navigation') get navigation() {
-    return this.mode === DaffListModeEnum.Navigation;
-  }
-
   /**
    * @docs-private
    */

libs/design/list/src/public_api.ts

@@ -1,4 +1,3 @@
 export { DaffListModule } from './list.module';
 export * from './list/list.component';
-export * from './list-subheader/list-subheader.directive';
 export * from './list-item/list-item.component';