diff --git a/modules/layout/src/index.ts b/modules/layout/src/index.ts index 5d56864..60e29cc 100644 --- a/modules/layout/src/index.ts +++ b/modules/layout/src/index.ts @@ -1 +1,2 @@ +export * from './lib/footer/footer.component'; export * from './lib/header/header.component'; diff --git a/modules/layout/src/lib/footer/footer.component.html b/modules/layout/src/lib/footer/footer.component.html new file mode 100644 index 0000000..7392fad --- /dev/null +++ b/modules/layout/src/lib/footer/footer.component.html @@ -0,0 +1,10 @@ + diff --git a/modules/layout/src/lib/footer/footer.component.scss b/modules/layout/src/lib/footer/footer.component.scss new file mode 100644 index 0000000..6d64af9 --- /dev/null +++ b/modules/layout/src/lib/footer/footer.component.scss @@ -0,0 +1,14 @@ +@import './../../../../../src/scss/tokens/colors/token'; +@import './../../../../../src/scss/tokens/generic/mixin'; +@import './../../../../../src/scss/tokens/generic/token'; + +footer { + text-align: center; + padding: 20px; + background-color: #f8f8f8; + margin-top: 20px; +} + +address { + font-style: normal; +} diff --git a/modules/layout/src/lib/footer/footer.component.spec.ts b/modules/layout/src/lib/footer/footer.component.spec.ts new file mode 100644 index 0000000..aa2fd47 --- /dev/null +++ b/modules/layout/src/lib/footer/footer.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/modules/layout/src/lib/footer/footer.component.ts b/modules/layout/src/lib/footer/footer.component.ts new file mode 100644 index 0000000..ea3ff1b --- /dev/null +++ b/modules/layout/src/lib/footer/footer.component.ts @@ -0,0 +1,13 @@ +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'lib-footer', + standalone: true, + imports: [CommonModule, NgOptimizedImage], + templateUrl: './footer.component.html', + styleUrl: './footer.component.scss', +}) +export class FooterComponent { + currentYear: number = new Date().getFullYear(); +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 8971616..b5424ef 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,3 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fc0b891..055f3b2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { HeaderComponent } from '@portal-ascepa/layout'; +import { FooterComponent, HeaderComponent } from '@portal-ascepa/layout'; @Component({ standalone: true, - imports: [RouterModule, HeaderComponent], + imports: [RouterModule, HeaderComponent, FooterComponent], selector: 'app-root', templateUrl: './app.component.html', styleUrl: './app.component.scss', diff --git a/src/scss/components/typography/_mixin.scss b/src/scss/components/typography/_mixin.scss index 9cae89a..745dad5 100644 --- a/src/scss/components/typography/_mixin.scss +++ b/src/scss/components/typography/_mixin.scss @@ -33,3 +33,21 @@ font-size: $font-size-body-p; color: $color-secondary; } + +@mixin footer-title-style { + font-weight: $font-weight-bold; + font-size: $font-size-h3; + color: $color-primary; +} + +@mixin footer-subtitle-style { + font-weight: $font-weight-regular; + font-size: $font-size-h4; + color: $color-primary; +} + +@mixin footer-copyright-style { + font-weight: $font-weight-regular; + font-size: $font-size-h5; + color: $color-primary; +} diff --git a/src/scss/components/typography/_styles.scss b/src/scss/components/typography/_styles.scss index d3c7301..808838a 100644 --- a/src/scss/components/typography/_styles.scss +++ b/src/scss/components/typography/_styles.scss @@ -23,3 +23,17 @@ h3 { .body-p { @include body-p-style; } + +.footer-title { + @include footer-title-style; + margin-bottom: 10px; +} + +.footer-subtitle { + @include footer-subtitle-style; +} + +.footer-copyright { + @include footer-copyright-style; + margin-top: 30px; +} diff --git a/src/scss/tokens/typography/_token.scss b/src/scss/tokens/typography/_token.scss index 29dd8e6..14f059e 100644 --- a/src/scss/tokens/typography/_token.scss +++ b/src/scss/tokens/typography/_token.scss @@ -5,6 +5,9 @@ $font-weight-regular: 400; $font-size-h1: 2rem; $font-size-h2: 1.5rem; $font-size-h3: 1.25rem; +$font-size-h4: 1rem; +$font-size-h5: 0.75rem; +$font-size-h6: 0.5rem; $font-size-body-l: 1rem; $font-size-body-m: 0.875rem; $font-size-body-p: 0.75rem;