diff --git a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts index 9a3593f252..5d9166bd62 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts +++ b/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'; diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts index f235f0a035..9a31efd92e 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts +++ b/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'; diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts index 5053ff11fa..fe64408565 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts +++ b/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'; diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts index e8269e2e70..4b088662bb 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts +++ b/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'; diff --git a/libs/design/src/molecules/card/README.md b/libs/design/card/README.md similarity index 100% rename from libs/design/src/molecules/card/README.md rename to libs/design/card/README.md diff --git a/libs/design/card/examples/src/basic-card/basic-card.module.ts b/libs/design/card/examples/src/basic-card/basic-card.module.ts index 47a5f521a1..4d382aff5a 100644 --- a/libs/design/card/examples/src/basic-card/basic-card.module.ts +++ b/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'; diff --git a/libs/design/card/examples/src/card-orientation/card-orientation.module.ts b/libs/design/card/examples/src/card-orientation/card-orientation.module.ts index 813f66f72a..e04162d6cc 100644 --- a/libs/design/card/examples/src/card-orientation/card-orientation.module.ts +++ b/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'; diff --git a/libs/design/card/examples/src/card-theming/card-theming.module.ts b/libs/design/card/examples/src/card-theming/card-theming.module.ts index e576eaf966..70e94775e1 100644 --- a/libs/design/card/examples/src/card-theming/card-theming.module.ts +++ b/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'; diff --git a/libs/design/card/examples/src/linkable-card/linkable-card.module.ts b/libs/design/card/examples/src/linkable-card/linkable-card.module.ts index ca1006d914..05e9edf70f 100644 --- a/libs/design/card/examples/src/linkable-card/linkable-card.module.ts +++ b/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'; diff --git a/libs/design/card/examples/src/raised-card/raised-card.module.ts b/libs/design/card/examples/src/raised-card/raised-card.module.ts index de82adbb39..1583e22e94 100644 --- a/libs/design/card/examples/src/raised-card/raised-card.module.ts +++ b/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'; diff --git a/libs/design/card/examples/src/stroked-card/stroked-card.module.ts b/libs/design/card/examples/src/stroked-card/stroked-card.module.ts index cab6441e55..8e4946ab10 100644 --- a/libs/design/card/examples/src/stroked-card/stroked-card.module.ts +++ b/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'; diff --git a/libs/design/card/ng-package.json b/libs/design/card/ng-package.json new file mode 100644 index 0000000000..4adf4a70e3 --- /dev/null +++ b/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"] + } +} \ No newline at end of file diff --git a/libs/design/src/molecules/card/card-actions/card-actions.directive.spec.ts b/libs/design/card/src/card-actions/card-actions.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-actions/card-actions.directive.spec.ts rename to libs/design/card/src/card-actions/card-actions.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-actions/card-actions.directive.ts b/libs/design/card/src/card-actions/card-actions.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-actions/card-actions.directive.ts rename to libs/design/card/src/card-actions/card-actions.directive.ts diff --git a/libs/design/src/molecules/card/card-content/card-content.directive.spec.ts b/libs/design/card/src/card-content/card-content.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-content/card-content.directive.spec.ts rename to libs/design/card/src/card-content/card-content.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-content/card-content.directive.ts b/libs/design/card/src/card-content/card-content.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-content/card-content.directive.ts rename to libs/design/card/src/card-content/card-content.directive.ts diff --git a/libs/design/src/molecules/card/card-icon/card-icon.directive.spec.ts b/libs/design/card/src/card-icon/card-icon.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-icon/card-icon.directive.spec.ts rename to libs/design/card/src/card-icon/card-icon.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-icon/card-icon.directive.ts b/libs/design/card/src/card-icon/card-icon.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-icon/card-icon.directive.ts rename to libs/design/card/src/card-icon/card-icon.directive.ts diff --git a/libs/design/src/molecules/card/card-image/card-image.directive.spec.ts b/libs/design/card/src/card-image/card-image.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-image/card-image.directive.spec.ts rename to libs/design/card/src/card-image/card-image.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-image/card-image.directive.ts b/libs/design/card/src/card-image/card-image.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-image/card-image.directive.ts rename to libs/design/card/src/card-image/card-image.directive.ts diff --git a/libs/design/src/molecules/card/card-tagline/card-tagline.directive.spec.ts b/libs/design/card/src/card-tagline/card-tagline.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-tagline/card-tagline.directive.spec.ts rename to libs/design/card/src/card-tagline/card-tagline.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-tagline/card-tagline.directive.ts b/libs/design/card/src/card-tagline/card-tagline.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-tagline/card-tagline.directive.ts rename to libs/design/card/src/card-tagline/card-tagline.directive.ts diff --git a/libs/design/src/molecules/card/card/card-theme-variants/basic-card.scss b/libs/design/card/src/card-theme-variants/basic-card.scss similarity index 76% rename from libs/design/src/molecules/card/card/card-theme-variants/basic-card.scss rename to libs/design/card/src/card-theme-variants/basic-card.scss index 4616f673c0..ae3f5cadd6 100644 --- a/libs/design/src/molecules/card/card/card-theme-variants/basic-card.scss +++ b/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; diff --git a/libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss b/libs/design/card/src/card-theme-variants/linkable-card.scss similarity index 85% rename from libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss rename to libs/design/card/src/card-theme-variants/linkable-card.scss index 9ad951d3b8..1f016f4b08 100644 --- a/libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss +++ b/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, diff --git a/libs/design/src/molecules/card/card/card-theme-variants/stroked-card.scss b/libs/design/card/src/card-theme-variants/stroked-card.scss similarity index 100% rename from libs/design/src/molecules/card/card/card-theme-variants/stroked-card.scss rename to libs/design/card/src/card-theme-variants/stroked-card.scss diff --git a/libs/design/src/molecules/card/card/card-theme.scss b/libs/design/card/src/card-theme.scss similarity index 98% rename from libs/design/src/molecules/card/card/card-theme.scss rename to libs/design/card/src/card-theme.scss index cefe6a3f28..8430946ab7 100644 --- a/libs/design/src/molecules/card/card/card-theme.scss +++ b/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; diff --git a/libs/design/src/molecules/card/card-title/card-title.directive.spec.ts b/libs/design/card/src/card-title/card-title.directive.spec.ts similarity index 100% rename from libs/design/src/molecules/card/card-title/card-title.directive.spec.ts rename to libs/design/card/src/card-title/card-title.directive.spec.ts diff --git a/libs/design/src/molecules/card/card-title/card-title.directive.ts b/libs/design/card/src/card-title/card-title.directive.ts similarity index 100% rename from libs/design/src/molecules/card/card-title/card-title.directive.ts rename to libs/design/card/src/card-title/card-title.directive.ts diff --git a/libs/design/src/molecules/card/card.module.ts b/libs/design/card/src/card.module.ts similarity index 100% rename from libs/design/src/molecules/card/card.module.ts rename to libs/design/card/src/card.module.ts diff --git a/libs/design/src/molecules/card/card/card.component.html b/libs/design/card/src/card/card.component.html similarity index 100% rename from libs/design/src/molecules/card/card/card.component.html rename to libs/design/card/src/card/card.component.html diff --git a/libs/design/src/molecules/card/card/card.component.scss b/libs/design/card/src/card/card.component.scss similarity index 97% rename from libs/design/src/molecules/card/card/card.component.scss rename to libs/design/card/src/card/card.component.scss index d2d3aa445d..a924a76c4a 100644 --- a/libs/design/src/molecules/card/card/card.component.scss +++ b/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); diff --git a/libs/design/src/molecules/card/card/card.component.spec.ts b/libs/design/card/src/card/card.component.spec.ts similarity index 64% rename from libs/design/src/molecules/card/card/card.component.spec.ts rename to libs/design/card/src/card/card.component.spec.ts index b1c93fcb11..f30af09ce7 100644 --- a/libs/design/src/molecules/card/card/card.component.spec.ts +++ b/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: ``, @@ -24,7 +25,7 @@ class WrapperComponent { orientation: DaffCardOrientation; } -describe('DaffCardComponent', () => { +describe('DaffCardComponent | Usage', () => { let fixture: ComponentFixture; let de: DebugElement; let wrapper: WrapperComponent; @@ -95,3 +96,52 @@ describe('DaffCardComponent', () => { }); }); }); + +describe('DaffCardComponent | Defaults', () => { + let fixture: ComponentFixture; + 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('', () => { + 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(); + }); + }); +}); diff --git a/libs/design/src/molecules/card/card/card.component.ts b/libs/design/card/src/card/card.component.ts similarity index 96% rename from libs/design/src/molecules/card/card/card.component.ts rename to libs/design/card/src/card/card.component.ts index 870782327c..a42a28223f 100644 --- a/libs/design/src/molecules/card/card/card.component.ts +++ b/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'; diff --git a/libs/design/card/src/index.ts b/libs/design/card/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/card/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/src/molecules/card/public_api.ts b/libs/design/card/src/public_api.ts similarity index 100% rename from libs/design/src/molecules/card/public_api.ts rename to libs/design/card/src/public_api.ts diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss index 2d535567f1..65ae85dfbd 100644 --- a/libs/design/scss/theme.scss +++ b/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; diff --git a/libs/design/src/molecules/card/card/specs/card-default.spec.ts b/libs/design/src/molecules/card/card/specs/card-default.spec.ts deleted file mode 100644 index 3e2021ed44..0000000000 --- a/libs/design/src/molecules/card/card/specs/card-default.spec.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DaffCardComponent } from '../card.component'; - -@Component ({ - template: ``, -}) - -class WrapperComponent {} - -describe('DaffCardComponent | Defaults', () => { - let fixture: ComponentFixture; - 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('', () => { - 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(); - }); - }); -}); diff --git a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts b/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts index 7f20e9a93e..b0dc067462 100644 --- a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.spec.ts +++ b/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, ], diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts index 3aeb92dfb3..6ecba922f3 100644 --- a/libs/design/src/public_api.ts +++ b/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';