feature(digi-migrering): Utfasning av digi-ng-expansion-panel till ui-expansion-panel. (TV-851)

Merge in TEA/mina-sidor-fa-web from feature/TV-851-digi-ng-layout-expansion-panel to develop

Squashed commit of the following:

commit 10b046bf603e1c5a79dd5c1129b2cdcddfe09424
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Dec 7 09:18:35 2021 +0100

    Fix PR comments

commit 3ca8e27699887c05d225b78c4ebad9c0c60f97f0
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Dec 6 13:27:45 2021 +0100

    correct PR comments and add better lintint to UI

commit 8d54902fcdad4503e9168a249ca47e39ab207f38
Merge: 1b202e6a 938014ab
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Thu Dec 2 10:51:21 2021 +0100

    Merge branch 'develop' into feature/TV-851-digi-ng-layout-expansion-panel

commit 1b202e6a9dad961d45e1d0bb1dae766b2a927564
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Dec 1 14:56:36 2021 +0100

    Utfasning av digi-ng-expansion-panel till ui-expansion-panel.

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html

@@ -81,10 +81,9 @@
                   class="employee-card__utforandeverksamhet-card"
                 >
                   <p *ngIf="utforandeVerksamhet.allaAdresser">Alla adresser inom utförande verksamheten valda.</p>
-
+                  <ui-expansion-panel
-                  <digi-ng-layout-expansion-panel
                     *ngIf="!utforandeVerksamhet.allaAdresser && utforandeVerksamhet.adresser.length > 0"
-                    [afExpanded]="isAccordionExpanded(utforandeVerksamhet.id)"
+                    [uiExpanded]="isAccordionExpanded(utforandeVerksamhet.id)"
                     (click)="toggleAccordionExpanded(utforandeVerksamhet.id)"
                   >
                     <span data-slot-trigger>
@@ -97,7 +96,7 @@
                         {{address.name}}{{last ? '' : ','}}
                       </li>
                     </ul>
-                  </digi-ng-layout-expansion-panel>
+                  </ui-expansion-panel>
                 </digi-info-card>
               </li>
             </ul>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -10,6 +9,7 @@ import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { EmployeeCardComponent } from './employee-card.component';
+import { UiExpansionPanelModule } from '@ui/expansion-panel/expansion-panel.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,11 +19,11 @@ import { EmployeeCardComponent } from './employee-card.component';
     RouterModule.forChild([{ path: '', component: EmployeeCardComponent }]),
     LayoutModule,
     UiSkeletonModule,
-    DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
     HideTextModule,
     UiBackLinkModule,
     UiLinkButtonModule,
+    UiExpansionPanelModule,
     RolesDialogModule,
   ],
 })

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html

@@ -11,11 +11,11 @@
         <p>{{ workExperience.description }}</p>
       </li>
     </ul>
-    <digi-ng-layout-expansion-panel
+    <ui-expansion-panel
-      class="deltagare-tab-experiences__accordion"
-      [afExpanded]="accordionExpanded"
-      (click)="toggleAccordionExpanded()"
       *ngIf="hiddenWorkExperiences(workExperiences)?.length"
+      class="deltagare-tab-experiences__accordion"
+      [uiExpanded]="accordionExpanded"
+      (click)="toggleAccordionExpanded()"
     >
       <span class="deltagare-tab-experiences__accordion-trigger" data-slot-trigger
         >{{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare</span
@@ -29,7 +29,7 @@
           <p>{{ workExperience.description }}</p>
         </li>
       </ul>
-    </digi-ng-layout-expansion-panel>
+    </ui-expansion-panel>
   </div>
   <div class="deltagare-tab-experiences__tab-column">
     <h2>Utbildning</h2>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -12,6 +11,7 @@ import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
+import { UiExpansionPanelModule } from '@ui/expansion-panel/expansion-panel.module';
 import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component';
 import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component';
 import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
@@ -40,12 +40,12 @@ import { UiPopoverModule } from '@ui/popover/ui-popover.module';
     HideTextModule,
     UiLoaderModule,
     HandledarePickerFormModule,
-    DigiNgLayoutExpansionPanelModule,
     DigiNgPopoverModule,
     UiPopoverModule,
     UiSkeletonModule,
     UiIconModule,
     UiLinkButtonModule,
+    UiExpansionPanelModule,
   ],
   providers: [DeltagareCardService],
   exports: [DeltagareCardComponent],

libs/ui/.eslintrc.json

@@ -4,18 +4,49 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "excludedFiles": ["*.spec.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": { "project": ["apps/mina-sidor-fa/tsconfig.*?.json"] },
       "rules": {
+        "max-len": [
+          1,
+          140,
+          2,
+          {
+            "ignorePattern": "^import\\s.+\\sfrom\\s.+;$",
+            "ignoreUrls": true,
+            "ignoreStrings": true,
+            "ignoreRegExpLiterals": true
+          }
+        ],
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "mina-sidor-fa-web", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "ui",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "mina-sidor-fa-web", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "ui",
+            "style": "kebab-case"
+          }
         ]
       }
     },
