Added some digi-core components and removed some old/unused css

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

@@ -8,9 +8,7 @@
   <main id="dafa-main-content" class="dafa__main">
     <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
     <div class="dafa__content">
-      <digi-ng-typography-base>
-        <router-outlet></router-outlet>
-      </digi-ng-typography-base>
+      <router-outlet></router-outlet>
     </div>
   </main>
 </div>

apps/dafa-web/src/app/app.component.scss

@@ -1,4 +1,3 @@
-@import 'variables/gutters';
 @import 'variables/navigation';
 @import 'variables/breakpoints';
 
@@ -13,13 +12,13 @@
     grid-area: sidebar;
     height: calc(100vh - #{$dafa__navigation-height} - 1px);
 
-    @media (min-width: $af__breakpoint-m) {
+    @media (min-width: $digi--layout--breakpoint--m) {
       height: calc(100vh - #{$dafa__navigation-height-large} - 1px);
     }
   }
 
   &__content {
     grid-area: content;
-    padding: $af__gutter-l;
+    padding: 1.25rem 1.5rem;
   }
 }

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

@@ -5,7 +5,7 @@
     </a>
   </div>
   <ul class="navigation__list dafa__hide-on-print">
-    <!-- <li class="navigation__item">
+    <li class="navigation__item">
       <a
         class="navigation__link"
         [routerLink]="['/']"
@@ -15,7 +15,7 @@
         <dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
         <span class="navigation__text">Startsida</span>
       </a>
-    </li> -->
+    </li>
     <li class="navigation__item" *ngIf="user">
       <div class="navigation__no-link">
         <dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>

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

@@ -1,21 +1,19 @@
 @import 'mixins/list';
 @import 'variables/breakpoints';
 @import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
 @import 'variables/navigation';
 
 .navigation {
-  background-color: $af__color-primary;
-  border-bottom: 1px solid $af__color-background-dark-gray;
+  background-color: var(--digi--ui--color--background--profile);
+  border-bottom: 1px solid var(--digi--ui--color--background--off);
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 $af__gutter-m;
+  padding: 0 var(--digi--layout--gutter);
   height: $dafa__navigation-height;
 
-  @media (min-width: $af__breakpoint-m) {
+  @media (min-width: $digi--layout--breakpoint--m) {
     height: $dafa__navigation-height-large;
   }
 
@@ -29,7 +27,7 @@
     height: $dafa__navigation-height / 2.5;
     vertical-align: middle;
 
-    @media (min-width: $af__breakpoint-m) {
+    @media (min-width: $digi--layout--breakpoint--m) {
       height: $dafa__navigation-height-large / 2.5;
     }
   }
@@ -43,10 +41,10 @@
   &__item {
     display: flex;
     align-items: center;
-    border-left: 1px solid $af__color-background-dark-gray;
+    border-left: 1px solid var(--digi--ui--color--background--off);
 
     &--no-link {
-      padding: 0 $af__gutter-m;
+      padding: 0 var(--digi--layout--gutter);
       flex-direction: column;
     }
 
@@ -55,7 +53,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid $af__color-background-dark-gray;
+      border-right: 1px solid var(--digi--ui--color--background--off);
     }
   }
 
@@ -66,17 +64,17 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: $af__font-size-xs;
-    color: $af__color-text-light;
+    font-size: --digi--typography--font-size--xs;
+    color: var(--digi--typography--color--text--light);
     width: 7rem;
     height: 100%;
-    font-weight: $af__font-weight-normal;
+    font-weight: var(--digi--typography--font-weight);
     text-decoration: none;
   }
 
   &__link {
     &:hover {
-      background-color: $af__color-interactive;
+      background-color: $digi--ui--color--primary-light;
     }
 
     &--active {
@@ -87,12 +85,12 @@
         bottom: 0;
         left: 0;
         height: 5px;
-        background-color: $af__color-secondary;
+        background-color: $digi--ui--color--secondary;
       }
     }
   }
 
   &__text {
-    margin-top: $af__gutter-xs;
+    margin-top: var(--digi--layout--gutter--xs);
   }
 }

apps/dafa-web/src/app/components/navigation/navigation.print.component.scss

@@ -1,9 +1,7 @@
-@import 'variables/gutters';
-
 @media print {
   .navigation {
     border-bottom-width: 0;
-    padding: $af__gutter-m 0;
+    padding: var(--digi--layout--gutter) 0;
     display: flex;
   }
 }

apps/dafa-web/src/app/components/sidebar/sidebar.component.scss

@@ -1,15 +1,12 @@
 @import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
