Story #11852 clean code: improve Design System

ProgrammeVitam · Aug 13, 2024 · ccda13d · ccda13d
1 parent bcd2ce1
commit ccda13d
Show file tree

Hide file tree

Showing 17 changed files with 616 additions and 409 deletions.
diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.html b/ui/ui-frontend/projects/design-system/src/app/app.component.html
@@ -1,22 +1,53 @@
-<mat-sidenav-container>
+<mat-sidenav-container autosize>
   <mat-sidenav mode="side" opened fixedInViewport>
     <mat-list>
       <mat-list-item class="d-flex justify-content-center">
         <vitamui-common-select-language></vitamui-common-select-language>
       </mat-list-item>
-      <mat-list-item class="mt-3" routerLink="/arrays">Arrays</mat-list-item>
-      <mat-list-item routerLink="/buttons">Buttons</mat-list-item>
-      <mat-list-item routerLink="/inputs">Inputs</mat-list-item>
-      <mat-list-item routerLink="/breadcrumbs">Breadcrumb</mat-list-item>
-      <mat-list-item routerLink="/progress-bar">Progress Bar</mat-list-item>
-      <mat-list-item routerLink="/tooltip">Tooltip</mat-list-item>
-      <mat-list-item routerLink="/miscellaneous">Miscellaneous</mat-list-item>
-      <mat-list-item routerLink="/typography">Typography</mat-list-item>
-      <mat-list-item routerLink="/colors">Colors</mat-list-item>
-      <mat-list-item routerLink="/icons">Icons</mat-list-item>
-      <mat-list-item routerLink="/elevations">Elevations</mat-list-item>
-      <mat-list-item routerLink="/translation">Translations</mat-list-item>
-      <mat-list-item routerLink=""><i class="material-icons">help</i></mat-list-item>
+      <mat-expansion-panel class="mt-3" routerLink="/arrays" routerLinkActive="active">
+        <mat-expansion-panel-header>Arrays</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/buttons" routerLinkActive="active">
+        <mat-expansion-panel-header>Buttons</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/inputs" routerLinkActive="active">
+        <mat-expansion-panel-header>Inputs</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/breadcrumbs" routerLinkActive="active">
+        <mat-expansion-panel-header>Breadcrumb</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/progress-bar" routerLinkActive="active">
+        <mat-expansion-panel-header>Progress Bar</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/tooltip" routerLinkActive="active">
+        <mat-expansion-panel-header>Tooltip</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/miscellaneous" routerLinkActive="active" [expanded]="isActive('/miscellaneous')">
+        <mat-expansion-panel-header>Miscellaneous</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/typography" routerLinkActive="active">
+        <mat-expansion-panel-header>Typography</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/colors" routerLinkActive="active">
+        <mat-expansion-panel-header>Colors</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/icons" routerLinkActive="active">
+        <mat-expansion-panel-header>Icons</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/elevations" routerLinkActive="active">
+        <mat-expansion-panel-header>Elevations</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/translation" routerLinkActive="active">
+        <mat-expansion-panel-header>Translations</mat-expansion-panel-header>
+      </mat-expansion-panel>
+      <mat-expansion-panel
+        routerLink=""
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [expanded]="isActive('/translation')"
+      >
+        <mat-expansion-panel-header><i class="material-icons">help</i></mat-expansion-panel-header>
+      </mat-expansion-panel>
     </mat-list>
   </mat-sidenav>
   <mat-sidenav-content>

diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.scss b/ui/ui-frontend/projects/design-system/src/app/app.component.scss
@@ -3,29 +3,79 @@
     margin: 3rem 5rem;
   }
 
