From ab2836b1b2c72189b74285d38455b9f237b0b9dd Mon Sep 17 00:00:00 2001 From: Elain T Date: Fri, 29 Dec 2023 11:29:44 -0500 Subject: [PATCH] feat(design)!: shard menu component (#2698) BREAKING CHANGE: `DaffMenuModule` has moved to its own package. Update imports to `@daffodil/design/menu` --- apps/design-land/src/app/menu/menu.module.ts | 2 +- libs/design/{src/molecules => }/menu/README.md | 0 .../menu/examples/src/basic-menu/basic-menu.module.ts | 2 +- libs/design/menu/ng-package.json | 9 +++++++++ .../menu => menu/src}/animations/animation-state.spec.ts | 0 .../menu => menu/src}/animations/animation-state.ts | 0 .../molecules/menu => menu/src}/animations/animation.ts | 0 .../menu => menu/src}/helpers/create-overlay.ts | 0 .../molecules/menu => menu/src}/helpers/public_api.ts | 0 libs/design/menu/src/index.ts | 1 + .../src}/menu-activator/menu-activator.component.spec.ts | 3 +-- .../src}/menu-activator/menu-activator.component.ts | 5 +++-- .../menu => menu/src}/menu-item/menu-item.component.html | 0 .../menu => menu/src}/menu-item/menu-item.component.scss | 2 +- .../src}/menu-item/menu-item.component.spec.ts | 0 .../menu => menu/src}/menu-item/menu-item.component.ts | 6 +----- .../{src/molecules/menu => menu/src}/menu-theme.scss | 4 ++-- .../{src/molecules/menu => menu/src}/menu.module.ts | 2 +- .../molecules/menu => menu/src}/menu/menu.component.scss | 0 .../menu => menu/src}/menu/menu.component.spec.ts | 2 +- .../molecules/menu => menu/src}/menu/menu.component.ts | 5 +++-- .../{src/molecules/menu => menu/src}/public_api.ts | 2 +- .../menu/service => menu/src/services}/menu.service.ts | 3 ++- .../molecules/menu => menu/src}/specs/children.spec.ts | 0 .../menu => menu/src}/specs/no-children.spec.ts | 0 .../molecules/menu => menu/src}/testing/dummy-service.ts | 2 +- libs/design/scss/theme.scss | 2 +- libs/design/src/public_api.ts | 1 - 28 files changed, 30 insertions(+), 23 deletions(-) rename libs/design/{src/molecules => }/menu/README.md (100%) create mode 100644 libs/design/menu/ng-package.json rename libs/design/{src/molecules/menu => menu/src}/animations/animation-state.spec.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/animations/animation-state.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/animations/animation.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/helpers/create-overlay.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/helpers/public_api.ts (100%) create mode 100644 libs/design/menu/src/index.ts rename libs/design/{src/molecules/menu => menu/src}/menu-activator/menu-activator.component.spec.ts (95%) rename libs/design/{src/molecules/menu => menu/src}/menu-activator/menu-activator.component.ts (95%) rename libs/design/{src/molecules/menu => menu/src}/menu-item/menu-item.component.html (100%) rename libs/design/{src/molecules/menu => menu/src}/menu-item/menu-item.component.scss (89%) rename libs/design/{src/molecules/menu => menu/src}/menu-item/menu-item.component.spec.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/menu-item/menu-item.component.ts (85%) rename libs/design/{src/molecules/menu => menu/src}/menu-theme.scss (90%) rename libs/design/{src/molecules/menu => menu/src}/menu.module.ts (92%) rename libs/design/{src/molecules/menu => menu/src}/menu/menu.component.scss (100%) rename libs/design/{src/molecules/menu => menu/src}/menu/menu.component.spec.ts (97%) rename libs/design/{src/molecules/menu => menu/src}/menu/menu.component.ts (93%) rename libs/design/{src/molecules/menu => menu/src}/public_api.ts (83%) rename libs/design/{src/molecules/menu/service => menu/src/services}/menu.service.ts (96%) rename libs/design/{src/molecules/menu => menu/src}/specs/children.spec.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/specs/no-children.spec.ts (100%) rename libs/design/{src/molecules/menu => menu/src}/testing/dummy-service.ts (88%) diff --git a/apps/design-land/src/app/menu/menu.module.ts b/apps/design-land/src/app/menu/menu.module.ts index 4f2399d6ef..054bc2a85c 100644 --- a/apps/design-land/src/app/menu/menu.module.ts +++ b/apps/design-land/src/app/menu/menu.module.ts @@ -1,9 +1,9 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DaffMenuModule } from '@daffodil/design'; import { DaffArticleModule } from '@daffodil/design/article'; import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffMenuModule } from '@daffodil/design/menu'; import { DesignLandMenuRoutingModule } from './menu-routing-module'; import { DesignLandMenuComponent } from './menu.component'; diff --git a/libs/design/src/molecules/menu/README.md b/libs/design/menu/README.md similarity index 100% rename from libs/design/src/molecules/menu/README.md rename to libs/design/menu/README.md diff --git a/libs/design/menu/examples/src/basic-menu/basic-menu.module.ts b/libs/design/menu/examples/src/basic-menu/basic-menu.module.ts index e18e08d999..b06d08c2ec 100644 --- a/libs/design/menu/examples/src/basic-menu/basic-menu.module.ts +++ b/libs/design/menu/examples/src/basic-menu/basic-menu.module.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; -import { DaffMenuModule } from '@daffodil/design'; import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffMenuModule } from '@daffodil/design/menu'; import { BasicMenuComponent } from './basic-menu.component'; import { MenuContentComponent } from './menu-content/menu-content.component'; diff --git a/libs/design/menu/ng-package.json b/libs/design/menu/ng-package.json new file mode 100644 index 0000000000..82f9919ffa --- /dev/null +++ b/libs/design/menu/ng-package.json @@ -0,0 +1,9 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/design/menu", + "deleteDestPath": false, + "lib": { + "entryFile": "src/index.ts", + "styleIncludePaths": ["../src/scss"] + } +} \ No newline at end of file diff --git a/libs/design/src/molecules/menu/animations/animation-state.spec.ts b/libs/design/menu/src/animations/animation-state.spec.ts similarity index 100% rename from libs/design/src/molecules/menu/animations/animation-state.spec.ts rename to libs/design/menu/src/animations/animation-state.spec.ts diff --git a/libs/design/src/molecules/menu/animations/animation-state.ts b/libs/design/menu/src/animations/animation-state.ts similarity index 100% rename from libs/design/src/molecules/menu/animations/animation-state.ts rename to libs/design/menu/src/animations/animation-state.ts diff --git a/libs/design/src/molecules/menu/animations/animation.ts b/libs/design/menu/src/animations/animation.ts similarity index 100% rename from libs/design/src/molecules/menu/animations/animation.ts rename to libs/design/menu/src/animations/animation.ts diff --git a/libs/design/src/molecules/menu/helpers/create-overlay.ts b/libs/design/menu/src/helpers/create-overlay.ts similarity index 100% rename from libs/design/src/molecules/menu/helpers/create-overlay.ts rename to libs/design/menu/src/helpers/create-overlay.ts diff --git a/libs/design/src/molecules/menu/helpers/public_api.ts b/libs/design/menu/src/helpers/public_api.ts similarity index 100% rename from libs/design/src/molecules/menu/helpers/public_api.ts rename to libs/design/menu/src/helpers/public_api.ts diff --git a/libs/design/menu/src/index.ts b/libs/design/menu/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/menu/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/src/molecules/menu/menu-activator/menu-activator.component.spec.ts b/libs/design/menu/src/menu-activator/menu-activator.component.spec.ts similarity index 95% rename from libs/design/src/molecules/menu/menu-activator/menu-activator.component.spec.ts rename to libs/design/menu/src/menu-activator/menu-activator.component.spec.ts index 4c07c6b998..b83a068930 100644 --- a/libs/design/src/molecules/menu/menu-activator/menu-activator.component.spec.ts +++ b/libs/design/menu/src/menu-activator/menu-activator.component.spec.ts @@ -11,7 +11,7 @@ import { BehaviorSubject } from 'rxjs'; import { DaffMenuActivatorDirective } from './menu-activator.component'; import { DaffMenuModule } from '../menu.module'; -import { DaffMenuService } from '../service/menu.service'; +import { DaffMenuService } from '../services/menu.service'; import { provideTestMenuService } from '../testing/dummy-service'; @Component({ template: ` @@ -24,7 +24,6 @@ describe('DaffMenuActivatorDirective', () => { let fixture: ComponentFixture; let de: DebugElement; let component: DaffMenuActivatorDirective; - let menuActivatorButton: DebugElement; beforeEach(() => { TestBed.configureTestingModule({ diff --git a/libs/design/src/molecules/menu/menu-activator/menu-activator.component.ts b/libs/design/menu/src/menu-activator/menu-activator.component.ts similarity index 95% rename from libs/design/src/molecules/menu/menu-activator/menu-activator.component.ts rename to libs/design/menu/src/menu-activator/menu-activator.component.ts index 784b248ee6..6c97024d5e 100644 --- a/libs/design/src/molecules/menu/menu-activator/menu-activator.component.ts +++ b/libs/design/menu/src/menu-activator/menu-activator.component.ts @@ -14,14 +14,13 @@ import { takeUntil, } from 'rxjs'; -import { DaffMenuService } from '../service/menu.service'; +import { DaffMenuService } from '../services/menu.service'; @Directive({ selector: '[daffMenuActivator]', }) export class DaffMenuActivatorDirective implements OnDestroy { - @Input() daffMenuActivator: Type | TemplateRef; private _destroyed$ = new Subject(); private _open: boolean; @@ -30,6 +29,8 @@ export class DaffMenuActivatorDirective implements OnDestroy { return this._open; } + @Input() daffMenuActivator: Type | TemplateRef; + constructor( private service: DaffMenuService, private viewContainerRef: ViewContainerRef, diff --git a/libs/design/src/molecules/menu/menu-item/menu-item.component.html b/libs/design/menu/src/menu-item/menu-item.component.html similarity index 100% rename from libs/design/src/molecules/menu/menu-item/menu-item.component.html rename to libs/design/menu/src/menu-item/menu-item.component.html diff --git a/libs/design/src/molecules/menu/menu-item/menu-item.component.scss b/libs/design/menu/src/menu-item/menu-item.component.scss similarity index 89% rename from libs/design/src/molecules/menu/menu-item/menu-item.component.scss rename to libs/design/menu/src/menu-item/menu-item.component.scss index 5171008e73..f358f2ffcb 100644 --- a/libs/design/src/molecules/menu/menu-item/menu-item.component.scss +++ b/libs/design/menu/src/menu-item/menu-item.component.scss @@ -1,4 +1,4 @@ -@use 'interactions'; +@use '../../../scss/interactions'; :host { @include interactions.clickable(); diff --git a/libs/design/src/molecules/menu/menu-item/menu-item.component.spec.ts b/libs/design/menu/src/menu-item/menu-item.component.spec.ts similarity index 100% rename from libs/design/src/molecules/menu/menu-item/menu-item.component.spec.ts rename to libs/design/menu/src/menu-item/menu-item.component.spec.ts diff --git a/libs/design/src/molecules/menu/menu-item/menu-item.component.ts b/libs/design/menu/src/menu-item/menu-item.component.ts similarity index 85% rename from libs/design/src/molecules/menu/menu-item/menu-item.component.ts rename to libs/design/menu/src/menu-item/menu-item.component.ts index 9e7bf82be9..dfc1654dcf 100644 --- a/libs/design/src/molecules/menu/menu-item/menu-item.component.ts +++ b/libs/design/menu/src/menu-item/menu-item.component.ts @@ -3,13 +3,9 @@ import { ChangeDetectionStrategy, HostBinding, ContentChild, - ElementRef, } from '@angular/core'; -import { - DaffPrefixDirective, - DaffSuffixDirective, -} from '../../../core/prefix-suffix/public_api'; +import { DaffPrefixDirective } from '@daffodil/design'; @Component({ selector: diff --git a/libs/design/src/molecules/menu/menu-theme.scss b/libs/design/menu/src/menu-theme.scss similarity index 90% rename from libs/design/src/molecules/menu/menu-theme.scss rename to libs/design/menu/src/menu-theme.scss index 3a4982e84c..bc38c5b6ce 100644 --- a/libs/design/src/molecules/menu/menu-theme.scss +++ b/libs/design/menu/src/menu-theme.scss @@ -1,5 +1,5 @@ -@use '../../../scss/core'; -@use '../../../scss/theming'; +@use '../../scss/core'; +@use '../../scss/theming'; @mixin daff-menu-theme($theme) { $white: core.daff-map-deep-get($theme, 'core.white'); diff --git a/libs/design/src/molecules/menu/menu.module.ts b/libs/design/menu/src/menu.module.ts similarity index 92% rename from libs/design/src/molecules/menu/menu.module.ts rename to libs/design/menu/src/menu.module.ts index 12379d0e48..5b7c685847 100644 --- a/libs/design/src/molecules/menu/menu.module.ts +++ b/libs/design/menu/src/menu.module.ts @@ -5,7 +5,7 @@ import { NgModule } from '@angular/core'; import { DaffMenuComponent } from './menu/menu.component'; import { DaffMenuActivatorDirective } from './menu-activator/menu-activator.component'; import { DaffMenuItemComponent } from './menu-item/menu-item.component'; -import { DaffMenuService } from './service/menu.service'; +import { DaffMenuService } from './services/menu.service'; @NgModule({ imports: [ diff --git a/libs/design/src/molecules/menu/menu/menu.component.scss b/libs/design/menu/src/menu/menu.component.scss similarity index 100% rename from libs/design/src/molecules/menu/menu/menu.component.scss rename to libs/design/menu/src/menu/menu.component.scss diff --git a/libs/design/src/molecules/menu/menu/menu.component.spec.ts b/libs/design/menu/src/menu/menu.component.spec.ts similarity index 97% rename from libs/design/src/molecules/menu/menu/menu.component.spec.ts rename to libs/design/menu/src/menu/menu.component.spec.ts index db7d358e32..6192108f0b 100644 --- a/libs/design/src/molecules/menu/menu/menu.component.spec.ts +++ b/libs/design/menu/src/menu/menu.component.spec.ts @@ -13,7 +13,7 @@ import { BehaviorSubject } from 'rxjs'; import { DaffMenuComponent } from './menu.component'; import { DaffMenuModule } from '../menu.module'; -import { DaffMenuService } from '../service/menu.service'; +import { DaffMenuService } from '../services/menu.service'; import { provideTestMenuService } from '../testing/dummy-service'; @Component({ template: ` diff --git a/libs/design/src/molecules/menu/menu/menu.component.ts b/libs/design/menu/src/menu/menu.component.ts similarity index 93% rename from libs/design/src/molecules/menu/menu/menu.component.ts rename to libs/design/menu/src/menu/menu.component.ts index b33683e221..52d2083022 100644 --- a/libs/design/src/molecules/menu/menu/menu.component.ts +++ b/libs/design/menu/src/menu/menu.component.ts @@ -16,8 +16,9 @@ import { fromEvent, } from 'rxjs'; -import { daffFocusableElementsSelector } from '../../../core/focus/public_api'; -import { DaffMenuService } from '../service/menu.service'; +import { daffFocusableElementsSelector } from '@daffodil/design'; + +import { DaffMenuService } from '../services/menu.service'; @Component({ selector: 'daff-menu', diff --git a/libs/design/src/molecules/menu/public_api.ts b/libs/design/menu/src/public_api.ts similarity index 83% rename from libs/design/src/molecules/menu/public_api.ts rename to libs/design/menu/src/public_api.ts index 04d27a90b1..81d86b2715 100644 --- a/libs/design/src/molecules/menu/public_api.ts +++ b/libs/design/menu/src/public_api.ts @@ -1,6 +1,6 @@ export * from './helpers/public_api'; -export { DaffMenuService } from './service/menu.service'; +export { DaffMenuService } from './services/menu.service'; export { DaffMenuActivatorDirective } from './menu-activator/menu-activator.component'; export { DaffMenuModule } from './menu.module'; export { DaffMenuComponent } from './menu/menu.component'; diff --git a/libs/design/src/molecules/menu/service/menu.service.ts b/libs/design/menu/src/services/menu.service.ts similarity index 96% rename from libs/design/src/molecules/menu/service/menu.service.ts rename to libs/design/menu/src/services/menu.service.ts index 77769b9975..39740e3f2a 100644 --- a/libs/design/src/molecules/menu/service/menu.service.ts +++ b/libs/design/menu/src/services/menu.service.ts @@ -19,7 +19,8 @@ import { Observable, } from 'rxjs'; -import { DaffLazyComponent } from '../../../core/lazy/public_api'; +import { DaffLazyComponent } from '@daffodil/design'; + import { daffMenuCreateOverlay } from '../helpers/public_api'; export interface DaffActivatedMenu { diff --git a/libs/design/src/molecules/menu/specs/children.spec.ts b/libs/design/menu/src/specs/children.spec.ts similarity index 100% rename from libs/design/src/molecules/menu/specs/children.spec.ts rename to libs/design/menu/src/specs/children.spec.ts diff --git a/libs/design/src/molecules/menu/specs/no-children.spec.ts b/libs/design/menu/src/specs/no-children.spec.ts similarity index 100% rename from libs/design/src/molecules/menu/specs/no-children.spec.ts rename to libs/design/menu/src/specs/no-children.spec.ts diff --git a/libs/design/src/molecules/menu/testing/dummy-service.ts b/libs/design/menu/src/testing/dummy-service.ts similarity index 88% rename from libs/design/src/molecules/menu/testing/dummy-service.ts rename to libs/design/menu/src/testing/dummy-service.ts index 41e32d078a..7be7ab90dc 100644 --- a/libs/design/src/molecules/menu/testing/dummy-service.ts +++ b/libs/design/menu/src/testing/dummy-service.ts @@ -1,7 +1,7 @@ import { Provider } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; -import { DaffMenuService } from '../service/menu.service'; +import { DaffMenuService } from '../services/menu.service'; type PublicPart = {[K in keyof T]: T[K]}; diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss index 3a07eddc18..f84b01a30f 100644 --- a/libs/design/scss/theme.scss +++ b/libs/design/scss/theme.scss @@ -32,7 +32,7 @@ @use '../hero/src/hero-theme' as hero; @use '../list/src/list-theme' as list; @use '../media-gallery/src/media-gallery-theme' as media-gallery; -@use '../src/molecules/menu/menu-theme' as menu; +@use '../menu/src/menu-theme' as menu; @use '../src/molecules/modal/modal-theme' as modal; @use '../src/molecules/navbar/navbar-theme' as navbar; @use '../notification/src/notification-theme' as notification; diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts index a2d12dc105..6cfc4c3b78 100644 --- a/libs/design/src/public_api.ts +++ b/libs/design/src/public_api.ts @@ -19,7 +19,6 @@ export * from './molecules/backdrop/public_api'; export * from './molecules/button-set/public_api'; export * from './molecules/image-gallery/public_api'; export * from './molecules/image-list/public_api'; -export * from './molecules/menu/public_api'; export * from './molecules/modal/public_api'; export * from './molecules/navbar/public_api'; export * from './molecules/paginator/public_api';