From 03ba5267982d4d4f5cb683bb158c331c4623ab91 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 16 Mar 2021 15:37:48 +0100 Subject: [PATCH] Added paths and some standard code used in different projects --- .prettierrc | 16 ++- angular.json | 17 +-- apps/dafa-web/.eslintrc.json | 4 +- apps/dafa-web/src/app/app-routing.module.ts | 24 ++++ apps/dafa-web/src/app/app.component.html | 118 ++-------------- apps/dafa-web/src/app/app.component.scss | 133 ------------------ apps/dafa-web/src/app/app.component.spec.ts | 15 -- apps/dafa-web/src/app/app.component.ts | 28 +++- apps/dafa-web/src/app/app.module.ts | 7 +- .../navigation/navigation.component.html | 20 +++ .../navigation/navigation.component.scss | 116 +++++++++++++++ .../navigation/navigation.component.spec.ts | 25 ++++ .../navigation/navigation.component.ts | 12 ++ .../navigation/navigation.module.ts | 11 ++ .../navigation.print.component.scss | 9 ++ .../skip-to-content.component.html | 1 + .../skip-to-content.component.scss | 31 ++++ .../skip-to-content.component.spec.ts | 24 ++++ .../skip-to-content.component.ts | 29 ++++ .../skip-to-content/skip-to-content.module.ts | 10 ++ apps/dafa-web/src/app/data/contants/.gitkeep | 0 .../src/app/data/enums/icon-size.enum.ts | 6 + .../src/app/data/enums/icon-type.enum.ts | 4 + apps/dafa-web/src/app/data/models/.gitkeep | 0 .../app/directives/unsubscribe.directive.ts | 15 ++ .../page-not-found.component.html | 10 ++ .../page-not-found.component.scss | 4 + .../page-not-found.component.spec.ts | 25 ++++ .../page-not-found.component.ts | 9 ++ .../page-not-found/page-not-found.module.ts | 17 +++ .../src/app/pages/start/start.component.html | 3 + .../src/app/pages/start/start.component.scss | 101 +++++++++++++ .../app/pages/start/start.component.spec.ts | 23 +++ .../src/app/pages/start/start.component.ts | 11 ++ .../src/app/pages/start/start.module.ts | 11 ++ apps/dafa-web/src/app/services/.gitkeep | 0 .../src/app/shared/components/.gitkeep | 0 apps/dafa-web/src/app/utils/.gitkeep | 0 apps/dafa-web/src/assets/favicon.png | Bin 0 -> 1013 bytes .../src/assets/logo/fa-mina-sidor-dark.png | Bin 0 -> 5386 bytes .../src/assets/logo/fa-mina-sidor-dark.svg | 17 +++ .../src/assets/logo/fa-mina-sidor-light.png | Bin 0 -> 4887 bytes .../src/assets/logo/fa-mina-sidor-light.svg | 17 +++ apps/dafa-web/src/favicon.ico | Bin 15086 -> 0 bytes apps/dafa-web/src/index.html | 6 +- apps/dafa-web/src/styles.scss | 1 - apps/dafa-web/src/styles/functions/_u.scss | 1 + apps/dafa-web/src/styles/mixins/_a11y.scss | 5 + apps/dafa-web/src/styles/mixins/_button.scss | 49 +++++++ apps/dafa-web/src/styles/mixins/_flex.scss | 5 + apps/dafa-web/src/styles/mixins/_form.scss | 65 +++++++++ apps/dafa-web/src/styles/mixins/_gutter.scss | 8 ++ apps/dafa-web/src/styles/mixins/_icon.scss | 7 + apps/dafa-web/src/styles/mixins/_link.scss | 20 +++ apps/dafa-web/src/styles/mixins/_list.scss | 5 + apps/dafa-web/src/styles/mixins/_ribbon.scss | 7 + .../src/styles/mixins/_typography.scss | 23 +++ apps/dafa-web/src/styles/mixins/ie11.scss | 5 + apps/dafa-web/src/styles/styles.scss | 76 ++++++++++ .../src/styles/variables/_border-radius.scss | 3 + .../src/styles/variables/_box-shadow.scss | 5 + .../src/styles/variables/_breakpoints.scss | 13 ++ .../src/styles/variables/_colors.scss | 71 ++++++++++ .../src/styles/variables/_containers.scss | 10 ++ apps/dafa-web/src/styles/variables/_form.scss | 9 ++ .../src/styles/variables/_gutters.scss | 14 ++ .../src/styles/variables/_shadows.scss | 4 + .../src/styles/variables/_typography.scss | 28 ++++ package-lock.json | 12 ++ package.json | 1 + tsconfig.base.json | 12 +- tsconfig.json | 3 + 72 files changed, 1109 insertions(+), 282 deletions(-) create mode 100644 apps/dafa-web/src/app/app-routing.module.ts create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.component.html create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.component.scss create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.component.ts create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.module.ts create mode 100644 apps/dafa-web/src/app/components/navigation/navigation.print.component.scss create mode 100644 apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html create mode 100644 apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss create mode 100644 apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts create mode 100644 apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts create mode 100644 apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts create mode 100644 apps/dafa-web/src/app/data/contants/.gitkeep create mode 100644 apps/dafa-web/src/app/data/enums/icon-size.enum.ts create mode 100644 apps/dafa-web/src/app/data/enums/icon-type.enum.ts create mode 100644 apps/dafa-web/src/app/data/models/.gitkeep create mode 100644 apps/dafa-web/src/app/directives/unsubscribe.directive.ts create mode 100644 apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html create mode 100644 apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss create mode 100644 apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts create mode 100644 apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts create mode 100644 apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts create mode 100644 apps/dafa-web/src/app/pages/start/start.component.html create mode 100644 apps/dafa-web/src/app/pages/start/start.component.scss create mode 100644 apps/dafa-web/src/app/pages/start/start.component.spec.ts create mode 100644 apps/dafa-web/src/app/pages/start/start.component.ts create mode 100644 apps/dafa-web/src/app/pages/start/start.module.ts create mode 100644 apps/dafa-web/src/app/services/.gitkeep create mode 100644 apps/dafa-web/src/app/shared/components/.gitkeep create mode 100644 apps/dafa-web/src/app/utils/.gitkeep create mode 100644 apps/dafa-web/src/assets/favicon.png create mode 100644 apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png create mode 100644 apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg create mode 100644 apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png create mode 100644 apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg delete mode 100644 apps/dafa-web/src/favicon.ico delete mode 100644 apps/dafa-web/src/styles.scss create mode 100644 apps/dafa-web/src/styles/functions/_u.scss create mode 100644 apps/dafa-web/src/styles/mixins/_a11y.scss create mode 100644 apps/dafa-web/src/styles/mixins/_button.scss create mode 100644 apps/dafa-web/src/styles/mixins/_flex.scss create mode 100644 apps/dafa-web/src/styles/mixins/_form.scss create mode 100644 apps/dafa-web/src/styles/mixins/_gutter.scss create mode 100644 apps/dafa-web/src/styles/mixins/_icon.scss create mode 100644 apps/dafa-web/src/styles/mixins/_link.scss create mode 100644 apps/dafa-web/src/styles/mixins/_list.scss create mode 100644 apps/dafa-web/src/styles/mixins/_ribbon.scss create mode 100644 apps/dafa-web/src/styles/mixins/_typography.scss create mode 100644 apps/dafa-web/src/styles/mixins/ie11.scss create mode 100644 apps/dafa-web/src/styles/styles.scss create mode 100644 apps/dafa-web/src/styles/variables/_border-radius.scss create mode 100644 apps/dafa-web/src/styles/variables/_box-shadow.scss create mode 100644 apps/dafa-web/src/styles/variables/_breakpoints.scss create mode 100644 apps/dafa-web/src/styles/variables/_colors.scss create mode 100644 apps/dafa-web/src/styles/variables/_containers.scss create mode 100644 apps/dafa-web/src/styles/variables/_form.scss create mode 100644 apps/dafa-web/src/styles/variables/_gutters.scss create mode 100644 apps/dafa-web/src/styles/variables/_shadows.scss create mode 100644 apps/dafa-web/src/styles/variables/_typography.scss create mode 100644 tsconfig.json diff --git a/.prettierrc b/.prettierrc index 92cde39..f5f61ca 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,15 @@ { - "singleQuote": true -} \ No newline at end of file + "printWidth": 120, + "singleQuote": true, + "useTabs": false, + "tabWidth": 2, + "semi": true, + "bracketSpacing": true, + "arrowParens": "avoid", + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/angular.json b/angular.json index cddad74..18998e3 100644 --- a/angular.json +++ b/angular.json @@ -36,7 +36,7 @@ "projectType": "application", "root": "apps/dafa-web", "sourceRoot": "apps/dafa-web/src", - "prefix": "app", + "prefix": "dafa", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -47,11 +47,11 @@ "polyfills": "apps/dafa-web/src/polyfills.ts", "tsConfig": "apps/dafa-web/tsconfig.app.json", "aot": true, - "assets": [ - "apps/dafa-web/src/favicon.ico", - "apps/dafa-web/src/assets" - ], - "styles": ["apps/dafa-web/src/styles.scss"], + "assets": ["apps/dafa-web/src/assets"], + "styles": ["apps/dafa-web/src/styles/styles.scss"], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/@af/sass", "apps/dafa-web/src/styles"] + }, "scripts": [] }, "configurations": { @@ -104,10 +104,7 @@ "lint": { "builder": "@nrwl/linter:eslint", "options": { - "lintFilePatterns": [ - "apps/dafa-web/src/**/*.ts", - "apps/dafa-web/src/**/*.html" - ] + "lintFilePatterns": ["apps/dafa-web/src/**/*.ts", "apps/dafa-web/src/**/*.html"] } }, "test": { diff --git a/apps/dafa-web/.eslintrc.json b/apps/dafa-web/.eslintrc.json index d9405f7..b0a9021 100644 --- a/apps/dafa-web/.eslintrc.json +++ b/apps/dafa-web/.eslintrc.json @@ -14,7 +14,7 @@ "error", { "type": "attribute", - "prefix": "app", + "prefix": "dafa", "style": "camelCase" } ], @@ -22,7 +22,7 @@ "error", { "type": "element", - "prefix": "app", + "prefix": "dafa", "style": "kebab-case" } ] diff --git a/apps/dafa-web/src/app/app-routing.module.ts b/apps/dafa-web/src/app/app-routing.module.ts new file mode 100644 index 0000000..22f3c4f --- /dev/null +++ b/apps/dafa-web/src/app/app-routing.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { ExtraOptions, RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + data: { title: 'FA Mina sidor' }, + loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule), + }, + { + path: '**', + data: { title: 'Sidan hittas inte' }, + loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule), + }, +]; +const options: ExtraOptions = { + useHash: false, +}; + +@NgModule({ + imports: [RouterModule.forRoot(routes, options)], + exports: [RouterModule], +}) +export class AppRoutingModule {} diff --git a/apps/dafa-web/src/app/app.component.html b/apps/dafa-web/src/app/app.component.html index f605f64..1eea2f3 100644 --- a/apps/dafa-web/src/app/app.component.html +++ b/apps/dafa-web/src/app/app.component.html @@ -1,111 +1,11 @@ -
- Nx logo -

