From cfc28022349ceaacf2caa7ef4804ed344a0bfab0 Mon Sep 17 00:00:00 2001 From: Elain T Date: Sun, 21 Jan 2024 21:02:14 -0500 Subject: [PATCH] feat(daffio): create separate footer for docs and add footer to named views enum (#2733) --- apps/daffio/src/app/app-routing.module.ts | 4 + apps/daffio/src/app/app.module.ts | 4 + .../app/core/footer/footer/footer-theme.scss | 27 ++++++ .../core/footer/footer/footer.component.html | 17 ++++ .../core/footer/footer/footer.component.scss | 82 +++++++++++++++++++ .../footer/footer/footer.component.spec.ts | 79 ++++++++++++++++++ .../core/footer/footer/footer.component.ts | 33 ++++++++ .../app/core/footer/footer/footer.module.ts | 31 +++++++ .../marketing-footer.component.html | 2 + .../marketing-footer.component.spec.ts | 0 .../marketing-footer.component.ts | 11 +++ .../marketing-footer.module.ts | 24 ++++++ .../simple-footer/simple-footer-theme.scss | 5 +- .../simple-footer.component.html | 10 +-- .../simple-footer.component.scss | 52 +++--------- .../simple-footer.module.ts} | 21 +---- .../footer/sub-footer/sub-footer.module.ts | 29 +++++++ .../app/core/template/template.component.html | 3 +- .../app/core/template/template.component.ts | 1 + .../src/app/core/template/template.module.ts | 2 - .../named-views/models/named-views.enum.ts | 3 +- apps/daffio/src/scss/component-themes.scss | 4 +- 22 files changed, 370 insertions(+), 74 deletions(-) create mode 100644 apps/daffio/src/app/core/footer/footer/footer-theme.scss create mode 100644 apps/daffio/src/app/core/footer/footer/footer.component.html create mode 100644 apps/daffio/src/app/core/footer/footer/footer.component.scss create mode 100644 apps/daffio/src/app/core/footer/footer/footer.component.spec.ts create mode 100644 apps/daffio/src/app/core/footer/footer/footer.component.ts create mode 100644 apps/daffio/src/app/core/footer/footer/footer.module.ts create mode 100644 apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.html create mode 100644 apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.spec.ts create mode 100644 apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.ts create mode 100644 apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.module.ts rename apps/daffio/src/app/core/footer/{footer.module.ts => simple-footer/simple-footer.module.ts} (52%) create mode 100644 apps/daffio/src/app/core/footer/sub-footer/sub-footer.module.ts diff --git a/apps/daffio/src/app/app-routing.module.ts b/apps/daffio/src/app/app-routing.module.ts index fec141d8a7..4218691bc1 100644 --- a/apps/daffio/src/app/app-routing.module.ts +++ b/apps/daffio/src/app/app-routing.module.ts @@ -6,6 +6,8 @@ import { import { DaffRouteWithNamedViews } from '@daffodil/router'; +import { DaffioMarketingFooterComponent } from './core/footer/marketing-footer/marketing-footer.component'; +import { DaffioSimpleFooterComponent } from './core/footer/simple-footer/simple-footer.component'; import { DaffioDocsHeaderContainer } from './core/header/containers/docs-header/docs-header.component'; import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component'; import { DaffioDocsSidebarContentComponent } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component'; @@ -33,6 +35,7 @@ export const appRoutes: Routes = [ [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent, [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent, [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent, + [DaffioRouterNamedViewsEnum.FOOTER]: DaffioMarketingFooterComponent, }, }, }, @@ -49,6 +52,7 @@ export const appRoutes: Routes = [ [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent, [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContentComponent, [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent, + [DaffioRouterNamedViewsEnum.FOOTER]: DaffioSimpleFooterComponent, }, }, }, diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts index dba4fe83bd..ed4c08bd2e 100644 --- a/apps/daffio/src/app/app.module.ts +++ b/apps/daffio/src/app/app.module.ts @@ -15,6 +15,8 @@ import { DAFF_THEME_INITIALIZER } from '@daffodil/design'; import { AppRoutingModule } from './app-routing.module'; import { DaffioAppComponent } from './app.component'; +import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module'; +import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module'; import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module'; import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module'; import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module'; @@ -40,6 +42,8 @@ import { environment } from '../environments/environment'; DaffioDocsSidebarContentComponentModule, DaffioSidebarHeaderComponentModule, DaffioSidebarFooterComponentModule, + DaffioSimpleFooterComponentModule, + DaffioMarketingFooterComponentModule, //Make sure this loads after Router and Store StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer, diff --git a/apps/daffio/src/app/core/footer/footer/footer-theme.scss b/apps/daffio/src/app/core/footer/footer/footer-theme.scss new file mode 100644 index 0000000000..1a67d380ce --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer-theme.scss @@ -0,0 +1,27 @@ +@use 'theme' as daff-theme; +@use 'sass:map'; + +@mixin daffio-footer-theme($theme) { + $gray: daff-theme.daff-map-deep-get($theme, 'core.gray'); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); + $secondary: map.get($theme, secondary); + + .daffio-footer { + border-top: 1px solid daff-theme.daff-illuminate($base, $gray, 2); + + &__copyright { + color: daff-theme.daff-illuminate($base-contrast, $gray, 3); + } + + &__link, + &__social-link { + color: daff-theme.daff-text-contrast($base); + transition: color 0.3s; + + &:hover { + color: daff-theme.daff-illuminate($base-contrast, $gray, 3); + } + } + } +} diff --git a/apps/daffio/src/app/core/footer/footer/footer.component.html b/apps/daffio/src/app/core/footer/footer/footer.component.html new file mode 100644 index 0000000000..d07745cf7c --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer.component.html @@ -0,0 +1,17 @@ + +
+
+ {{ link.title }} + Sponsor +
+ + +
+ + diff --git a/apps/daffio/src/app/core/footer/footer/footer.component.scss b/apps/daffio/src/app/core/footer/footer/footer.component.scss new file mode 100644 index 0000000000..c212caadf4 --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer.component.scss @@ -0,0 +1,82 @@ +@use 'utilities' as daff; + +:host { + display: block; + font-size: daff.$small-font-size; + padding: 24px; + + @include daff.breakpoint(big-tablet) { + padding: 64px 48px; + } + + @include daff.breakpoint(small-laptop) { + padding: 64px 0; + } +} + +.daffio-footer { + &__grid { + display: flex; + align-items: center; + flex-direction: column; + gap: 16px; + + @include daff.breakpoint(big-tablet) { + flex-direction: row; + gap: 48px; + } + } + + &__menu { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + justify-content: center; + order: 2; + + @include daff.breakpoint(big-tablet) { + gap: 24px; + justify-content: flex-start; + order: 1; + } + } + + &__logo { + display: flex; + justify-content: center; + width: 48px; + margin: 0 auto; + order: 1; + + @include daff.breakpoint(big-tablet) { + order: 2; + } + } + + &__social { + display: flex; + gap: 8px 16px; + justify-content: center; + order: 3; + + @include daff.breakpoint(big-tablet) { + gap: 24px; + justify-content: flex-end; + } + } + + &__link { + @include daff.embolden(); + @include daff.uppercase(); + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; + } + + &__copyright { + display: block; + text-align: center; + margin-top: 32px; + } +} diff --git a/apps/daffio/src/app/core/footer/footer/footer.component.spec.ts b/apps/daffio/src/app/core/footer/footer/footer.component.spec.ts new file mode 100644 index 0000000000..b7f80b50a5 --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer.component.spec.ts @@ -0,0 +1,79 @@ +import { + Component, + DebugElement, +} from '@angular/core'; +import { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { RouterTestingModule } from '@angular/router/testing'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + +import { + DaffLogoModule, + DaffCopyrightModule, +} from '@daffodil/branding'; +import { DaffContainerModule } from '@daffodil/design/container'; + +import { DaffioFooterComponent } from './footer.component'; + +@Component({ + template: ``, +}) +class WrapperComponent { } + +describe('DaffioFooterComponent', () => { + let wrapper: WrapperComponent; + let component: DaffioFooterComponent; + let de: DebugElement; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + WrapperComponent, + DaffioFooterComponent, + ], + imports: [ + RouterTestingModule, + DaffContainerModule, + DaffLogoModule, + DaffCopyrightModule, + FontAwesomeModule, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WrapperComponent); + wrapper = fixture.debugElement.componentInstance; + de = fixture.debugElement.query(By.css('daffio-footer')); + component = de.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should add a class of "daffio-footer" to the host element', () => { + expect(de.classes).toEqual(jasmine.objectContaining({ + 'daffio-footer': true, + })); + }); + + it('should show the copyright', () => { + expect(fixture.debugElement.query(By.css('daff-branding-copyright'))).toBeTruthy(); + }); + + describe('on ', () => { + it('should set type="icon"', () => { + const logo = fixture.debugElement.query(By.css('daff-branding-logo')); + + expect(logo.componentInstance.type).toEqual('icon'); + }); + }); +}); diff --git a/apps/daffio/src/app/core/footer/footer/footer.component.ts b/apps/daffio/src/app/core/footer/footer/footer.component.ts new file mode 100644 index 0000000000..c5290cbf90 --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer.component.ts @@ -0,0 +1,33 @@ +import { + ChangeDetectionStrategy, + Component, + HostBinding, +} from '@angular/core'; +import { + faGithub, + faDiscord, +} from '@fortawesome/free-brands-svg-icons'; + +import { DAFF_BRANDING_CONSTANTS } from '@daffodil/branding'; + +@Component({ + selector: 'daffio-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioFooterComponent { + + @HostBinding('class.daffio-footer') class = true; + + links: any[] = [ + { path: '/why-pwa', title: 'Why PWA' }, + { path: '/api', title: 'Docs' }, + { path: '/support', title: 'Support' }, + ]; + + socialLinks: any[] = [ + { link: DAFF_BRANDING_CONSTANTS.REPO_URL, title: 'Github', icon: faGithub }, + { link: DAFF_BRANDING_CONSTANTS.DISCORD_URL, title: 'Discord', icon: faDiscord }, + ]; +} diff --git a/apps/daffio/src/app/core/footer/footer/footer.module.ts b/apps/daffio/src/app/core/footer/footer/footer.module.ts new file mode 100644 index 0000000000..a3e097224d --- /dev/null +++ b/apps/daffio/src/app/core/footer/footer/footer.module.ts @@ -0,0 +1,31 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + +import { + DaffCopyrightModule, + DaffLogoModule, +} from '@daffodil/branding'; +import { DaffContainerModule } from '@daffodil/design/container'; + +import { DaffioFooterComponent } from './footer.component'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + + FontAwesomeModule, + DaffContainerModule, + DaffLogoModule, + DaffCopyrightModule, + ], + declarations: [ + DaffioFooterComponent, + ], + exports: [ + DaffioFooterComponent, + ], +}) +export class DaffioFooterComponentModule {} diff --git a/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.html b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.html new file mode 100644 index 0000000000..f9a751f859 --- /dev/null +++ b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.spec.ts b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.spec.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.ts b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.ts new file mode 100644 index 0000000000..fbaf269502 --- /dev/null +++ b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.component.ts @@ -0,0 +1,11 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +@Component({ + selector: 'daffio-marketing-footer', + templateUrl: './marketing-footer.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioMarketingFooterComponent {} diff --git a/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.module.ts b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.module.ts new file mode 100644 index 0000000000..5a234cd434 --- /dev/null +++ b/apps/daffio/src/app/core/footer/marketing-footer/marketing-footer.module.ts @@ -0,0 +1,24 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffioMarketingFooterComponent } from './marketing-footer.component'; +import { DaffioFooterComponentModule } from '../footer/footer.module'; +import { DaffioSubFooterComponentModule } from '../sub-footer/sub-footer.module'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + + DaffioSubFooterComponentModule, + DaffioFooterComponentModule, + ], + declarations: [ + DaffioMarketingFooterComponent, + ], + exports: [ + DaffioMarketingFooterComponent, + ], +}) +export class DaffioMarketingFooterComponentModule {} diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss b/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss index 55b72e830a..9743434cfc 100644 --- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss +++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss @@ -9,11 +9,10 @@ border-top: 1px solid daff-theme.daff-illuminate($base, $gray, 2); &__copyright { - color: daff-theme.daff-text-contrast($base); + color: daff-theme.daff-illuminate($base-contrast, $gray, 4); } - &__link, - &__social-link { + &__link { color: daff-theme.daff-text-contrast($base); transition: color 0.3s; diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html index fabc95e3c8..67b32125c1 100644 --- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html +++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html @@ -1,15 +1,13 @@
-
- {{ link.title }} - Sponsor -
- diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss index c6f0e12b2d..4e63d91855 100644 --- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss +++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss @@ -6,30 +6,20 @@ padding: 24px; @include daff.breakpoint(big-tablet) { - padding: 64px 48px; + padding: 48px; } @include daff.breakpoint(small-laptop) { - padding: 64px 0; + padding: 48px 0; } } .daffio-simple-footer { &__grid { - display: grid; + display: flex; align-items: center; - grid-template-columns: 1fr; - grid-template-areas: - 'logo' - 'menu' - 'social'; - grid-gap: 16px; - - @include daff.breakpoint(big-tablet) { - grid-template-columns: 2fr 1fr 2fr; - grid-template-areas: 'menu logo social'; - grid-gap: 48px; - } + justify-content: center; + gap: 32px; } &__menu { @@ -37,45 +27,25 @@ display: flex; flex-wrap: wrap; gap: 8px 16px; - justify-content: center; @include daff.breakpoint(big-tablet) { - gap: 24px; - justify-content: flex-start; + gap: 32px; } } &__logo { - grid-area: logo; display: flex; - justify-content: center; - width: 48px; - margin: 0 auto; - } - - &__social { - grid-area: social; - display: flex; - gap: 8px 16px; - justify-content: center; - - @include daff.breakpoint(big-tablet) { - gap: 24px; - justify-content: flex-end; - } + width: 32px; } &__link { - @include daff.embolden(); - @include daff.uppercase(); + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; text-decoration: none; } - &__social-icon { - vertical-align: middle; - margin-right: 8px; - } - &__copyright { display: block; text-align: center; diff --git a/apps/daffio/src/app/core/footer/footer.module.ts b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.module.ts similarity index 52% rename from apps/daffio/src/app/core/footer/footer.module.ts rename to apps/daffio/src/app/core/footer/simple-footer/simple-footer.module.ts index a050774c6e..b279fd3755 100644 --- a/apps/daffio/src/app/core/footer/footer.module.ts +++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.module.ts @@ -7,42 +7,27 @@ import { DaffLogoModule, DaffCopyrightModule, } from '@daffodil/branding'; -import { - DaffButtonSetModule, - DaffInputModule, -} from '@daffodil/design'; -import { DaffButtonModule } from '@daffodil/design/button'; import { DaffCalloutModule } from '@daffodil/design/callout'; import { DaffContainerModule } from '@daffodil/design/container'; -import { DaffListModule } from '@daffodil/design/list'; -import { DaffioSimpleFooterComponent } from './simple-footer/simple-footer.component'; -import { DaffioSubFooterComponent } from './sub-footer/sub-footer.component'; -import { DaffioNewsletterModule } from '../../newsletter/newsletter.module'; +import { DaffioSimpleFooterComponent } from './simple-footer.component'; @NgModule({ imports: [ CommonModule, RouterModule, + FontAwesomeModule, DaffCalloutModule, - DaffListModule, - DaffButtonModule, - DaffButtonSetModule, DaffContainerModule, - DaffInputModule, DaffLogoModule, DaffCopyrightModule, - DaffioNewsletterModule, - FontAwesomeModule, ], declarations: [ DaffioSimpleFooterComponent, - DaffioSubFooterComponent, ], exports: [ DaffioSimpleFooterComponent, - DaffioSubFooterComponent, ], }) -export class DaffioFooterModule {} +export class DaffioSimpleFooterComponentModule {} diff --git a/apps/daffio/src/app/core/footer/sub-footer/sub-footer.module.ts b/apps/daffio/src/app/core/footer/sub-footer/sub-footer.module.ts new file mode 100644 index 0000000000..0039d69129 --- /dev/null +++ b/apps/daffio/src/app/core/footer/sub-footer/sub-footer.module.ts @@ -0,0 +1,29 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + +import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffCalloutModule } from '@daffodil/design/callout'; +import { DaffContainerModule } from '@daffodil/design/container'; + +import { DaffioSubFooterComponent } from './sub-footer.component'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + FontAwesomeModule, + + DaffCalloutModule, + DaffContainerModule, + DaffButtonModule, + ], + declarations: [ + DaffioSubFooterComponent, + ], + exports: [ + DaffioSubFooterComponent, + ], +}) +export class DaffioSubFooterComponentModule {} diff --git a/apps/daffio/src/app/core/template/template.component.html b/apps/daffio/src/app/core/template/template.component.html index 56e9efd249..86d3ffb7b4 100644 --- a/apps/daffio/src/app/core/template/template.component.html +++ b/apps/daffio/src/app/core/template/template.component.html @@ -1,6 +1,5 @@ - - + \ No newline at end of file diff --git a/apps/daffio/src/app/core/template/template.component.ts b/apps/daffio/src/app/core/template/template.component.ts index cbfb77d102..5bdf7ed1d6 100644 --- a/apps/daffio/src/app/core/template/template.component.ts +++ b/apps/daffio/src/app/core/template/template.component.ts @@ -12,4 +12,5 @@ import { DaffioRouterNamedViewsEnum } from '../../named-views/models/named-views }) export class TemplateComponent { readonly navNamedView = DaffioRouterNamedViewsEnum.NAV; + readonly footerNamedView = DaffioRouterNamedViewsEnum.FOOTER; } diff --git a/apps/daffio/src/app/core/template/template.module.ts b/apps/daffio/src/app/core/template/template.module.ts index cf4412e5fc..5d9e6fb9ce 100644 --- a/apps/daffio/src/app/core/template/template.module.ts +++ b/apps/daffio/src/app/core/template/template.module.ts @@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'; import { DaffRouterNamedViewOutletModule } from '@daffodil/router'; import { TemplateComponent } from './template.component'; -import { DaffioFooterModule } from '../footer/footer.module'; import { DaffioSidebarModule } from '../sidebar/sidebar.module'; @NgModule({ @@ -14,7 +13,6 @@ import { DaffioSidebarModule } from '../sidebar/sidebar.module'; RouterModule, CommonModule, DaffioSidebarModule, - DaffioFooterModule, DaffRouterNamedViewOutletModule, ], declarations: [ diff --git a/apps/daffio/src/app/named-views/models/named-views.enum.ts b/apps/daffio/src/app/named-views/models/named-views.enum.ts index 19d444f65c..9be49b517f 100644 --- a/apps/daffio/src/app/named-views/models/named-views.enum.ts +++ b/apps/daffio/src/app/named-views/models/named-views.enum.ts @@ -2,5 +2,6 @@ export enum DaffioRouterNamedViewsEnum { SIDEBARHEADER = 'sidebar-header', SIDEBARCONTENT = 'sidebar-content', SIDEBARFOOTER = 'sidebar-footer', - NAV = 'nav' + NAV = 'nav', + FOOTER = 'footer' } diff --git a/apps/daffio/src/scss/component-themes.scss b/apps/daffio/src/scss/component-themes.scss index 845ee68f7b..1aa65210f6 100644 --- a/apps/daffio/src/scss/component-themes.scss +++ b/apps/daffio/src/scss/component-themes.scss @@ -1,5 +1,6 @@ @use '../app/content/why-pwa/components/feature-comparison/feature-comparison-theme' as feature-comparison; @use '../app/core/footer/simple-footer/simple-footer-theme' as simple-footer; +@use '../app/core/footer/footer/footer-theme' as footer; @use '../app/core/footer/sub-footer/sub-footer-theme' as sub-footer; @use '../app/docs/components/table-of-contents/table-of-contents-theme' as toc; @use '../app/api/components/api-list/api-list-theme' as api-list; @@ -8,10 +9,11 @@ @mixin component-themes($theme) { @include simple-footer.daffio-simple-footer-theme($theme); + @include footer.daffio-footer-theme($theme); @include sub-footer.daffio-sub-footer-theme($theme); @include feature-comparison.daffio-feature-comparison-theme($theme); @include toc.daffio-table-of-contents-theme($theme); @include api-list.daffio-api-list-theme($theme); @include newsletter.daffio-newsletter-theme($theme); @include sidebar-footer.daffio-sidebar-footer-theme($theme); -} \ No newline at end of file +}