@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,6 @@
+<div class="spinner-container" [ngClass]="classes">
+  <svg class="spinner" viewBox="0 0 50 50">
+    <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
+  </svg>
+</div>
+

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

@@ -0,0 +1,75 @@
+@use "../../theme/variables" as *;
+
+.spinner-container {
+  &.large {
+    width: 48px;
+    height: 48px;
+    stroke-width: 8px;
+
+    .spinner {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  &.small {
+    stroke-width: 4px;
+    width: 16px;
+    height: 16px;
+
+    .spinner {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+
+  .spinner {
+    animation: rotate 2s linear infinite;
+    width: 48px;
+    height: 48px;
+
+    & .path {
+      stroke: $brand-50;
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+
+  }
+
+  &.classic .spinner .path {
+    stroke: $tgo-petrol-default;
+  }
+
+
+  &.loader {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 999;
+    margin: -25px 0 0 -25px;
+  }
+
+}
+
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

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

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SpinnerComponent } from './spinner.component';
+import { InjectionToken } from "@angular/core";
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+  const CANOPYUI_DEFAULT_APPLICATION_THEME = new InjectionToken<string>('CANOPYUI_DEFAULT_APPLICATION_THEME');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SpinnerComponent],
+      providers: [{ provide: CANOPYUI_DEFAULT_APPLICATION_THEME, useValue: 'dark' }], // optional provider
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default size as "large"', () => {
+    fixture.detectChanges();
+    expect(component.size).toBe('large');
+  });
+
+  it('should have default "isLoader" as true', () => {
+    fixture.detectChanges();
+    expect(component.isLoader).toBe(true);
+  });
+
+  it('should have default applicationTheme as "light"', () => {
+    fixture.detectChanges();
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should set spinner classes based on size, isLoader, and applicationTheme', () => {
+    component.size = 'large';
+    component.isLoader = true;
+    component.applicationTheme = 'dark';
+
+    fixture.detectChanges();
+    component.setSpinnerClasses();
+
+    expect(component.classes).toBe('large loader dark');
+
+    component.size = 'small';
+    component.isLoader = false;
+    component.applicationTheme = 'light';
+
+    fixture.detectChanges();
+    component.setSpinnerClasses();
+
+    expect(component.classes).toBe('small  light');
+  });
+
+  it('should set spinner classes in ngOnInit', () => {
+    fixture.detectChanges(); // triggers ngOnInit
+    expect(component.classes).toBe('large loader light');
+  });
+
+  it('should update spinner classes in ngOnChanges', () => {
+    component.size = 'small';
+    component.isLoader = false;
+    component.applicationTheme = 'dark';
+
+    fixture.detectChanges(); // triggers ngOnChanges
+    expect(component.classes).toBe('small  dark');
+  });
+
+  it('should use default application theme if provided in constructor', () => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+
+    expect(component.applicationTheme).toBe('light');
+    expect(component.classes).toBe('large loader light');
+  })
+})

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

@@ -0,0 +1,46 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { SpinnerComponent } from './spinner.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Spinner',
+  component: SpinnerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [],
+      declarations: [SpinnerComponent],
+      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: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small'
+};
+
+Small.parameters = parameters;
+

package/projects/tgo-canopy-ui/components/spinner/spinner.component.ts

