diff --git a/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.component.html b/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.component.html index 8d40584..4dc4d56 100644 --- a/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.component.html +++ b/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.component.html @@ -6,8 +6,8 @@ hämta authentication-token:

- + Logga in med fullständiga rättigheter - + diff --git a/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.module.ts b/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.module.ts index 4e537e4..c964417 100644 --- a/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/mock-login/mock-login.module.ts @@ -1,7 +1,7 @@ -import { DigiNgButtonModule } from '@af/digi-ng/_button/button'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; import { MockLoginComponent } from './mock-login.component'; @NgModule({ @@ -15,7 +15,7 @@ import { MockLoginComponent } from './mock-login.component'; component: MockLoginComponent, }, ]), - DigiNgButtonModule, + UiLinkButtonModule, ], }) export class MockLoginModule {} diff --git a/libs/styles/src/mixins/_buttons.scss b/libs/styles/src/mixins/_buttons.scss index d361567..0893ffc 100644 --- a/libs/styles/src/mixins/_buttons.scss +++ b/libs/styles/src/mixins/_buttons.scss @@ -8,9 +8,9 @@ font-weight: var(--digi-button--font-weight); font-size: var(--digi-button--font-size); width: var(--digi-button--width); - display: flex; + display: inline-flex; align-items: center; - gap: 0.3rem; + gap: 0.5rem; text-align: var(--digi-button--text-align); border: var(--digi-button--border); outline: var(--digi-button--outline); diff --git a/libs/ui/link-button/link-button-type.enum.ts b/libs/ui/link-button/link-button-type.enum.ts new file mode 100644 index 0000000..a7ed4f6 --- /dev/null +++ b/libs/ui/link-button/link-button-type.enum.ts @@ -0,0 +1,5 @@ +export enum UiLinkButtonType { + PRIMARY = 'primary', + SECONDARY = 'secondary', + TERTIARY = 'tertiary', +} diff --git a/libs/ui/link-button/link-button.component.html b/libs/ui/link-button/link-button.component.html new file mode 100644 index 0000000..0f2c228 --- /dev/null +++ b/libs/ui/link-button/link-button.component.html @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui/link-button/link-button.component.scss b/libs/ui/link-button/link-button.component.scss new file mode 100644 index 0000000..9e835f8 --- /dev/null +++ b/libs/ui/link-button/link-button.component.scss @@ -0,0 +1,13 @@ +@import 'mixins/buttons'; + +.ui-link-button { + &--primary { + @include msfa__button; + } + &--secondary { + @include msfa__button('secondary'); + } + &--tertiary { + @include msfa__button('tertiary'); + } +} diff --git a/libs/ui/link-button/link-button.component.spec.ts b/libs/ui/link-button/link-button.component.spec.ts new file mode 100644 index 0000000..ad2f3ad --- /dev/null +++ b/libs/ui/link-button/link-button.component.spec.ts @@ -0,0 +1,26 @@ +/* tslint:disable:no-unused-variable */ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { LinkButtonComponent } from './link-button.component'; + +describe('LinkButtonComponent', () => { + let component: LinkButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [LinkButtonComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LinkButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/ui/link-button/link-button.component.stories.ts b/libs/ui/link-button/link-button.component.stories.ts new file mode 100644 index 0000000..ade7758 --- /dev/null +++ b/libs/ui/link-button/link-button.component.stories.ts @@ -0,0 +1,15 @@ +import { LinkButtonComponent } from './link-button.component'; +import { UiLinkButtonModule } from './link-button.module'; + +export default { title: 'LinkButton', component: LinkButtonComponent }; + +const componentModule = { + moduleMetadata: { + imports: [UiLinkButtonModule], + }, +}; + +export const standard = () => ({ + ...componentModule, + template: '', +}); diff --git a/libs/ui/link-button/link-button.component.ts b/libs/ui/link-button/link-button.component.ts new file mode 100644 index 0000000..b2f176b --- /dev/null +++ b/libs/ui/link-button/link-button.component.ts @@ -0,0 +1,24 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { Params } from '@angular/router'; +import { UiLinkButtonType } from './link-button-type.enum'; + +@Component({ + selector: 'ui-link-button', + templateUrl: './link-button.component.html', + styleUrls: ['./link-button.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class LinkButtonComponent { + private readonly _defaultClass = 'ui-link-button'; + @Input() uiType: UiLinkButtonType = UiLinkButtonType.PRIMARY; + @Input() uiSize: 's' | 'm' = 'm'; + @Input() uiRouterLink: string | string[]; + @Input() uiQueryParams: Params = null; + + get linkButtonClass(): string { + if (this.uiType) { + return `${this._defaultClass} ${this._defaultClass}--${this.uiType as string}`; + } + return this._defaultClass; + } +} diff --git a/libs/ui/link-button/link-button.module.ts b/libs/ui/link-button/link-button.module.ts new file mode 100644 index 0000000..25c8cdc --- /dev/null +++ b/libs/ui/link-button/link-button.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 { LinkButtonComponent } from './link-button.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [LinkButtonComponent], + imports: [CommonModule, RouterModule], + exports: [LinkButtonComponent], +}) +export class UiLinkButtonModule {}