diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.module.ts b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.module.ts index 6ec4f67015..7427ce8711 100644 --- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.module.ts +++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.module.ts @@ -5,12 +5,11 @@ import { RouterModule } from '@angular/router'; import { DaffListModule, DaffLinkSetModule, - DaffAccordionModule, } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffioDocsTableOfContentsComponent } from './table-of-contents.component'; - @NgModule({ declarations: [ DaffioDocsTableOfContentsComponent, diff --git a/apps/demo/src/app/checkout/checkout.module.ts b/apps/demo/src/app/checkout/checkout.module.ts index 8e45b80207..0224cf4608 100644 --- a/apps/demo/src/app/checkout/checkout.module.ts +++ b/apps/demo/src/app/checkout/checkout.module.ts @@ -3,10 +3,8 @@ import { NgModule } from '@angular/core'; import { DaffCartStateModule } from '@daffodil/cart/state'; import { StateCheckoutModule } from '@daffodil/checkout'; -import { - DaffAccordionModule, - DaffLoadingIconModule, -} from '@daffodil/design'; +import { DaffLoadingIconModule } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { CheckoutRoutingModule } from './checkout-routing.module'; diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts index fffd093759..a7840be6f0 100644 --- a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts +++ b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts @@ -38,11 +38,11 @@ import { import { DaffPaymentFactory } from '@daffodil/checkout/testing'; import { DaffAddress } from '@daffodil/core'; import { DaffAddressFactory } from '@daffodil/core/testing'; +import { DaffLoadingIconModule } from '@daffodil/design'; import { DaffAccordionModule, DaffAccordionItemComponent, - DaffLoadingIconModule, -} from '@daffodil/design'; +} from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { CheckoutViewComponent } from './checkout-view.component'; diff --git a/apps/demo/src/app/product/components/product/product.component.spec.ts b/apps/demo/src/app/product/components/product/product.component.spec.ts index b1592179bd..356f181f2f 100644 --- a/apps/demo/src/app/product/components/product/product.component.spec.ts +++ b/apps/demo/src/app/product/components/product/product.component.spec.ts @@ -13,10 +13,10 @@ import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { - DaffAccordionModule, DaffQtyDropdownModule, DaffQtyDropdownComponent, } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { DaffProduct } from '@daffodil/product'; import { DaffProductFactory } from '@daffodil/product/testing'; diff --git a/apps/demo/src/app/product/components/product/product.module.ts b/apps/demo/src/app/product/components/product/product.module.ts index 52bd87c24d..da13625540 100644 --- a/apps/demo/src/app/product/components/product/product.module.ts +++ b/apps/demo/src/app/product/components/product/product.module.ts @@ -4,9 +4,9 @@ import { NgModule } from '@angular/core'; import { DaffQtyDropdownModule, - DaffAccordionModule, DaffLoadingIconModule, } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { ProductComponent } from './product.component'; diff --git a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts index 2f83f8be52..75741c5e1f 100644 --- a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts +++ b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts @@ -20,11 +20,11 @@ import { DaffCartFactory, DaffCartItemFactory, } from '@daffodil/cart/testing'; +import { DaffLoadingIconModule } from '@daffodil/design'; import { DaffAccordionModule, DaffAccordionItemComponent, - DaffLoadingIconModule, -} from '@daffodil/design'; +} from '@daffodil/design/accordion'; import { DaffContainerComponent, DaffContainerModule, diff --git a/apps/demo/src/app/thank-you/thank-you.module.ts b/apps/demo/src/app/thank-you/thank-you.module.ts index 28194b49d6..c2c055ceb9 100644 --- a/apps/demo/src/app/thank-you/thank-you.module.ts +++ b/apps/demo/src/app/thank-you/thank-you.module.ts @@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { StateCheckoutModule } from '@daffodil/checkout'; -import { - DaffAccordionModule, - DaffLoadingIconModule, -} from '@daffodil/design'; +import { DaffLoadingIconModule } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { ThankYouComponentModule } from './components/thank-you/thank-you.module'; diff --git a/apps/design-land/src/app/accordion/accordion.component.html b/apps/design-land/src/app/accordion/accordion.component.html index 1cbf50d088..2297d1aac3 100644 --- a/apps/design-land/src/app/accordion/accordion.component.html +++ b/apps/design-land/src/app/accordion/accordion.component.html @@ -2,11 +2,6 @@

Accordion

Types

daff-accordion-item - An accordion that typically holds content.

-

daff-nav-accordion-item — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.

Content Accordion Item

- -

(DEPRECATED) Navigation Accordion Item

-

Use the DaffTreeComponent instead.

- diff --git a/libs/design/src/molecules/accordion/README.md b/libs/design/accordion/README.md similarity index 100% rename from libs/design/src/molecules/accordion/README.md rename to libs/design/accordion/README.md diff --git a/libs/design/accordion/examples/src/accordion-examples.module.ts b/libs/design/accordion/examples/src/accordion-examples.module.ts new file mode 100644 index 0000000000..62df9ece85 --- /dev/null +++ b/libs/design/accordion/examples/src/accordion-examples.module.ts @@ -0,0 +1,17 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { DaffAccordionModule } from '@daffodil/design/accordion'; + +import { ACCORDION_EXAMPLES } from './examples'; + +@NgModule({ + declarations: [ + ...ACCORDION_EXAMPLES, + ], + imports: [ + CommonModule, + DaffAccordionModule, + ], +}) +export class AccordionExamplesModule { } diff --git a/libs/design/accordion/examples/src/basic-accordion/basic-accordion.module.ts b/libs/design/accordion/examples/src/basic-accordion/basic-accordion.module.ts index 3eea439f65..d2bb004587 100644 --- a/libs/design/accordion/examples/src/basic-accordion/basic-accordion.module.ts +++ b/libs/design/accordion/examples/src/basic-accordion/basic-accordion.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { DaffAccordionModule } from '@daffodil/design'; +import { DaffAccordionModule } from '@daffodil/design/accordion'; import { BasicAccordionComponent } from './basic-accordion.component'; diff --git a/libs/design/accordion/examples/src/examples.ts b/libs/design/accordion/examples/src/examples.ts new file mode 100644 index 0000000000..f040847b0f --- /dev/null +++ b/libs/design/accordion/examples/src/examples.ts @@ -0,0 +1,5 @@ +import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component'; + +export const ACCORDION_EXAMPLES = [ + BasicAccordionComponent, +]; diff --git a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.html b/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.html deleted file mode 100644 index b6a17c100c..0000000000 --- a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.html +++ /dev/null @@ -1,23 +0,0 @@ - - -

Details

- -

Details

- - Details - - - Details - - - -

Details

- - Details - - - Details - - - - \ No newline at end of file diff --git a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.ts b/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.ts deleted file mode 100644 index deed19ef7b..0000000000 --- a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, -} from '@angular/core'; - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'nav-accordion', - templateUrl: './nav-accordion.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class NavAccordionComponent {} diff --git a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.module.ts b/libs/design/accordion/examples/src/nav-accordion/nav-accordion.module.ts deleted file mode 100644 index 620fc55ba0..0000000000 --- a/libs/design/accordion/examples/src/nav-accordion/nav-accordion.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { DaffAccordionModule } from '@daffodil/design'; - -import { NavAccordionComponent } from './nav-accordion.component'; - - -@NgModule({ - declarations: [ - NavAccordionComponent, - ], - exports: [ - NavAccordionComponent, - ], - imports: [ - DaffAccordionModule, - ], -}) -export class NavAccordionModule { } diff --git a/libs/design/accordion/examples/src/public_api.ts b/libs/design/accordion/examples/src/public_api.ts index e603d0f251..d979ea38d9 100644 --- a/libs/design/accordion/examples/src/public_api.ts +++ b/libs/design/accordion/examples/src/public_api.ts @@ -1,15 +1,3 @@ -import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component'; -import { NavAccordionComponent } from './nav-accordion/nav-accordion.component'; - -export { BasicAccordionModule } from './basic-accordion/basic-accordion.module'; -export { NavAccordionModule } from './nav-accordion/nav-accordion.module'; - -export const ACCORDION_EXAMPLES = [ - BasicAccordionComponent, - NavAccordionComponent, -]; - -export { - BasicAccordionComponent, - NavAccordionComponent, -}; +export { BasicAccordionComponent } from './basic-accordion/basic-accordion.component'; +export { AccordionExamplesModule } from './accordion-examples.module'; +export { ACCORDION_EXAMPLES } from './examples'; diff --git a/libs/design/accordion/ng-package.json b/libs/design/accordion/ng-package.json new file mode 100644 index 0000000000..b85fcc73c6 --- /dev/null +++ b/libs/design/accordion/ng-package.json @@ -0,0 +1,9 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/design/accordion", + "deleteDestPath": false, + "lib": { + "entryFile": "src/index.ts", + "styleIncludePaths": ["../src/scss"] + } +} \ No newline at end of file diff --git a/libs/design/src/molecules/accordion/accordion-item/accordion-item-theme.scss b/libs/design/accordion/src/accordion-theme.scss similarity index 67% rename from libs/design/src/molecules/accordion/accordion-item/accordion-item-theme.scss rename to libs/design/accordion/src/accordion-theme.scss index df821870e1..9b0e310f4e 100644 --- a/libs/design/src/molecules/accordion/accordion-item/accordion-item-theme.scss +++ b/libs/design/accordion/src/accordion-theme.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../../../scss/core'; -@use '../../../../scss/theming'; +@use '../../scss/core'; +@use '../../scss/theming'; -@mixin daff-accordion-item-theme($theme) { +@mixin daff-accordion-theme($theme) { $gray: core.daff-map-deep-get($theme, 'core.gray'); $base: core.daff-map-deep-get($theme, 'core.base'); diff --git a/libs/design/accordion/src/accordion.module.ts b/libs/design/accordion/src/accordion.module.ts new file mode 100644 index 0000000000..4774ccd685 --- /dev/null +++ b/libs/design/accordion/src/accordion.module.ts @@ -0,0 +1,32 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + +import { DaffPrefixSuffixModule } from '@daffodil/design'; + +import { DaffAccordionComponent } from './accordion/accordion/accordion.component'; +import { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component'; +import { DaffAccordionItemContentDirective } from './accordion/accordion-item-content/accordion-item-content.directive'; +import { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive'; + +@NgModule({ + imports: [ + CommonModule, + + FontAwesomeModule, + DaffPrefixSuffixModule, + ], + declarations: [ + DaffAccordionComponent, + DaffAccordionItemComponent, + DaffAccordionItemTitleDirective, + DaffAccordionItemContentDirective, + ], + exports: [ + DaffAccordionComponent, + DaffAccordionItemComponent, + DaffAccordionItemTitleDirective, + DaffAccordionItemContentDirective, + ], +}) +export class DaffAccordionModule { } diff --git a/libs/design/src/molecules/accordion/accordion-item-content/accordion-item-content.directive.spec.ts b/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item-content/accordion-item-content.directive.spec.ts rename to libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.spec.ts diff --git a/libs/design/src/molecules/accordion/accordion-item-content/accordion-item-content.directive.ts b/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item-content/accordion-item-content.directive.ts rename to libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts diff --git a/libs/design/src/molecules/accordion/accordion-item-title/accordion-item-title.directive.spec.ts b/libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item-title/accordion-item-title.directive.spec.ts rename to libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.spec.ts diff --git a/libs/design/src/molecules/accordion/accordion-item-title/accordion-item-title.directive.ts b/libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item-title/accordion-item-title.directive.ts rename to libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts diff --git a/libs/design/src/molecules/accordion/accordion-item/accordion-item.component.html b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item/accordion-item.component.html rename to libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html diff --git a/libs/design/src/molecules/accordion/accordion-item/accordion-item.component.scss b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item/accordion-item.component.scss rename to libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss diff --git a/libs/design/src/molecules/accordion/accordion-item/accordion-item.component.spec.ts b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item/accordion-item.component.spec.ts rename to libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts diff --git a/libs/design/src/molecules/accordion/accordion-item/accordion-item.component.ts b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion-item/accordion-item.component.ts rename to libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts diff --git a/libs/design/src/molecules/accordion/accordion/accordion.component.html b/libs/design/accordion/src/accordion/accordion/accordion.component.html similarity index 100% rename from libs/design/src/molecules/accordion/accordion/accordion.component.html rename to libs/design/accordion/src/accordion/accordion/accordion.component.html diff --git a/libs/design/src/molecules/accordion/accordion/accordion.component.scss b/libs/design/accordion/src/accordion/accordion/accordion.component.scss similarity index 100% rename from libs/design/src/molecules/accordion/accordion/accordion.component.scss rename to libs/design/accordion/src/accordion/accordion/accordion.component.scss diff --git a/libs/design/src/molecules/accordion/accordion/accordion.component.spec.ts b/libs/design/accordion/src/accordion/accordion/accordion.component.spec.ts similarity index 100% rename from libs/design/src/molecules/accordion/accordion/accordion.component.spec.ts rename to libs/design/accordion/src/accordion/accordion/accordion.component.spec.ts diff --git a/libs/design/src/molecules/accordion/accordion/accordion.component.ts b/libs/design/accordion/src/accordion/accordion/accordion.component.ts similarity index 88% rename from libs/design/src/molecules/accordion/accordion/accordion.component.ts rename to libs/design/accordion/src/accordion/accordion/accordion.component.ts index bf44d6d1e3..2772e008e2 100644 --- a/libs/design/src/molecules/accordion/accordion/accordion.component.ts +++ b/libs/design/accordion/src/accordion/accordion/accordion.component.ts @@ -5,7 +5,7 @@ import { Renderer2, } from '@angular/core'; -import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api'; +import { daffArticleEncapsulatedMixin } from '@daffodil/design'; /** * An _elementRef and an instance of renderer2 are needed for the link set mixins diff --git a/libs/design/src/molecules/accordion/animation/accordion-animation-state.spec.ts b/libs/design/accordion/src/accordion/animation/accordion-animation-state.spec.ts similarity index 100% rename from libs/design/src/molecules/accordion/animation/accordion-animation-state.spec.ts rename to libs/design/accordion/src/accordion/animation/accordion-animation-state.spec.ts diff --git a/libs/design/src/molecules/accordion/animation/accordion-animation-state.ts b/libs/design/accordion/src/accordion/animation/accordion-animation-state.ts similarity index 100% rename from libs/design/src/molecules/accordion/animation/accordion-animation-state.ts rename to libs/design/accordion/src/accordion/animation/accordion-animation-state.ts diff --git a/libs/design/src/molecules/accordion/animation/accordion-animation.ts b/libs/design/accordion/src/accordion/animation/accordion-animation.ts similarity index 100% rename from libs/design/src/molecules/accordion/animation/accordion-animation.ts rename to libs/design/accordion/src/accordion/animation/accordion-animation.ts diff --git a/libs/design/accordion/src/index.ts b/libs/design/accordion/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/accordion/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/accordion/src/public_api.ts b/libs/design/accordion/src/public_api.ts new file mode 100644 index 0000000000..1d6dd2d5b3 --- /dev/null +++ b/libs/design/accordion/src/public_api.ts @@ -0,0 +1,5 @@ +export { DaffAccordionModule } from './accordion.module'; +export * from './accordion/accordion/accordion.component'; +export * from './accordion/accordion-item/accordion-item.component'; +export * from './accordion/accordion-item-title/accordion-item-title.directive'; +export * from './accordion/accordion-item-content/accordion-item-content.directive'; diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss index 822ab3e1f1..fb1aa2e933 100644 --- a/libs/design/scss/theme.scss +++ b/libs/design/scss/theme.scss @@ -26,7 +26,7 @@ @use '../src/atoms/form/native-select/native-select-theme' as native-select; @use '../src/atoms/loading-icon/loading-icon-theme' as loading-icon; @use '../src/atoms/progress-indicator/progress-indicator-theme' as progress-indicator; -@use '../src/molecules/accordion/accordion-item/accordion-item-theme' as accordion-item; +@use '../accordion/src/accordion-theme' as accordion; @use '../src/molecules/callout/callout-theme' as callout; @use '../src/molecules/card/card/card-theme' as card; @use '../src/molecules/hero/hero-theme' as hero; @@ -68,7 +68,7 @@ @include progress-indicator.daff-progress-indicator-theme($theme); // Molecules - @include accordion-item.daff-accordion-item-theme($theme); + @include accordion.daff-accordion-theme($theme); @include article.daff-article-theme($theme); @include callout.daff-callout-theme($theme); @include card.daff-card-theme($theme); diff --git a/libs/design/src/molecules/accordion/accordion.module.ts b/libs/design/src/molecules/accordion/accordion.module.ts deleted file mode 100644 index 95a5b8ad70..0000000000 --- a/libs/design/src/molecules/accordion/accordion.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; - -import { DaffAccordionComponent } from './accordion/accordion.component'; -import { DaffAccordionItemComponent } from './accordion-item/accordion-item.component'; -import { DaffAccordionItemContentDirective } from './accordion-item-content/accordion-item-content.directive'; -import { DaffAccordionItemTitleDirective } from './accordion-item-title/accordion-item-title.directive'; -import { DaffNavAccordionItemComponent } from './nav-accordion-item/nav-accordion-item.component'; -import { DaffPrefixSuffixModule } from '../../core/prefix-suffix/prefix-suffix.module'; - -@NgModule({ - imports: [ - CommonModule, - - FontAwesomeModule, - DaffPrefixSuffixModule, - ], - declarations: [ - DaffAccordionComponent, - DaffAccordionItemComponent, - DaffNavAccordionItemComponent, - DaffAccordionItemTitleDirective, - DaffAccordionItemContentDirective, - ], - exports: [ - DaffAccordionComponent, - DaffAccordionItemComponent, - DaffNavAccordionItemComponent, - DaffAccordionItemTitleDirective, - DaffAccordionItemContentDirective, - ], -}) -export class DaffAccordionModule { } diff --git a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.html b/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.html deleted file mode 100644 index d429f67967..0000000000 --- a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
- - - - - - - -
-
- -
diff --git a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.scss b/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.scss deleted file mode 100644 index a4d2e90c76..0000000000 --- a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '../../../../scss/interactions'; - -:host(.daff-nav-accordion-item--level-1) { - .daff-nav-accordion-item__header { - padding-left: 15px; - } -} -:host(.daff-nav-accordion-item--level-2) { - .daff-nav-accordion-item__header { - padding-left: 30px; - } -} -:host(.daff-nav-accordion-item--level-3) { - .daff-nav-accordion-item__header { - padding-left: 45px; - } -} - -:host { - display: block; - padding-top: 6px; -} - -.daff-nav-accordion-item { - - &__header { - @include interactions.clickable; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding-bottom: 6px; - - .daff-suffix { - margin: 0 10px; - } - } -} diff --git a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.spec.ts b/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.spec.ts deleted file mode 100644 index 31e0227ac0..0000000000 --- a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.spec.ts +++ /dev/null @@ -1,333 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; - -import { DaffNavAccordionItemComponent } from './nav-accordion-item.component'; -import { DaffAccordionComponent } from '../accordion/accordion.component'; - - -@Component({ template: ` - - -

Size and Fit

-
no content
- - -` }) -class UsageWrapperComponent { - initiallyActiveValue: boolean; -} - -describe('DaffNavAccordionItemComponent', () => { - - describe('usage', () => { - let fixture: ComponentFixture; - let wrapper: UsageWrapperComponent; - let accordionHeader: DebugElement; - let daffNavAccordionItem: DaffNavAccordionItemComponent; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule, - FontAwesomeModule, - ], - declarations: [ - UsageWrapperComponent, - DaffNavAccordionItemComponent, - DaffAccordionComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(UsageWrapperComponent); - wrapper = fixture.componentInstance; - - fixture.detectChanges(); - - daffNavAccordionItem = fixture.debugElement.query(By.css('daff-nav-accordion-item')).componentInstance; - accordionHeader = fixture.debugElement.query(By.css('.daff-nav-accordion-item__header')); - }); - - it('should create', () => { - expect(daffNavAccordionItem).toBeTruthy(); - }); - - it('should set _open to false by default', () => { - expect(daffNavAccordionItem._open).toEqual(false); - }); - - it('should set _animationState to void by default', () => { - expect(daffNavAccordionItem._animationState).toEqual('void'); - }); - - it('should be able to accept an initiallyActive input', () => { - wrapper.initiallyActiveValue = false; - - fixture.detectChanges(); - - expect(daffNavAccordionItem.initiallyActive).toEqual(false); - - wrapper.initiallyActiveValue = true; - - fixture.detectChanges(); - - expect(daffNavAccordionItem.initiallyActive).toEqual(true); - }); - - describe('ngOnInit', () => { - - describe('when initiallyActive is true', () => { - - beforeEach(() => { - wrapper.initiallyActiveValue = true; - fixture.detectChanges(); - }); - - it('should set _open to true', () => { - daffNavAccordionItem.ngOnInit(); - expect(daffNavAccordionItem._open).toBeTruthy(); - }); - }); - - describe('when initiallyActive is not set', () => { - - beforeEach(() => { - wrapper.initiallyActiveValue = undefined; - fixture.detectChanges(); - }); - - it('should set open to false', () => { - daffNavAccordionItem.ngOnInit(); - expect(daffNavAccordionItem._open).toBeFalsy(); - }); - }); - }); - - describe('when accordion header is clicked', () => { - - beforeEach(() => { - spyOn(daffNavAccordionItem, 'toggleActive'); - - accordionHeader.nativeElement.click(); - }); - - it('should call toggleActive', () => { - expect(daffNavAccordionItem.toggleActive).toHaveBeenCalledWith(); - }); - }); - - describe('toggleActive', () => { - it('should toggle open', () => { - daffNavAccordionItem._open = false; - - daffNavAccordionItem.toggleActive(); - expect(daffNavAccordionItem._open).toEqual(true); - - daffNavAccordionItem.toggleActive(); - expect(daffNavAccordionItem._open).toEqual(false); - }); - - it('should toggle _animationState between void and open', () => { - daffNavAccordionItem.toggleActive(); - expect(daffNavAccordionItem._animationState).toEqual('open'); - - daffNavAccordionItem.toggleActive(); - expect(daffNavAccordionItem._animationState).toEqual('void'); - }); - }); - }); - - @Component({ template: ` - - - - -

Size and Fit

-
no content
- - - - - ` }) - class FirstChildNavWrapperComponent { - initiallyActiveValue: boolean; - } - - describe('when it is the first child nav-accordion-item', () => { - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule, - FontAwesomeModule, - ], - declarations: [ - FirstChildNavWrapperComponent, - DaffNavAccordionItemComponent, - DaffAccordionComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(FirstChildNavWrapperComponent); - - fixture.detectChanges(); - }); - - it('should have a level of 0', () => { - const navAccordionItemUnderTest: DaffNavAccordionItemComponent = - fixture.debugElement.queryAll(By.css('daff-nav-accordion-item'))[1].componentInstance; - - expect(navAccordionItemUnderTest._level).toEqual(0); - }); - }); - - @Component({ template: ` - - -

Size and Fit

- -

Size and Fit

- - - - ` }) - class NotFirstChildNavWrapperComponent { - initiallyActiveValue: boolean; - } - - describe('when it is not the first child nav-accordion-item', () => { - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule, - FontAwesomeModule, - ], - declarations: [ - NotFirstChildNavWrapperComponent, - DaffNavAccordionItemComponent, - DaffAccordionComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NotFirstChildNavWrapperComponent); - - fixture.detectChanges(); - }); - - it('should have a level that matches the depth of the nav-accordion-item', () => { - const navAccordionItemUnderTest: DaffNavAccordionItemComponent = - fixture.debugElement.queryAll(By.css('daff-nav-accordion-item'))[1].componentInstance; - - expect(navAccordionItemUnderTest._level).toEqual(1); - }); - }); - - @Component({ template: ` - - -

Size and Fit

- -

Size and Fit

- - - - ` }) - class HasChildNavWrapperComponent { - initiallyActiveValue: boolean; - } - - describe('when it has a child nav-accordion-item', () => { - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule, - FontAwesomeModule, - ], - declarations: [ - HasChildNavWrapperComponent, - DaffNavAccordionItemComponent, - DaffAccordionComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HasChildNavWrapperComponent); - - fixture.detectChanges(); - }); - - it('should add a chevron to the accordion item title', () => { - const suffix = fixture.debugElement.query(By.css('[daffSuffix]')); - - expect(suffix).toBeDefined(); - }); - }); - - @Component({ template: ` - - -

Size and Fit

- - - ` }) - class HasNoChildNavWrapperComponent { - initiallyActiveValue: boolean; - } - - describe('when it does not have a child nav-accordion-item', () => { - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule, - FontAwesomeModule, - ], - declarations: [ - HasNoChildNavWrapperComponent, - DaffNavAccordionItemComponent, - DaffAccordionComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HasNoChildNavWrapperComponent); - - fixture.detectChanges(); - }); - - it('should not add a chevron to the accordion item title', () => { - const suffix = fixture.debugElement.query(By.css('[daffSuffix]')); - - expect(suffix).toBeNull(); - }); - }); -}); - diff --git a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.ts b/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.ts deleted file mode 100644 index 1074d0f239..0000000000 --- a/libs/design/src/molecules/accordion/nav-accordion-item/nav-accordion-item.component.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { - Component, - Input, - OnInit, - HostBinding, - SkipSelf, - Optional, - ContentChildren, - QueryList, - ChangeDetectionStrategy, - forwardRef, -} from '@angular/core'; -import { - faChevronDown, - faChevronUp, -} from '@fortawesome/free-solid-svg-icons'; - -import { DaffAccordionComponent } from '../accordion/accordion.component'; -import { daffAccordionAnimations } from '../animation/accordion-animation'; -import { getAnimationState } from '../animation/accordion-animation-state'; - -/** - * @deprecated in v1.0.0. Use DaffTreeComponent instead. - */ -@Component({ - selector: 'daff-nav-accordion-item', - templateUrl: './nav-accordion-item.component.html', - styleUrls: ['./nav-accordion-item.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - animations: [ - daffAccordionAnimations.openAccordion, - ], -}) -export class DaffNavAccordionItemComponent implements OnInit { - - constructor( - private accordion: DaffAccordionComponent, - @SkipSelf() @Optional() private navAccordionItemParent: DaffNavAccordionItemComponent, - ) {} - /** - * @docs-private - */ - faChevronDown = faChevronDown; - /** - * @docs-private - */ - faChevronUp = faChevronUp; - - /** - * @docs-private - */ - @HostBinding('class') get classes() { - return [ - 'daff-nav-accordion-item', - 'daff-nav-accordion-item--level-' + this._level, - ]; - } - - @Input() initiallyActive: boolean; - - @ContentChildren(forwardRef(() => DaffNavAccordionItemComponent), { descendants: true }) - _navAccordionItemChild: QueryList; - - /** - * @docs-private - */ - _open = false; - /** - * @docs-private - */ - _animationState: string; - - /** - * @docs-private - */ - _level = 0; - - /** - * @docs-private - */ - ngOnInit() { - if(this.navAccordionItemParent && this.accordion === this.navAccordionItemParent.accordion) { - this._level = this.navAccordionItemParent._level + 1; - } - this._open = this.initiallyActive ? this.initiallyActive : this._open; - this._animationState = getAnimationState(this._open); - } - - toggleActive() { - this._open = !this._open; - this._animationState = getAnimationState(this._open); - } -} diff --git a/libs/design/src/molecules/accordion/public_api.ts b/libs/design/src/molecules/accordion/public_api.ts deleted file mode 100644 index d76d451236..0000000000 --- a/libs/design/src/molecules/accordion/public_api.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { DaffAccordionModule } from './accordion.module'; -export * from './accordion/accordion.component'; -export * from './accordion-item/accordion-item.component'; -export * from './accordion-item-title/accordion-item-title.directive'; -export * from './accordion-item-content/accordion-item-content.directive'; -export * from './nav-accordion-item/nav-accordion-item.component'; diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts index 090de3480e..b6b93927fb 100644 --- a/libs/design/src/public_api.ts +++ b/libs/design/src/public_api.ts @@ -16,7 +16,6 @@ export * from './atoms/form/radio/public_api'; export * from './atoms/form/form-label/public_api'; // Molecules -export * from './molecules/accordion/public_api'; export * from './molecules/backdrop/public_api'; export * from './molecules/button-set/public_api'; export * from './molecules/image-gallery/public_api';