diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html index 005a3ff..3f1b373 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html @@ -17,11 +17,11 @@ Redigera -

{{ employee.fullName }}

+

Personalkonto

-

Här kan du se och ändra personalkontots behörigheter. Ändra behörighet genom att klicka på redigera.

+

Här ser ni personalkontot. Ändra behörighet genom att klicka på redigera.

-
+

Personuppgifter

Förnamn
@@ -42,58 +42,67 @@
-
-

Tjänst

+
+

Behörigheter

+

Här kan du se personalkontots behörigheter.

+
+
+

Tjänst

    -
  • {{ tjanst.name }}
    • +
  • + + {{ tjanst.name }} +

Kontot har inga registrerade tjänster ännu.

-
-

Utförande verksamheter och utförande adresser

+
+

Utförande verksamheter och utförande adresser

Kontot har behörighet till alla utförande verksamheter och utförande adresser inom organisationen.

-

- OBS: BEHÖVER FIXAS, ÄVEN OM MAN HAR UTFÖRANDE VERKSAMHETER SÅ SYNS DOM INTE DÅ VI BARA FÅR UT ID -

-
- - - - - {{utforandeverksamhet.adresser.length === 1 ? 'adress' : 'adresser'}} - -
    -
  • - {{address.adressrad}} - {{address.postnummer}} - {{address.postort}} -
    • -
