feat(design)!: shard card component (#2674)

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

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

@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffCalloutModule } from '@daffodil/design/callout';
+import { DaffCardModule } from '@daffodil/design/card';
 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,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffCalloutModule } from '@daffodil/design/callout';
+import { DaffCardModule } from '@daffodil/design/card';
 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,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffCalloutModule } from '@daffodil/design/callout';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioWhyPwaOverviewComponent } from './why-pwa-overview.component';

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

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

libs/design/card/examples/src/basic-card/basic-card.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicCardComponent } from './basic-card.component';

libs/design/card/examples/src/card-orientation/card-orientation.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardOrientationComponent } from './card-orientation.component';

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

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardThemingComponent } from './card-theming.component';

libs/design/card/examples/src/linkable-card/linkable-card.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { LinkableCardComponent } from './linkable-card.component';

libs/design/card/examples/src/raised-card/raised-card.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { RaisedCardComponent } from './raised-card.component';

libs/design/card/examples/src/stroked-card/stroked-card.module.ts

@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffCardModule } from '@daffodil/design/card';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { StrokedCardComponent } from './stroked-card.component';

libs/design/card/ng-package.json

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

libs/design/src/molecules/card/card/card-theme-variants/basic-card.scss → libs/design/card/src/card-theme-variants/basic-card.scss

@@ -1,4 +1,4 @@
-@use '../../../../../scss/theming';
+@use '../../../scss/theming';
 
 @mixin daff-basic-card-theme-variant($color) {
 	background: $color;

libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss → libs/design/card/src/card-theme-variants/linkable-card.scss

@@ -1,4 +1,4 @@
-@use '../../../../../scss/theming';
+@use '../../../scss/theming';
 
 @mixin daff-linkable-card-theme-variant(
 	$hover-color,

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
 @use './card-theme-variants/basic-card' as basic;
 @use './card-theme-variants/stroked-card' as stroked;
 @use './card-theme-variants/linkable-card' as linkable;

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

@@ -1,5 +1,5 @@
-@use '../../../../scss/typography' as t;
-@use '../../../../scss/layout';
+@use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 
 $card-border-radius: 8px;
 $card-inner-border-radius: calc(#{$card-border-radius} - 1px);

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

@@ -9,11 +9,12 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { DaffPalette } from '@daffodil/design';
+
 import {
   DaffCardComponent,
   DaffCardOrientation,
 } from './card.component';
-import { DaffPalette } from '../../../core/colorable/public_api';
 
 @Component ({
   template: `<daff-card [color]="color" [orientation]="orientation"></daff-card>`,
@@ -24,7 +25,7 @@ class WrapperComponent {
   orientation: DaffCardOrientation;
 }
 
-describe('DaffCardComponent', () => {
+describe('DaffCardComponent | Usage', () => {
   let fixture: ComponentFixture<WrapperComponent>;
   let de: DebugElement;
   let wrapper: WrapperComponent;
@@ -95,3 +96,52 @@ describe('DaffCardComponent', () => {
     });
   });
 });
+
+describe('DaffCardComponent | Defaults', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let de: DebugElement;
+  let wrapper: WrapperComponent;
+  let component: DaffCardComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DaffCardComponent,
+        WrapperComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('daff-card'));
+    component = de.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  describe('<daff-card>', () => {
+    it('should add a class of "daff-card" to the host element', () => {
+      expect(de.classes).toEqual(jasmine.objectContaining({
+        'daff-card': true,
+      }));
+    });
+  });
+
+  describe('using the orientation property of a card', () => {
+    it('should set the default orientation to vertical', () => {
+      expect(component.orientation).toEqual('vertical');
+    });
+  });
+
+  describe('using the color property of a card', () => {
+    it('should not set a default color', () => {
+      expect(component.color).toBeFalsy();
+    });
+  });
+});

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

@@ -9,11 +9,11 @@ import {
   OnInit,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
+  daffArticleEncapsulatedMixin,
   DaffColorable,
   daffColorMixin,
-} from '../../../core/colorable/public_api';
+} from '@daffodil/design';
 
 export type DaffCardType = null | 'daff-raised-card' | 'daff-stroked-card';
 

libs/design/card/src/index.ts

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

libs/design/scss/theme.scss

@@ -28,7 +28,7 @@
 @use '../src/atoms/progress-indicator/progress-indicator-theme' as progress-indicator;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
-@use '../src/molecules/card/card/card-theme' as card;
+@use '../card/src/card-theme' as card;
 @use '../src/molecules/hero/hero-theme' as hero;
 @use '../src/molecules/list/list/list-theme' as list;
 @use '../src/molecules/media-gallery/media-gallery-theme' as media-gallery;

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

@@ -13,7 +13,6 @@ import { BehaviorSubject } from 'rxjs';
 import { DaffArticleComponent } from '@daffodil/design/article';
 
 import { DaffMediaRendererComponent } from './media-renderer.component';
-import { DaffCardComponent } from '../../card/public_api';
 import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
 import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
@@ -60,7 +59,6 @@ describe('DaffMediaRendererComponent', () => {
       declarations: [
         DaffMediaRendererComponent,
         DaffArticleComponent,
-        DaffCardComponent,
         DaffMockThumbnail1Component,
         DaffMockThumbnail2Component,
       ],

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/hero/public_api';
 export * from './molecules/feature/public_api';
-export * from './molecules/card/public_api';
 
 // Core
 export * from './core/public_api';