feature(digi-ng-migrering: Flyttat digi-button till vår egen kod (TV-865)

Merge in TEA/mina-sidor-fa-web from feature/TV-865-link-button to develop

Squashed commit of the following:

commit 45f3795aff7883c66302f27faf4b63ebf37f6041
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:13:33 2021 +0100

    Update _buttons.scss

commit 586e84e689719c0be5a675a262b12fdb075fe6af
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:05:01 2021 +0100

    wip

commit 62bf98e55a83d2bae91ddaa7ce9c95a8db725c20
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 10:54:34 2021 +0100

    simplify backlink class

commit a7d230b246b175f18c8aa156ec4bb90078618987
Merge: 0792de12 c6bbfb1b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 14:33:49 2021 +0100

    Merged develop and fixed conflicts

commit 0792de125e6d74d2f56674ec757033634b3d2fcc
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 11:24:06 2021 +0100

    Added support for service-style link-buttons and replaced digi-ng-link-button

commit 3e9136806a4fc71b1ebcf75163698a9c3a5c7601
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 09:29:33 2021 +0100

    Removed unused imports inside modules

commit c1c93e405c545d033c7f8904fae21721b8b1d7ae
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 09:18:51 2021 +0100

    Added back-link component inside ui-libs

commit 4dd32d2b4b981d5e3337b19b8d144994a5f60468
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 06:56:32 2021 +0100

    changed links styled as button to link-button component

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.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BackLinkComponent } from './back-link.component';
+
+describe('BackLinkComponent', () => {
+  let component: BackLinkComponent;
+  let fixture: ComponentFixture<BackLinkComponent>;
+
+  beforeEach(async(() => {
+    void TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [BackLinkComponent],
+      imports: [RouterTestingModule],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BackLinkComponent } from './back-link.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [BackLinkComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [BackLinkComponent],
+})
+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);
+  }
 }