feat(design)!: shard article component (#2652)

BREAKING CHANGE: Article component has moved to its own package. Update imports to @daffodil/design/article

apps/daffio/src/app/api/api.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffArticleModule,
-  DaffContainerModule,
-} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DaffioDocsApiRoutingModule } from './api-routing.module';
 import { DaffioApiListModule } from './components/api-list/api-list.module';

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.spec.ts

@@ -7,7 +7,7 @@ import {
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DaffioDocViewerComponent } from './doc-viewer.component';
 import { DaffioDoc } from '../../models/doc';

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DaffioDocViewerComponent } from './doc-viewer.component';
 import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';

apps/design-land/src/app/accordion/accordion.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandAccordionRoutingModule } from './accordion-routing.module';
 import { DesignLandAccordionComponent } from './accordion.component';

apps/design-land/src/app/app.module.ts

@@ -7,11 +7,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {
   DaffSidebarModule,
   DaffLinkSetModule,
-  DaffArticleModule,
   DAFF_THEME_INITIALIZER,
   DaffNavbarModule,
   DaffButtonModule,
 } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DesignLandAppRoutingModule } from './app-routing.module';

apps/design-land/src/app/article/article.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandArticleRoutingModule } from './article-routing.module';
 import { DesignLandArticleComponent } from './article.component';

apps/design-land/src/app/button/button.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffArticleModule,
-  DaffButtonModule,
-} from '@daffodil/design';
+import { DaffButtonModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandButtonRoutingModule } from './button-routing.module';
 import { DesignLandButtonComponent } from './button.component';

apps/design-land/src/app/callout/callout.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandCalloutRoutingModule } from './callout-routing.module';
 import { DesignLandCalloutComponent } from './callout.component';

apps/design-land/src/app/card/card.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandCardRoutingModule } from './card-routing.module';
 import { DesignLandCardComponent } from './card.component';

apps/design-land/src/app/container/container.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffArticleModule,
-  DaffContainerModule,
-} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandContainerRoutingModule } from './container-routing.module';
 import { DesignLandContainerComponent } from './container.component';

apps/design-land/src/app/foundations/color/color.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandColorRoutingModule } from './color-routing.module';
 import { DesignLandColorComponent } from './color.component';

apps/design-land/src/app/foundations/variables/variables.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandVariablesRoutingModule } from './variables-routing.module';
 import { DesignLandVariablesComponent } from './variables.component';

apps/design-land/src/app/hero/hero.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandHeroRoutingModule } from './hero-routing.module';
 import { DesignLandHeroComponent } from './hero.component';

apps/design-land/src/app/image/image.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandImageRoutingModule } from './image-routing-module';
 import { DesignLandImageComponent } from './image.component';

apps/design-land/src/app/input/input.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandInputRoutingModule } from './input-routing.module';
 import { DesignLandInputComponent } from './input.component';

apps/design-land/src/app/list/list.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandListRoutingModule } from './list-routing.module';
 import { DesignLandListComponent } from './list.component';

apps/design-land/src/app/loading-icon/loading-icon.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandLoadingIconRoutingModule } from './loading-icon-routing.module';
 import { DesignLandLoadingIconComponent } from './loading-icon.component';

apps/design-land/src/app/media-gallery/media-gallery.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandMediaGalleryRoutingModule } from './media-gallery-routing-module';
 import { DesignLandMediaGalleryComponent } from './media-gallery.component';

apps/design-land/src/app/menu/menu.module.ts

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import {
-  DaffArticleModule,
   DaffButtonModule,
   DaffMenuModule,
 } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandMenuRoutingModule } from './menu-routing-module';
 import { DesignLandMenuComponent } from './menu.component';

apps/design-land/src/app/modal/modal.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandModalRoutingModule } from './modal-routing.module';
 import { DesignLandModalComponent } from './modal.component';

apps/design-land/src/app/navbar/navbar.module.ts

@@ -2,17 +2,14 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffArticleModule,
-  DaffNavbarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandNavbarRoutingModule } from './navbar-routing.module';
 import { DesignLandNavbarComponent } from './navbar.component';
 import { DesignLandArticleEncapsulatedModule } from '../core/article-encapsulated/article-encapsulated.module';
 import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
 
-
 @NgModule({
   declarations: [
     DesignLandNavbarComponent,

apps/design-land/src/app/notification/notification.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffNotificationModule } from '@daffodil/design/notification';
 
 import { DesignLandNotificationRoutingModule } from './notification-routing-module';

apps/design-land/src/app/paginator/paginator.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffPaginatorModule,
-  DaffArticleModule,
-} from '@daffodil/design';
+import { DaffPaginatorModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandPaginatorRoutingModule } from './paginator-routing.module';
 import { DesignLandPaginatorComponent } from './paginator.component';

apps/design-land/src/app/quantity-field/quantity-field.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffArticleModule,
-  DaffQuantityFieldModule,
-} from '@daffodil/design';
+import { DaffQuantityFieldModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandQuantityFieldRoutingModule } from './quantity-field-routing.module';
 import { DesignLandQuantityFieldComponent } from './quantity-field.component';

apps/design-land/src/app/typography/typography.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { DesignLandTypographyRoutingModule } from './typography-routing.module';
 import { DesignLandTypographyComponent } from './typography.component';

libs/design/article/examples/src/article-examples.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffArticleModule } from '@daffodil/design';
+import { DaffArticleModule } from '@daffodil/design/article';
 
 import { ARTICLE_EXAMPLES } from './examples';
 

libs/design/article/ng-package.json

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

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use 'stops-article-cascade' as *;
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use './article/stops-article-cascade' as *;
+@use '../../scss/core';
+@use '../../scss/theming';
 
 @mixin daff-article-theme($theme) {
 	$primary: map.get($theme, primary);

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

@@ -1,4 +1,4 @@
-@use '../../../../scss/typography' as t;
+@use '../../../scss/typography' as t;
 @use 'stops-article-cascade' as *;
 
 .daff-article {

libs/design/article/src/index.ts

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

libs/design/scss/theme.scss

@@ -19,14 +19,14 @@
 // @daffodil/design components
 @use './theming/theme-css-variables' as variables;
 @use '../src/atoms/button/button-theme' as button;
+@use '../article/src/article-theme' as article;
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
 @use '../src/atoms/form/input/input-theme' as input;
 @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 '../src/molecules/article/article/article-theme' as article;
 @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;

libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts

@@ -10,8 +10,9 @@ import {
 import { By } from '@angular/platform-browser';
 import { BehaviorSubject } from 'rxjs';
 
+import { DaffArticleComponent } from '@daffodil/design/article';
+
 import { DaffMediaRendererComponent } from './media-renderer.component';
-import { DaffArticleComponent } from '../../article/public_api';
 import { DaffCardComponent } from '../../card/public_api';
 import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
 import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';

libs/design/src/public_api.ts

@@ -20,7 +20,6 @@ export * from './atoms/form/form-label/public_api';
 
 // Molecules
 export * from './molecules/accordion/public_api';
-export * from './molecules/article/public_api';
 export * from './molecules/backdrop/public_api';
 export * from './molecules/button-set/public_api';
 export * from './molecules/image-gallery/public_api';