From ceee7028b7888d08c8673caead0fa4aadecf8eac Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 10 Sep 2021 14:02:30 +0200 Subject: [PATCH] Added accessibility report page --- .../src/app/app-routing.module.ts | 8 +++++ .../accessibility.component.html | 5 ++++ .../accessibility.component.scss | 5 ++++ .../accessibility.component.spec.ts | 29 +++++++++++++++++++ .../accessibility/accessibility.component.ts | 25 ++++++++++++++++ .../accessibility/accessibility.module.ts | 18 ++++++++++++ .../components/footer/footer.component.html | 17 +++++++++-- .../components/footer/footer.component.scss | 17 ++++++++++- .../components/footer/footer.component.ts | 13 ++++++++- .../layout/components/footer/footer.module.ts | 3 +- .../src/app/shared/constants/navigation.ts | 1 + .../src/app/shared/enums/feature.enum.ts | 2 ++ .../src/environments/active-features.ts | 9 +++++- .../src/styles/mixins/_link.scss | 16 ++++++++-- apps/mina-sidor-fa/src/styles/styles.scss | 4 +-- 15 files changed, 161 insertions(+), 11 deletions(-) create mode 100644 apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html create mode 100644 apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss create mode 100644 apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts diff --git a/apps/mina-sidor-fa/src/app/app-routing.module.ts b/apps/mina-sidor-fa/src/app/app-routing.module.ts index 1b20e68..0722de4 100644 --- a/apps/mina-sidor-fa/src/app/app-routing.module.ts +++ b/apps/mina-sidor-fa/src/app/app-routing.module.ts @@ -86,6 +86,14 @@ activeFeatures.forEach(feature => { loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule), }); break; + case Feature.ACCESSIBILITY_REPORT: + routes.push({ + path: 'tillganglighet', + data: { title: 'Tillgänglighetsredogörelsen' }, + loadChildren: () => import('./pages/accessibility/accessibility.module').then(m => m.AccessibilityModule), + canActivate: [AuthGuard], + }); + break; default: break; } diff --git a/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html new file mode 100644 index 0000000..3517ba1 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html @@ -0,0 +1,5 @@ + + +
+ + diff --git a/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss new file mode 100644 index 0000000..8bdd1f2 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss @@ -0,0 +1,5 @@ +@import 'variables/colors'; +@import 'variables/gutters'; + +.accessibility { +} diff --git a/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts new file mode 100644 index 0000000..f2cb162 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts @@ -0,0 +1,29 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AccessibilityComponent } from './accessibility.component'; + +describe('AccessibilityComponent', () => { + let component: AccessibilityComponent; + let fixture: ComponentFixture; + + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [AccessibilityComponent], + imports: [RouterTestingModule], + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(AccessibilityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts new file mode 100644 index 0000000..1f101cb --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts @@ -0,0 +1,25 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Role } from '@msfa-models/role.model'; +import { UserService } from '@msfa-services/api/user.service'; +import { Observable } from 'rxjs'; +import { filter, map } from 'rxjs/operators'; + +@Component({ + selector: 'msfa-accessibility', + templateUrl: './accessibility.component.html', + styleUrls: ['./accessibility.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AccessibilityComponent { + userFullName$: Observable = this.userService.user$.pipe( + filter(user => !!user), + map(userName => userName.fullName) + ); + userRoles$: Observable = this.userService.userRoles$; + + constructor(private userService: UserService) {} + + isAuthorizedUser(userRoles: Role[]): boolean { + return !!userRoles.length; + } +} diff --git a/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts new file mode 100644 index 0000000..d64bbf4 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts @@ -0,0 +1,18 @@ +import { DigiNgCardModule } from '@af/digi-ng/_card/card'; +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; +import { AccessibilityComponent } from './accessibility.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [AccessibilityComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: AccessibilityComponent }]), + LayoutModule, + DigiNgCardModule, + ], +}) +export class AccessibilityModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.html index 0a2dc2a..d2c3fa8 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.html @@ -1,8 +1,19 @@ diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss index d099a2d..f57fcbf 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss @@ -1,20 +1,35 @@ +@import 'mixins/list'; @import 'variables/gutters'; .footer { display: flex; justify-content: space-between; - align-items: flex-end; + align-items: flex-start; background-color: var(--digi--ui--color--background--profile); padding: $digi--layout--gutter--l $digi--layout--gutter; color: var(--digi--typography--color--text--light); &__logo-wrapper { + display: flex; + flex-direction: column; + gap: $digi--layout--gutter--s; ::ng-deep .digi-logo { --digi-logo--padding: 0; } } + &__nav-list { + @include msfa__reset-list; + display: flex; + flex-direction: column; + gap: $digi--layout--gutter--s; + } + &__version { font-size: 0.75rem; + + ::ng-deep p { + margin: 0; + } } } diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts index 052357c..eb8e433 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Feature } from '@msfa-enums/feature.enum'; import { environment } from '@msfa-environment'; @Component({ @@ -8,5 +9,15 @@ import { environment } from '@msfa-environment'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FooterComponent { - showVersion = !environment.production; + activeFeatures: Feature[] = environment.activeFeatures; + + get versionInfoVisible(): boolean { + return this.activeFeatures.includes(Feature.VERSION_INFO); + } + get releasesVisible(): boolean { + return this.activeFeatures.includes(Feature.RELEASES); + } + get accessibilityReportVisible(): boolean { + return this.activeFeatures.includes(Feature.ACCESSIBILITY_REPORT); + } } diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts index d5581cd..2fe9045 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts @@ -1,12 +1,13 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { MarkdownModule } from 'ngx-markdown'; import { FooterComponent } from './footer.component'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [FooterComponent], - imports: [CommonModule, MarkdownModule.forChild()], + imports: [CommonModule, MarkdownModule.forChild(), RouterModule], exports: [FooterComponent], }) export class FooterModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts b/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts index 6358176..a45688b 100644 --- a/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts +++ b/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts @@ -8,4 +8,5 @@ export const NAVIGATION = { 'mitt-konto': 'Mitt konto', 'skapa-personalkonto': 'Skapa personalkonto', obehorig: 'Saknar behörigheter', + tillganglighet: 'Tillgänglighetsredogörelsen', }; diff --git a/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts index 98bf1dd..c39c64a 100644 --- a/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts +++ b/apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts @@ -6,4 +6,6 @@ export enum Feature { MY_ORGANIZATION, RELEASES, MOCK_LOGIN, + VERSION_INFO, + ACCESSIBILITY_REPORT, } diff --git a/apps/mina-sidor-fa/src/environments/active-features.ts b/apps/mina-sidor-fa/src/environments/active-features.ts index b73ebe4..558c712 100644 --- a/apps/mina-sidor-fa/src/environments/active-features.ts +++ b/apps/mina-sidor-fa/src/environments/active-features.ts @@ -1,6 +1,11 @@ import { Feature } from '@msfa-enums/feature.enum'; -export const ACTIVE_FEATURES_PROD: Feature[] = [Feature.ADMINISTRATION, Feature.MY_ACCOUNT, Feature.MY_ORGANIZATION]; +export const ACTIVE_FEATURES_PROD: Feature[] = [ + Feature.ADMINISTRATION, + Feature.MY_ACCOUNT, + Feature.MY_ORGANIZATION, + Feature.ACCESSIBILITY_REPORT, +]; export const ACTIVE_FEATURES_TEST: Feature[] = [ Feature.ADMINISTRATION, @@ -9,4 +14,6 @@ export const ACTIVE_FEATURES_TEST: Feature[] = [ Feature.AVROP, Feature.MY_ORGANIZATION, Feature.RELEASES, + Feature.VERSION_INFO, + Feature.ACCESSIBILITY_REPORT, ]; diff --git a/apps/mina-sidor-fa/src/styles/mixins/_link.scss b/apps/mina-sidor-fa/src/styles/mixins/_link.scss index 0f60713..978247d 100644 --- a/apps/mina-sidor-fa/src/styles/mixins/_link.scss +++ b/apps/mina-sidor-fa/src/styles/mixins/_link.scss @@ -1,4 +1,4 @@ -@mixin msfa__link($ignore-visited: false) { +@mixin msfa__link($ignore-visited: false, $theme: 'dark') { display: inline-flex; align-items: center; text-decoration: none; @@ -7,11 +7,23 @@ font-weight: var(--digi--typography--font-weight--semibold); gap: var(--digi--layout--gutter--xs); + @if ($theme == 'light') { + color: var(--digi--typography--color--text--light); + + &:visited { + color: var(--digi--typography--color--text--light); + + &:hover { + color: var(--digi--typography--color--text--light); + } + } + } + &:hover { text-decoration: underline; } - @if $ignore-visited { + @if ($ignore-visited) { &:visited { color: var(--digi--typography--color--link); diff --git a/apps/mina-sidor-fa/src/styles/styles.scss b/apps/mina-sidor-fa/src/styles/styles.scss index f2bf018..7d607ca 100644 --- a/apps/mina-sidor-fa/src/styles/styles.scss +++ b/apps/mina-sidor-fa/src/styles/styles.scss @@ -94,10 +94,10 @@ dl { } &__link { - @include msfa__link(false); + @include msfa__link(false, 'light'); &--ignore-visited:visited { - @include msfa__link(true); + @include msfa__link(true, 'light'); } } }