-    { "files": ["*.html"], "extends": ["plugin:@nrwl/nx/angular-template"], "rules": {} }
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
   ]
 }

libs/ui/src/expansion-panel/expansion-panel.component.html

@@ -0,0 +1,25 @@
+<div [ngClass]="cssModifiers" class="ui-expansion-panel">
+  <div class="ui-expansion-panel__header">
+    <button
+      (click)="clickTriggerHandler($event)"
+      [attr.aria-controls]="uiContentId"
+      [attr.aria-expanded]="isExpanded$ | async"
+      [id]="uiTriggerId"
+      class="ui-expansion-panel__toggle-button"
+      type="button"
+    >
+      <ng-content select="[data-slot-trigger]"></ng-content>
+
+      <ui-icon
+        class="ui-expansion-panel__icon"
+        [ngClass]="cssModifiersIcon"
+        [uiType]="UiIconType.ARROW_DOWN"
+        [attr.aria-hidden]="true"
+        [uiSize]="UiIconSize.M"
+      ></ui-icon>
+    </button>
+  </div>
+  <div class="ui-expansion-panel__container" role="region" [attr.aria-labelledby]="uiTriggerId" [id]="uiContentId">
+    <ng-content></ng-content>
+  </div>
+</div>

libs/ui/src/expansion-panel/expansion-panel.component.scss

@@ -0,0 +1,55 @@
+@import '~@digi/styles/src/ui/variables/ui__variables';
+
+.ui-expansion-panel {
+  &__toggle-button {
+    border: none;
+    margin: 0;
+    overflow: visible;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    font: inherit;
+
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--digi--ui--color--focus);
+    padding: var(--digi--layout--padding--10) var(--digi--layout--padding--20) var(--digi--layout--padding--10) 0;
+
+    &:focus {
+      box-shadow: 0 0 0 0.12rem $digi--ui--color--blue-60;
+    }
+
+    .ui-expansion-panel--secondary & {
+      box-sizing: border-box;
+      background-color: var(--digi--ui--color--background--symbol);
+      padding: var(--digi--layout--gutter--s);
+      border-bottom: none;
+    }
+  }
+
+  &__icon {
+    transition: transform 0.2s;
+    color: var(--digi--ui--color--focus);
+
+    &--expanded {
+      transform: rotate(180deg);
+    }
+
+    .ui-expansion-panel--secondary & {
+      color: var(--digi--ui--color--background--overlay--opaque);
+    }
+  }
+
+  &__container {
+    .ui-expansion-panel--collapsed & {
+      display: none;
+    }
+
+    .ui-expansion-panel--secondary.ui-expansion-panel--expanded & {
+      border: 2px solid var(--digi--ui--color--background--symbol);
+      border-top: none;
+    }
+  }
+}

libs/ui/src/expansion-panel/expansion-panel.component.spec.ts

