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.
2021-12-07 10:28:14 +01:00
parent 551f9e2f91
commit 706c48828d
13 changed files with 236 additions and 17 deletions
--- a/libs/ui/.eslintrc.json
+++ b/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": {}
+    }
  ]
 }
--- a/libs/ui/src/expansion-panel/expansion-panel.component.html
+++ b/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>
--- a/libs/ui/src/expansion-panel/expansion-panel.component.scss
+++ b/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;
+    }
+  }
+}
--- a/libs/ui/src/expansion-panel/expansion-panel.component.spec.ts
+++ b/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();
+  });
+});
--- a/libs/ui/src/expansion-panel/expansion-panel.component.ts
+++ b/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();
+    }
+  }
+}
--- a/libs/ui/src/expansion-panel/expansion-panel.module.ts
+++ b/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 {}
--- a/libs/ui/src/icon/icon-type.enum.ts
+++ b/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',
--- a/libs/ui/src/icon/icon.component.html
+++ b/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>