Merge branch 'develop' into feature/TV-565-signal-view

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html

@@ -14,10 +14,9 @@
         </digi-notification-alert>
       </ng-container>
       <header class="employee-card__header">
-        <a class="employee-card__edit-button" [routerLink]="['/administration/redigera-personalkonto', employee.id]">
-          Redigera
-          <span class="msfa__a11y-sr-only"> behörigheter för {{employee.fullName}}</span>
-        </a>
+        <ui-link-button [uiRouterLink]="['/administration/redigera-personalkonto', employee.id]" uiType="secondary"
+          >Redigera <span class="msfa__a11y-sr-only">&nbsp;behörigheter för {{employee.fullName}}</span></ui-link-button
+        >
         <h1>Personalkonto</h1>
       </header>
       <p>Här ser du personalkontot. Ändra behörighet genom att klicka på redigera.</p>
@@ -49,14 +48,16 @@
         </div>
         <div class="employee-card__block">
           <h3 id="employee-card__tjanst-heading">Tjänst</h3>
-          <ul class="employee-card__list" aria-labelledby="employee-card__tjanst-heading" *ngIf="employee.tjanster.length">
+          <ul
+            class="employee-card__list"
+            aria-labelledby="employee-card__tjanst-heading"
+            *ngIf="employee.tjanster.length"
+          >
             <li *ngFor="let tjanst of employee.tjanster">
               <digi-icon-check-circle
                 class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
               ></digi-icon-check-circle>
-              <span class="msfa__a11y-sr-only">
-                {{ 'systemanvändaren har behörighet för tjänsten ' }}
-              </span>
+              <span class="msfa__a11y-sr-only"> {{ 'systemanvändaren har behörighet för tjänsten ' }} </span>
               {{ tjanst.name }}
             </li>
           </ul>
@@ -124,7 +125,8 @@
                 ></digi-icon-x-button>
               </ng-template>
               <span class="msfa__a11y-sr-only">
-                {{ hasAccess(employee, role) ? 'systemanvändaren har behörighet för rollen ' : 'systemanvändaren saknar behörighet för rollen ' }}
+                {{ hasAccess(employee, role) ? 'systemanvändaren har behörighet för rollen ' : 'systemanvändaren saknar
+                behörighet för rollen ' }}
               </span>
               {{ role.name }}
             </li>
@@ -133,7 +135,7 @@
       </div>
     </digi-typography>
     <footer class="employee-card__footer">
-      <msfa-back-link [route]="['/administration/personal']">Tillbaka till personallistan</msfa-back-link>
+      <ui-back-link uiRouterLink="../">Tillbaka till personallistan</ui-back-link>
     </footer>
   </section>
   <ng-template #loadingRef>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.scss

@@ -1,7 +1,6 @@
 @import 'functions/rem';
 @import 'variables/gutters';
 @import 'variables/colors';
-@import 'mixins/buttons';
 @import 'mixins/list';
 
 .employee-card {
@@ -56,10 +55,6 @@
     }
   }
 
-  &__edit-button {
-    @include msfa__button('secondary');
-  }
-
   &__authorization-icon {
     margin-right: var(--digi--layout--gutter--s);
 

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts

@@ -1,13 +1,14 @@
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { EmployeeCardComponent } from './employee-card.component';
 
 @NgModule({
@@ -21,7 +22,8 @@ import { EmployeeCardComponent } from './employee-card.component';
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
     HideTextModule,
-    BackLinkModule,
+    UiBackLinkModule,
+    UiLinkButtonModule,
     RolesDialogModule,
   ],
 })

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html

@@ -134,13 +134,9 @@
     </div>
 
     <footer class="edit-employee-form__footer">
-      <a
-        title="Avbryt redigering av personalkontot"
-        class="edit-employee-form__link-btn edit-employee-form__link-btn--secondary"
-        [routerLink]="['/administration/personal', employee.id]"
-      >
-        Avbryt
-      </a>
+      <ui-link-button [uiRouterLink]="['/administration/personal', employee.id]" uiType="secondary">
+        Avbryt<span class="msfa__a11y-sr-only">&nbsp;redigering av personalkontot.</span>
+      </ui-link-button>
       <digi-button af-type="submit">Spara ändringar</digi-button>
     </footer>
   </form>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.scss

@@ -51,10 +51,6 @@
     gap: var(--digi--layout--gutter);
   }
 
