Added some shared components

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

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

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

@@ -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 {}

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

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

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

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

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

@@ -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 {}

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

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

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

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

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

@@ -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 {}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html

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

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss

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

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts

@@ -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();
+  });
+});

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts

@@ -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 {}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts

@@ -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 {}

apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss

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

apps/dafa-web/src/app/shared/components/icon/icon.component.html

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

apps/dafa-web/src/app/shared/components/icon/icon.component.scss

@@ -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);
+  }
+}

apps/dafa-web/src/app/shared/components/icon/icon.component.spec.ts

@@ -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();
+  });
+});

apps/dafa-web/src/app/shared/components/icon/icon.component.ts

@@ -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);
+  }
+}

apps/dafa-web/src/app/shared/components/icon/icon.module.ts

@@ -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 {}

apps/dafa-web/src/styles/styles.scss

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