feat(design)!: shard accordion component (#2664)

BREAKING CHANGE: `DaffAccordionModule` has moved to its own package. Update imports to `@daffodil/design/accordion`

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,

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';

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';

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';

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';

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,

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';

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

@@ -2,11 +2,6 @@ <h1 daffArticleTitle>Accordion</h1>
 
 <h3>Types</h3>
 <p><code>daff-accordion-item</code> - An accordion that typically holds content.</p>
-<p><code>daff-nav-accordion-item</code> — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.</p>
 
 <h3>Content Accordion Item</h3>
 <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
-
-<h3>(DEPRECATED) Navigation Accordion Item</h3>
-<p>Use the <code>DaffTreeComponent</code> instead.</p>
-<design-land-example-viewer-container example="nav-accordion"></design-land-example-viewer-container>

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 { }

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';
 

libs/design/accordion/examples/src/examples.ts

@@ -0,0 +1,5 @@
+import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
+
+export const ACCORDION_EXAMPLES = [
+  BasicAccordionComponent,
+];

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';

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"]
+  }
+} 

libs/design/src/molecules/accordion/accordion-item/accordion-item-theme.scss → 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');
 

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 { }

libs/design/src/molecules/accordion/accordion/accordion.component.ts → 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

libs/design/accordion/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

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';

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);