@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/directives/step-line-width.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, ElementRef, HostListener, Input, OnChanges } from '@angular/core';
+
+const MARGINS = 36;
+const PADDING = 16;
+
+/**
+ * Directive is used to draw lines between steps
+ */
+@Directive({
+  selector: '[stepLineWidth]',
+})
+export class StepLineWidthDirective implements OnChanges {
+  @Input() stepLineWidth: HTMLElement;
+  @HostListener('window:resize.out-zone', ['$event'])
+  resize(): void {
+    this.setSize();
+  }
+
+  constructor(private el: ElementRef) {}
+
+  setSize(): void {
+    this.el.nativeElement.style.width = `calc(100% + ${this.stepLineWidth.getBoundingClientRect().width / 2 - PADDING}px)`;
+    this.el.nativeElement.style.left = `-${this.stepLineWidth.getBoundingClientRect().width / 2 - MARGINS}px`;
+  }
+
+  ngOnChanges(): void {
+    queueMicrotask(() => {
+      this.setSize();
+    });
+  }
+}

package/projects/tgo-canopy-ui/foundations/colors/colors.component.html

@@ -0,0 +1,4 @@
+<div data-testid="ui-colors" *ngFor="let color of colors" [ngClass]="color.colorClass" >
+  <h4><strong>{{ color.colorVariable }}</strong></h4>
+  <p class="featured">{{ color.colorHex }}</p>
+</div>

package/projects/tgo-canopy-ui/foundations/colors/colors.component.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ColorsComponent } from './colors.component';
+
+@NgModule({
+  declarations: [ColorsComponent],
+  imports: [CommonModule],
+  providers: [],
+})
+export class ColorsComponentModule {}

package/projects/tgo-canopy-ui/foundations/colors/colors.component.scss

