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 @@
+
+
+
+
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 @@