feat(design)!: shard callout component (#2669)

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

apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffCalloutModule } from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffImageModule } from '@daffodil/design/image';
 

apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts

@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCalloutModule,
-  DaffCardModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffImageModule } from '@daffodil/design/image';
 

apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts

@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCalloutModule,
-  DaffCardModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioWhyPwaExamplesComponent } from './why-pwa-examples.component';

apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts

@@ -3,10 +3,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCalloutModule,
-  DaffCardModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioWhyPwaOverviewComponent } from './why-pwa-overview.component';

apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.module.ts

@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCalloutModule,
-  DaffListModule,
-} from '@daffodil/design';
+import { DaffListModule } from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioWhyPwaSolutionComponent } from './why-pwa-solution.component';

apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts

@@ -3,10 +3,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCalloutModule,
-  DaffCardModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioWhyPwaStatsComponent } from './why-pwa-stats.component';

apps/daffio/src/app/core/footer/footer.module.ts

@@ -8,12 +8,12 @@ import {
   DaffCopyrightModule,
 } from '@daffodil/branding';
 import {
-  DaffCalloutModule,
   DaffListModule,
   DaffButtonSetModule,
   DaffInputModule,
 } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioSimpleFooterComponent } from './simple-footer/simple-footer.component';

libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCalloutModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { CalloutTextAlignmentComponent } from './callout-text-alignment.component';

libs/design/callout/examples/src/callout-theming/callout-theming.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCalloutModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 
 import { CalloutThemingComponent } from './callout-theming.component';
 

libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCalloutModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { CalloutWithGridComponent } from './callout-with-grid.component';

libs/design/callout/examples/src/compact-callout/compact-callout.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCalloutModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCalloutModule } from '@daffodil/design/callout';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { CompactCalloutComponent } from './compact-callout.component';

libs/design/callout/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/callout",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 

libs/design/src/molecules/callout/callout-theme.scss → libs/design/callout/src/callout-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/core';
-@use '../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
 
 @mixin daff-callout-theme-variant($color) {
 	background: $color;

libs/design/src/molecules/callout/callout/callout.component.scss → libs/design/callout/src/callout/callout.component.scss

@@ -1,5 +1,5 @@
-@use '../../../../scss/typography' as t;
-@use '../../../../scss/layout';
+@use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 
 .daff-callout {
 	$root: &;

libs/design/src/molecules/callout/callout/callout.component.spec.ts → libs/design/callout/src/callout/callout.component.spec.ts

@@ -9,13 +9,16 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import {
+  DaffPalette,
+  DaffTextAlignment,
+} from '@daffodil/design';
+
 import {
   DaffCalloutComponent,
   DaffCalloutLayout,
   DaffCalloutSize,
 } from './callout.component';
-import { DaffPalette } from '../../../core/colorable/public_api';
-import { DaffTextAlignment } from '../../../core/text-alignable/text-alignable';
 
 @Component ({
   template: `

libs/design/src/molecules/callout/callout/callout.component.ts → libs/design/callout/src/callout/callout.component.ts

@@ -8,18 +8,16 @@ import {
   Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
+  daffArticleEncapsulatedMixin,
   DaffColorable,
   daffColorMixin,
-} from '../../../core/colorable/public_api';
-import {
   DaffCompactable,
   daffCompactableMixin,
-} from '../../../core/compactable/public_api';
-import { daffManageContainerLayoutMixin } from '../../../core/manage-container-layout/public_api';
-import { DaffTextAlignable } from '../../../core/text-alignable/text-alignable';
-import { daffTextAlignmentMixin } from '../../../core/text-alignable/text-alignable-mixin';
+  daffManageContainerLayoutMixin,
+  DaffTextAlignable,
+  daffTextAlignmentMixin,
+} from '@daffodil/design';
 
 /**
  * @deprecated See {@link DaffTextAlignable}

libs/design/callout/src/index.ts

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

libs/design/scss/theme.scss

@@ -27,7 +27,7 @@
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../src/atoms/progress-indicator/progress-indicator-theme' as progress-indicator;
 @use '../accordion/src/accordion-theme' as accordion;
-@use '../src/molecules/callout/callout-theme' as callout;
+@use '../callout/src/callout-theme' as callout;
 @use '../src/molecules/card/card/card-theme' as card;
 @use '../src/molecules/hero/hero-theme' as hero;
 @use '../src/molecules/list/list/list-theme' as list;

libs/design/src/public_api.ts

@@ -29,7 +29,6 @@ export * from './molecules/paginator/public_api';
 export * from './molecules/qty-dropdown/public_api';
 export * from './molecules/sidebar/public_api';
 export * from './molecules/hero/public_api';
-export * from './molecules/callout/public_api';
 export * from './molecules/feature/public_api';
 export * from './molecules/card/public_api';