-  mat-list-item {
-    cursor: pointer;
-    &:focus {
-      color: white;
-      background-color: var(--vitamui-primary);
-      outline: none;
+  .mat-list-base {
+    overflow-y: auto;
+    height: 100%;
+    max-width: 250px;
+  }
+
+  mat-expansion-panel {
+    mat-expansion-panel-header {
+      &.mat-expanded {
+        height: var(--mat-expansion-header-collapsed-state-height);
+      }
+
       &:hover {
-        background-color: var(--vitamui-primary-700);
+        background-color: var(--mat-expansion-header-hover-state-layer-color);
+      }
+
+      ::ng-deep .mat-content {
+        justify-content: center;
+        font-weight: bold;
       }
     }
-  }
 
-  ::ng-deep {
-    .mat-drawer-container {
-      height: 100%;
+    &:focus,
+    &.active {
+      mat-expansion-panel-header {
+        color: white;
+        background-color: var(--vitamui-primary);
+        outline: none;
+
+        ::ng-deep .mat-expansion-indicator::after {
+          color: white;
+        }
+
+        &:hover {
+          background-color: var(--vitamui-primary-700);
+        }
+      }
     }
 
-    .mat-list-item-content {
-      justify-content: center;
+    ::ng-deep .mat-expansion-panel-body {
+      padding: 0;
+      ul {
+        font-size: 80%;
+        list-style: none;
+        padding: 0 0 0 1rem;
+        li a {
+          height: 2rem;
+          padding: 0 1rem;
+          display: inline-block;
+          cursor: pointer;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          line-height: 2rem;
+          width: 100%;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          &:hover {
+            background: var(--mat-expansion-header-hover-state-layer-color);
+          }
+        }
+      }
+      > ul {
+        margin: 0;
+        padding: 0;
+        font-size: 100%;
+      }
     }
+  }
 
-    h4 {
-      margin: 1rem 0;
+  ::ng-deep {
+    .mat-drawer-container {
+      height: 100%;
     }
   }
 }
diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.ts b/ui/ui-frontend/projects/design-system/src/app/app.component.ts
@@ -34,13 +34,81 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ViewChildren } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, merge } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import { MatExpansionPanel } from '@angular/material/expansion';
 
 @Component({
   selector: 'design-system-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   title = 'Design system App';
+
+  @ViewChildren(MatExpansionPanel) expansionPanels: MatExpansionPanel[];
+
+  constructor(
+    private router: Router,
+    translateService: TranslateService,
+  ) {
+    merge(
+      this.router.events.pipe(filter((event) => event instanceof NavigationEnd)),
+      translateService.onDefaultLangChange,
+      translateService.onLangChange,
+    ).subscribe(() => setTimeout(() => this.refreshAnchorMenu()));
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => this.refreshAnchorMenu());
+  }
+
+  isActive(url: string): boolean {
+    return this.router.isActive(url, {
+      paths: 'subset',
+      fragment: 'ignored',
+      queryParams: 'ignored',
+      matrixParams: 'ignored',
+    });
+  }
+
+  private refreshAnchorMenu() {
+    document.querySelectorAll(`mat-expansion-panel:not(.active) .mat-expansion-panel-body`).forEach((el) => (el.innerHTML = ''));
+    const panelBody = document.querySelector(`mat-expansion-panel.active .mat-expansion-panel-body`);
+    if (panelBody) {
+      const headings: HTMLElement[] = Array.from(document.querySelectorAll('h2, h3, h4, h5, h6'));
+
+      const list = headings.map((heading, index) => {
+        const currentDepth = this.computeDepth(heading);
+        const previousDepth = index ? this.computeDepth(headings[index - 1]) : 0;
+
+        return `
+          ${currentDepth > previousDepth ? [...Array(currentDepth - previousDepth).keys()].map(() => `<ul>`).join('') : ''}
+          ${currentDepth < previousDepth ? [...Array(previousDepth - currentDepth).keys()].map(() => `</ul>`).join('') : ''}
+          <li>
+            <a onClick="document.querySelectorAll('h2, h3, h4, h5, h6')[${index}].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'nearest',
+                      });"
+                title="${heading.textContent}"
+            >
+              ${heading.textContent}
+            </a>
+          </li>`;
+      });
+
+      panelBody.innerHTML = `<ul>${list.join('')}</ul>`;
+      this.expansionPanels.forEach((expansionPanel) => {
+        expansionPanel.hideToggle = true;
+        expansionPanel.open();
+      });
+    }
+  }
+
+  private computeDepth(heading: HTMLElement) {
+    return Number.parseInt(heading.tagName.replace(/\D/, '')) - 2;
+  }
 }
diff --git a/ui/ui-frontend/projects/design-system/src/app/app.module.ts b/ui/ui-frontend/projects/design-system/src/app/app.module.ts
@@ -74,6 +74,7 @@ import { TranslationModule } from './components/translation/translation.module';
 import { TypographyModule } from './components/typography/typography.module';
 import { DesignSystemModule } from './design-system/design-system.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 registerLocaleData(localeFr, 'fr');
 
@@ -94,15 +95,16 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
     BrowserModule,
     ButtonsModule,
     ColorsModule,
+    DesignSystemModule,
     ElevationModule,
     IconsModule,
     InputsModule,
     LoggerModule.forRoot(),
+    MatExpansionModule,
     MatListModule,
     MatSidenavModule,
     MiscellaneousModule,
     ProgressBarModule,
-    DesignSystemModule,
     TooltipModule,
     TranslationModule,
     TypographyModule,

diff --git a/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html
@@ -1,5 +1,5 @@
 <div>
-  <h4>{{ 'ARRAY.BASIC_TITLE' | translate }}</h4>
+  <h2>{{ 'ARRAY.BASIC_TITLE' | translate }}</h2>
   <div class="vitamui-table">
     <div class="vitamui-table-head">
       <div class="col-2">
@@ -31,7 +31,7 @@ <h4>{{ 'ARRAY.BASIC_TITLE' | translate }}</h4>
 </div>
 
 <div>
-  <h4>{{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}</h4>
+  <h2>{{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}</h2>
   <div class="vitamui-table">
     <div class="vitamui-table-head">
       <div class="col-2">
@@ -66,7 +66,7 @@ <h4>{{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}</h4>
 </div>
 
 <div>
-  <h4>{{ 'ARRAY.FILTER_TITLE' | translate }}</h4>
+  <h2>{{ 'ARRAY.FILTER_TITLE' | translate }}</h2>
   <div class="vitamui-table">
     <div class="vitamui-table-head">
       <div class="col-2 d-flex align-items-center">
@@ -155,7 +155,7 @@ <h4>{{ 'ARRAY.FILTER_TITLE' | translate }}</h4>
 </div>
 
 <div>
-  <h4>{{ 'ARRAY.SUBTABLE_TITLE' | translate }}</h4>
+  <h2>{{ 'ARRAY.SUBTABLE_TITLE' | translate }}</h2>
   <div class="vitamui-table">
     <div class="vitamui-table-head">
       <div class="col-2"><i class="vitamui-icon vitamui-icon-bank"></i></div>
@@ -203,7 +203,7 @@ <h4>{{ 'ARRAY.SUBTABLE_TITLE' | translate }}</h4>
 </div>
 
 <div>
-  <h4>{{ 'ARRAY.DIALOG_TITLE' | translate }}</h4>
+  <h2>{{ 'ARRAY.DIALOG_TITLE' | translate }}</h2>
   <div class="vitamui-table">
     <div class="vitamui-table-head p-0 py-3 d-flex align-items-center">
       <div class="pl-4">Groupe de profil</div>

diff --git a/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html b/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.PRIMARY' | translate }}</h4>
+    <h2>{{ 'COLORS.PRIMARY' | translate }}</h2>
   </div>
   <div>
     <div class="color" style="background-color: var(--vitamui-primary)"></div>
@@ -53,7 +53,7 @@ <h4>{{ 'COLORS.PRIMARY' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.SECONDARY' | translate }}</h4>
+    <h2>{{ 'COLORS.SECONDARY' | translate }}</h2>
   </div>
   <div>
     <div class="color" style="background-color: var(--vitamui-secondary)"></div>
@@ -106,7 +106,7 @@ <h4>{{ 'COLORS.SECONDARY' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.GREY' | translate }}</h4>
+    <h2>{{ 'COLORS.GREY' | translate }}</h2>
   </div>
   <div>
     <div class="color" style="background-color: var(--vitamui-grey)"></div>
@@ -159,7 +159,7 @@ <h4>{{ 'COLORS.GREY' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.ADDITIONAL' | translate }}</h4>
+    <h2>{{ 'COLORS.ADDITIONAL' | translate }}</h2>
   </div>
   <div>
     <div class="color" style="background-color: var(--vitamui-additional)"></div>
@@ -212,7 +212,7 @@ <h4>{{ 'COLORS.ADDITIONAL' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.RED' | translate }}</h4>
+    <h2>{{ 'COLORS.RED' | translate }}</h2>
   </div>
   <div>
     <div class="color red"></div>
@@ -221,7 +221,7 @@ <h4>{{ 'COLORS.RED' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.ORANGE' | translate }}</h4>
+    <h2>{{ 'COLORS.ORANGE' | translate }}</h2>
   </div>
   <div>
     <div class="color orange"></div>
@@ -230,7 +230,7 @@ <h4>{{ 'COLORS.ORANGE' | translate }}</h4>
 
 <div class="container">
   <div>
-    <h4>{{ 'COLORS.GREEN' | translate }}</h4>
+    <h2>{{ 'COLORS.GREEN' | translate }}</h2>
   </div>
   <div>
     <div class="color green"></div>