@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/gaussian-chart/gaussian-chart.component.spec.ts

@@ -0,0 +1,182 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GaussianChartComponent } from './gaussian-chart.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { BaseChartDirective } from 'ng2-charts';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+
+// Mock BaseChartDirective
+class MockBaseChartDirective {
+  chart = {
+    update: jest.fn(),
+    tooltip: {
+      setActiveElements: jest.fn(),
+    },
+    data: {
+      datasets: [{ hidden: false }, { hidden: false }],
+    },
+    getDatasetMeta: jest.fn(),
+  };
+}
+
+enum PercentileThreshold {
+  LOWEST = 20,
+  LOWER = 40,
+  AVERAGE = 60,
+  HIGHER = 80,
+  HIGHEST = 100,
+}
+
+describe('GaussianChartComponent', () => {
+  let component: GaussianChartComponent;
+  let fixture: ComponentFixture<GaussianChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GaussianChartComponent],
+      imports: [UiTranslatePipe, MemoizeFuncPipe],
+      providers: [{ provide: BaseChartDirective, useClass: MockBaseChartDirective }],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GaussianChartComponent);
+    component = fixture.componentInstance;
+    component.score = 10;
+    component.bestCandidateScore = 10;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.gaussianDistribution.mean).toBe(0);
+    expect(component.gaussianDistribution.variance).toBe(1);
+    expect(component.maxYValue).toBeCloseTo(0.3989, 4);
+  });
+
+  it('should set active bucket to LOWEST when score is less than 20', () => {
+    component.score = 15;
+    component.ngOnInit();
+    expect(component.activeBucket).toBe(PercentileThreshold.LOWEST);
+  });
+
+  it('should set active bucket to LOWER when score is between 20 and 39', () => {
+    component.score = 25;
+    component.ngOnInit();
+    expect(component.activeBucket).toBe(PercentileThreshold.LOWER);
+  });
+
+  it('should set active bucket to AVERAGE when score is between 40 and 59', () => {
+    component.score = 50;
+    component.ngOnInit();
+    expect(component.activeBucket).toBe(PercentileThreshold.AVERAGE);
+  });
+
+  it('should set active bucket to HIGHER when score is between 60 and 79', () => {
+    component.score = 70;
+    component.ngOnInit();
+    expect(component.activeBucket).toBe(PercentileThreshold.HIGHER);
+  });
+
+  it('should set active bucket to HIGHEST when score is 80 or above', () => {
+    component.score = 85;
+    component.ngOnInit();
+    expect(component.activeBucket).toBe(PercentileThreshold.HIGHEST);
+  });
+
+  it('should set overlay values correctly when xValue is within the range', () => {
+    component.score = 50;
+    component.bestCandidateScore = 70;
+    const expectedYBestScore = 48.675;
+
+    component.ngOnInit();
+
+    expect(component.overlayXValue).toBe(component.score);
+    expect(component.overlayYValue).toBe(100);
+    expect(component.overlayXBestScoreValue).toBe(component.bestCandidateScore);
+    expect(component.overlayYBestScoreValue).toBeCloseTo(expectedYBestScore, 2);
+  });
+
+  it('should set overlay values to extreme values on left end when xValue is out of range from left end', () => {
+    component.score = 1;
+    component.bestCandidateScore = 3;
+    const expectedX = 3.333;
+    const expectedY = 1.984;
+
+    component.ngOnInit();
+
+    expect(component.overlayXValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYValue).toBeCloseTo(expectedY, 2);
+    expect(component.overlayXBestScoreValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYBestScoreValue).toBeCloseTo(expectedY, 2);
+
+    component.score = 2;
+
+    component.ngOnInit();
+
+    expect(component.overlayXValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYValue).toBeCloseTo(expectedY, 2);
+  });
+
+  it('should set overlay values to extreme values on right end when xValue is out of range from right end', () => {
+    component.score = 99;
+    component.bestCandidateScore = 97;
+    const expectedX = 96.666;
+    const expectedY = 1.984;
+
+    component.ngOnInit();
+
+    expect(component.overlayXValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYValue).toBeCloseTo(expectedY, 2);
+    expect(component.overlayXBestScoreValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYBestScoreValue).toBeCloseTo(expectedY, 2);
+
+    component.score = 98;
+
+    component.ngOnInit();
+
+    expect(component.overlayXValue).toBeCloseTo(expectedX, 2);
+    expect(component.overlayYValue).toBeCloseTo(expectedY, 2);
+  });
+
+  it('getCalcPosition should return correct calc expression when operation is "add"', () => {
+    const result = component.getCalcPosition([50, 10, 'add']);
+    expect(result).toBe('calc(50% + 10px)');
+  });
+
+  it('getCalcPosition should return correct calc expression when operation is "subtract"', () => {
+    const result = component.getCalcPosition([75, 20, 'subtract']);
+    expect(result).toBe('calc(75% - 20px)');
+  });
+
+  describe('getScoreTranslationKey', () => {
+    it('should return "WELL_BELOW_AVERAGE" for scores less than 20', () => {
+      const result = component.getScoreTranslationKey(10);
+      expect(result).toBe('PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE');
+    });
+
+    it('should return "BELOW_AVERAGE" for scores between 20 and 39', () => {
+      const result = component.getScoreTranslationKey(30);
+      expect(result).toBe('PERCENTILE_LABEL_TYPES.BELOW_AVERAGE');
+    });
+
+    it('should return "AVERAGE" for scores between 40 and 59', () => {
+      const result = component.getScoreTranslationKey(50);
+      expect(result).toBe('PERCENTILE_LABEL_TYPES.AVERAGE');
+    });
+
+    it('should return "ABOVE_AVERAGE" for scores between 60 and 79', () => {
+      const result = component.getScoreTranslationKey(70);
+      expect(result).toBe('PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE');
+    });
+
+    it('should return "WELL_ABOVE_AVERAGE" for scores 80 and above', () => {
+      const result = component.getScoreTranslationKey(85);
+      expect(result).toBe('PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE');
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/gaussian-chart/gaussian-chart.component.stories.ts

@@ -0,0 +1,113 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { GaussianChartComponent } from './gaussian-chart.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { NgChartsModule } from 'ng2-charts';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgClass } from '@angular/common';
+import { SpinnerComponentModule } from '../spinner/spinner.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+
+export default {
+  title: 'Charts/Gaussian',
+  component: GaussianChartComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        UiTranslatePipe,
+        NgChartsModule,
+        MatTooltipModule,
+        NgClass,
+        UiTranslatePipe,
+        SpinnerComponentModule,
+        IconComponentModule,
+        MemoizeFuncPipe,
+      ],
+      declarations: [GaussianChartComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13450-11068&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default: StoryFn = {
+  render: (args: any, { globals: { theme } }: any) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-gaussian-chart score="75" bestCandidateScore="90" applicationTheme="${_theme}" style="width: 600px; display: block; margin: auto;">
+        </ui-gaussian-chart>
+      `,
+    };
+  },
+} as StoryFn;
+
+Default.parameters = {
+  ...parameters,
+};
+
+export const MaximumScore: StoryFn = {
+  render: (args: any, { globals: { theme } }: any) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-gaussian-chart score="99" bestCandidateScore="90" applicationTheme="${_theme}" style="width: 600px; display: block; margin: auto;">
+        </ui-gaussian-chart>
+      `,
+    };
+  },
+} as StoryFn;
+
+MaximumScore.parameters = {
+  ...parameters,
+};
+
+export const MinimumScore: StoryFn = {
+  render: (args: any, { globals: { theme } }: any) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-gaussian-chart score="1" bestCandidateScore="90" applicationTheme="${_theme}" style="width: 600px; display: block; margin: auto;">
+        </ui-gaussian-chart>
+      `,
+    };
+  },
+} as StoryFn;
+
+MinimumScore.parameters = {
+  ...parameters,
+};
+
+export const MiddleScore: StoryFn = {
+  render: (args: any, { globals: { theme } }: any) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-gaussian-chart score="50" bestCandidateScore="50" applicationTheme="${_theme}" style="width: 600px; display: block; margin: auto;">
+        </ui-gaussian-chart>
+      `,
+    };
+  },
+} as StoryFn;
+
+MiddleScore.parameters = {
+  ...parameters,
+};

package/projects/tgo-canopy-ui/components/gaussian-chart/gaussian-chart.component.ts

@@ -0,0 +1,275 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { Chart, ChartData, ChartOptions, TooltipOptions } from 'chart.js';
+import { Color } from '../../models/colors.model';
+import { _DeepPartialObject } from 'chart.js/dist/types/utils';
+import gaussian from 'gaussian';
+
+enum PercentileThreshold {
+  LOWEST = 20,
+  LOWER = 40,
+  AVERAGE = 60,
+  HIGHER = 80,
+  HIGHEST = 100,
+}
+
+@Component({
+  selector: 'ui-gaussian-chart',
+  templateUrl: './gaussian-chart.component.html',
+  styleUrls: ['./gaussian-chart.component.scss'],
+})
+export class GaussianChartComponent implements OnInit {
+  /**
+   * The candidate score to be displayed on the chart.
+   * @type {number}
+   * @memberof GaussianChartComponent
+   */
+  @Input() score!: number;
+
+  /**
+   * The best candidate score to be displayed on the chart.
+   * @type {number}
+   * @memberof GaussianChartComponent
+   */
+  @Input() bestCandidateScore!: number;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SpinnerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  readonly minXValue = -3;
+  readonly maxXValue = 3;
+  readonly minYValue = 0;
+  readonly stepSize = 0.1;
+  readonly pointsToSkip = 2;
+  readonly actualMinXvalue = this.minXValue + this.pointsToSkip * this.stepSize;
+  readonly actualMaxXvalue = this.maxXValue - this.pointsToSkip * this.stepSize;
+  readonly normalContainerPadding = 50; //in px
+  readonly bestScoreThreshold = 92;
+  readonly bestScoreSpacingRight = '4px';
+  readonly bestScoreSpacingLeft = '-39px';
+
+  PercentileThreshold = PercentileThreshold;
+  chart: Chart;
+  gaussianDistribution: gaussian.Gaussian;
+  activeBucket: PercentileThreshold;
+  overlayXValue: number;
+  overlayYValue: number;
+  overlayXBestScoreValue: number;
+  overlayYBestScoreValue: number;
+  maxYValue: number;
+
+  gaussianChartData: ChartData<'line'> = {
+    labels: [],
+    datasets: [],
+  };
+  gaussianChartOptions: ChartOptions<'line'>;
+  protected readonly translationContext = 'CHARTS.GAUSSIAN_CHART.';
+
+  ngOnInit(): void {
+    if (this.score === undefined || this.score === null) {
+      throw new Error('Input "score" is required for GaussianChartComponent.');
+    }
+    if (this.bestCandidateScore === undefined || this.bestCandidateScore === null) {
+      throw new Error('Input "bestCandidateScore" is required for GaussianChartComponent.');
+    }
+    this.setActiveBucket();
+    this.gaussianDistribution = gaussian(0, 1);
+    this.maxYValue = this.gaussianDistribution.pdf(0);
+    this.setOverlayValues();
+    this.setOverlayValuesForBestScore();
+    this.setChartData();
+    this.setChartOptions();
+  }
+
+  private setChartData() {
+    const xValues: number[] = [];
+    const yValues: number[] = [];
+    const labels = this.generateLabels(this.minXValue, this.maxXValue, this.stepSize);
+
+    for (let x = this.minXValue; x < this.maxXValue + this.stepSize; x = Number((x + this.stepSize).toFixed(2))) {
+      xValues.push(x);
+      yValues.push(this.gaussianDistribution.pdf(x));
+    }
+
+    this.gaussianChartData = {
+      labels,
+      datasets: this.generateDataset(yValues),
+    };
+  }
+
+  private setChartOptions() {
+    this.gaussianChartOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: this.getScale(),
+      plugins: {
+        // To be used only for dev purpose
+        // tooltip: this.getTooltip(),
+        // Comment the below line if you enable the call for tooltip
+        tooltip: {
+          enabled: false,
+        },
+        legend: {
+          display: false,
+        },
+      },
+    };
+  }
+
+  private getTooltip(): _DeepPartialObject<TooltipOptions<'line'>> {
+    return {
+      intersect: false,
+      mode: 'nearest',
+      displayColors: false,
+      callbacks: {
+        label: tooltipItem => {
+          const value = (this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2);
+          return `${value}%`;
+        },
+        title: () => '', // Disable the default title
+      },
+    };
+  }
+
+  private getScale(): {
+    x: { display: boolean; grid: { display: boolean } };
+    y: { display: boolean; grid: { display: boolean } };
+  } {
+    return {
+      x: {
+        display: false,
+        grid: {
+          display: false, // Disable grid lines for x-axis
+        },
+      },
+      y: {
+        display: false,
+        grid: {
+          display: false, // Disable grid lines for y-axis
+        },
+      },
+    };
+  }
+
+  private generateDataset(
+    yValues: number[]
+  ): { data: any[]; label: string; borderColor: Color; borderWidth: number; pointRadius: number; fill: boolean }[] {
+    return [
+      {
+        data: [...yValues.slice(0, this.pointsToSkip), ...Array(yValues.length - this.pointsToSkip).fill(null)],
+        label: '',
+        borderColor: this.activeBucket === PercentileThreshold.LOWEST ? Color.ACCENT_20 : Color.TGO_WHITE,
+        borderWidth: 2,
+        pointRadius: 0,
+        fill: false,
+      },
+      {
+        data: [
+          ...Array(this.pointsToSkip).fill(null),
+          ...yValues.slice(this.pointsToSkip, yValues.length - this.pointsToSkip),
+          ...Array(this.pointsToSkip).fill(null),
+        ],
+        label: '',
+        borderColor: Color.BLACK,
+        borderWidth: 2,
+        pointRadius: 0,
+        fill: false,
+      },
+      {
+        data: [
+          ...Array(yValues.length - this.pointsToSkip).fill(null),
+          ...yValues.slice(yValues.length - this.pointsToSkip, yValues.length),
+        ],
+        label: '',
+        borderColor: this.activeBucket === PercentileThreshold.HIGHEST ? Color.ACCENT_20 : Color.TGO_WHITE,
+        borderWidth: 2,
+        pointRadius: 0,
+        fill: false,
+      },
+    ];
+  }
+
+  private generateLabels(min: number, max: number, step: number): string[] {
+    const labels = [];
+    for (let x = min; x < max + step; x = Number((x + step).toFixed(2))) {
+      labels.push(x.toFixed(1));
+    }
+    return labels;
+  }
+
+  private setActiveBucket(): void {
+    if (this.score < PercentileThreshold.LOWEST) {
+      this.activeBucket = PercentileThreshold.LOWEST;
+    } else if (this.score >= PercentileThreshold.LOWEST && this.score < PercentileThreshold.LOWER) {
+      this.activeBucket = PercentileThreshold.LOWER;
+    } else if (this.score >= PercentileThreshold.LOWER && this.score < PercentileThreshold.AVERAGE) {
+      this.activeBucket = PercentileThreshold.AVERAGE;
+    } else if (this.score >= PercentileThreshold.AVERAGE && this.score < PercentileThreshold.HIGHER) {
+      this.activeBucket = PercentileThreshold.HIGHER;
+    } else if (this.score >= PercentileThreshold.HIGHER) {
+      this.activeBucket = PercentileThreshold.HIGHEST;
+    }
+  }
+
+  // For more context: https://testgorilla.atlassian.net/wiki/spaces/SR/pages/1813905736/Percentiles+curve+FE+implementation
+  private setOverlayValues(): void {
+    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.score);
+    this.overlayXValue = overlayXValue;
+    this.overlayYValue = overlayYValue;
+  }
+
+  private setOverlayValuesForBestScore(): void {
+    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.bestCandidateScore);
+    this.overlayXBestScoreValue = overlayXValue;
+    this.overlayYBestScoreValue = overlayYValue;
+  }
+
+  private calculateOverlayValues(score: number): { overlayXValue: number; overlayYValue: number } {
+    const xValue = this.mapRange(score, 0, 100, this.minXValue, this.maxXValue);
+    const yValue = this.gaussianDistribution.pdf(xValue);
+    let overlayXValue = score;
+    let overlayYValue = this.mapRange(yValue, this.minYValue, this.maxYValue, 0, 100);
+
+    if (xValue <= this.actualMinXvalue || xValue >= this.actualMaxXvalue) {
+      const xValueExtreme = xValue <= this.actualMinXvalue ? this.actualMinXvalue : this.actualMaxXvalue;
+      const yValueExtreme = this.gaussianDistribution.pdf(xValueExtreme);
+      overlayXValue = this.mapRange(xValueExtreme, this.minXValue, this.maxXValue, 0, 100);
+      overlayYValue = this.mapRange(yValueExtreme, this.minYValue, this.maxYValue, 0, 100);
+    }
+
+    return { overlayXValue, overlayYValue };
+  }
+
+  private mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
+    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  }
+
+  getCalcPosition([percentage, pixels, operation = 'add']: [number, number, 'add' | 'subtract']): string {
+    const operator = operation === 'add' ? '+' : '-';
+    return `calc(${percentage}% ${operator} ${pixels}px)`;
+  }
+
+  getBestScoreContentPosition(bestScore: number): string {
+    return bestScore < this.bestScoreThreshold ? this.bestScoreSpacingRight : this.bestScoreSpacingLeft;
+  }
+
+  getScoreTranslationKey(score: number): string {
+    if (score < PercentileThreshold.LOWEST) {
+      return 'PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE';
+    } else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {
+      return 'PERCENTILE_LABEL_TYPES.BELOW_AVERAGE';
+    } else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {
+      return 'PERCENTILE_LABEL_TYPES.AVERAGE';
+    } else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {
+      return 'PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE';
+    } else {
+      return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/gaussian-chart/gaussian-chart.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { GaussianChartComponent } from './gaussian-chart.component';
+import { NgChartsModule } from 'ng2-charts';
+import { Chart, registerables } from 'chart.js';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommonModule, NgClass } from '@angular/common';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+
+Chart.register(...registerables);
+
+@NgModule({
+  declarations: [GaussianChartComponent],
+  exports: [GaussianChartComponent],
+  imports: [
+    NgClass,
+    UiTranslatePipe,
+    NgChartsModule,
+    MatTooltipModule,
+    CommonModule,
+    IconComponentModule,
+    MemoizeFuncPipe,
+  ],
+})
+export class GaussianChartComponentModule {}

package/projects/tgo-canopy-ui/components/icon/icon.component.html

@@ -0,0 +1,5 @@
+@if (isIconLoaded) {
+  <mat-icon [svgIcon]="_name" [attr.class]="customCssClass" [ngStyle]="cssStyle"></mat-icon>
+} @else {
+  <div class="empty-icon-placeholder"></div>
+}

package/projects/tgo-canopy-ui/components/icon/icon.component.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { IconComponent } from './icon.component';
+
+@NgModule({
+  declarations: [IconComponent],
+  imports: [CommonModule, MatIconModule, HttpClientModule],
+  exports: [IconComponent],
+  providers: [HttpClientModule],
+})
+export class IconComponentModule {}

package/projects/tgo-canopy-ui/components/icon/icon.component.scss

@@ -0,0 +1,72 @@
+@use "../../theme/variables" as *;
+
+:host {
+  width: calc(var(--icon-size) * 1px) !important;
+  height: calc(var(--icon-size) * 1px) !important;
+}
+
+.empty-icon-placeholder {
+  width: calc(var(--icon-size) * 1px) !important;
+  height: calc(var(--icon-size) * 1px) !important;
+}
+
+mat-icon {
+  display: flex;
+  color: var(--icon-color) !important;
+
+  &.size-16 svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.size-24 svg {
+  width: 24px;
+  height: 24px;
+  }
+
+  &.size-40 svg {
+    width: 40px;
+    height: 40px;
+  }
+
+  &.size-80 svg {
+    width: 80px;
+    height: 80px;
+  }
+
+  &.dark svg {
+    color: $tgo-dark;
+  }
+
+  &.white svg {
+    color: $tgo-white;
+  }
+
+  &.teal svg {
+    color: $tgo-teal-default;
+  }
+
+  &.petrol svg {
+    color: $tgo-petrol-default;
+  }
+
+  &.black svg {
+    color: $tgo-black;
+  }
+
+  &.red svg {
+    color: $error-50;
+  }
+
+  &.gray svg {
+    color: $grayscale-50;
+  }
+
+  &.orange svg {
+    color: $warning-50;
+  }
+
+  &.rebrand-black svg {
+   color: $black;
+  }
+}