Merge pull request #2131 from ProgrammeVitam/story_13488-design-system

Story #13488: Typography, spacing & misc
ProgrammeVitam · Oct 16, 2024 · ad5ac36 · ad5ac36
2 parents f25759f + ccbfbb3
commit ad5ac36
Show file tree

Hide file tree

Showing 32 changed files with 262 additions and 143 deletions.
diff --git a/ui/ui-frontend/projects/archive-search/src/sass/styles.scss b/ui/ui-frontend/projects/archive-search/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import 'icons/vitamui-icons';
 @import 'theme';
-@import 'bootstrap/scss/bootstrap-grid';
 
 @import 'fonts/font-styles';
 

diff --git a/ui/ui-frontend/projects/collect/src/sass/styles.scss b/ui/ui-frontend/projects/collect/src/sass/styles.scss
@@ -1,6 +1,5 @@
 @import 'icons/vitamui-icons';
 @import 'theme';
-@import 'bootstrap/scss/bootstrap-grid';
 
 @import 'fonts/font-styles';
 

diff --git a/ui/ui-frontend/projects/design-system/src/app/app-routing.module.ts b/ui/ui-frontend/projects/design-system/src/app/app-routing.module.ts
@@ -52,6 +52,7 @@ import { TranslationComponent } from './components/translation/translation.compo
 import { TypographyComponent } from './components/typography/typography.component';
 import { DesignSystemComponent } from './design-system/design-system.component';
 import { ChipsComponent } from './components/chips/chips.component';