@@ -0,0 +1,318 @@
+@use "../../theme/variables" as *;
+
+:host {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+
+  div {
+    width: 220px;
+    height: 75px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      margin: 0;
+    }
+
+    // Teal
+    &.teal60b {
+      background-color: $tgo-teal-60b;
+      color: $tgo-white;
+    }
+    &.teal30b {
+      background-color: $tgo-teal-30b;
+      color: $tgo-white;
+    }
+
+    &.tealDefault {
+      background-color: $tgo-teal-default;
+      color: $tgo-white;
+    }
+
+    &.teal30w{
+      background-color: $tgo-teal-30w;
+      color: $tgo-black;
+    }
+
+    &.teal60w {
+      background-color: $tgo-teal-60w;
+      color: $tgo-black;
+    }
+
+    &.teal90w {
+      background-color: $tgo-teal-90w;
+      color: $tgo-black;
+    }
+
+    // Petrol
+    &.petrol60b {
+      background-color: $tgo-petrol-60b;
+      color: $tgo-white;
+    }
+    &.petrol30b {
+      background-color: $tgo-petrol-30b;
+      color: $tgo-white;
+    }
+
+    &.petrolDefault {
+      background-color: $tgo-petrol-default;
+      color: $tgo-white;
+    }
+
+    &.petrol30w{
+      background-color: $tgo-petrol-30w;
+      color: $tgo-black;
+    }
+
+    &.petrol60w {
+      background-color: $tgo-petrol-60w;
+      color: $tgo-black;
+    }
+
+    &.petrol90w {
+      background-color: $tgo-petrol-90w;
+      color: $tgo-black;
+    }
+
+    // Error
+    &.error30b {
+      background-color: $tgo-error-30b;
+      color: $tgo-white;
+    }
+    &.error60b {
+      background-color: $tgo-error-60b;
+      color: $tgo-white;
+    }
+    &.errorDefault {
+      background-color: $tgo-error-default;
+      color: $tgo-white;
+    }
+    &.error60w {
+      background-color: $tgo-error-60w;
+      color: $tgo-white;
+    }
+
+    // Warning
+    &.warningDefault {
+      background-color: $tgo-warning-default;
+      color: $tgo-white;
+    }
+
+    // Secondary Colors
+    &.tealSecondary {
+      background-color: $tgo-teal-secondary;
+      color: $tgo-black;
+    }
+    &.petrolSecondary {
+      background-color: $tgo-petrol-secondary;
+      color: $tgo-black;
+    }
+    &.errorSecondary {
+      background-color: $tgo-error-secondary;
+      color: $tgo-black;
+    }
+    &.warningSecondary {
+      background-color: $tgo-warning-secondary;
+      color: $tgo-black;
+    }
+
+    // Grayscale
+    &.black {
+      background-color: $tgo-black;
+      color: $tgo-white;
+    }
+    &.dark {
+      background-color: $tgo-dark;
+      color: $tgo-white;
+    }
+    &.medium {
+      background-color: $tgo-medium;
+      color: $tgo-black;
+    }
+    &.grey {
+      background-color: $tgo-grey;
+      color: $tgo-black;
+    }
+    &.light {
+      background-color: $tgo-light;
+      color: $tgo-black;
+    }
+    &.white {
+      background-color: $tgo-white;
+      color: $tgo-black;
+    }
+
+    &.brand-60 {
+      background-color: #A90686;
+      color: white;
+    }
+
+    &.brand-50 {
+      background-color: #D410AA;
+      color: black; /* или другой цвет текста в зависимости от логики */
+    }
+
+    &.brand-40 {
+      background-color: #FF54DA;
+      color: black;
+    }
+
+    &.brand-30 {
+      background-color: #FFB3EE;
+      color: black;
+    }
+
+    &.brand-20 {
+      background-color: #FFE6FA;
+      color: black;
+    }
+
+    &.brand-10 {
+      background-color: #FFF2FC;
+      color: black;
+    }
+
+    &.grayscale-50 {
+      background-color: #666666;
+      color: white;
+    }
+
+    &.grayscale-40 {
+      background-color: #919191;
+      color: white;
+    }
+
+    &.grayscale-30 {
+      background-color: #A7A7A7;
+      color: white;
+    }
+
+    &.grayscale-20 {
+      background-color: #D3D3D3;
+      color: black;
+    }
+
+    &.grayscale-10 {
+      background-color: #E9E9E9;
+      color: black;
+    }
+
+    &.grayscale-0 {
+      background-color: #F4F4F4;
+      color: black;
+    }
+
+    &.black {
+      background-color: #242424;
+      color: white;
+    }
+
+    &.accent-20 {
+      background-color: #FFF5ED;
+      color: black;
+    }
+
+    &.accent-10 {
+      background-color: #FFFAF6;
+      color: black;
+    }
+
+    &.informative-40 {
+      background-color: #0165FC;
+      color: white;
+    }
+
+    &.informative-30 {
+      background-color: #277CFD;
+      color: white;
+    }
+
+    &.informative-20 {
+      background-color: #99C1FE;
+      color: black;
+    }
+
+    &.informative-10 {
+      background-color: #D9E8FF;
+      color: black;
+    }
+
+    &.success-50 {
+      background-color: #88B901;
+      color: white;
+    }
+
+    &.success-40 {
+      background-color: #A0D900;
+      color: black;
+    }
+
+    &.success-30 {
+      background-color: #C6E866;
+      color: black;
+    }
+
+    &.success-20 {
+      background-color: #E2F4B3;
+      color: black;
+    }
+
+    &.success-10 {
+      background-color: #F5FAE3;
+      color: black;
+    }
+
+    &.error-50 {
+      background-color: #E02800;
+      color: white;
+    }
+
+    &.error-40 {
+      background-color: #FF3003;
+      color: white;
+    }
+
+    &.error-30 {
+      background-color: #FF6E4F;
+      color: white;
+    }
+
+    &.error-20 {
+      background-color: #FFAC9A;
+      color: black;
+    }
+
+    &.error-10 {
+      background-color: #FFEAE6;
+      color: black;
+    }
+
+    &.warning-50 {
+      background-color: #D07D00;
+      color: white;
+    }
+
+    &.warning-40 {
+      background-color: #FF9A03;
+      color: black;
+    }
+
+    &.warning-30 {
+      background-color: #FFC268;
+      color: black;
+    }
+
+    &.warning-20 {
+      background-color: #FFE1B3;
+      color: black;
+    }
+
+    &.warning-10 {
+      background-color: #FFF5E6;
+      color: black;
+    }
+  }
+ }

package/projects/tgo-canopy-ui/foundations/colors/colors.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ColorsComponent } from './colors.component';
+import { By } from '@angular/platform-browser';
+
+describe('ColorsComponent', () => {
+  let component: ColorsComponent;
+  let fixture: ComponentFixture<ColorsComponent>;
+  const colorDataMock = [
+    {
+      colorVariable: 'colorVariableMock',
+      colorClass: 'colorClassMock',
+      colorHex: 'colorHexMock',
+    }
+  ]
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ColorsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColorsComponent);
+    component = fixture.componentInstance;
+    component.dataColors = colorDataMock;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have color title', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h4').textContent).toContain(colorDataMock[0].colorVariable);
+  });
+
+  it('should have css class according color', () => {
+    const div = fixture.debugElement.query(By.css('div'))
+    expect(div.classes[colorDataMock[0].colorClass]).toBeTruthy()
+  });
+
+  it('should have color title', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('p').textContent).toContain(colorDataMock[0].colorHex);
+  });
+});

package/projects/tgo-canopy-ui/foundations/colors/colors.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface IColors {
+  colorVariable: string;
+  colorClass: string;
+  colorHex: string;
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'ui-colors',
+  templateUrl: './colors.component.html',
+  styleUrls: ['./colors.component.scss'],
+})
+export class ColorsComponent implements OnInit {
+  @Input() dataColors: IColors[] = [] as IColors[];
+  colors: IColors[];
+
+  ngOnInit(): void {
+    this.colors = this.dataColors;
+  }
+}