-  &__link-btn {
-    @include msfa__button('secondary');
-  }
-
   &__choose-all-utforande-verksamheter {
     display: block;
     margin: 1.5rem 0;

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts

@@ -5,22 +5,23 @@ import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
-import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
+import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { ErrorListModule } from '@msfa-shared/components/error-list/error-list.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
 import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
 import { EmployeeFormComponent } from './employee-form.component';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
-import { ErrorListModule } from '@msfa-shared/components/error-list/error-list.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -46,6 +47,7 @@ import { ErrorListModule } from '@msfa-shared/components/error-list/error-list.m
     TreeNodesSelectorModule,
     ErrorListModule,
     RolesDialogModule,
+    UiLinkButtonModule,
   ],
 })
 export class EmployeeFormModule {}

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html

@@ -74,8 +74,10 @@
         </digi-notification-alert>
 
         <footer class="employee-invite__footer">
-          <digi-button af-size="m" af-type="submit"> Skicka inbjudningslänk </digi-button>
-          <msfa-back-link [route]="['/administration/personal']">Tillbaka till personallistan</msfa-back-link>
+          <digi-button af-size="m" af-type="submit">Skicka inbjudningslänk</digi-button>
+          <ui-link-button uiRouterLink="../" uiType="secondary">
+            Avbryt<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till personallistan</span>
+          </ui-link-button>
         </footer>
       </form>
     </section>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.scss

@@ -24,7 +24,7 @@
   &__footer {
     margin-top: $digi--layout--gutter--xl;
     display: flex;
-    justify-content: space-between;
+    gap: $digi--layout--gutter;
     align-items: center;
   }
 }

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
 import { EmployeeInviteComponent } from './employee-invite.component';
@@ -15,10 +15,10 @@ import { EmployeeInviteComponent } from './employee-invite.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: EmployeeInviteComponent }]),
     LayoutModule,
-    BackLinkModule,
     ReactiveFormsModule,
     UiTextareaModule,
     UiLoaderModule,
+    UiLinkButtonModule,
   ],
 })
 export class EmployeeInviteModule {}

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.html

@@ -10,10 +10,9 @@
         </p>
 
         <div class="employees__cta-wrapper">
-          <digi-ng-link-button
-            afText="Skapa personalkonto"
-            afRoute="/administration/skapa-personalkonto"
-          ></digi-ng-link-button>
+          <ui-link-button uiRouterLink="/administration/skapa-personalkonto" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY"
+            >Skapa personalkonto</ui-link-button
+          >
         </div>
       </header>
 

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts

@@ -5,6 +5,7 @@ import { Employee, EmployeesData } from '@msfa-models/employee.model';
 import { Sort } from '@msfa-models/sort.model';
 import { EmployeeService } from '@msfa-services/api/employee.service';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { UiLinkButtonType } from '@ui/link-button/link-button-type.enum';
 
 @Component({
   selector: 'msfa-employees',
@@ -13,6 +14,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmployeesComponent implements OnDestroy {
+  UiLinkButtonType = UiLinkButtonType;
   private _searchValue$ = new BehaviorSubject<string>('');
   onlyEmployeesWithoutAuthorization$: Observable<boolean> = this.employeeService.onlyEmployeesWithoutAuthorization$;
   employeesData$: Observable<EmployeesData> = this.employeeService.employeesData$;

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.module.ts

@@ -1,9 +1,9 @@
-import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
 import { EmployeesListModule } from './components/employees-list/employees-list.module';
@@ -19,8 +19,8 @@ import { EmployeesComponent } from './employees.component';
     UiSkeletonModule,
     EmployeesListModule,
     EmployeeDeleteModule,
-    DigiNgLinkButtonModule,
     FormsModule,
+    UiLinkButtonModule,
   ],
 })
 export class EmployeesModule {}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html

