arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some shared components

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-16 16:09:02 +01:00
committed by Erik Tiekstra
parent 03ba526798
commit dfa1f1881d
21 changed files with 194 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/dafa-web/src/app/components/navigation/navigation.component.html
View File

@@ -13,6 +13,7 @@
[routerLinkActive]="['navigation__link--active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
<span class="navigation__text">Startsida</span>
</a>
</li>

3
apps/dafa-web/src/app/components/navigation/navigation.module.ts
View File

@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IconModule } from '@dafa-shared/components/icon/icon.module';
import { NavigationComponent } from './navigation.component';
@NgModule({
declarations: [NavigationComponent],
imports: [CommonModule, RouterModule],
imports: [CommonModule, RouterModule, IconModule],
exports: [NavigationComponent],
})
export class NavigationModule {}

1
apps/dafa-web/src/app/data/enums/icon-type.enum.ts
View File

@@ -1,4 +1,5 @@
export enum IconType {
HOME = 'home',
USER = 'user',
BELL = 'bell',
}

18
apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
View File

@@ -1,10 +1,12 @@
<digi-ng-typography-base [afCompressed]="true">
<section class="page-not-found">
<h1 class="heading">Oj då! Vi kan inte hitta sidan.</h1>
<p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
<a class="dafa__link dafa__link--with-icon" routerLink="/">
<digi-ng-icon-arrow-left class="dafa__digi-ng-icon" aria-hidden="true"></digi-ng-icon-arrow-left>
Gå tillbaka till startsidan
</a>
</section>
<dafa-horizontal-center>
<section class="page-not-found">
<h1 class="heading">Oj då! Vi kan inte hitta sidan.</h1>
<p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
<a class="dafa__link dafa__link--with-icon" routerLink="/">
<digi-ng-icon-arrow-left class="dafa__digi-ng-icon" aria-hidden="true"></digi-ng-icon-arrow-left>
Gå tillbaka till startsidan
</a>
</section>
</dafa-horizontal-center>
</digi-ng-typography-base>

2
apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
View File

@@ -3,6 +3,7 @@ import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-b
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { PageNotFoundComponent } from './page-not-found.component';
@NgModule({
@@ -12,6 +13,7 @@ import { PageNotFoundComponent } from './page-not-found.component';
RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
DigiNgTypographyBaseModule,
DigiNgIconArrowLeftModule,
HorizontalCenterModule,
],
})
export class PageNotFoundModule {}

4
apps/dafa-web/src/app/pages/start/start.component.html
View File

@@ -1,3 +1,5 @@
<digi-ng-typography-base>
<section class="start">Start funkar!</section>
<dafa-horizontal-center>
<section class="start">Start funkar!</section>
</dafa-horizontal-center>
</digi-ng-typography-base>

4
apps/dafa-web/src/app/pages/start/start.component.ts
View File

@@ -6,6 +6,4 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
styleUrls: ['./start.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StartComponent {
constructor() {}
}
export class StartComponent {}

8
apps/dafa-web/src/app/pages/start/start.module.ts
View File

@@ -2,10 +2,16 @@ import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-b
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { StartComponent } from './start.component';
@NgModule({
declarations: [StartComponent],
imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule],
imports: [
CommonModule,
RouterModule.forChild([{ path: '', component: StartComponent }]),
DigiNgTypographyBaseModule,
HorizontalCenterModule,
],
})
export class StartModule {}

0
apps/dafa-web/src/app/shared/components/.gitkeep
View File

3
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="horizontal-center">
<ng-content></ng-content>
</div>

10
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss Normal file
View File

@@ -0,0 +1,10 @@
@import 'variables/breakpoints';
@import 'variables/containers';
@import 'variables/gutters';
.horizontal-center {
width: 100%;
max-width: $af__breakpoint-xl;
padding: 0 $af__gutter-m;
margin: 0 auto;
}