Welcome to {{ title }}!

-
-
-

Resources & Tools

-

Thank you for using and showing some ♥ for Nx.

-
- - If you like Nx, please give it a star: -
- - - - - Star -
- -
-

Here are some links to help you get started.

- -

Next Steps

-

Here are some things you can do with Nx.

-
- Add UI library - 
-# Generate UI lib
-ng g @nrwl/angular:lib ui
+

+    
 
-# Add a component
-ng g @nrwl/angular:component xyz --project ui
-
-
- View dependency graph - 
nx dep-graph
-
-
- Run affected commands - 
-# see what's been affected by changes
-ng affected:dep-graph
+    

+      
+    

 
-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-
-
-
+
+ +
+ diff --git a/apps/dafa-web/src/app/app.component.scss b/apps/dafa-web/src/app/app.component.scss index f222adf..e69de29 100644 --- a/apps/dafa-web/src/app/app.component.scss +++ b/apps/dafa-web/src/app/app.component.scss @@ -1,133 +0,0 @@ -/* - * Remove template code below - */ -:host { - display: block; - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; -} - -.gutter-left { - margin-left: 9px; -} - -.col-span-2 { - grid-column: span 2; -} - -.flex { - display: flex; - align-items: center; - justify-content: center; -} - -header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; -} - -main { - padding: 0 36px; -} - -p { - text-align: center; -} - -h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; -} - -h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; -} - -.resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; -} - -.resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; -} - -.resource:hover { - background-color: rgba(68, 138, 255, 0.04); -} - -pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; -} - -details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; -} - -summary { - cursor: pointer; - outline: none; - height: 36px; - line-height: 36px; -} - -.github-star-container { - margin-top: 12px; - line-height: 20px; -} - -.github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; -} - -.github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27, 31, 35, 0.2); - border-radius: 3px; - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); - margin-left: 4px; - font-weight: 600; -} - -.github-star-badge:hover { - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); - border-color: rgba(27, 31, 35, 0.35); - background-position: -0.5em; -} -.github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; -} diff --git a/apps/dafa-web/src/app/app.component.spec.ts b/apps/dafa-web/src/app/app.component.spec.ts index 6fe2037..059bb54 100644 --- a/apps/dafa-web/src/app/app.component.spec.ts +++ b/apps/dafa-web/src/app/app.component.spec.ts @@ -13,19 +13,4 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it(`should have as title 'dafa-web'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('dafa-web'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain( - 'Welcome to dafa-web!' - ); - }); }); diff --git a/apps/dafa-web/src/app/app.component.ts b/apps/dafa-web/src/app/app.component.ts index 382df7b..48a13e6 100644 --- a/apps/dafa-web/src/app/app.component.ts +++ b/apps/dafa-web/src/app/app.component.ts @@ -1,10 +1,30 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { filter } from 'rxjs/operators'; +import { UnsubscribeDirective } from './directives/unsubscribe.directive'; @Component({ - selector: 'app-root', + selector: 'dafa-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { - title = 'dafa-web'; +export class AppComponent extends UnsubscribeDirective { + path = ''; + + constructor(private router: Router) { + super(); + super.unsubscribeOnDestroy( + this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { + const url = this.router.url; + this.path = url.split('/')[1].split('?')[0] || ''; + }) + ); + } + + get appClass(): string { + let defaultClass = `dafa dafa--${this.path.length ? this.path : 'home'}`; + + return defaultClass; + } } diff --git a/apps/dafa-web/src/app/app.module.ts b/apps/dafa-web/src/app/app.module.ts index 7bcb9e9..f0f5a08 100644 --- a/apps/dafa-web/src/app/app.module.ts +++ b/apps/dafa-web/src/app/app.module.ts @@ -1,11 +1,14 @@ +import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - +import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { NavigationModule } from './components/navigation/navigation.module'; +import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule], + imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule], providers: [], bootstrap: [AppComponent], }) diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.html b/apps/dafa-web/src/app/components/navigation/navigation.component.html new file mode 100644 index 0000000..5beb4de --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html @@ -0,0 +1,20 @@ +
+
+ + + Till startsidan för FA Mina sidor + +
+ +
diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.component.scss new file mode 100644 index 0000000..d18a8d7 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.scss @@ -0,0 +1,116 @@ +@import 'mixins/list'; +@import 'variables/border-radius'; +@import 'variables/breakpoints'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; + +$navigation-height: 2.5rem; +$navigation-height-large: 4rem; + +.navigation { + background-color: white; + border-bottom: 1px solid $af__color-background-gray; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 $af__gutter-m; + + @media (max-width: $af__breakpoint-s-below) { + flex-direction: column; + } + + &__logo-wrapper { + height: 100%; + display: flex; + align-items: center; + } + + &__logo { + height: $navigation-height / 2; + vertical-align: middle; + + @media (min-width: $af__breakpoint-m) { + height: $navigation-height-large / 2; + } + } + + &__list { + @include dafa__reset-list; + display: flex; + } + + &__item { + display: flex; + align-items: center; + border-left: 1px solid $af__color-background-gray; + + &--no-link { + padding: 0 $af__gutter-m; + flex-direction: column; + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + border-right: 1px solid $af__color-background-gray; + } + } + + &__link, + &__no-link { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: $af__font-size-xs; + color: $af__color-text; + width: 7rem; + height: $navigation-height; + font-weight: $af__font-weight-normal; + text-decoration: none; + + @media (min-width: $af__breakpoint-m) { + height: $navigation-height-large; + } + } + + &__link { + &:hover { + background-color: $af__color-background-gray; + } + + &--active { + &::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; + background-color: $af__color-primary; + } + } + } + + &__text { + margin-top: $af__gutter-xxs; + } + + &__news { + display: flex; + gap: $af__gutter-xs; + padding: $af__gutter-xs $af__gutter-s; + background-color: $af__color-complementary-alt; + color: $af__color-text-light; + border-radius: $af__border-radius; + + &:hover { + background-color: darken($af__color-complementary-alt, 10%); + } + } +} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts b/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts new file mode 100644 index 0000000..6b707df --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { NavigationComponent } from './navigation.component'; + +describe('NavigationComponent', () => { + let component: NavigationComponent; + let fixture: ComponentFixture; + + beforeEach( + waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [NavigationComponent], + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(NavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.ts b/apps/dafa-web/src/app/components/navigation/navigation.component.ts new file mode 100644 index 0000000..a13cd27 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IconType } from '@dafa-enums/icon-type.enum'; + +@Component({ + selector: 'dafa-navigation', + templateUrl: './navigation.component.html', + styleUrls: ['./navigation.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NavigationComponent { + iconType = IconType; +} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.module.ts b/apps/dafa-web/src/app/components/navigation/navigation.module.ts new file mode 100644 index 0000000..a228ce8 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NavigationComponent } from './navigation.component'; + +@NgModule({ + declarations: [NavigationComponent], + imports: [CommonModule, RouterModule], + exports: [NavigationComponent], +}) +export class NavigationModule {} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss new file mode 100644 index 0000000..9b37abf --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss @@ -0,0 +1,9 @@ +@import 'variables/gutters'; + +@media print { + .navigation { + border-bottom-width: 0; + padding: $af__gutter-m 0; + display: flex; + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html new file mode 100644 index 0000000..96bb2d5 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html @@ -0,0 +1 @@ + diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss new file mode 100644 index 0000000..a9b9579 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss @@ -0,0 +1,31 @@ +@import 'variables/border-radius'; +@import 'variables/colors'; +@import 'variables/gutters'; + +.skip-to-content { + position: absolute; + top: -1000px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + overflow: hidden; + z-index: 1000; + text-align: center; + padding: $af__gutter-xs $af__gutter-m; + display: block; + background-color: $dafa__color-pink; + color: $af__color-text-light; + + &:focus { + position: fixed; + top: 0; + width: auto; + height: auto; + text-decoration: none; + } + + &:hover { + text-decoration: underline; + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts new file mode 100644 index 0000000..0d342d5 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { SkipToContentComponent } from './skip-to-content.component'; + + +describe('SkipToContentComponent', () => { + let component: SkipToContentComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [SkipToContentComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SkipToContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts new file mode 100644 index 0000000..da5f63f --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts @@ -0,0 +1,29 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive'; +import { filter } from 'rxjs/operators'; + +@Component({ + selector: 'dafa-skip-to-content', + templateUrl: './skip-to-content.component.html', + styleUrls: ['./skip-to-content.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SkipToContentComponent extends UnsubscribeDirective { + @Input() mainContentId: string; + skipLinkPath: string; + + constructor(private router: Router, private changeDetectorRef: ChangeDetectorRef) { + super(); + super.unsubscribeOnDestroy( + this.router.events.pipe(filter((event: any) => event instanceof NavigationEnd)).subscribe(({ url }) => { + const mainContentId = `#${this.mainContentId}`; + // Check if the current URL already includes the mainContentId. + const existsInUrl: boolean = url.substring(url.length - mainContentId.length, url.length) === mainContentId; + + this.skipLinkPath = existsInUrl ? url : `${url}${mainContentId}`; + this.changeDetectorRef.markForCheck(); + }) + ); + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts new file mode 100644 index 0000000..98c05b6 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts @@ -0,0 +1,10 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { SkipToContentComponent } from './skip-to-content.component'; + +@NgModule({ + declarations: [SkipToContentComponent], + imports: [CommonModule], + exports: [SkipToContentComponent], +}) +export class SkipToContentModule {} diff --git a/apps/dafa-web/src/app/data/contants/.gitkeep b/apps/dafa-web/src/app/data/contants/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/data/enums/icon-size.enum.ts b/apps/dafa-web/src/app/data/enums/icon-size.enum.ts new file mode 100644 index 0000000..4cbf748 --- /dev/null +++ b/apps/dafa-web/src/app/data/enums/icon-size.enum.ts @@ -0,0 +1,6 @@ +export enum IconSize { + S = 's', + M = 'm', + L = 'l', + XL = 'xl', +} diff --git a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts new file mode 100644 index 0000000..94a8f05 --- /dev/null +++ b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts @@ -0,0 +1,4 @@ +export enum IconType { + HOME = 'home', + USER = 'user', +} diff --git a/apps/dafa-web/src/app/data/models/.gitkeep b/apps/dafa-web/src/app/data/models/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/directives/unsubscribe.directive.ts b/apps/dafa-web/src/app/directives/unsubscribe.directive.ts new file mode 100644 index 0000000..69a0555 --- /dev/null +++ b/apps/dafa-web/src/app/directives/unsubscribe.directive.ts @@ -0,0 +1,15 @@ +import { Directive, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs'; + +@Directive() +export class UnsubscribeDirective implements OnDestroy { + private subscriptions: Subscription[] = []; + + ngOnDestroy(): void { + this.subscriptions.forEach(sub => sub.unsubscribe()); + } + + unsubscribeOnDestroy(...sub: Subscription[]): void { + this.subscriptions.push(...sub); + } +} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..69725b9 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html @@ -0,0 +1,10 @@ + +
+

Oj då! Vi kan inte hitta sidan.

+

Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.

+ + + Gå tillbaka till startsidan + +
+ diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000..aa45972 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss @@ -0,0 +1,4 @@ +.page-not-found { + text-align: center; + padding: 5rem; +} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000..fd91f6e --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { PageNotFoundComponent } from './page-not-found.component'; + + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ PageNotFoundComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..7025798 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'dafa-page-not-found', + templateUrl: './page-not-found.component.html', + styleUrls: ['./page-not-found.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PageNotFoundComponent {} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts new file mode 100644 index 0000000..e520f4a --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts @@ -0,0 +1,17 @@ +import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left'; +import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PageNotFoundComponent } from './page-not-found.component'; + +@NgModule({ + declarations: [PageNotFoundComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]), + DigiNgTypographyBaseModule, + DigiNgIconArrowLeftModule, + ], +}) +export class PageNotFoundModule {} diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html new file mode 100644 index 0000000..40b1c25 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.html @@ -0,0 +1,3 @@ + +
Start funkar!
+ diff --git a/apps/dafa-web/src/app/pages/start/start.component.scss b/apps/dafa-web/src/app/pages/start/start.component.scss new file mode 100644 index 0000000..19f2ff8 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.scss @@ -0,0 +1,101 @@ +@import 'variables/breakpoints'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; +@import 'mixins/ie11'; +@import 'mixins/typography'; + +.start { + &__header { + position: relative; + width: 100%; + margin: $af__gutter-goliath 0; + } + + &__heading { + position: absolute; + margin: 0; + bottom: $af__gutter-xxl; + left: -$af__gutter-m; + background-color: $af__color-primary; + color: $af__color-text-light; + padding: $af__gutter-m $af__gutter-xxl; + } + + &__intro { + max-width: 700px; + } + + &__subheading { + font-size: $af__font-size-h1 !important; + margin: $af__gutter-xxl 0 !important; + @include dafa__typography-ornament; + } + + &__background-image { + width: 100%; + height: 200px; + object-fit: cover; + object-position: center 33%; + + @media (min-width: $af__breakpoint-m) { + height: 250px; + } + + @media (min-width: $af__breakpoint-l) { + height: 290px; + } + + @media (min-width: $af__breakpoint-xl) { + height: 320px; + } + } + + &__cta-wrapper { + background-color: $af__color-background-alt-tertiary; + margin: $af__gutter-xxl 0; + padding: $af__gutter-xxl; + } + + &__cta { + display: flex; + gap: $af__gutter-xl; + } + + &__puff { + width: calc(100% / 3); + + @include ie11 { + &:not(:first-child) { + margin-left: $af__gutter-xl; + } + } + } + + &__footer { + margin-top: $af__gutter-goliath; + background-color: $af__color-background-light-gray; + padding: $af__gutter-xxl 0 $af__gutter-goliath; + } + + &__footer-heading { + margin-top: 0 !important; + margin-bottom: $af__gutter-l !important; + } + + &__card-wrapper { + display: flex; + align-content: stretch; + gap: $af__gutter-xxl; + } + + &__card { + max-width: 400px; + flex-basis: 100%; + } + + &__card-link { + display: inline-block; + margin-top: $af__gutter-l; + } +} diff --git a/apps/dafa-web/src/app/pages/start/start.component.spec.ts b/apps/dafa-web/src/app/pages/start/start.component.spec.ts new file mode 100644 index 0000000..19ff144 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { StartComponent } from './start.component'; + +describe('StartComponent', () => { + let component: StartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [StartComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/pages/start/start.component.ts b/apps/dafa-web/src/app/pages/start/start.component.ts new file mode 100644 index 0000000..39f1c3c --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'dafa-start', + templateUrl: './start.component.html', + styleUrls: ['./start.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class StartComponent { + constructor() {} +} diff --git a/apps/dafa-web/src/app/pages/start/start.module.ts b/apps/dafa-web/src/app/pages/start/start.module.ts new file mode 100644 index 0000000..2275f2e --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.module.ts @@ -0,0 +1,11 @@ +import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { StartComponent } from './start.component'; + +@NgModule({ + declarations: [StartComponent], + imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule], +}) +export class StartModule {} diff --git a/apps/dafa-web/src/app/services/.gitkeep b/apps/dafa-web/src/app/services/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/shared/components/.gitkeep b/apps/dafa-web/src/app/shared/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/utils/.gitkeep b/apps/dafa-web/src/app/utils/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/assets/favicon.png b/apps/dafa-web/src/assets/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..3cd2e98b02a3a4938203016f87e8b4cbfe8ab21c GIT binary patch literal 1013 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 literal 0 HcmV?d00001 diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg new file mode 100644 index 0000000..ab684c2 --- /dev/null +++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png new file mode 100644 index 0000000000000000000000000000000000000000..8b2614822a6d847a4517d6a83e6282e4f2110ed9 GIT binary patch literal 4887 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 JPDHLkV1fvmC9ePg literal 0 HcmV?d00001 diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg new file mode 100644 index 0000000..3fec471 --- /dev/null +++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/dafa-web/src/favicon.ico b/apps/dafa-web/src/favicon.ico deleted file mode 100644 index 317ebcb2336e0833a22dddf0ab287849f26fda57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 - DafaWeb + FA Mina Sidor - + - + diff --git a/apps/dafa-web/src/styles.scss b/apps/dafa-web/src/styles.scss deleted file mode 100644 index 90d4ee0..0000000 --- a/apps/dafa-web/src/styles.scss +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/apps/dafa-web/src/styles/functions/_u.scss b/apps/dafa-web/src/styles/functions/_u.scss new file mode 100644 index 0000000..b441394 --- /dev/null +++ b/apps/dafa-web/src/styles/functions/_u.scss @@ -0,0 +1 @@ +@import '~@af/sass/v2/layout/functions/u'; diff --git a/apps/dafa-web/src/styles/mixins/_a11y.scss b/apps/dafa-web/src/styles/mixins/_a11y.scss new file mode 100644 index 0000000..df4a14f --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_a11y.scss @@ -0,0 +1,5 @@ +@import '~@af/sass/v2/a11y/mixins/a11y__sr-only'; + +@mixin af__a11y-sr-only { + @include a11y__sr-only; +} diff --git a/apps/dafa-web/src/styles/mixins/_button.scss b/apps/dafa-web/src/styles/mixins/_button.scss new file mode 100644 index 0000000..9118568 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_button.scss @@ -0,0 +1,49 @@ +@import 'variables/colors'; +@import 'variables/gutters'; + +@mixin dafa__base-button { + position: relative; + border-width: 0; + background-color: transparent; + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + cursor: pointer; + font-size: 0.875rem; + padding: $af__gutter-xs $af__gutter-m; +} + +@mixin dafa__link-as-button { + text-decoration: none !important; // Needs important to override style from default anchor tag. + + &:hover { + text-decoration: none !important; // Needs important to override style from default anchor tag. + } +} + +@mixin dafa__white-button-with-border { + @include dafa__base-button; + background-color: $af__color-background-white; + color: $af__color-primary !important; // Needs important to override style from default anchor tag. + border: 1px solid $af__color-primary; + border-radius: 5px; + + &:hover { + background-color: #f1f8fe; + color: $af__color-primary !important; // Needs important to override style from default anchor tag. + } +} + +@mixin dafa__button-as-link($dark: false) { + background-color: transparent; + border-width: 0; + padding: 0; + margin: 0; + color: if($dark, $dafa__color-link-light, $af__color-link); + + &:hover { + color: if($dark, $dafa__color-link-light-active, $af__color-link-active); + text-decoration: underline; + } +} diff --git a/apps/dafa-web/src/styles/mixins/_flex.scss b/apps/dafa-web/src/styles/mixins/_flex.scss new file mode 100644 index 0000000..22fd661 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_flex.scss @@ -0,0 +1,5 @@ +@mixin dafa__flex-center { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/apps/dafa-web/src/styles/mixins/_form.scss b/apps/dafa-web/src/styles/mixins/_form.scss new file mode 100644 index 0000000..ed07470 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_form.scss @@ -0,0 +1,65 @@ +@import '~@af/sass/v2/form/mixins/form__checkbox'; +@import '~@af/sass/v2/form/mixins/form__checkbox-check'; +@import '~@af/sass/v2/form/mixins/form__checkbox-base'; +@import '~@af/sass/v2/form/mixins/form__form-field--focus'; +@import '~@af/sass/v2/form/mixins/form__form-field--disabled'; +@import '~@af/sass/v2/form/mixins/form__select-input'; +@import '~@af/sass/v2/form/mixins/form__select-arrow'; +@import '~@af/sass/v2/form/mixins/form__radiobutton'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; + +@mixin af__form-checkbox($secondary: false, $disabled: false) { + @include form__checkbox($secondary, $disabled); +} + +@mixin af__form-checkbox-check($disabled: false) { + @include form__checkbox-check($disabled); +} + +@mixin af__form-checkbox-base { + @include form__checkbox-base; +} + +@mixin af__form-field-focus { + @include form__form-field--focus; +} + +@mixin af__form-field-disabled { + @include form__form-field--disabled; +} + +@mixin af__form-select-input { + @include form__select-input; +} + +@mixin af__form-select-arrow($disabled: false) { + @include form__select-arrow($disabled); +} + +@mixin af__form-radiobutton { + @include form__radiobutton; +} + +@mixin dafa__fieldset-reset($legendAsHeading: true) { + margin: 0; + padding: 0; + border-width: 0; + + legend { + position: relative; + text-align: left; + + @if $legendAsHeading { + width: 100%; + display: flex; + align-items: center; + padding-bottom: $af__gutter-xs; + margin: 0; + font-weight: $af__font-weight-bold; + font-size: $af__font-size-s; + border-bottom: 1px solid $af__color-border-light; + } + } +} diff --git a/apps/dafa-web/src/styles/mixins/_gutter.scss b/apps/dafa-web/src/styles/mixins/_gutter.scss new file mode 100644 index 0000000..b2a3179 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_gutter.scss @@ -0,0 +1,8 @@ +@import 'variables/gutters'; + +@mixin dafa__option-gutter-reset { + line-height: unset; + height: auto; + padding-top: $af__gutter-xs; + padding-bottom: $af__gutter-xs; +} diff --git a/apps/dafa-web/src/styles/mixins/_icon.scss b/apps/dafa-web/src/styles/mixins/_icon.scss new file mode 100644 index 0000000..540ccd8 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_icon.scss @@ -0,0 +1,7 @@ +@mixin dafa__digi-ng-icon($width: 1em) { + display: inline-flex; + justify-content: center; + align-items: center; + width: $width; + max-height: $width; +} diff --git a/apps/dafa-web/src/styles/mixins/_link.scss b/apps/dafa-web/src/styles/mixins/_link.scss new file mode 100644 index 0000000..db6c540 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_link.scss @@ -0,0 +1,20 @@ +@import 'variables/colors'; + +@mixin dafa__link-style($with-hover: true) { + padding: 0; + cursor: pointer; + color: $af__color-link; + text-align: left; + white-space: normal; + + @if $with-hover { + &:hover { + @include dafa__link-hover-style(); + } + } +} + +@mixin dafa__link-hover-style { + color: $af__color-link-active; + text-decoration: underline; +} diff --git a/apps/dafa-web/src/styles/mixins/_list.scss b/apps/dafa-web/src/styles/mixins/_list.scss new file mode 100644 index 0000000..f4f299b --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_list.scss @@ -0,0 +1,5 @@ +@mixin dafa__reset-list { + list-style: none; + padding: 0; + margin: 0; +} diff --git a/apps/dafa-web/src/styles/mixins/_ribbon.scss b/apps/dafa-web/src/styles/mixins/_ribbon.scss new file mode 100644 index 0000000..921547f --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_ribbon.scss @@ -0,0 +1,7 @@ +$ribbon-position: 0.5rem; + +@mixin dafa__ribbon-wrapper { + position: absolute; + top: $ribbon-position * 2; + right: -$ribbon-position; +} diff --git a/apps/dafa-web/src/styles/mixins/_typography.scss b/apps/dafa-web/src/styles/mixins/_typography.scss new file mode 100644 index 0000000..e9c3b61 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_typography.scss @@ -0,0 +1,23 @@ +@import '~@af/sass/v2/typography/mixins/typography__text'; +@import 'functions/u'; + +@mixin af__typography-text { + @include typography__text($compressed: true, $unthemable: true); +} + +@mixin dafa__typography-ornament { + &::after { + content: ''; + display: block; + margin-top: u(6); + height: u(1.4); + max-width: u(38); + background: $ui__color--primary; + + @media (min-width: $layout__breakpoint--l) { + height: u(2); + width: 100%; + max-width: u(44); + } + } +} diff --git a/apps/dafa-web/src/styles/mixins/ie11.scss b/apps/dafa-web/src/styles/mixins/ie11.scss new file mode 100644 index 0000000..e1c07a5 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/ie11.scss @@ -0,0 +1,5 @@ +@mixin ie11 { + @media all and (-ms-high-contrast: none) { + @content; + } +} diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss new file mode 100644 index 0000000..74ddf49 --- /dev/null +++ b/apps/dafa-web/src/styles/styles.scss @@ -0,0 +1,76 @@ +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; +@import 'mixins/a11y'; +@import 'mixins/button'; +@import 'mixins/icon'; + +* { + font-family: $af__font-family; + box-sizing: border-box; + + ::before, + ::after { + box-sizing: border-box; + } +} + +body { + margin: 0; + font-weight: $af__font-weight-normal; +} + +button { + @include dafa__base-button; +} + +strong { + font-weight: $af__font-weight-semi-bold; +} + +.af__a11y-sr-only { + @include af__a11y-sr-only; +} + +.dafa { + &__digi-ng-icon { + @include dafa__digi-ng-icon; + + &--right-margin { + margin-right: $af__gutter-s; + } + &--left-margin { + margin-left: $af__gutter-m; + } + } + + &__highlight-characters { + background-color: transparent; + font-weight: $af__font-weight-bold; + } + + &__link { + display: inline-flex; + + &--with-icon { + gap: $af__gutter-xs; + } + } +} + +// @af/digi-ng overrides +.digi-ng-typography-icon-text__icon { + display: inline-flex; +} + +@media print { + * { + color: $af__color-text-dark !important; + } + + .dafa { + &__hide-on-print { + display: none !important; + } + } +} diff --git a/apps/dafa-web/src/styles/variables/_border-radius.scss b/apps/dafa-web/src/styles/variables/_border-radius.scss new file mode 100644 index 0000000..48a1e71 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_border-radius.scss @@ -0,0 +1,3 @@ +@import '~@af/sass/v2/ui/variables/ui__borders'; + +$af__border-radius: $ui__border-radius--rounded; diff --git a/apps/dafa-web/src/styles/variables/_box-shadow.scss b/apps/dafa-web/src/styles/variables/_box-shadow.scss new file mode 100644 index 0000000..9683e01 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_box-shadow.scss @@ -0,0 +1,5 @@ +@import '~@af/sass/v2/ui/variables/ui__variables'; +@import '~@af/sass/v2/ui/variables/ui__shadows'; + +$af__box-shadow: $ui__box-shadow--elevated; +$af__box-shadow-interactive-focus-outline: $ui__shadow--interactive-focus-outline; diff --git a/apps/dafa-web/src/styles/variables/_breakpoints.scss b/apps/dafa-web/src/styles/variables/_breakpoints.scss new file mode 100644 index 0000000..588f624 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_breakpoints.scss @@ -0,0 +1,13 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; + +// AF variables +$af__breakpoint-s: $layout__breakpoint--s; // 576px +$af__breakpoint-s-below: $af__breakpoint-s - 1; // 575px +$af__breakpoint-m: $layout__breakpoint--m; // 768px +$af__breakpoint-m-below: $af__breakpoint-m - 1; // 767px +$af__breakpoint-l: $layout__breakpoint--l; // 992px +$af__breakpoint-l-below: $af__breakpoint-l - 1; // 991px +$af__breakpoint-xl: $layout__breakpoint--xl; // 1200px +$af__breakpoint-xl-below: $af__breakpoint-xl - 1; // 1199px + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_colors.scss b/apps/dafa-web/src/styles/variables/_colors.scss new file mode 100644 index 0000000..01ede79 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_colors.scss @@ -0,0 +1,71 @@ +@import '~@af/sass/v2/ui/variables/ui__colors'; +@import '~@af/sass/v2/typography/variables/typography__variables'; + +// AF variables +$af__color-primary: $ui__color--primary; +$af__color-secondary: $ui__color--secondary; +$af__color-complementary: $ui__color--complementary; +$af__color-complementary-alt: $ui__color--complementary-alt; +$af__color-interactive: $ui__color--interactive; +$af__color--background-alt-secondary: $ui__color--background-alt-secondary; + +$af__color-info: $ui__color--informative; +$af__color-success: $ui__color--success; +$af__color-danger: $ui__color--danger; +$af__color-warning: $ui__color--warning; + +$af__color-approved: $ui__color--approved; +$af__color-action-needed: $ui__color--action-needed; +$af__color-denied: $ui__color--denied; +$af__color-missing: $ui__color--missing; + +$af__color-text-light: $typography__color--text-light; +$af__color-text-dimmed: $typography__color--text-dimmed; +$af__color-text-dimmed-alt: $typography__color--text-dimmed-alt; +$af__color-text: $typography__color--text; +$af__color-text-dark: $typography__color--text-dark; +$af__color-text-disabled: $typography__color--text-disabled; + +$af__color-link: $typography__color--link; +$af__color-link-active: $typography__color--link-active; +$af__color-link-visited: $typography__color--link-visited; + +$af__color-background-white: $ui__color--background; +$af__color-background-light-gray: $ui__color--background-alt; +$af__color-background-gray: $ui__color--background-alt-secondary; +$af__color-background-dark-gray: $ui__color--background-off; +$af__color-background-dark: $ui__color--background-dark; +$af__color-background-alt-tertiary: $ui__color--background-alt-tertiary; + +$af__color-border: $ui__color--border; +$af__color-border-dark: $ui__color--border-dark; +$af__color-border-light: $ui__color--border-light; +$af__color-separator: $ui__color--separator; +$af__color-background-warning: $ui__color--yellow-light; + +$af__color-disabled: $ui__color--disabled; + +// Local variables +$dafa__color-pink: #d43372; +$dafa__color-primary-20: #ccccde; +$dafa__color-link-light: $af__color-text-light; +$dafa__color-link-light-active: darken($af__color-text-light, 10%); + +$dafa__color-fub: #666666; +$dafa__color-fub-dark: darken($dafa__color-fub, 30%); +$dafa__color-fub-text: $af__color-text-light; +$dafa__color-aub: #1616b2; +$dafa__color-aub-dark: darken($dafa__color-aub, 30%); +$dafa__color-aub-text: $af__color-text-light; +$dafa__color-aub-test: #058470; +$dafa__color-aub-test-dark: darken($dafa__color-aub-test, 30%); +$dafa__color-aub-test-text: $af__color-text-light; +$dafa__color-folkhogskola: #d43372; +$dafa__color-folkhogskola-dark: darken($dafa__color-folkhogskola, 30%); +$dafa__color-folkhogskola-text: $af__color-text-light; +$dafa__color-rek: #fddc41; +$dafa__color-rek-dark: darken($dafa__color-rek, 30%); +$dafa__color-rek-text: $af__color-text-dark; +$dafa__color-anstalt: #e21c50; +$dafa__color-anstalt-dark: darken($dafa__color-anstalt, 30%); +$dafa__color-anstalt-text: $af__color-text-light; diff --git a/apps/dafa-web/src/styles/variables/_containers.scss b/apps/dafa-web/src/styles/variables/_containers.scss new file mode 100644 index 0000000..3ddab1c --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_containers.scss @@ -0,0 +1,10 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; + +// AF variables +$af__container-width-xs: $layout__container--width-xs; +$af__container-width-s: $layout__container--width-s; +$af__container-width-m: $layout__container--width-m; +$af__container-width-l: $layout__container--width-l; +$af__container-width-xl: $layout__container--width-xl; + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_form.scss b/apps/dafa-web/src/styles/variables/_form.scss new file mode 100644 index 0000000..beacd76 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_form.scss @@ -0,0 +1,9 @@ +@import '~@af/sass/v2/ui/variables/ui__variables'; + +// AF variables +$af__form-input-height: $ui__input-height; +$af__form-input-height-s: $ui__input-height--s; +$af__form-input-height-l: $ui__input-height--l; +$af__form-input-border: $ui__input-border; // 1px solid $ui__color--border + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_gutters.scss b/apps/dafa-web/src/styles/variables/_gutters.scss new file mode 100644 index 0000000..1177564 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_gutters.scss @@ -0,0 +1,14 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; +@import '~@af/sass/v2/layout/functions/u'; + +// AF variables +$af__gutter-goliath: u(15); // 75px +$af__gutter-xxl: u(7); // 35px +$af__gutter-xl: u(5); // 25px +$af__gutter-l: $layout__gutter--l; // 20px +$af__gutter-m: $layout__gutter; // 15px +$af__gutter-s: $layout__gutter--s; // 10px +$af__gutter-xs: $layout__gutter--xs; // 5px +$af__gutter-xxs: $layout__gutter--xxs; // 2.5px + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_shadows.scss b/apps/dafa-web/src/styles/variables/_shadows.scss new file mode 100644 index 0000000..3eeb82c --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_shadows.scss @@ -0,0 +1,4 @@ +@import '~@af/sass/v2/ui/variables/ui__shadows'; + +// AF variables +$af__shadow-base: $ui__shadow--shadow-base-outline; diff --git a/apps/dafa-web/src/styles/variables/_typography.scss b/apps/dafa-web/src/styles/variables/_typography.scss new file mode 100644 index 0000000..07833f1 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_typography.scss @@ -0,0 +1,28 @@ +@import '~@af/sass/v2/typography/variables/typography__variables'; + +// AF variables +$af__font-weight-normal: $typography__font-weight; // 400 +$af__font-weight-semi-bold: $typography__font-weight--semibold; // 600 +$af__font-weight-bold: $typography__font-weight--bold; // 700 + +$af__font-family: $typography__font-family; // 'Open sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +$af__font-size: $typography__font-size; // 1rem +$af__font-size-xs: $typography__font-size--xs; // .875rem +$af__font-size-s: $typography__font-size--s; // .9375rem +$af__font-size-m: $typography__font-size--m; // 1.25rem +$af__font-size-heading: $typography__font-size--heading; // 1.125rem +$af__font-size-h1: $typography__font-size--h1; // 1.75rem +$af__font-size-h2: $typography__font-size--h2; // 1.375rem +$af__font-size-h3: $typography__font-size--h3; // 1.125rem +$af__font-size-desktop: $typography__font-size-desktop; // 1.125rem +$af__font-size-desktop-xs: $typography__font-size-desktop--xs; // .9375rem +$af__font-size-desktop-s: $typography__font-size-desktop--s; // 1rem +$af__font-size-desktop-heading: $typography__font-size-desktop--heading; // 1.375rem +$af__font-size-desktop-h1: $typography__font-size-desktop--h1; // 2.5rem +$af__font-size-desktop-h2: $typography__font-size-desktop--h2; // 1.75rem +$af__font-size-desktop-h3: $typography__font-size-desktop--h3; // 1.375rem +$af__font-size-desktop-compressed: $typography__font-size-desktop--compressed; // 1rem +$af__font-size-desktop-h1-compressed: $typography__font-size-desktop--h1-compressed; // 1.75rem + +// Local variables +$dafa__font-size-h1: 1.5rem; diff --git a/package-lock.json b/package-lock.json index 8a57945..211b162 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@af/digi-ng": "^11.3.4", + "@af/sass": "^10.2.4", "@angular/animations": "^11.2.0", "@angular/common": "^11.2.0", "@angular/compiler": "^11.2.0", @@ -107,6 +108,12 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "license": "0BSD" }, + "node_modules/@af/sass": { + "version": "10.2.4", + "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz", + "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==", + "license": "MIT" + }, "node_modules/@angular-devkit/architect": { "version": "0.1100.7", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz", @@ -25095,6 +25102,11 @@ } } }, + "@af/sass": { + "version": "10.2.4", + "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz", + "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==" + }, "@angular-devkit/architect": { "version": "0.1100.7", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz", diff --git a/package.json b/package.json index 1c14017..f8bda9b 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "private": true, "dependencies": { "@af/digi-ng": "^11.3.4", + "@af/sass": "^10.2.4", "@angular/animations": "^11.2.0", "@angular/common": "^11.2.0", "@angular/compiler": "^11.2.0", diff --git a/tsconfig.base.json b/tsconfig.base.json index 11253ac..698fe87 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -14,7 +14,17 @@ "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".", - "paths": {} + "paths": { + "@dafa-assets/*": ["apps/dafa-web/src/assets/*"], + "@dafa-shared/*": ["apps/dafa-web/src/app/shared/*"], + "@dafa-models/*": ["apps/dafa-web/src/app/data/models/*"], + "@dafa-constants/*": ["apps/dafa-web/src/app/data/constants/*"], + "@dafa-directives/*": ["apps/dafa-web/src/app/directives/*"], + "@dafa-enums/*": ["apps/dafa-web/src/app/data/enums/*"], + "@dafa-services/*": ["apps/dafa-web/src/app/services/*"], + "@dafa-utils/*": ["apps/dafa-web/src/app/utils/*"], + "@dafa-environment": ["apps/dafa-web/src/environments/environment"] + } }, "exclude": ["node_modules", "tmp"] } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..ffcbb94 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./tsconfig.base.json" +}