@@ -4,53 +4,39 @@
 
   <ul class="deltagare-tab-reports__button-list">
     <li>
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./gemensam-planering"
-        afText="Gemensam planering"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="gemensam-planering" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Gemensam planering
+      </ui-link-button>
     </li>
     <li>
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./franvarorapport"
-        afText="Avvikelserapport (frånvaro)"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="franvarorapport" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Avvikelserapport (frånvaro)
+      </ui-link-button>
     </li>
     <li>
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./avvikelserapport"
-        afText="Avvikelserapport (avvikelse)"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="avvikelserapport" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Avvikelserapport (avvikelse)
+      </ui-link-button>
     </li>
     <li *ngIf="periodiskRedovisningButtonVisible">
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./periodisk-redovisning"
-        afText="Periodisk redovisning"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="periodisk-redovisning" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Periodisk redovisning
+      </ui-link-button>
     </li>
     <li *ngIf="signalButtonVisible">
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./signal"
-        afText="Signal om arbete eller studier"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="signal" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Signal om arbete eller studier
+      </ui-link-button>
     </li>
     <li *ngIf="informativRapportButtonVisible">
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./informativ-rapport"
-        afText="Informativ rapport"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="informativ-rapport" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Informativ rapport
+      </ui-link-button>
     </li>
     <li *ngIf="slutredovisningButtonVisible">
-      <digi-ng-link-button
-        class="deltagare-tab-reports__button"
-        afRoute="./slutredovisning"
-        afText="Slutredovisning"
-      ></digi-ng-link-button>
+      <ui-link-button uiRouterLink="slutredovisning" [uiType]="UiLinkButtonType.ROUNDED_PRIMARY" uiSize="s">
+        Slutredovisning
+      </ui-link-button>
     </li>
   </ul>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.scss

@@ -18,10 +18,4 @@
     gap: var(--digi--layout--gutter);
     margin-bottom: $digi--layout--gutter--xxl;
   }