25
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { HorizontalCenterComponent } from './horizontal-center.component';
describe('HorizontalCenterComponent', () => {
let component: HorizontalCenterComponent;
let fixture: ComponentFixture<HorizontalCenterComponent>;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [HorizontalCenterComponent],
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(HorizontalCenterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

9
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts Normal file
View File

@@ -0,0 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'dafa-horizontal-center',
templateUrl: './horizontal-center.component.html',
styleUrls: ['./horizontal-center.component.scss', './horizontal-center.print.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HorizontalCenterComponent {}

11
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts Normal file
View File

@@ -0,0 +1,11 @@
import { DigiNgLayoutContainerModule } from '@af/digi-ng/_layout/layout-container';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HorizontalCenterComponent } from './horizontal-center.component';
@NgModule({
declarations: [HorizontalCenterComponent],
imports: [CommonModule, DigiNgLayoutContainerModule],
exports: [HorizontalCenterComponent],
})
export class HorizontalCenterModule {}

5
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss Normal file
View File

@@ -0,0 +1,5 @@
@media print {
.horizontal-center {
padding: 0;
}
}

18
apps/dafa-web/src/app/shared/components/icon/icon.component.html Normal file
View File

@@ -0,0 +1,18 @@
<digi-ng-icon-custom *ngIf="isCustomIcon; else DigiNgIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
<svg *ngIf="icon === iconType.HOME" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 576 512">
<path
d="M472.847,226.846l-34.116-34.116L250.998,4.997c-6.664-6.663-17.468-6.663-24.132,0L39.132,192.73L4.999,226.864
c-6.548,6.78-6.361,17.584,0.419,24.132c6.614,6.388,17.099,6.388,23.713,0l4.983-5.018v214.801
c0,9.426,7.641,17.067,17.067,17.067h375.467c9.426,0,17.067-7.641,17.067-17.067V245.978l5,5.001
c6.78,6.548,17.584,6.36,24.132-0.419C479.235,243.946,479.235,233.46,472.847,226.846z M290.115,443.713h-102.4V307.179h102.4
V443.713z M409.581,443.713h-85.333v-153.6c0-9.426-7.641-17.067-17.067-17.067H170.648c-9.426,0-17.067,7.641-17.067,17.067
v153.6H68.248V211.845L238.914,41.178l170.667,170.667V443.713z"
fill="currentColor"
></path>
</svg>
</digi-ng-icon-custom>
<ng-template #DigiNgIcon>
<digi-ng-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-ng-icon-user-alt>
<digi-ng-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-ng-icon-bell>
</ng-template>

20
apps/dafa-web/src/app/shared/components/icon/icon.component.scss Normal file
View File

@@ -0,0 +1,20 @@
@import 'mixins/icon';
:host {
display: inline-flex;
}
.icon {
&--s {
@include dafa__digi-ng-icon(0.875em);
}
&--m {
@include dafa__digi-ng-icon(1em);
}
&--l {
@include dafa__digi-ng-icon(1.5em);
}
&--xl {
@include dafa__digi-ng-icon(2em);
}
}

28
apps/dafa-web/src/app/shared/components/icon/icon.component.spec.ts Normal file
View File

@@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { IconComponent } from './icon.component';
describe('IconComponent', () => {
let component: IconComponent;
let fixture: ComponentFixture<IconComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IconComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IconComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
apps/dafa-web/src/app/shared/components/icon/icon.component.ts Normal file
View File

@@ -0,0 +1,27 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { IconSize } from '@dafa-enums/icon-size.enum';
import { IconType } from '@dafa-enums/icon-type.enum';
const CUSTOM_ICONS: IconType[] = [IconType.HOME];
@Component({
selector: 'dafa-icon',
templateUrl: './icon.component.html',
styleUrls: ['./icon.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent implements OnChanges {
@Input() icon: IconType;
@Input() size: IconSize = IconSize.M;
iconClass: string;
iconType = IconType;
ngOnChanges(): void {
this.iconClass = `icon--${this.size}`;
}
get isCustomIcon(): boolean {
return CUSTOM_ICONS.includes(this.icon);
}
}

10
apps/dafa-web/src/app/shared/components/icon/icon.module.ts Normal file
View File

@@ -0,0 +1,10 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IconComponent } from './icon.component';
@NgModule({
declarations: [IconComponent],
imports: [CommonModule],
exports: [IconComponent],
})
export class IconModule {}

1
apps/dafa-web/src/styles/styles.scss
View File

@@ -51,6 +51,7 @@ strong {
&__link {
display: inline-flex;
align-items: center;
&--with-icon {
gap: $af__gutter-xs;