+import { SpacingComponent } from './components/spacing/spacing.component';
 
 const routes: Routes = [
   { path: '', component: DesignSystemComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
@@ -68,6 +69,7 @@ const routes: Routes = [
   { path: 'colors', component: ColorsComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
   { path: 'icons', component: IconsComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
   { path: 'elevations', component: ElevationComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
+  { path: 'spacing', component: SpacingComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
   { path: 'translation', component: TranslationComponent, data: { appId: ApplicationId.DESIGN_SYSTEM_APP } },
   { path: '**', redirectTo: '' },
 ];

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
@@ -40,6 +40,9 @@
       <mat-expansion-panel routerLink="/elevations" routerLinkActive="active">
         <mat-expansion-panel-header>Elevations</mat-expansion-panel-header>
       </mat-expansion-panel>
+      <mat-expansion-panel routerLink="/spacing" routerLinkActive="active">
+        <mat-expansion-panel-header>Spacing</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>

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
@@ -63,14 +63,12 @@ import { AppComponent } from './app.component';
 import { ArraysModule } from './components/arrays/arrays.module';
 import { BreadcrumbModule } from './components/breadcrumb/breadcrumb.module';
 import { ButtonsModule } from './components/buttons/buttons.module';
-import { ColorsModule } from './components/colors/colors.module';
 import { IconsModule } from './components/icons/icons.module';
 import { InputsModule } from './components/inputs/inputs.module';
 import { MiscellaneousModule } from './components/miscellaneous/miscellaneous.module';
 import { ProgressBarModule } from './components/progress-bar/progress-bar.module';
 import { TooltipModule } from './components/tooltip/tooltip.module';
 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';
@@ -95,7 +93,6 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
     BrowserModule,
     ButtonsModule,
     ChipsModule,
-    ColorsModule,
     DesignSystemModule,
     IconsModule,
     InputsModule,
@@ -107,7 +104,6 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
     ProgressBarModule,
     TooltipModule,
     TranslationModule,
-    TypographyModule,
     VitamUICommonModule,
     TranslateModule.forRoot({
       missingTranslationHandler: { provide: MissingTranslationHandler, useClass: VitamuiMissingTranslationHandler },

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
@@ -6,10 +6,8 @@ <h2>{{ 'COLORS.' + colorInfo.key | translate }}</h2>
     <div>
       <div #color class="color" [ngClass]="colorInfo.className" style="background-color: var({{ colorInfo.varName }})">
         <div class="shade-text">
-          <div class="text medium">{{ colorToHex(color.computedStyleMap().get('background-color').toString()) }}</div>
-          <div class="text medium" *ngFor="let kv of colorToHsl(color.computedStyleMap().get('background-color').toString()) | keyvalue">
-            {{ kv.key }} : {{ kv.value }}
-          </div>
+          <div class="text medium">{{ colorToHex(color) }}</div>
+          <div class="text medium" *ngFor="let kv of colorToHsl(color) | keyvalue">{{ kv.key }} : {{ kv.value }}</div>
         </div>
       </div>
 
@@ -20,13 +18,8 @@ <h2>{{ 'COLORS.' + colorInfo.key | translate }}</h2>
               <div #hue class="shade" style="background-color: var({{ colorInfo.varName }}{{ hueId === 500 ? '' : '-' + hueId }})"></div>
               <div class="shade-text">
                 <div class="text medium">{{ hueId === 500 ? '(' + hueId + ')' : hueId }}</div>
-                <div class="text medium">{{ colorToHex(hue.computedStyleMap().get('background-color').toString()) }}</div>
-                <div
-                  class="text medium"
-                  *ngFor="let kv of colorToHsl(hue.computedStyleMap().get('background-color').toString()) | keyvalue"
-                >
-                  {{ kv.key }} : {{ kv.value }}
-                </div>
+                <div class="text medium">{{ colorToHex(hue) }}</div>
+                <div class="text medium" *ngFor="let kv of colorToHsl(hue) | keyvalue">{{ kv.key }} : {{ kv.value }}</div>
               </div>
             </li>
           }

diff --git a/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.ts
@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import { rgbToHsl, toHex } from '../../../../../vitamui-library/src/app/modules';
+import { KeyValuePipe, NgClass, NgForOf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'design-system-colors',
   templateUrl: './colors.component.html',
   styleUrls: ['./colors.component.scss'],
+  standalone: true,
+  imports: [NgClass, TranslateModule, KeyValuePipe, NgForOf],
 })
 export class ColorsComponent {
   private hueIds = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -25,13 +29,15 @@ export class ColorsComponent {
     return { r: Number.parseInt(r), g: Number.parseInt(g), b: Number.parseInt(b) };
   }
 
-  colorToHex(color?: string): string {
+  colorToHex(element: HTMLElement): string {
+    const color = getComputedStyle(element).backgroundColor;
     if (!color) return color;
     const { r, g, b } = this.colorToRGB(color);
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
   }
 
-  colorToHsl(color?: string): { S?: number; H?: number; L?: number } {
+  colorToHsl(element: HTMLElement): { S?: number; H?: number; L?: number } {
+    const color = getComputedStyle(element).backgroundColor;
     if (!color) return {};
     const { h, s, l } = rgbToHsl(this.colorToRGB(color));
     return { H: Math.round(360 * h), S: s, L: l };

diff --git a/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.module.ts b/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.module.ts
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts
@@ -15,10 +15,8 @@ export class ElevationComponent {
   name = (elevation: number, color: string) => `${Math.pow(2, elevation)}dp-${color}`;
 
   getBoxShadow(element: HTMLElement) {
-    return element
-      .computedStyleMap()
-      .get('box-shadow')
-      .toString()
-      .match(/rgba([^)]+)[^,]+/g);
+    return getComputedStyle(element)
+      .boxShadow.toString()
+      .match(/rgba?([^)]+)[^,]+/g);
   }
 }
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.html b/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.html
@@ -0,0 +1,23 @@
+<h2>{{ 'SPACING.PADDING' | translate }}</h2>
+<div class="d-flex flex-column">
+  @for (padding of paddings; track padding) {
+    <strong>p-{{ padding }}</strong>
+    <div #el class="outer p-{{ padding }}">
+      <div class="inner">
+        {{ getPadding(el) }}
+      </div>
+    </div>
+  }
+</div>
+
+<h2>{{ 'SPACING.MARGIN' | translate }}</h2>
+<div class="d-flex flex-column">
+  @for (margin of margins; track margin) {
+    <strong>m-{{ margin }}</strong>
+    <div class="outer">
+      <div #el class="inner m-{{ margin }}">
+        {{ getMargin(el) }}
+      </div>
+    </div>
+  }
+</div>
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.scss b/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.scss
@@ -0,0 +1,12 @@
+.outer {
+  background-color: var(--vitamui-primary);
+}
+
+.inner {
+  background-color: var(--vitamui-secondary);
+  color: white;
+}
+
+.m-auto {
+  max-width: 50%;
+}
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/spacing/spacing.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'design-system-spacing',
+  templateUrl: './spacing.component.html',
+  styleUrls: ['./spacing.component.scss'],
+  imports: [TranslateModule],
+  standalone: true,
+})
+export class SpacingComponent {
+  paddings = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+  margins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 'auto'];
+
+  getPadding(element: HTMLElement) {
+    return getComputedStyle(element).padding;
+  }
+
+  getMargin(element: HTMLElement) {
+    return getComputedStyle(element).margin;
+  }
+}
diff --git a/...i-frontend/projects/design-system/src/app/components/typography/typography.component.html b/...i-frontend/projects/design-system/src/app/components/typography/typography.component.html
@@ -1,80 +1,69 @@
 <h2>Titles</h2>
 <div class="mb-5">
-  <h1>H1 Headline (96)</h1>
-  <h2>H2 Headline (60)</h2>
-  <h3>H3 Headline (48)</h3>
-  <h4>H4 Headline (30)</h4>
-  <h5>H5 Headline (24)</h5>
-</div>
-
-<h2>Text</h2>
-<div class="d-flex mb-5">
-  <div>
-    <p class="text large">Large Text Regular (20)</p>
-    <p class="text medium">Medium Text (16)</p>
-    <p class="text normal">Normal Text (14)</p>
-    <p class="text caption">Caption (12)</p>
+  <div class="d-flex align-items-center">
+    <h1 #h1>H1 Headline</h1>
+    {{ info(h1) }}
   </div>
-
-  <div class="ml-5">
-    <p class="text large bold">Large Text Bold (20)</p>
-    <p class="text medium bold">Medium Text Bold (16)</p>
-    <p class="text normal bold">Normal Text Bold (14)</p>
-    <p class="text caption bold">Caption Bold (12)</p>
+  <div class="d-flex align-items-center">
+    <h2 #h2>H2 Headline</h2>
+    {{ info(h2) }}
   </div>
-
-  <div class="ml-5">
-    <p class="text link medium">Link Bold large (16)</p>
-    <p class="text link normal">Link Bold Medium (14)</p>
-    <p class="text link caption">Link Bold normal (12)</p>
+  <div class="d-flex align-items-center">
+    <h3 #h3>H3 Headline</h3>
+    {{ info(h3) }}
+  </div>
+  <div class="d-flex align-items-center">
+    <h4 #h4>H4 Headline</h4>
+    {{ info(h4) }}
+  </div>
+  <div class="d-flex align-items-center">
+    <h5 #h5>H5 Headline</h5>
+    {{ info(h5) }}
   </div>
 </div>
 
-<h2>Colors</h2>
+<h2>Button</h2>
 <div class="d-flex mb-5">
-  <div>
-    <p class="text large light">Large Text Regular Light (20)</p>
-    <p class="text medium light">Medium Text Light (16)</p>
-    <p class="text normal light">Normal Text Light (14)</p>
-    <p class="text caption light">Caption Light (12)</p>
-  </div>
-
-  <div>
-    <p class="text large primary">Large Text Regular Primary (20)</p>
-    <p class="text medium primary">Medium Text Primary (16)</p>
-    <p class="text normal primary">Normal Text Primary (14)</p>
-    <p class="text caption primary">Caption Primary (12)</p>
-  </div>
+  @for (textButtonFlavor of textButtonFlavors; track textButtonFlavor) {
+    <div>
+      @for (textButtonSize of textButtonSizes; track textButtonSize) {
+        <div class="d-flex align-items-center">
+          <p #el [ngClass]="['button-' + textButtonSize, textButtonFlavor]">Button {{ textButtonSize }} {{ textButtonFlavor }}</p>
+          {{ info(el) }}
+        </div>
+      }
+    </div>
+  }
+</div>
 
-  <div>
-    <p class="text large secondary">Large Text Regular Secondary (20)</p>
-    <p class="text medium secondary">Medium Text Secondary (16)</p>
-    <p class="text normal secondary">Normal Text Secondary (14)</p>
-    <p class="text caption secondary">Caption Secondary (12)</p>
-  </div>
+<h2>Text</h2>
+<div class="d-flex mb-5">
+  @for (textFlavor of textFlavors; track textFlavor) {
+    <div>
+      @for (textSize of textSizes; track textSize) {
+        <div class="d-flex align-items-center">
+          <p #el class="text" [ngClass]="[textFlavor, textSize]">{{ textSize }} text {{ textFlavor }}</p>
+          {{ info(el) }}
+        </div>
+      }
+    </div>
+  }
+</div>
 
-  <div>
-    <p class="text large danger">Large Text Regular Red (20)</p>
-    <p class="text medium danger">Medium Text Red (16)</p>
-    <p class="text normal danger">Normal Text Red (14)</p>
-    <p class="text caption danger">Caption Red (12)</p>
-  </div>
+<h2>Colors</h2>
+<div class="d-flex mb-5">
+  @for (textColor of textColors; track textColor) {
+    <div>
+      <p #el class="text" [class]="textColor">{{ textColor }}</p>
+      {{ color(el) }}
+    </div>
+  }
 </div>
 
 <h2>Others</h2>
 <div class="d-flex mb-5">
   <div>
-    <p class="text large light spaced">Large Text Regular Light spaced (20)</p>
-    <p class="text medium light spaced">Medium Text Light spaced (16)</p>
-    <p class="text normal light spaced">Normal Text Light spaced (14)</p>
-    <p class="text caption light spaced">Caption Light spaced (12)</p>
-  </div>
-
-  <div>
-    <p class="text large light uppercase">Large Text Regular Light uppercase (20)</p>
-    <p class="text medium light uppercase">Medium Text Light uppercase (16)</p>
-    <p class="text normal light uppercase">Normal Text Light uppercase (14)</p>
-    <p class="text caption light uppercase">Caption Light uppercase (12)</p>
+    <p class="text">Use "text uppercase" class to make it <span class="text uppercase">uppercase</span></p>
   </div>
 </div>
 

diff --git a/...i-frontend/projects/design-system/src/app/components/typography/typography.component.scss b/...i-frontend/projects/design-system/src/app/components/typography/typography.component.scss
@@ -1,4 +1,8 @@
-div {
-  background-color: white;
+:host > div {
+  background-color: var(--vitamui-background);
   padding: 20px;
 }
+
+.d-flex {
+  gap: 1rem;
+}