-
-  &__button {
-    ::ng-deep .digi-ng-link-button {
-      padding: var(--digi--layout--padding--10) var(--digi--layout--padding--30) !important;
-    }
-  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts

@@ -7,6 +7,7 @@ import { ReportsData } from '@msfa-models/report.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { UiLinkButtonType } from '@ui/link-button/link-button-type.enum';
 
 @Component({
   selector: 'msfa-deltagare-tab-reports',
@@ -15,6 +16,8 @@ import { map, shareReplay, switchMap } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabReportsComponent {
+  UiLinkButtonType = UiLinkButtonType;
+
   genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(
     map(({ genomforandeReferens }) => +genomforandeReferens)
   );

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html

@@ -3,7 +3,7 @@
     <section class="deltagare-card" *ngIf="activeTab$ | async as activeTab">
       <ng-container *ngIf="contactInformation$ | async as contactInformation; else skeletonRef">
         <header class="deltagare-card__header">
-          <msfa-back-link [route]="['/deltagare']">Tillbaka till deltagarlistan</msfa-back-link>
+          <ui-back-link uiRouterLink="../">Tillbaka till deltagarlistan</ui-back-link>
           <h1>{{contactInformation.fullName }}</h1>
         </header>
         <digi-navigation-tabs

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts

@@ -1,16 +1,16 @@
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
-import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component';
@@ -36,16 +36,16 @@ import { DeltagareCardService } from './deltagare-card.service';
     ReactiveFormsModule,
     ReportsListModule,
     LayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     HideTextModule,
     UiLoaderModule,
     HandledarePickerFormModule,
     DigiNgLayoutExpansionPanelModule,
     DigiNgPopoverModule,
-    DigiNgLinkButtonModule,
     DigiNgFormSelectModule,
     UiSkeletonModule,
     IconModule,
+    UiLinkButtonModule,
   ],
   providers: [DeltagareCardService],
   exports: [DeltagareCardComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html

@@ -11,7 +11,7 @@
           <p>{{notAllowedToReportWarning(avrop)}}</p>
         </digi-notification-alert>
 
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
       <ng-template #reportRef>
         <div *ngIf="submittedDate$ | async as submittedDate; else formRef" class="avvikelse-report-form__confirmation">
@@ -29,7 +29,7 @@
               <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
             </dl>
           </digi-notification-alert>
-          <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+          <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
         </div>
 
         <ng-template #formRef>
@@ -86,10 +86,10 @@
 
             <div class="avvikelse-report-form__cta-wrapper">
               <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-              <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                <span>Avbryt</span>
+              <ui-link-button uiRouterLink="../" uiType="secondary">
+                Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-              </msfa-back-link>
+              </ui-link-button>
             </div>
           </form>
           <digi-ng-dialog

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts

@@ -8,9 +8,10 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
@@ -32,7 +33,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
     DigiNgProgressProgressbarModule,
     ReportLayoutModule,
     ConfirmDialogModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiSkeletonModule,
     DigiNgFormSelectModule,
     UiLoaderModule,
@@ -40,6 +41,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
     DigiNgFormInputModule,
     DigiNgDialogModule,
     UiTextareaModule,
+    UiLinkButtonModule,
   ],
   providers: [AvvikelseReportFormService],
   exports: [AvvikelseReportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html

@@ -11,7 +11,7 @@
           <p>{{notAllowedToReportWarning(avrop)}}</p>
         </digi-notification-alert>
 
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
 
       <ng-template #reportRef>
@@ -28,7 +28,7 @@
               </dd>
             </dl>
           </digi-notification-alert>
-          <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+          <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
         </div>
         <ng-template #formRef>
           <form
@@ -215,10 +215,10 @@
             <footer class="franvaro-report-form__footer">
               <div class="franvaro-report-form__cta-wrapper">
                 <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-                <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                  <span>Avbryt</span>
+                <ui-link-button uiRouterLink="../" uiType="secondary">
+                  Avbryt
                   <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-                </msfa-back-link>
+                </ui-link-button>
               </div>
             </footer>
           </form>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts

@@ -7,8 +7,9 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -28,7 +29,7 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
     LayoutModule,
     ReportLayoutModule,
     UiLoaderModule,
-    BackLinkModule,
+    UiBackLinkModule,
     ReportDescriptionListModule,
     DigiNgFormSelectModule,
     DigiNgFormDatepickerModule,
@@ -38,6 +39,7 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
     DigiNgDialogModule,
     UiTextareaModule,
     UiRadiobuttonGroupModule,
+    UiLinkButtonModule,
   ],
   providers: [FranvaroReportFormService],
   exports: [FranvaroReportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html

@@ -10,7 +10,7 @@
           <p>{{notAllowedToReportWarning(avrop)}}</p>
         </digi-notification-alert>
 
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
       <ng-template #reportRef>
         <div
@@ -32,7 +32,7 @@
               <dd>{{lastSubmittedGP | date:'longDate'}} kl {{lastSubmittedGP | date:'shortTime'}}</dd>
             </dl>
           </digi-notification-alert>
-          <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+          <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
         </div>
         <ng-template #formRef>
           <form
@@ -82,10 +82,10 @@
             <footer class="gemensam-planering-form__footer">
               <div class="gemensam-planering-form__cta-wrapper">
                 <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-                <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                  <span>Avbryt</span>
+                <ui-link-button uiRouterLink="../" uiType="secondary">
+                  Avbryt
                   <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-                </msfa-back-link>
+                </ui-link-button>
               </div>
             </footer>
           </form>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts

@@ -5,8 +5,9 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -26,12 +27,13 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     UiRadiobuttonGroupModule,
     ReactiveFormsModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     ReportDescriptionListModule,
     UiSkeletonModule,
     DigiNgFormCheckboxModule,
     DigiNgDialogModule,
+    UiLinkButtonModule,
   ],
   providers: [GemensamPlaneringFormService],
   exports: [GemensamPlaneringFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html

@@ -19,7 +19,7 @@
             </dd>
           </dl>
         </digi-notification-alert>
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
 
       <ng-template #formRef>
@@ -76,10 +76,10 @@
           <footer class="informativ-rapport-form__footer">
             <div class="informativ-rapport-form__cta-wrapper">
               <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-              <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                <span>Avbryt</span>
+              <ui-link-button uiRouterLink="../" uiType="secondary">
+                Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-              </msfa-back-link>
+              </ui-link-button>
             </div>
           </footer>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { UiTextareaModule } from '@ui/textarea/textarea.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
@@ -25,11 +26,12 @@ import { InformativRapportFormService } from './informativ-rapport-form.service'
     ReportLayoutModule,
     ConfirmDialogModule,
     ReportDescriptionListModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiSkeletonModule,
     DigiNgDialogModule,
     DigiNgFormSelectModule,
     UiTextareaModule,
+    UiLinkButtonModule,
   ],
   providers: [InformativRapportFormService],
   exports: [InformativRapportFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -21,7 +21,7 @@
             <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
           </dl>
         </digi-notification-alert>
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
 
       <ng-template #formRef>
@@ -170,10 +170,10 @@
               <footer class="periodisk-redovisning-form__footer">
                 <div class="periodisk-redovisning-form__cta-wrapper">
                   <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-                  <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                    <span>Avbryt</span>
+                  <ui-link-button uiRouterLink="../" uiType="secondary">
+                    Avbryt
                     <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-                  </msfa-back-link>
+                  </ui-link-button>
                 </div>
               </footer>
             </form>
@@ -257,7 +257,7 @@
       <p>En Gemensam planering måste ha mottagits för att en Periodisk redovisning ska kunna skapas.</p>
     </digi-notification-alert>
 
-    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+    <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
   </div>
 </ng-template>
 
@@ -275,7 +275,7 @@
       </p>
     </digi-notification-alert>
 
-    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+    <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
   </div>
 </ng-template>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts

@@ -5,9 +5,10 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiInputModule } from '@ui/input/input.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -26,13 +27,14 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     ReactiveFormsModule,
     ReportLayoutModule,
     ReportDescriptionListModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
     DigiNgDialogModule,
     DigiNgFormSelectModule,
     DigiNgFormCheckboxModule,
     UiRadiobuttonGroupModule,
+    UiLinkButtonModule,
     UiInputModule,
   ],
   providers: [PeriodiskRedovisningFormService],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html

@@ -17,7 +17,7 @@
             <dd>{{lastSubmittedSignal | date:'longDate'}} kl {{lastSubmittedSignal | date:'shortTime'}}</dd>
           </dl>
         </digi-notification-alert>
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
 
       <ng-template #formRef>
@@ -80,10 +80,10 @@
           <footer class="signal-form__footer">
             <div class="signal-form__cta-wrapper">
               <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
-              <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-                <span>Avbryt</span>
+              <ui-link-button uiRouterLink="../" uiType="secondary">
+                Avbryt
                 <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-              </msfa-back-link>
+              </ui-link-button>
             </div>
           </footer>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts

@@ -5,18 +5,19 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiInputModule } from '@ui/input/input.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { SignalFormComponent } from './signal-form.component';
 import { SignalFormService } from './signal-form.service';
-import { UiInputModule } from '@ui/input/input.module';
-import { UiSelectModule } from '@ui/select/select.module';
-import { UiLoaderModule } from '@ui/loader/loader.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -28,7 +29,7 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
     ReactiveFormsModule,
     ReportLayoutModule,
     ConfirmDialogModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
     UiSkeletonModule,
@@ -38,6 +39,7 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
     DigiNgFormValidationMessageModule,
     ReportDescriptionListModule,
     UiInputModule,
+    UiLinkButtonModule,
   ],
   providers: [SignalFormService],
   exports: [SignalFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html

@@ -49,10 +49,10 @@
 
     <footer class="slutredovisning-form-step0__footer">
       <digi-button af-type="submit">Vidare till steg 2</digi-button>
-      <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
-        <span>Avbryt</span>
+      <ui-link-button uiRouterLink="../" uiType="secondary">
+        Avbryt
         <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
-      </msfa-back-link>
+      </ui-link-button>
     </footer>
   </form>
 </div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.html

@@ -12,7 +12,7 @@
         <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
       </dl>
     </digi-notification-alert>
-    <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+    <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
   </div>
 
   <ng-template #previewRef>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.component.html

@@ -12,7 +12,7 @@
           <p>{{notAllowedToReportWarning(avrop)}}</p>
         </digi-notification-alert>
 
-        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
       </div>
       <ng-template #reportRef>
         <!--        <digi-progressbar-->

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts

@@ -9,13 +9,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { UiErrorListModule } from '@ui/error-list/error-list.module';
 import { UiInputModule } from '@ui/input/input.module';
+import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSelectModule } from '@ui/select/select.module';
@@ -62,7 +63,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     DigiNgProgressProgressbarModule,
     ReportLayoutModule,
     ConfirmDialogModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiSkeletonModule,
     DigiNgFormSelectModule,
     UiLoaderModule,