-@import 'mixins/link';
 @import 'mixins/list';
 
 .sidebar {
   display: flex;
   height: 100%;
   flex-direction: column;
-  background-color: $af__color-background-light-gray;
-  border-right: 1px solid $af__color-background-dark-gray;
+  background-color: var(--digi--ui--color--background--secondary);
+  border-right: 1px solid var(--digi--ui--color--background--off);
 
   &__list {
     @include dafa__reset-list;
@@ -20,18 +17,18 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: $af__gutter-s $af__gutter-m;
-    border-bottom: 1px solid $af__color-background-dark-gray;
-    color: $af__color-text !important;
+    padding: var(--digi--layout--gutter) var(--digi--layout--gutter);
+    border-bottom: 1px solid var(--digi--ui--color--background--off);
+    color: var(--digi--typography--color--text) !important;
     text-decoration: none;
-    font-weight: $af__font-weight-normal;
+    font-weight: var(--digi--typography--font-weight);
 
     &:hover {
-      background-color: $af__color-background-gray;
+      background-color: var(--digi--ui--color--background--tertiary);
     }
 
     &--active {
-      font-weight: $af__font-weight-semi-bold;
+      font-weight: var(--digi--typography--font-weight--semibold);
 
       &::before {
         content: '';
@@ -40,7 +37,7 @@
         right: 0;
         bottom: 0;
         width: 5px;
-        background-color: $af__color-primary;
+        background-color: var(--digi--ui--color--primary);
       }
     }
   }

apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss

@@ -1,6 +1,4 @@
-@import 'variables/border-radius';
 @import 'variables/colors';
-@import 'variables/gutters';
 
 .skip-to-content {
   position: absolute;
@@ -12,10 +10,10 @@
   overflow: hidden;
   z-index: 1000;
   text-align: center;
-  padding: $af__gutter-xs $af__gutter-m;
+  padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
   display: block;
-  background-color: $dafa__color-pink;
-  color: $af__color-text-light;
+  background-color: var(--digi--ui--color--complementary-alt);
+  color: var(--digi--typography--color--text--light);
 
   &:focus {
     position: fixed;

apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { CallOffComponent } from './call-off.component';
 
 describe('CallOffComponent', () => {
@@ -12,7 +10,7 @@ describe('CallOffComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [CallOffComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/messages/messages.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { MessagesComponent } from './messages.component';
 
 describe('MessagesComponent', () => {
@@ -12,7 +10,7 @@ describe('MessagesComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [MessagesComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

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

@@ -1,12 +1,10 @@
-<digi-ng-typography-base [afCompressed]="true">
-  <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>
+<digi-typography>
+  <section class="page-not-found">
+    <h1>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 dafa__link--ignore-visited" routerLink="/">
+      <digi-icon-arrow-left class="dafa__digi-icon"></digi-icon-arrow-left>
+      Gå tillbaka till startsidan
+    </a>
+  </section>
+</digi-typography>

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

@@ -1,4 +0,0 @@
-.page-not-found {
-  text-align: center;
-  padding: 5rem;
-}

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

@@ -1,8 +1,5 @@
-import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { PageNotFoundComponent } from './page-not-found.component';
 
 describe('PageNotFoundComponent', () => {
@@ -13,7 +10,7 @@ describe('PageNotFoundComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [PageNotFoundComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, DigiNgIconArrowLeftModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

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

@@ -1,19 +1,11 @@
-import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, 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({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [PageNotFoundComponent],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
-    DigiNgTypographyBaseModule,
-    DigiNgIconArrowLeftModule,
-    HorizontalCenterModule,
-  ],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }])],
 })
 export class PageNotFoundModule {}

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

@@ -1 +1,8 @@
-<section class="participants">Mina deltagare funkar!</section>
+<digi-typography>
+  <h1>Mina deltagare</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+    rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum leo
+    quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+  </p>
+</digi-typography>

apps/dafa-web/src/app/pages/participants/participants.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { ParticipantsComponent } from './participants.component';
 
 describe('ParticipantsComponent', () => {
@@ -12,7 +10,7 @@ describe('ParticipantsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [ParticipantsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

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

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ParticipantsComponent } from './participants.component';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ParticipantsComponent],
   imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }])],
 })

apps/dafa-web/src/app/pages/settings/settings.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { SettingsComponent } from './settings.component';
 
 describe('SettingsComponent', () => {
@@ -12,7 +10,7 @@ describe('SettingsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [SettingsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

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

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { StartComponent } from './start.component';
 
 describe('StartComponent', () => {
@@ -12,7 +10,7 @@ describe('StartComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [StartComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts

@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
 import { StatisticsComponent } from './statistics.component';
 
 describe('StatisticsComponent', () => {
@@ -12,7 +10,7 @@ describe('StatisticsComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [StatisticsComponent],
-        imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+        imports: [RouterTestingModule],
       }).compileComponents();
     })
   );

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

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

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

@@ -1,10 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -20,10 +20,10 @@
 </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-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-ng-icon-users-solid>
-  <digi-ng-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-ng-icon-bell>
-  <digi-ng-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-ng-icon-calendar-alt>
-  <digi-ng-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-ng-icon-envelope-filled>
-  <digi-ng-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-ng-icon-sokkandidat>
+  <digi-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
+  <digi-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
+  <digi-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
+  <digi-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
+  <digi-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
+  <digi-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
 </ng-template>