@@ -0,0 +1,19 @@
+import { ExpansionPanelComponent } from './expansion-panel.component';
+
+// tslint:disable-next-line: max-classes-per-file
+export class MockChangeDetectorRef {
+  markForCheck = jest.fn();
+  detach = jest.fn();
+  detectChanges = jest.fn();
+  reattach = jest.fn();
+  checkNoChanges = jest.fn();
+}
+
+describe('ExpansionPanelComponent', () => {
+  let component: ExpansionPanelComponent;
+
+  it('should create', () => {
+    component = new ExpansionPanelComponent(new MockChangeDetectorRef());
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/expansion-panel/expansion-panel.component.ts

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { skip } from 'rxjs/operators';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
+import { uuid } from '@utils/uuid.util';
+
+@Component({
+  selector: 'ui-expansion-panel',
+  templateUrl: './expansion-panel.component.html',
+  styleUrls: ['./expansion-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExpansionPanelComponent implements OnInit, OnDestroy {
+  @Input() uiContentId: string = 'ui-expansion-panel--container__' + uuid();
+  @Input() uiTriggerId: string = 'ui-expansion-panel--toggle-button__' + uuid();
+  @Input() uiSecondary = false;
+  @Output() uiExpand = new EventEmitter<void>();
+  @Output() uiCollapse = new EventEmitter<void>();
+  @Output() uiClick = new EventEmitter<MouseEvent>();
+
+  isExpanded$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  UiIconType = UiIconType;
+  UiIconSize = UiIconSize;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  @Input()
+  set uiExpanded(expanded: boolean) {
+    this.isExpanded$.next(expanded);
+  }
+
+  ngOnInit(): void {
+    this.isExpanded$.pipe(skip(1)).subscribe(val => {
+      this.changeDetectorRef.markForCheck();
+      this.togglePanelEventHandler(val);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.isExpanded$.unsubscribe();
+  }
+
+  get cssModifiers(): { [cssClass: string]: boolean } {
+    return {
+      'ui-expansion-panel--collapsed': !this.isExpanded$.value,
+      'ui-expansion-panel--secondary': this.uiSecondary,
+    };
+  }
+
+  get cssModifiersIcon(): { [cssClass: string]: boolean } {
+    return { 'ui-expansion-panel__icon--expanded': this.isExpanded$.value };
+  }
+
+  clickTriggerHandler(mouseEvent: MouseEvent): void {
+    this.uiClick.emit(mouseEvent);
+    this.isExpanded$.next(!this.isExpanded$.value);
+  }
+
+  togglePanelEventHandler(isExpanded: boolean): void {
+    if (isExpanded) {
+      this.uiExpand.emit();
+    } else {
+      this.uiCollapse.emit();
+    }
+  }
+}

libs/ui/src/expansion-panel/expansion-panel.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ExpansionPanelComponent } from './expansion-panel.component';
+import { UiIconModule } from '@ui/icon/icon.module';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule],
+  declarations: [ExpansionPanelComponent],
+  exports: [ExpansionPanelComponent],
+})
+export class UiExpansionPanelModule {}

libs/ui/src/icon/icon-type.enum.ts

@@ -19,6 +19,7 @@ export enum UiIconType {
   X = 'x',
   ARROW_LEFT = 'arrow-left',
   ARROW_RIGHT = 'arrow-right',
+  ARROW_DOWN = 'arrow-down',
   EYE = 'eye',
   EYESLASH = 'eyeslash',
   INFO_CIRCLE_SOLID = 'info-circle-solid',

libs/ui/src/icon/icon.component.html

@@ -96,6 +96,7 @@
     <digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
     <digi-icon-arrow-left *ngSwitchCase="iconType.ARROW_LEFT" [ngClass]="iconClass"></digi-icon-arrow-left>
     <digi-icon-arrow-right *ngSwitchCase="iconType.ARROW_RIGHT" [ngClass]="iconClass"></digi-icon-arrow-right>
+    <digi-icon-arrow-down *ngSwitchCase="iconType.ARROW_DOWN" [ngClass]="iconClass"></digi-icon-arrow-down>
     <digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
     <digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash>
     <digi-icon-archive *ngSwitchCase="iconType.ARCHIVE" [ngClass]="iconClass"></digi-icon-archive>

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "mina-sidor-fa-web",
       "version": "2.4.0",
       "hasInstallScript": true,
       "license": "MIT",