@@ -75,7 +76,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     UiErrorListModule,
     UiInputModule,
     SlutredovisningViewDescriptionListModule,
-    BackLinkModule,
+    UiLinkButtonModule,
   ],
   providers: [SlutredovisningFormService],
   exports: [SlutredovisningFormComponent],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.html

@@ -16,7 +16,7 @@
         <dd><digi-typography-time [afDateTime]="avvikelse.date"></digi-typography-time></dd>
       </dl>
       <footer class="avvikelse-report-view__footer">
-        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
       </footer>
     </div>
   </msfa-report-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -17,7 +17,7 @@ import { AvvikelseReportViewService } from './avvikelse-report-view.service';
     RouterModule.forChild([{ path: '', component: AvvikelseReportViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
   ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.html

@@ -27,9 +27,7 @@
           <dd>{{franvaro.expectedPresenceStartTime}} - {{franvaro.expectedPresenceEndTime}}</dd>
         </ng-container>
       </dl>
-      <footer class="franvaro-report-view__footer">
-        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
-      </footer>
+      <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
     </div>
   </msfa-report-layout>
 </msfa-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -17,7 +17,7 @@ import { FranvaroReportViewService } from './franvaro-report-view.service';
     RouterModule.forChild([{ path: '', component: FranvaroReportViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
   ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.html

@@ -22,7 +22,7 @@
         </dd>
       </dl>
       <footer class="gemensam-planering-view__footer">
-        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
       </footer>
     </div>
   </msfa-report-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -17,7 +17,7 @@ import { GemensamPlaneringViewService } from './gemensam-planering-view.service'
     RouterModule.forChild([{ path: '', component: GemensamPlaneringViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
   ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.html

@@ -12,7 +12,7 @@
         <dd>{{report.comment}}</dd>
       </dl>
       <footer class="informativ-rapport-view__footer">
-        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
       </footer>
     </div>
   </msfa-report-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -17,7 +17,7 @@ import { InformativRapportViewService } from './informativ-rapport-view.service'
     RouterModule.forChild([{ path: '', component: InformativRapportViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
   ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html

@@ -30,7 +30,7 @@
         </ng-template>
       </dl>
       <footer class="periodisk-redovisning-view__footer">
-        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
       </footer>
     </div>
   </msfa-report-layout>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
@@ -18,7 +18,7 @@ import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.se
     RouterModule.forChild([{ path: '', component: PeriodiskRedovisningViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     HideTextModule,
     UiSkeletonModule,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/slutredovisning-view/slutredovisning-view.module.ts

@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
+import { SlutredovisningViewDescriptionListModule } from '../../../components/slutredovisning-view-description-list/slutredovisning-view-description-list.module';
 import { SlutredovisningViewComponent } from './slutredovisning-view.component';
 import { SlutredovisningViewService } from './slutredovisning-view.service';
-import { SlutredovisningViewDescriptionListModule } from '../../../components/slutredovisning-view-description-list/slutredovisning-view-description-list.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -18,7 +18,7 @@ import { SlutredovisningViewDescriptionListModule } from '../../../components/sl
     RouterModule.forChild([{ path: '', component: SlutredovisningViewComponent }]),
     LayoutModule,
     ReportLayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
     UiLoaderModule,
     UiSkeletonModule,
     SlutredovisningViewDescriptionListModule,

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.scss

@@ -9,10 +9,6 @@
     align-items: center;
   }
 
-  &__logout {
-    @include msfa__button('secondary');
-  }
-
   &__contents {
     display: flex;
     flex-direction: column;

apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html

@@ -3,7 +3,7 @@
     <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>
-      <msfa-back-link route="/">Tillbaka till startsidan</msfa-back-link>
+      <ui-back-link uiRouterLink="/">Tillbaka till startsidan</ui-back-link>
     </section>
   </digi-typography>
 </msfa-layout>

apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { PageNotFoundComponent } from './page-not-found.component';
 
 @NgModule({
@@ -12,7 +12,7 @@ import { PageNotFoundComponent } from './page-not-found.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
     LayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
   ],
 })
 export class PageNotFoundModule {}

apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html

@@ -6,7 +6,7 @@
         Det verkar som att du saknar behörigheter att komma in på sidan. Kontakta verksamhetens
         behörighetsadministratör.
       </p>
-      <msfa-back-link route="/">Tillbaka till startsidan</msfa-back-link>
+      <ui-back-link uiRouterLink="/">Tillbaka till startsidan</ui-back-link>
     </section>
   </digi-typography>
 </msfa-layout>

apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UnauthorizedComponent } from './unauthorized.component';
 
 @NgModule({
@@ -12,7 +12,7 @@ import { UnauthorizedComponent } from './unauthorized.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: UnauthorizedComponent }]),
     LayoutModule,
-    BackLinkModule,
+    UiBackLinkModule,
   ],
 })
 export class UnauthorizedModule {}

apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.html

@@ -1,4 +0,0 @@
-<a [ngClass]="backLinkClass" [routerLink]="route">
-  <msfa-icon *ngIf="showIcon" [icon]="iconType.ARROW_LEFT"></msfa-icon>
-  <ng-content></ng-content>
-</a>

apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss

@@ -1,12 +0,0 @@
-@import 'mixins/buttons';
-@import 'mixins/link';
-
-.back-link {
-  &--link {
-    @include msfa__link(true);
-  }
-
-  &--button {
-    @include msfa__button('secondary');
-  }
-}

apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.ts

@@ -1,24 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IconType } from '@msfa-enums/icon-type.enum';
-
-@Component({
-  selector: 'msfa-back-link',
-  templateUrl: './back-link.component.html',
-  styleUrls: ['./back-link.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BackLinkComponent {
-  private readonly _defaultClass = 'back-link';
-  @Input() route: string[];
-  @Input() showIcon = true;
-  @Input() asButton = false;
-  iconType = IconType;
-
-  get backLinkClass(): string {
-    if (this.asButton) {
-      return `${this._defaultClass} ${this._defaultClass}--button`;
-    }
-
-    return `${this._defaultClass} ${this._defaultClass}--link`;
-  }
-}

libs/styles/src/mixins/_buttons.scss

@@ -1,9 +1,12 @@
 @import '~@digi/core/dist/collection/components/_button/button/button.css';
+@import 'variables/colors';
+@import 'variables/gutters';
+@import 'functions/rem';
 
 @mixin msfa__button($type: 'primary') {
   padding: var(--digi-button--padding);
   border-radius: var(--digi-button--border-radius);
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  transition: all 0.2s;
   text-decoration: none;
   font-weight: var(--digi-button--font-weight);
   font-size: var(--digi-button--font-size);
@@ -40,6 +43,7 @@
     &:focus {
       background-color: var(--digi-button--background--secondary--hover);
       color: var(--digi-button--color--secondary);
+      border-color: var(--digi-button--border-color);
     }
   }
   &--tertiary {
@@ -62,3 +66,78 @@
     font-size: var(--digi-button--font-size--l);
   }
 }
+
+@mixin ui__rounded-button() {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  border-radius: 2rem;
+  gap: 1rem;
+  font-weight: var(--digi-button--font-weight);
+  font-size: var(--digi-button--font-size);
+  padding: rem(12) rem(16);
+  transition: all 0.2s;
+  border: rem(2) solid var(--digi-button--border-color);
+  outline: var(--digi-button--outline);
+
+  &:hover,
+  &:focus {
+    outline: var(--digi-button--outline--focus);
+    border-color: var(--digi-button--border-color--hover);
+  }
+
+  &--rounded-primary {
+    background-color: var(--digi-button--background);
+    color: var(--digi-button--color);
+
+    &:hover,
+    &:focus {
+      background-color: var(--digi-button--background--hover);
+      color: var(--digi-button--color--hover);
+    }
+  }
+  &--rounded-secondary {
+    background-color: var(--digi-button--background--secondary);
+    color: var(--digi-button--color--secondary);
+
+    &:hover,
+    &:focus {
+      background-color: var(--digi-button--background--secondary--hover);
+      color: var(--digi-button--color--secondary);
+      border-color: var(--digi-button--border-color);
+    }
+  }
+  &--rounded-primary-alt {
+    background-color: $digi--color--profile--secondary;
+    color: $digi--color--profile;
+    border-color: $digi--color--profile--secondary;
+
+    &:hover,
+    &:focus {
+      background-color: $digi--color--profile--secondary--light;
+      border-color: $digi--color--profile--secondary--light;
+    }
+  }
+
+  &--rounded-secondary-alt {
+    background-color: transparent;
+    color: $digi--color--profile--secondary;
+    border-color: $digi--color--profile--secondary;
+
+    &:hover,
+    &:focus {
+      color: $digi--color--profile;
+      border-color: $digi--color--profile--secondary--light;
+      background-color: $digi--color--profile--secondary--light;
+    }
+  }
+
+  &--s {
+    padding: rem(10) rem(14);
+    font-size: var(--digi-button--font-size--s);
+  }
+
+  &--l {
+    padding: rem(16) rem(20);
+  }
+}

libs/styles/src/variables/_colors.scss

@@ -4,4 +4,8 @@
 $digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
 $digi--ui--color--primary: $digi--ui--color--stratos;
 
+$digi--color--profile: var(--digi--ui--color--primary);
+$digi--color--profile--secondary: var(--digi--ui--color--secondary);
+$digi--color--profile--secondary--light: #abff5c;
+
 // Local variables

libs/ui/src/back-link/back-link.component.html

@@ -0,0 +1,4 @@
+<a class="ui-back-link" [routerLink]="uiRouterLink">
+  <digi-icon-arrow-left class="msfa__digi-icon" aria-hidden="true"></digi-icon-arrow-left>
+  <ng-content></ng-content>
+</a>

libs/ui/src/back-link/back-link.component.scss

@@ -0,0 +1,6 @@
+@import 'mixins/buttons';
+@import 'mixins/link';
+
+.ui-back-link {
+  @include msfa__link(true);
+}

libs/ui/src/back-link/back-link.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ui-back-link',
+  templateUrl: './back-link.component.html',
+  styleUrls: ['./back-link.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BackLinkComponent {
+  @Input() uiRouterLink: string | string[];
+}

libs/ui/src/back-link/back-link.module.ts

@@ -1,13 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { IconModule } from '../icon/icon.module';
 import { BackLinkComponent } from './back-link.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [BackLinkComponent],
-  imports: [CommonModule, RouterModule, IconModule],
+  imports: [CommonModule, RouterModule],
   exports: [BackLinkComponent],
 })
-export class BackLinkModule {}
+export class UiBackLinkModule {}

libs/ui/src/link-button/link-button-type.enum.ts

@@ -2,4 +2,9 @@ export enum UiLinkButtonType {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
   TERTIARY = 'tertiary',
+
+  ROUNDED_PRIMARY = 'rounded-primary',
+  ROUNDED_SECONDARY = 'rounded-secondary',
+  ROUNDED_PRIMARY_ALT = 'rounded-primary-alt',
+  ROUNDED_SECONDARY_ALT = 'rounded-secondary-alt',
 }

libs/ui/src/link-button/link-button.component.html

@@ -5,6 +5,7 @@
   [queryParams]="uiQueryParams"
 >
   <ng-container *ngTemplateOutlet="contentRef"></ng-container>
+  <digi-icon-arrow-right *ngIf="isRoundedButtonType" class="msfa__digi-icon" aria-hidden="true"></digi-icon-arrow-right>
 </a>
 
 <ng-template #externalLinkRef>

libs/ui/src/link-button/link-button.component.scss

@@ -7,3 +7,10 @@
     width: 100%;
   }
 }
+.ui-link-rounded-button {
+  @include ui__rounded-button;
+
+  &--full-width {
+    width: 100%;
+  }
+}

libs/ui/src/link-button/link-button.component.ts

@@ -9,7 +9,6 @@ import { UiLinkButtonType } from './link-button-type.enum';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LinkButtonComponent {
-  private readonly _defaultClass = 'ui-link-button';
   @Input() uiType: UiLinkButtonType = UiLinkButtonType.PRIMARY;
   @Input() uiSize: 's' | 'm' | 'l' = 'm';
   @Input() uiFullWidth = false;
@@ -17,15 +16,25 @@ export class LinkButtonComponent {
   @Input() uiHref: string;
   @Input() uiQueryParams: Params = null;
 
+  roundedButtonTypes: UiLinkButtonType[] = [
+    UiLinkButtonType.ROUNDED_PRIMARY,
+    UiLinkButtonType.ROUNDED_PRIMARY_ALT,
+    UiLinkButtonType.ROUNDED_SECONDARY,
+    UiLinkButtonType.ROUNDED_SECONDARY_ALT,
+  ];
+
   get linkButtonClass(): string {
-    let currentClass = `${this._defaultClass} ${this._defaultClass}--${this.uiSize}`;
+    const defaultClass = this.isRoundedButtonType ? 'ui-link-rounded-button' : 'ui-link-button';
+    let currentClass = `${defaultClass} ${defaultClass}--${this.uiSize} ${defaultClass}--${this.uiType}`;
 
     if (this.uiFullWidth) {
-      currentClass = `${currentClass} ${this._defaultClass}--full-width`;
-    }
-    if (this.uiType) {
-      currentClass = `${currentClass} ${this._defaultClass}--${this.uiType as string}`;
+      currentClass = `${currentClass} ${defaultClass}--full-width`;
     }
+
     return currentClass;
   }
+
+  get isRoundedButtonType(): boolean {
+    return this.roundedButtonTypes.includes(this.uiType);
+  }
 }