From 26f13a5e55b697cf03a90881230442dda2974ef1 Mon Sep 17 00:00:00 2001 From: Elain T Date: Thu, 13 Jun 2024 15:59:18 -0600 Subject: [PATCH] feat(design)!: remove deprecated DaffFeatureComponent from @daffodil/design (#2860) BREAKING CHANGE: DaffFeatureComponent has been removed from @daffodil/design. Use the DaffCardComponent instead. --- .../content/pwa/pages/pwa/pwa.component.html | 165 ------------------ .../design-land/src/app/app-routing.module.ts | 1 - .../src/app/feature/feature-routing.module.ts | 21 --- .../src/app/feature/feature.component.html | 23 --- .../src/app/feature/feature.component.scss | 0 .../src/app/feature/feature.component.spec.ts | 31 ---- .../src/app/feature/feature.component.ts | 11 -- .../src/app/feature/feature.module.ts | 22 --- libs/design/README.md | 1 - libs/design/src/molecules/feature/README.md | 48 ----- .../feature-icon.directive.spec.ts | 53 ------ .../feature-icon/feature-icon.directive.ts | 15 -- .../feature-subheader.directive.spec.ts | 53 ------ .../feature-subheader.directive.ts | 15 -- .../feature-subtitle.directive.spec.ts | 53 ------ .../feature-subtitle.directive.ts | 15 -- .../feature-title.directive.spec.ts | 53 ------ .../feature-title/feature-title.directive.ts | 15 -- .../src/molecules/feature/feature.module.ts | 29 --- .../feature/feature/feature.component.html | 7 - .../feature/feature/feature.component.scss | 102 ----------- .../feature/feature/feature.component.spec.ts | 93 ---------- .../feature/feature/feature.component.ts | 48 ----- .../src/molecules/feature/public_api.ts | 6 - libs/design/src/public_api.ts | 1 - 25 files changed, 881 deletions(-) delete mode 100644 apps/daffio/src/app/content/pwa/pages/pwa/pwa.component.html delete mode 100644 apps/design-land/src/app/feature/feature-routing.module.ts delete mode 100644 apps/design-land/src/app/feature/feature.component.html delete mode 100644 apps/design-land/src/app/feature/feature.component.scss delete mode 100644 apps/design-land/src/app/feature/feature.component.spec.ts delete mode 100644 apps/design-land/src/app/feature/feature.component.ts delete mode 100644 apps/design-land/src/app/feature/feature.module.ts delete mode 100644 libs/design/src/molecules/feature/README.md delete mode 100644 libs/design/src/molecules/feature/feature-icon/feature-icon.directive.spec.ts delete mode 100644 libs/design/src/molecules/feature/feature-icon/feature-icon.directive.ts delete mode 100644 libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.spec.ts delete mode 100644 libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.ts delete mode 100644 libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.spec.ts delete mode 100644 libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.ts delete mode 100644 libs/design/src/molecules/feature/feature-title/feature-title.directive.spec.ts delete mode 100644 libs/design/src/molecules/feature/feature-title/feature-title.directive.ts delete mode 100644 libs/design/src/molecules/feature/feature.module.ts delete mode 100644 libs/design/src/molecules/feature/feature/feature.component.html delete mode 100644 libs/design/src/molecules/feature/feature/feature.component.scss delete mode 100644 libs/design/src/molecules/feature/feature/feature.component.spec.ts delete mode 100644 libs/design/src/molecules/feature/feature/feature.component.ts delete mode 100644 libs/design/src/molecules/feature/public_api.ts diff --git a/apps/daffio/src/app/content/pwa/pages/pwa/pwa.component.html b/apps/daffio/src/app/content/pwa/pages/pwa/pwa.component.html deleted file mode 100644 index 7cd64f94dd..0000000000 --- a/apps/daffio/src/app/content/pwa/pages/pwa/pwa.component.html +++ /dev/null @@ -1,165 +0,0 @@ - - -
-
-

- Build the next generation of ecommerce stores. -

-

- Progressive Web Apps take advantage of the best features of web and native applications. -

-
- -
- - - - - -

- A new level of quality to help scale your business -

-

- Progressive Web Apps are the future to offering fast, integrated, reliable, and engaging mobile shopping experiences. -

-
- - -

- Fast -

-

- PWAs are light. They exponentially improve loading time, creating a smooth native performance for users. -

- - - -

- Integrated -

-

- PWAs integrate app-like user experiences and interactions while maintaining full website functionalities. -

- - - -

- Reliable -

-

- Service workers help PWAs cache key assets and data on devices, allowing applications to load and perform seamlessly with no connectivity. -

- - - -

- Engaging -

-

- The ability to send push notifications drives engagement and increases conversion rates by keeping users notified and up-to-date. -

- -
- - - - - -

- Understanding PWAs -

-

- Don't just take our word for it. Check out the statistics and see how Progressive Web Apps have helped your competitors improve their presence on the web. -

-
- - - -

Google Developers

-

- PWA Case Studies -

-

- Learn why and how developers have used the web to create amazing web experiences for their users. -

- - - - - -

PWA Stats

-

- PWA Conversion Stats -

-

- Review a community-driven list of stats and news focused on Progressive Web Apps. -

- - -
- - - - - -

- Who's building PWAs? -

-

- Brands increasingly utilize Progressive Web Apps to bridge the gap between native apps and websites to create better user experiences. -

-
- - - -

Uber

-
-

Uber built their PWA to minimize the client footprint while maintaining the rich experience of the native app.

-
- - - - - -

Starbucks

-
-

The Starbucks PWA makes their service universally accessible to both established and emerging markets.

-
- - - - - -

Lancôme

-
-

Lancôme's PWA aimed to drive traffic and re-engagement, which ultimately saw a 17% increase in conversions.

-
- - -
- - - - - -

- The best solution for ecommerce -

-

- PWAs are a rapidly developing technology that sees continuous progressive enhancements. It is on the fast-track to become the new standard for mobile-first solutions. -

-
- - - -

Lower cost of production and maintenance

-

Built as webpages, PWAs' cost of development is much lower than native apps. Independent of operating systems or marketplaces, updates are done automatically and PWAs eliminate the need for super-specialized developers.

- - -

Business Independence

-

PWAs are free of marketplace fees and control. There is no 30% commission fee, and businesses are able to deliver features directly to end-users without marketplace interference.

- - -
- - \ No newline at end of file diff --git a/apps/design-land/src/app/app-routing.module.ts b/apps/design-land/src/app/app-routing.module.ts index c8fbd33238..7dc3974bd7 100644 --- a/apps/design-land/src/app/app-routing.module.ts +++ b/apps/design-land/src/app/app-routing.module.ts @@ -20,7 +20,6 @@ export const appRoutes: Routes = [ { path: 'checkbox', loadChildren: () => import('./checkbox/checkbox.module').then(m => m.DesignLandCheckboxModule) }, { path: 'color', loadChildren: () => import('./foundations/color/color.module').then(m => m.DesignLandColorModule) }, { path: 'container', loadChildren: () => import('./container/container.module').then(m => m.DesignLandContainerModule) }, - { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.DesignLandFeatureModule) }, { path: 'form', loadChildren: () => import('./form/form.module').then(m => m.DesignLandFormModule) }, { path: 'hero', loadChildren: () => import('./hero/hero.module').then(m => m.DesignLandHeroModule) }, { path: 'link-set', loadChildren: () => import('./link-set/link-set.module').then(m => m.DesignLandLinkSetModule) }, diff --git a/apps/design-land/src/app/feature/feature-routing.module.ts b/apps/design-land/src/app/feature/feature-routing.module.ts deleted file mode 100644 index d579d1ce16..0000000000 --- a/apps/design-land/src/app/feature/feature-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from '@angular/core'; -import { - Routes, - RouterModule, -} from '@angular/router'; - -import { DesignLandFeatureComponent } from './feature.component'; - -export const featureRoutes: Routes = [ - { path: '', component: DesignLandFeatureComponent }, -]; - -@NgModule({ - imports: [ - RouterModule.forChild(featureRoutes), - ], - exports: [ - RouterModule, - ], -}) -export class DesignLandFeatureRoutingModule {} diff --git a/apps/design-land/src/app/feature/feature.component.html b/apps/design-land/src/app/feature/feature.component.html deleted file mode 100644 index b0db42ab94..0000000000 --- a/apps/design-land/src/app/feature/feature.component.html +++ /dev/null @@ -1,23 +0,0 @@ -

Daff Feature

-

The feature component is deprecated.

- -

Feature

- - -

Subheader

-

Title

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Some other content - - -

Mode

- -

Compact Feature

- - - -

Subheader

-

Title

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Some other content - \ No newline at end of file diff --git a/apps/design-land/src/app/feature/feature.component.scss b/apps/design-land/src/app/feature/feature.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/design-land/src/app/feature/feature.component.spec.ts b/apps/design-land/src/app/feature/feature.component.spec.ts deleted file mode 100644 index 1628581cae..0000000000 --- a/apps/design-land/src/app/feature/feature.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; - -import { DesignLandFeatureComponent } from './feature.component'; - -describe('DesignLandFeatureComponent', () => { - let component: DesignLandFeatureComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - DesignLandFeatureComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DesignLandFeatureComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/apps/design-land/src/app/feature/feature.component.ts b/apps/design-land/src/app/feature/feature.component.ts deleted file mode 100644 index a39dba2686..0000000000 --- a/apps/design-land/src/app/feature/feature.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { - Component, - OnInit, -} from '@angular/core'; - -@Component({ - selector: 'design-land-feature', - templateUrl: './feature.component.html', - styleUrls: ['./feature.component.scss'], -}) -export class DesignLandFeatureComponent {} diff --git a/apps/design-land/src/app/feature/feature.module.ts b/apps/design-land/src/app/feature/feature.module.ts deleted file mode 100644 index e9f6bbf1bc..0000000000 --- a/apps/design-land/src/app/feature/feature.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { DaffFeatureModule } from '@daffodil/design'; - -import { DesignLandFeatureRoutingModule } from './feature-routing.module'; -import { DesignLandFeatureComponent } from './feature.component'; - - - -@NgModule({ - declarations: [ - DesignLandFeatureComponent, - ], - imports: [ - CommonModule, - DesignLandFeatureRoutingModule, - - DaffFeatureModule, - ], -}) -export class DesignLandFeatureModule { } diff --git a/libs/design/README.md b/libs/design/README.md index c6ce018f29..aadfb382a1 100644 --- a/libs/design/README.md +++ b/libs/design/README.md @@ -46,7 +46,6 @@ Refer to the [Upgrade Guide](./guides/upgrading.md). * [Backdrop](./src/molecules/backdrop/README.md) * [Callout](./src/molecules/callout/README.md) * [Card](./src/molecules/card/README.md) -* [Feature](./src/molecules/feature/README.md) * [Hero](./src/molecules/hero/README.md) * [Image Gallery](./src/molecules/image-gallery/README.md) * [Image List](./src/molecules/image-list/README.md) diff --git a/libs/design/src/molecules/feature/README.md b/libs/design/src/molecules/feature/README.md deleted file mode 100644 index 28e59c8bca..0000000000 --- a/libs/design/src/molecules/feature/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# Feature Component -The feature component is deprecated. - -The `feature` component can be used to display feature-related content on a page. - -## Supported Content Types - -A `daff-feature` transcludes: - -- `[daffFeatureIcon]` -- `[daffFeatureSubheader]` -- `[daffFeatureTitle]` -- `[daffFeatureSubtitle]` -- Any additional components - -### Icon - -- Feature icon is used by adding `[daffFeatureIcon]` to any tag. - -### Subheader - -- Feature subheader is used by adding `[daffFeatureSubheader]` to any tag. - -### Title - -- Feature title is used by adding `[daffFeatureTitle]` to any tag. - -### Subtitle - -- Feature subtitle is used by adding `[daffFeatureSubtitle]` to any tag. - -## Modes - -- To define a feature mode, add `mode="[value]"` to the `` tag. -- The default mode is `normal` -- Values: `compact` and `normal` - -### Usage - -``` - - -

Subheader

-

Title

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Some other content - -``` diff --git a/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.spec.ts b/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.spec.ts deleted file mode 100644 index c10d2c9184..0000000000 --- a/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DaffFeatureIconDirective } from './feature-icon.directive'; - -@Component({ - template: `
`, -}) - -class WrapperComponent {} - -describe('DaffFeatureIconDirective', () => { - let wrapper: WrapperComponent; - let de: DebugElement; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - DaffFeatureIconDirective, - WrapperComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - de = fixture.debugElement.query(By.css('[daffFeatureIcon]')); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(wrapper).toBeTruthy(); - }); - - describe('[daffFeatureIcon]', () => { - it('should add a class of "daff-feature__icon" to the host element', () => { - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature__icon': true, - })); - }); - }); -}); diff --git a/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.ts b/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.ts deleted file mode 100644 index 8fb2d599c7..0000000000 --- a/libs/design/src/molecules/feature/feature-icon/feature-icon.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive ({ - selector: '[daffFeatureIcon]', -}) -export class DaffFeatureIconDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-feature__icon') class = true; -} diff --git a/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.spec.ts b/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.spec.ts deleted file mode 100644 index 3743e69041..0000000000 --- a/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DaffFeatureSubheaderDirective } from './feature-subheader.directive'; - -@Component({ - template: `
`, -}) - -class WrapperComponent {} - -describe('DaffFeatureSubheaderDirective', () => { - let wrapper: WrapperComponent; - let de: DebugElement; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - DaffFeatureSubheaderDirective, - WrapperComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - de = fixture.debugElement.query(By.css('[daffFeatureSubheader]')); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(wrapper).toBeTruthy(); - }); - - describe('[daffFeatureSubheader]', () => { - it('should add a class of "daff-feature__subheader" to the host element', () => { - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature__subheader': true, - })); - }); - }); -}); diff --git a/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.ts b/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.ts deleted file mode 100644 index 30a76ec3bb..0000000000 --- a/libs/design/src/molecules/feature/feature-subheader/feature-subheader.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive({ - selector: '[daffFeatureSubheader]', -}) -export class DaffFeatureSubheaderDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-feature__subheader') class = true; -} diff --git a/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.spec.ts b/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.spec.ts deleted file mode 100644 index 1699d1ab6a..0000000000 --- a/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DaffFeatureSubtitleDirective } from './feature-subtitle.directive'; - -@Component({ - template: `
`, -}) - -class WrapperComponent {} - -describe('DaffFeatureSubtitleDirective', () => { - let wrapper: WrapperComponent; - let de: DebugElement; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - DaffFeatureSubtitleDirective, - WrapperComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - de = fixture.debugElement.query(By.css('[daffFeatureSubtitle]')); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(wrapper).toBeTruthy(); - }); - - describe('[daffFeatureSubtitle]', () => { - it('should add a class of "daff-feature__subtitle" to the host element', () => { - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature__subtitle': true, - })); - }); - }); -}); diff --git a/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.ts b/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.ts deleted file mode 100644 index 1d0495875b..0000000000 --- a/libs/design/src/molecules/feature/feature-subtitle/feature-subtitle.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive({ - selector: '[daffFeatureSubtitle]', -}) -export class DaffFeatureSubtitleDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-feature__subtitle') class = true; -} diff --git a/libs/design/src/molecules/feature/feature-title/feature-title.directive.spec.ts b/libs/design/src/molecules/feature/feature-title/feature-title.directive.spec.ts deleted file mode 100644 index 97325a56bd..0000000000 --- a/libs/design/src/molecules/feature/feature-title/feature-title.directive.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DaffFeatureTitleDirective } from './feature-title.directive'; - -@Component({ - template: `
`, -}) - -class WrapperComponent {} - -describe('DaffFeatureTitleDirective', () => { - let wrapper: WrapperComponent; - let de: DebugElement; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - DaffFeatureTitleDirective, - WrapperComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - de = fixture.debugElement.query(By.css('[daffFeatureTitle]')); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(wrapper).toBeTruthy(); - }); - - describe('[daffFeatureTitle]', () => { - it('should add a class of "daff-feature__title" to the host element', () => { - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature__title': true, - })); - }); - }); -}); diff --git a/libs/design/src/molecules/feature/feature-title/feature-title.directive.ts b/libs/design/src/molecules/feature/feature-title/feature-title.directive.ts deleted file mode 100644 index a7df9c6186..0000000000 --- a/libs/design/src/molecules/feature/feature-title/feature-title.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive({ - selector: '[daffFeatureTitle]', -}) -export class DaffFeatureTitleDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-feature__title') class = true; -} diff --git a/libs/design/src/molecules/feature/feature.module.ts b/libs/design/src/molecules/feature/feature.module.ts deleted file mode 100644 index 9947c34b2f..0000000000 --- a/libs/design/src/molecules/feature/feature.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { DaffFeatureComponent } from './feature/feature.component'; -import { DaffFeatureIconDirective } from './feature-icon/feature-icon.directive'; -import { DaffFeatureSubheaderDirective } from './feature-subheader/feature-subheader.directive'; -import { DaffFeatureSubtitleDirective } from './feature-subtitle/feature-subtitle.directive'; -import { DaffFeatureTitleDirective } from './feature-title/feature-title.directive'; - -@NgModule({ - imports: [ - CommonModule, - ], - declarations: [ - DaffFeatureComponent, - DaffFeatureTitleDirective, - DaffFeatureSubtitleDirective, - DaffFeatureIconDirective, - DaffFeatureSubheaderDirective, - ], - exports: [ - DaffFeatureComponent, - DaffFeatureTitleDirective, - DaffFeatureSubtitleDirective, - DaffFeatureIconDirective, - DaffFeatureSubheaderDirective, - ], -}) -export class DaffFeatureModule { } diff --git a/libs/design/src/molecules/feature/feature/feature.component.html b/libs/design/src/molecules/feature/feature/feature.component.html deleted file mode 100644 index 3229fb04b3..0000000000 --- a/libs/design/src/molecules/feature/feature/feature.component.html +++ /dev/null @@ -1,7 +0,0 @@ - -
- - - - -
\ No newline at end of file diff --git a/libs/design/src/molecules/feature/feature/feature.component.scss b/libs/design/src/molecules/feature/feature/feature.component.scss deleted file mode 100644 index 88a7e6406d..0000000000 --- a/libs/design/src/molecules/feature/feature/feature.component.scss +++ /dev/null @@ -1,102 +0,0 @@ -@use '../../../../scss/typography' as t; -@use '../../../../scss/layout'; - -.daff-feature { - $root: &; - border-radius: 10px; - display: flex; - - &__icon { - display: inline-block; - max-width: 30px; - - @include layout.breakpoint(mobile) { - max-width: 50px; - } - } - - &__subheader { - @include t.uppercase; - font-size: 0.75rem; - letter-spacing: 0.075rem; - line-height: 1rem; - - @include layout.breakpoint(mobile) { - font-size: t.$small-font-size; - } - } - - &__title { - @include t.embolden; - margin: 0 0 15px; - padding: 0; - } - - &__subtitle { - font-size: 1rem; - margin: 0; - padding: 0; - } - - &--normal { - align-items: flex-start; - flex-direction: column; - padding: 25px; - - @include layout.breakpoint(mobile) { - align-items: center; - flex-direction: row; - padding: 50px; - } - - #{$root}__icon { - margin: 0 0 15px; - - @include layout.breakpoint(mobile) { - margin: 0 25px 0 0; - } - } - - #{$root}__subheader { - margin: 0 0 15px; - - @include layout.breakpoint(mobile) { - margin: 0 0 30px; - } - } - - #{$root}__title { - font-size: 1.25rem; - line-height: 1.25rem; - - @include layout.breakpoint(mobile) { - font-size: 2rem; - line-height: 2rem; - } - } - } - - &--compact { - align-items: flex-start; - flex-direction: column; - padding: 25px; - - #{$root}__icon { - margin: 0 0 15px; - } - - #{$root}__subheader { - margin: 0 0 5px; - } - - #{$root}__title { - font-size: 1.25rem; - line-height: 1.25rem; - - @include layout.breakpoint(mobile) { - font-size: 1.5rem; - line-height: 1.5rem; - } - } - } -} diff --git a/libs/design/src/molecules/feature/feature/feature.component.spec.ts b/libs/design/src/molecules/feature/feature/feature.component.spec.ts deleted file mode 100644 index d3d3fa09b5..0000000000 --- a/libs/design/src/molecules/feature/feature/feature.component.spec.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { - Component, - DebugElement, -} from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { - DaffFeatureComponent, - DaffFeatureMode, -} from './feature.component'; - -@Component({ - template: ``, -}) - -class WrapperComponent { - mode: DaffFeatureMode; -} - -describe('DaffFeatureComponent', () => { - let fixture: ComponentFixture; - let de: DebugElement; - let wrapper: WrapperComponent; - let component: DaffFeatureComponent; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - WrapperComponent, - DaffFeatureComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - de = fixture.debugElement.query(By.css('daff-feature')); - component = de.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('', () => { - it('should add a class of "daff-feature" to the host element', () => { - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature': true, - })); - }); - }); - - describe('setting the mode of the feature', () => { - it('should set the default mode to normal', () => { - wrapper.mode = 'normal'; - fixture.detectChanges(); - - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature--normal': true, - })); - }); - - describe('when mode="compact"', () => { - it('should add a class of "daff-feature--compact" to the host element', () => { - wrapper.mode = 'compact'; - fixture.detectChanges(); - - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature--compact': true, - })); - }); - }); - - describe('when mode="normal"', () => { - it('should add a class of "daff-feature--normal" to the host element', () => { - wrapper.mode = 'normal'; - fixture.detectChanges(); - - expect(de.classes).toEqual(jasmine.objectContaining({ - 'daff-feature--normal': true, - })); - }); - }); - }); -}); diff --git a/libs/design/src/molecules/feature/feature/feature.component.ts b/libs/design/src/molecules/feature/feature/feature.component.ts deleted file mode 100644 index f3304de798..0000000000 --- a/libs/design/src/molecules/feature/feature/feature.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { - Component, - ViewEncapsulation, - ChangeDetectionStrategy, - Input, - HostBinding, -} from '@angular/core'; - -export type DaffFeatureMode = 'compact' | 'normal' | undefined; -export enum DaffFeatureModeEnum { - Compact = 'compact', - Normal = 'normal' -} - -/** - * @deprecated See {@link DaffCardComponent} - */ -@Component({ - selector: 'daff-feature', - templateUrl: './feature.component.html', - styleUrls: ['./feature.component.scss'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) - -export class DaffFeatureComponent { - - /** - * @docs-private - */ - @HostBinding('class.daff-feature') class = true; - - @Input() mode: DaffFeatureMode = DaffFeatureModeEnum.Normal; - - /** - * @docs-private - */ - @HostBinding('class.daff-feature--compact') get compact() { - return this.mode === DaffFeatureModeEnum.Compact; - } - - /** - * @docs-private - */ - @HostBinding('class.daff-feature--normal') get normal() { - return this.mode === DaffFeatureModeEnum.Normal; - } -} diff --git a/libs/design/src/molecules/feature/public_api.ts b/libs/design/src/molecules/feature/public_api.ts deleted file mode 100644 index 8fbdfc8559..0000000000 --- a/libs/design/src/molecules/feature/public_api.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { DaffFeatureModule } from './feature.module'; -export * from './feature/feature.component'; -export * from './feature-title/feature-title.directive'; -export * from './feature-subtitle/feature-subtitle.directive'; -export * from './feature-icon/feature-icon.directive'; -export * from './feature-subheader/feature-subheader.directive'; diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts index f8b9657e00..528ddb9cf4 100644 --- a/libs/design/src/public_api.ts +++ b/libs/design/src/public_api.ts @@ -18,7 +18,6 @@ export * from './atoms/form/form-label/public_api'; export * from './molecules/image-gallery/public_api'; export * from './molecules/image-list/public_api'; export * from './molecules/qty-dropdown/public_api'; -export * from './molecules/feature/public_api'; // Core export * from './core/public_api';