- - -
+
  • + +

    Alla adresser inom utförande verksamheten valda.

    + + + + {{ isAccordionExpanded(utforandeVerksamhet.id) ? 'Dölj' : 'Visa' }} + {{utforandeVerksamhet.adresser.length}} {{utforandeVerksamhet.adresser.length === 1 ? 'adress' : + 'adresser'}} + +
      +
    • + {{address.name}}{{last ? '' : ','}} +
      • +
    +     +     +
    • +

    Kontot har inga registrerade utförande verksamheter eller utförande adresser ännu.
    -
    -

    Behörigheter

    +
    +

    Roller

    = this.tjanstService.tjanster$; availableUtforandeVerksamheter$: Observable = this._selectedTjanstIds$.pipe( filter(selectedTjanstIds => !!selectedTjanstIds?.length), - switchMap(selectedTjanstIds => this.utforandeVerksamheterService.getUtforandeVerksamheter(selectedTjanstIds)) + switchMap(selectedTjanstIds => this.utforandeVerksamheterService.fetchUtforandeVerksamheter$(selectedTjanstIds)) ); availableRoles: Role[] = this.employeeService.allRoles; diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts index 20e2e48..31efe2e 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.spec.ts @@ -2,7 +2,6 @@ import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; import { SortOrder } from '@msfa-enums/sort-order.enum'; import { EmployeeCompactResponse } from '@msfa-models/api/employee.response.model'; @@ -13,7 +12,6 @@ import { employeesMock } from './employees-list.mock'; describe('EmployeesListComponent', () => { let component: EmployeesListComponent; let fixture: ComponentFixture; - const getEmployeeRows = () => fixture.debugElement.queryAll(By.css('.employees-list__row')); beforeEach(async () => { await TestBed.configureTestingModule({ diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts index 4273124..970c57c 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts @@ -33,15 +33,15 @@ export class AvropFiltersComponent { this.avropService.setSelectedKommuner(filterOptions); } - removeKommun(kommunToRemove: MultiselectFilterOption) { + removeKommun(kommunToRemove: MultiselectFilterOption): void { this.avropService.removeKommun(kommunToRemove); } - removeUtforandeVerksamhet(utforandeVerksamhetToRemove: MultiselectFilterOption) { + removeUtforandeVerksamhet(utforandeVerksamhetToRemove: MultiselectFilterOption): void { this.avropService.removeUtforandeVerksamhet(utforandeVerksamhetToRemove); } - removeTjanst(tjanstToRemove: MultiselectFilterOption) { + removeTjanst(tjanstToRemove: MultiselectFilterOption): void { this.avropService.removeTjanst(tjanstToRemove); } } diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/employee-adress.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/employee-adress.response.model.ts new file mode 100644 index 0000000..904a71c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/employee-adress.response.model.ts @@ -0,0 +1,4 @@ +export interface EmployeeAdressResponse { + id: number; + namn: string; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/employee-tjanst.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/employee-tjanst.response.model.ts new file mode 100644 index 0000000..9046df9 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/employee-tjanst.response.model.ts @@ -0,0 +1,4 @@ +export interface EmployeeTjanstResponse { + namn: string; + tjansteKod: string; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/employee-utforande-verksamhet.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/employee-utforande-verksamhet.response.model.ts new file mode 100644 index 0000000..955495c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/employee-utforande-verksamhet.response.model.ts @@ -0,0 +1,8 @@ +import { EmployeeAdressResponse } from './employee-adress.response.model'; + +export interface EmployeeUtforandeVerksamhetResponse { + id: number; + namn: string; + allaAdresser: boolean; + adresser: EmployeeAdressResponse[]; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/employee.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/employee.response.model.ts index 360f43a..655cc39 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/api/employee.response.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/api/employee.response.model.ts @@ -1,18 +1,7 @@ import { RoleEnum } from '@msfa-enums/role.enum'; import { PaginationMeta } from '@msfa-models/pagination-meta.model'; -import { TjanstResponse } from './tjanst.response.model'; - -interface UtforandeVerksamhetResponse { - id: number; - name: string; - allaAdresser: boolean; - adresser?: AdressResponse[]; -} - -interface AdressResponse { - id: number; - name: string; -} +import { EmployeeTjanstResponse } from './employee-tjanst.response.model'; +import { EmployeeUtforandeVerksamhetResponse } from './employee-utforande-verksamhet.response.model'; export interface EmployeeCompactResponse { ciamUserId: string; @@ -29,14 +18,9 @@ export interface EmployeeResponse { email: string; ssn: string; roles: RoleEnum[]; - tjanster: TjanstResponse[]; + tjanster: EmployeeTjanstResponse[]; allaUtforandeVerksamheter: boolean; - utforandeVerksamheter: UtforandeVerksamhetResponse[]; - - // Will be removed - tjansteKoder: string[]; - utforandeVerksamhetIds: number[]; - adressIds: number[]; + utforandeVerksamheter: EmployeeUtforandeVerksamhetResponse[]; } export interface EmployeesDataResponse { diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/utforande-adress.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/utforande-adress.response.model.ts new file mode 100644 index 0000000..8ac893f --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/utforande-adress.response.model.ts @@ -0,0 +1,4 @@ +export interface UtforandeAdressResponse { + id: number; + namn: string; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/utforande-verksamhet.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/utforande-verksamhet.response.model.ts new file mode 100644 index 0000000..b616bae --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/api/utforande-verksamhet.response.model.ts @@ -0,0 +1,7 @@ +import { UtforandeAdressResponse } from './utforande-adress.response.model'; + +export interface UtforandeVerksamhetResponse { + id: number; + name: string; + adresser: UtforandeAdressResponse[]; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/employee-adress.model.ts b/apps/mina-sidor-fa/src/app/shared/models/employee-adress.model.ts new file mode 100644 index 0000000..c365245 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/employee-adress.model.ts @@ -0,0 +1,15 @@ +import { EmployeeAdressResponse } from './api/employee-adress.response.model'; + +export interface EmployeeAdress { + id: number; + name: string; +} + +export function mapResponseToEmployeeAdress(data: EmployeeAdressResponse): EmployeeAdress { + const { id, namn } = data; + + return { + id, + name: namn, + }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/employee-tjanst.model.ts b/apps/mina-sidor-fa/src/app/shared/models/employee-tjanst.model.ts new file mode 100644 index 0000000..14f78a3 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/employee-tjanst.model.ts @@ -0,0 +1,15 @@ +import { EmployeeTjanstResponse } from './api/employee-tjanst.response.model'; + +export interface EmployeeTjanst { + name: string; + tjansteKod: string; +} + +export function mapResponseToEmployeeTjanst(data: EmployeeTjanstResponse): EmployeeTjanst { + const { namn, tjansteKod } = data; + + return { + name: namn, + tjansteKod, + }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/employee-utforande-verksamhet.model.ts b/apps/mina-sidor-fa/src/app/shared/models/employee-utforande-verksamhet.model.ts new file mode 100644 index 0000000..bb79062 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/employee-utforande-verksamhet.model.ts @@ -0,0 +1,22 @@ +import { EmployeeUtforandeVerksamhetResponse } from './api/employee-utforande-verksamhet.response.model'; +import { EmployeeAdress, mapResponseToEmployeeAdress } from './employee-adress.model'; + +export interface EmployeeUtforandeVerksamhet { + id: number; + name: string; + allaAdresser: boolean; + adresser: EmployeeAdress[]; +} + +export function mapResponseToEmployeeUtforandeVerksamhet( + data: EmployeeUtforandeVerksamhetResponse +): EmployeeUtforandeVerksamhet { + const { id, namn, allaAdresser, adresser } = data; + + return { + id, + name: namn, + allaAdresser, + adresser: adresser.map(adress => mapResponseToEmployeeAdress(adress)), + }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/employee.model.ts b/apps/mina-sidor-fa/src/app/shared/models/employee.model.ts index 37a14b9..39ba746 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/employee.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/employee.model.ts @@ -1,22 +1,14 @@ import { RoleEnum } from '@msfa-enums/role.enum'; import { EmployeeCompactResponse, EmployeeResponse } from './api/employee.response.model'; +import { EmployeeTjanst, mapResponseToEmployeeTjanst } from './employee-tjanst.model'; +import { + EmployeeUtforandeVerksamhet, + mapResponseToEmployeeUtforandeVerksamhet, +} from './employee-utforande-verksamhet.model'; import { PaginationMeta } from './pagination-meta.model'; -import { mapResponseToTjanst, Tjanst } from './tjanst.model'; const CURRENT_YEAR = new Date().getFullYear().toString().slice(2, 4); -interface UtforandeVerksamhet { - id: number; - name: string; - allaAdresser: boolean; - adresser?: Adress[]; -} - -interface Adress { - id: number; - name: string; -} - export interface EmployeeCompact { id: string; fullName: string; @@ -33,13 +25,9 @@ export interface Employee { email: string; ssn: string; roles: RoleEnum[]; - tjanster: Tjanst[]; + tjanster: EmployeeTjanst[]; allaUtforandeVerksamheter: boolean; - utforandeVerksamheter: UtforandeVerksamhet[]; - - tjanstCodes: string[]; - utforandeVerksamhetIds: number[]; - utforandeAdressIds: number[]; + utforandeVerksamheter: EmployeeUtforandeVerksamhet[]; } export interface EmployeesData { @@ -81,9 +69,6 @@ export function mapResponseToEmployee(data: EmployeeResponse): Employee { tjanster, allaUtforandeVerksamheter, utforandeVerksamheter, - tjansteKoder, - utforandeVerksamhetIds, - adressIds, } = data; return { id: ciamUserId, @@ -93,11 +78,10 @@ export function mapResponseToEmployee(data: EmployeeResponse): Employee { email, ssn: ssn ? mapResponseToSsn(ssn) : null, roles: roles || [], - tjanster: tjanster?.map(tjanst => mapResponseToTjanst(tjanst)), + tjanster: tjanster?.map(tjanst => mapResponseToEmployeeTjanst(tjanst)), allaUtforandeVerksamheter, - utforandeVerksamheter, - tjanstCodes: tjansteKoder || [], - utforandeVerksamhetIds: utforandeVerksamhetIds || [], - utforandeAdressIds: adressIds || [], + utforandeVerksamheter: utforandeVerksamheter.map(utforandeVerksamhet => + mapResponseToEmployeeUtforandeVerksamhet(utforandeVerksamhet) + ), }; } diff --git a/apps/mina-sidor-fa/src/app/shared/models/form-tag.model.ts b/apps/mina-sidor-fa/src/app/shared/models/form-tag.model.ts index 5cf6773..add7db1 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/form-tag.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/form-tag.model.ts @@ -1,12 +1,11 @@ -import { Tjanst } from "./tjanst.model"; +import { Tjanst } from './tjanst.model'; export interface FormTagData { - tjanstekod: string, - name: string; + tjanstekod: string; + name: string; } - export function mapTjanstToFormTag(tjanstData: Tjanst): FormTagData { - const { name, code } = tjanstData; - return { tjanstekod: code, name} -} \ No newline at end of file + const { name, code } = tjanstData; + return { tjanstekod: code, name }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/utforande-adress.model.ts b/apps/mina-sidor-fa/src/app/shared/models/utforande-adress.model.ts new file mode 100644 index 0000000..370ad75 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/utforande-adress.model.ts @@ -0,0 +1,15 @@ +import { UtforandeAdressResponse } from './api/utforande-adress.response.model'; + +export interface UtforandeAdress { + id: number; + name: string; +} + +export function mapResponseToUtforandeAdress(data: UtforandeAdressResponse): UtforandeAdress { + const { id, namn } = data; + + return { + id, + name: namn, + }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/utforande-verksamhet.model.ts b/apps/mina-sidor-fa/src/app/shared/models/utforande-verksamhet.model.ts new file mode 100644 index 0000000..186f74c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/models/utforande-verksamhet.model.ts @@ -0,0 +1,18 @@ +import { UtforandeVerksamhetResponse } from './api/utforande-verksamhet.response.model'; +import { mapResponseToUtforandeAdress, UtforandeAdress } from './utforande-adress.model'; + +export interface UtforandeVerksamhet { + id: number; + name: string; + adresser: UtforandeAdress[]; +} + +export function mapResponseToUtforandeVerksamhet(data: UtforandeVerksamhetResponse): UtforandeVerksamhet { + const { id, name, adresser } = data; + + return { + id, + name, + adresser: adresser.map(adress => mapResponseToUtforandeAdress(adress)), + }; +} diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts index 3979b9b..0280748 100644 --- a/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts +++ b/apps/mina-sidor-fa/src/app/shared/services/api/employee.service.ts @@ -24,7 +24,6 @@ import { Sort } from '@msfa-models/sort.model'; import { ErrorService } from '@msfa-services/error.service'; import { BehaviorSubject, combineLatest, Observable, of, throwError } from 'rxjs'; import { catchError, distinctUntilChanged, filter, map, switchMap, take, tap } from 'rxjs/operators'; -import { TjanstService } from './tjanst.service'; @Injectable({ providedIn: 'root', @@ -48,11 +47,7 @@ export class EmployeeService extends UnsubscribeDirective { private _employeeToDelete$ = new BehaviorSubject(null); public employeeToDelete$: Observable = this._employeeToDelete$.asObservable(); - constructor( - private httpClient: HttpClient, - private errorService: ErrorService, - private tjanstService: TjanstService - ) { + constructor(private httpClient: HttpClient, private errorService: ErrorService) { super(); super.unsubscribeOnDestroy( combineLatest([this._currentEmployeeId$, this._lastUpdatedEmployeeId$]) @@ -63,20 +58,7 @@ export class EmployeeService extends UnsubscribeDirective { !currLastUpdatedEmployeeId && prevEmployeeId === currEmployeeId ), switchMap(([currentEmployeeId]) => - combineLatest([this._fetchEmployee$(currentEmployeeId), this.tjanstService.tjanster$]).pipe( - filter(([employee, allTjanster]) => !!(employee && allTjanster?.length)), - map(([employee, allTjanster]) => { - const tjanster = []; - employee.tjanstCodes?.forEach(code => { - const currentTjanst = allTjanster.find(tjanst => tjanst.code === code); - - if (currentTjanst) { - tjanster.push(currentTjanst); - } - }); - return { ...employee, tjanster }; - }) - ) + this._fetchEmployee$(currentEmployeeId).pipe(filter(employee => !!employee)) ) ) .subscribe(employee => { diff --git a/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts b/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts index c3991b5..acba766 100644 --- a/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts +++ b/apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts @@ -2,39 +2,34 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { environment } from '@msfa-environment'; import { Params } from '@msfa-models/api/params.model'; +import { UtforandeVerksamhetResponse } from '@msfa-models/api/utforande-verksamhet.response.model'; +import { UtforandeAdress } from '@msfa-models/utforande-adress.model'; +import { mapResponseToUtforandeVerksamhet, UtforandeVerksamhet } from '@msfa-models/utforande-verksamhet.model'; import { TreeNode, TreeNodesSelectorService, } from '@msfa-shared/components/tree-nodes-selector/services/tree-nodes-selector.service'; import { Observable, of } from 'rxjs'; - -export interface UtforandeVerksamhetAdress { - id: number; - namn: string; -} - -export interface UtforandeVerksamhet { - id: number; - name: string; - adresser: Array; -} +import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root', }) export class UtforandeVerksamheterService { - private readonly apiBaseUrl = `${environment.api.url}/utforandeverksamheter`; + private readonly _apiBaseUrl = `${environment.api.url}/utforandeverksamheter`; constructor(private treeNodesSelectorService: TreeNodesSelectorService, private httpClient: HttpClient) {} - getUtforandeVerksamheter(tjanstIds: Array): Observable> { + fetchUtforandeVerksamheter$(tjanstIds: number[]): Observable { if (!tjanstIds.length) { - return of>([]); + return of([]); } const params: Params = { tjansteIds: tjanstIds.map(tjanstId => tjanstId.toString()) }; - return this.httpClient.get>(`${this.apiBaseUrl}`, { params }); + return this.httpClient + .get<{ data: UtforandeVerksamhetResponse[] }>(`${this._apiBaseUrl}`, { params }) + .pipe(map(({ data }) => data.map(uv => mapResponseToUtforandeVerksamhet(uv)))); } getSelectedAdressIdsFromTreeNode(treeNode: TreeNode): number[] { @@ -43,7 +38,7 @@ export class UtforandeVerksamheterService { return selectedUtforandeVerksamheter.map(uv => uv.adresser.map(adress => adress.id)).flat(); } - getTreeNodeDataFromUtforandeVerksamheter(utforandeVerksamhetList: Array): TreeNode | null { + getTreeNodeDataFromUtforandeVerksamheter(utforandeVerksamhetList: UtforandeVerksamhet[]): TreeNode | null { let treeNode: TreeNode | null = null; if (!utforandeVerksamhetList || utforandeVerksamhetList.length === 0 || !Array.isArray(utforandeVerksamhetList)) { @@ -67,7 +62,7 @@ export class UtforandeVerksamheterService { childItemType: 'Adresser', children: utforandeVerksamhet.adresser ? utforandeVerksamhet.adresser.map(adress => { - return { label: adress.namn, isSelected: false, value: adress }; + return { label: adress.name, isSelected: false, value: adress }; }) : [], }; @@ -80,8 +75,8 @@ export class UtforandeVerksamheterService { return treeNode; } - getSelectedUtforandeVerksamheterFromTreeNode(treeNode: TreeNode): Array { - let utforandeVerksamhetList: Array = []; + getSelectedUtforandeVerksamheterFromTreeNode(treeNode: TreeNode): UtforandeVerksamhet[] { + let utforandeVerksamhetList: UtforandeVerksamhet[] = []; if (!treeNode || !treeNode.children) { return utforandeVerksamhetList; @@ -95,7 +90,7 @@ export class UtforandeVerksamheterService { name: originalUtforandeVerksamhet?.name, id: originalUtforandeVerksamhet?.id, adresser: utforandeVerksamhetNode.children.map(adressNode => { - return adressNode.value as UtforandeVerksamhetAdress; + return adressNode.value as UtforandeAdress; }), }; return utforandeVerksamhet; diff --git a/apps/mina-sidor-fa/src/styles/mixins/_buttons.scss b/apps/mina-sidor-fa/src/styles/mixins/_buttons.scss index 70043c8..b4ced6f 100644 --- a/apps/mina-sidor-fa/src/styles/mixins/_buttons.scss +++ b/apps/mina-sidor-fa/src/styles/mixins/_buttons.scss @@ -1,31 +1,42 @@ -@import './variables/colors'; - -//Button properties - -$msfa-button--padding: var(--digi-button--padding); -$msfa-button--margin: 0.5rem; -$msfa-button--border-radius: var(--digi-button--border-radius); -$msfa-button--transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; -$msfa-button--border: var(--digi-button--border); -$msfa-button--text-decoration: none; -$msfa-button--font-weight: var(--digi-button--font-weight); -$msfa-button--font-font-size: var(--digi-button--font-size); - -//A basic link button - -@mixin msfa-button-template($backgroundcolor, $textcolor, $hovercolor) { - background: $backgroundcolor; - padding: $msfa-button--padding; - margin: $msfa-button--margin; - border-radius: $msfa-button--border-radius; - transition: $msfa-button--transition; - border: $msfa-button--border; +@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; text-decoration: none; - font-weight: $msfa-button--font-weight; - font-size: $msfa-button--font-font-size; - color: $textcolor; + font-weight: var(--digi-button--font-weight); + font-size: var(--digi-button--font-size); + width: var(--digi-button--width); + display: var(--digi-button--display); + text-align: var(--digi-button--text-align); + border: var(--digi-button--border); + outline: var(--digi-button--outline); + border-color: var(--digi-button--border-color); - &:hover { - background: $hovercolor; + @if $type == 'secondary' { + background-color: var(--digi-button--background--secondary); + color: var(--digi-button--color--secondary); + } @else if $type == 'tertiary' { + background-color: transparent; + color: var(--digi-button--color--tertiary); + border-width: 0; + } @else { + background-color: var(--digi-button--background); + color: var(--digi-button--color); + } + + &:hover, + &:focus { + outline: var(--digi-button--outline--focus); + border-color: var(--digi-button--border-color--hover); + + @if $type == 'secondary' { + background-color: var(--digi-button--background--secondary--hover); + color: var(--digi-button--color--secondary); + } @else if $type == 'tertiary' { + color: var(--digi-button--color--tertiary--hover); + } @else { + background-color: var(--digi-button--background--hover); + color: var(--digi-button--color--hover); + } } }