@@ -0,0 +1,59 @@
+import { Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';
+import { SpinnerSize } from './spinner.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss'],
+})
+export class SpinnerComponent implements OnInit, OnChanges {
+  /**
+   * The size variant of the spinner. Can be 'small' or 'large'.
+   * Defaults to 'large'.
+   * @default 'large'
+   * @type {SpinnerSize}
+   * @memberof SpinnerComponent
+   */
+  @Input() size: SpinnerSize = 'large';
+
+  /**
+   * Set position fixed on page
+   * Defaults to 'true'.
+   * @default 'true'
+   * @type {SpinnerSize}
+   * @memberof SpinnerComponent
+   */
+  @Input() isLoader = true;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SpinnerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  classes: string;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(): void {
+    this.setSpinnerClasses();
+  }
+
+  ngOnInit(): void {
+    this.setSpinnerClasses();
+  }
+
+  setSpinnerClasses(): void {
+    this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${this.applicationTheme}`;
+  }
+}

package/projects/tgo-canopy-ui/components/spinner/spinner.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SpinnerComponent } from './spinner.component';
+import { NgClass } from '@angular/common';
+
+@NgModule({
+  declarations: [SpinnerComponent],
+  exports: [SpinnerComponent],
+  imports: [NgClass],
+})
+export class SpinnerComponentModule {}

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

@@ -0,0 +1,100 @@
+<div
+  *ngIf="!mobileMode; else mobile"
+  class="step-container"
+  [tabIndex]="0"
+  [ngClass]="{
+    'visited-next': isVisited && index > selectedIndex,
+    'visited-prev': isVisited && index < selectedIndex,
+    'active': selected,
+    'last-step': finalIcon && hasLastStepDefaultIcon,
+    'disabled': disabled,
+  }"
+  [attr.theme]="applicationTheme"
+  (click)="onStepSelected(index)"
+>
+  <div class="step-icon">
+    <div class="line" *ngIf="index" [ngClass]="{ visited: prevStepIsVisited }"></div>
+    <div class="icon-wrapper" *ngIf="!finalIcon; else lastStep">
+      <ng-container [ngSwitch]="true">
+        <ng-container *ngSwitchCase="isVisited && !selected">
+          <ui-icon [size]="'24'" [name]="'Check'"
+                   [color]="isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'"></ui-icon>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="selected && !!icon">
+          <ui-icon [size]="'24'" [name]="icon!" [color]="'white'"></ui-icon>
+        </ng-container>
+
+        <ng-container *ngSwitchDefault>
+          {{ index + 1 }}
+        </ng-container>
+      </ng-container>
+    </div>
+
+    <ng-template #lastStep>
+      <img
+        *ngIf="hasLastStepDefaultIcon; else stepIcon"
+        [alt]="'step-finish-image'"
+        [attr.src]="applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'"
+      >
+
+      <ng-template #stepIcon>
+        <div class="icon-wrapper">
+          <ui-icon *ngIf="icon; else stepIndex" [size]="'24'" [name]="icon" [color]="'white'"></ui-icon>
+          <ng-template #stepIndex>
+            {{ index + 1 }}
+          </ng-template>
+        </div>
+      </ng-template>
+    </ng-template>
+  </div>
+
+  <div class="step-label" *ngIf="label">
+    {{ label }}
+  </div>
+</div>
+
+<ng-template #mobile>
+  <div class="mobile-step-container"
+       [ngClass]="{ 'active': selected, 'disabled': disabled, 'visited': isVisited }"
+       (click)="onStepSelected(index)"
+       [attr.theme]="applicationTheme"
+  >
+    <div class="step">
+      <ng-container *ngIf="!finalIcon; else lastStep">
+        <div [ngSwitch]="true" class="icon">
+          <ng-container *ngSwitchCase="isVisited && !selected">
+            <ui-icon [size]="'16'" [name]="'Check'" [color]="'white'"></ui-icon>
+          </ng-container>
+
+          <ng-container *ngSwitchCase="selected && !!icon">
+            <ui-icon [size]="'16'" [name]="icon!" [color]="'white'"></ui-icon>
+          </ng-container>
+
+          <ng-container *ngSwitchDefault>
+            {{ index + 1 }}
+          </ng-container>
+        </div>
+      </ng-container>
+
+      <ng-template #lastStep>
+        <img *ngIf="hasLastStepDefaultIcon; else stepIcon"
+             [alt]="'step-finish-image'"
+             [width]="24"
+             [height]="24"
+             [attr.src]="applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'"
+        >
+
+        <ng-template #stepIcon>
+          <div class="icon">
+            <ui-icon *ngIf="icon; else stepIndex" [size]="'24'" [name]="icon" [color]="'white'"></ui-icon>
+            <ng-template #stepIndex>
+              {{ index + 1 }}
+            </ng-template>
+          </div>
+        </ng-template>
+      </ng-template>
+      <span class="label">{{ label }}</span>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StepComponent } from './step.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+
+@NgModule({
+  declarations: [StepComponent],
+  imports: [CommonModule, IconComponentModule],
+  exports: [StepComponent],
+})
+export class StepComponentModule {}

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

@@ -0,0 +1,315 @@
+@use "../../theme/variables" as *;
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-container {
+  @extend .flex-center;
+  flex-direction: column;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 24px;
+  gap: 16px;
+  max-width: 200px;
+  width: 100%;
+  position: relative;
+  letter-spacing: 1px;
+
+  &.disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &:hover {
+    background: $tgo-grey;
+  }
+
+  &:focus {
+    outline: 1px dashed $tgo-dark;
+  }
+
+  &.visited-next {
+    &:hover, &:focus, &:active {
+      .step-icon {
+        border-color: $tgo-petrol-default;
+      }
+    }
+  }
+
+  &.active, &.visited-prev {
+    .step-icon {
+      border-color: $tgo-petrol-default;
+      background-color: $tgo-white;
+      color: $tgo-white;
+
+      .icon-wrapper {
+        background: $tgo-petrol-default;
+      }
+    }
+  }
+
+  &.active {
+    .step-label {
+      color: $tgo-petrol-default;
+      line-height: 24px;
+      text-shadow: 0 0 1px $tgo-petrol-default;
+    }
+  }
+
+  &.visited-prev {
+    &:hover, &:focus, &:active {
+      .step-icon {
+        background: $tgo-petrol-default;
+      }
+    }
+  }
+
+  &.last-step {
+
+    .step-icon {
+      border: unset;
+      background: transparent;
+    }
+
+    .step-label {
+      font-weight: 400;
+    }
+  }
+
+  .step-label {
+    color: $tgo-petrol-default;
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: 400;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 100%;
+    text-align: center;
+  }
+
+  .step-icon {
+    @extend .flex-center;
+    width: 44px;
+    height: 44px;
+    border: 3px solid $tgo-petrol-secondary;
+    border-radius: 100%;
+    color: $tgo-petrol-default;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 17px;
+    background: transparent;
+    margin: 0 24px;
+
+    .line {
+      position: absolute;
+      top: 45px;
+      left: -8px;
+      border-top: 2px solid $tgo-petrol-secondary;
+      width: calc(50% - 29px);
+      right: 56px;
+
+      &.visited {
+        border-color: $tgo-petrol-default !important;
+      }
+    }
+  }
+
+  .icon-wrapper {
+    @extend .flex-center;
+    width: 28px;
+    height: 28px;
+    border-radius: 100%;
+    background: $tgo-petrol-secondary;
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    &:hover {
+      background: $brand-10;
+    }
+
+    .step-label {
+      font-size: 14px;
+    }
+
+    gap: 8px;
+
+    &:active {
+      background: $brand-20;
+    }
+
+    &.visited-next {
+      &:hover, &:focus, &:active {
+        .step-icon {
+          border-color: $black;
+        }
+      }
+    }
+
+    &.active, &.visited-prev {
+      .step-icon {
+        border-color: $black;
+        background-color: $tgo-white;
+        color: $tgo-white;
+
+        .icon-wrapper {
+          background: $black;
+        }
+      }
+    }
+
+    &.active {
+      .step-icon {
+        border-color: $brand-50;
+        background-color: $tgo-white;
+        color: $tgo-white;
+
+        .icon-wrapper {
+          background: $brand-50;
+        }
+      }
+
+      .step-label {
+        color: $brand-50;
+        text-shadow: 0 0 1px $brand-50;
+      }
+    }
+
+    &.visited-prev {
+      &:hover, &:focus, &:active {
+        .step-icon {
+          background: $black;
+        }
+      }
+    }
+
+    &.last-step {
+
+      .step-icon {
+        border: unset;
+        background: transparent;
+      }
+
+      .step-label {
+        font-weight: 400;
+      }
+    }
+
+    .step-label {
+      color: $black;
+    }
+
+    .step-icon {
+      @extend .flex-center;
+      border: 3px solid $grayscale-30;
+      color: $grayscale-50;
+
+      .line {
+        border-top: 2px solid $grayscale-30;
+
+        &.visited {
+          border-color: $black !important;
+        }
+      }
+    }
+
+    .icon-wrapper {
+      @extend .flex-center;
+      background: $grayscale-30;
+    }
+  }
+}
+
+.mobile-step-container {
+  .step {
+    cursor: pointer;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+
+    img {
+      margin-right: 16px;
+    }
+
+    .icon {
+      margin-right: 16px;
+      min-width: 24px;
+      height: 24px;
+      background: $tgo-petrol-secondary;
+      border-radius: 50%;
+      color: $tgo-petrol-default;
+      font-weight: 700;
+      @extend .flex-center;
+    }
+
+    .label {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  &.active {
+    .step {
+      .label {
+        line-height: 24px;
+        font-weight: 700;
+      }
+
+      .icon {
+        background: $tgo-petrol-default;
+        color: $tgo-white;
+      }
+    }
+  }
+
+  &.visited {
+    .step {
+      .icon {
+        background: $tgo-petrol-default;
+        color: $tgo-white;
+      }
+    }
+  }
+
+  &.disabled {
+    pointer-events: none;
+
+    .step {
+      .label {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    .step {
+      .icon {
+        background: $grayscale-30;
+        color: $grayscale-50;
+      }
+    }
+
+
+    &.visited {
+      .step {
+        .icon {
+          background: $black;
+          color: $tgo-white;
+        }
+      }
+    }
+
+    &.active {
+      .step {
+        .icon {
+          background: $brand-50;
+          color: $tgo-white;
+        }
+      }
+    }
+  }
+}