@testgorilla/tgo-ui 2.11.0 → 2.11.1

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

@@ -0,0 +1,48 @@
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ProgressBarComponent } from './progress-bar.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'ProgressBar',
+  component: ProgressBarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [MatProgressBarModule],
+      declarations: [ProgressBarComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+export const Determinate = Template.bind({});
+Determinate.args = {
+  mode: 'determinate',
+  progress: 40,
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  mode: 'indeterminate',
+};
+
+export const Query = Template.bind({});
+Query.args = {
+  mode: 'query',
+};
+
+export const Buffer = Template.bind({});
+Buffer.args = {
+  mode: 'buffer',
+  progress: 20,
+  buffer: 60,
+};

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Inject,
+  Input,
+  OnChanges,
+  Optional,
+  SimpleChanges,
+} from '@angular/core';
+import { ProgressBarMode } from '@angular/material/progress-bar';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarComponent implements OnChanges {
+  /**
+   * Color of the progress bar.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof ProgressBarComponent
+   */
+  @HostBinding('style.--color')
+  @Input()
+  companyColor: string;
+
+  /**
+   * Progress value of the progress bar.
+   * Defaults to zero.
+   *
+   * @type {number}
+   * @memberof ProgressBarComponent
+   */
+  @Input() progress = 0;
+
+  /**
+   * Mode of the progress bar.
+   * Mode must be one of these values: determinate, indeterminate, buffer, query.
+   * Defaults to 'determinate'.
+   *
+   * @type {ProgressBarMode}
+   * @memberof ProgressBarComponent
+   */
+  @Input() mode: ProgressBarMode = 'determinate';
+
+  /**
+   * Buffer value of the progress bar.
+   * Defaults to zero.
+   *
+   * @type {number}
+   * @memberof ProgressBarComponent
+   */
+  @Input() buffer = 0;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ProgressBarComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes['companyColor']) {
+      this.companyColor = this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.html

@@ -0,0 +1,26 @@
+<div
+  class="radial-progress-container"
+  [attr.theme]="applicationTheme"
+  [style.width]="progressSize + 'px'"
+  [style.height]="progressSize + 'px'"
+>
+  <div class="background"></div>
+
+  <mat-progress-spinner [strokeWidth]="8" [diameter]="progressSize" [value]="percentage"></mat-progress-spinner>
+
+  <div class="inner-container">
+    <ng-container *ngIf="variant === 'icon-button' && size !== 'small'; else number">
+      <ui-button
+        [tooltip]="buttonTooltip"
+        [iconName]="icon"
+        [variant]="'icon-button'"
+        (click)="onButtonClick($event)"
+        [applicationTheme]="applicationTheme"
+      ></ui-button>
+    </ng-container>
+
+    <ng-template #number>
+      <div *ngIf="size === radialProgressSize.LARGE">{{ percentage }}%</div>
+    </ng-template>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RadialProgressComponent } from './radial-progress.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ButtonComponentModule } from '../button/button.component.module';
+
+@NgModule({
+  declarations: [RadialProgressComponent],
+  exports: [RadialProgressComponent],
+  imports: [CommonModule, MatProgressSpinnerModule, ButtonComponentModule],
+})
+export class RadialProgressComponentModule {}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.scss

@@ -0,0 +1,41 @@
+@use "../../theme/variables" as *;
+
+:host {
+  .radial-progress-container {
+    position: relative;
+
+    .inner-container, .background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .background {
+      border: 8px solid $tgo-medium;
+      border-radius: 50%;
+    }
+
+    .inner-container, {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $tgo-petrol-default;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    ::ng-deep.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,
+    .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
+      stroke: var(--color);
+      stroke-linecap: round;
+    }
+
+    &[theme="dark"], &[theme="light"] {
+      .inner-container {
+        color: $black;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RadialProgressComponent } from './radial-progress.component';
+import { RadialProgressSizeEnum, RadialProgressSizeValue, RadialProgressVariant } from "./radial-progress.model";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+describe('RadialProgressComponent', () => {
+  let component: RadialProgressComponent;
+  let fixture: ComponentFixture<RadialProgressComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RadialProgressComponent],
+      imports: [MatProgressSpinnerModule],
+    });
+    fixture = TestBed.createComponent(RadialProgressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default values', () => {
+    expect(component.size).toBe(RadialProgressSizeEnum.SMALL);
+    expect(component.value).toBe(0);
+    expect(component.total).toBe(0);
+  });
+
+  it('should calculate correct percentage', () => {
+    component.value = 50;
+    component.total = 100;
+
+    //@ts-expect-error
+    expect(component.percentage).toBe(50);
+
+    // Make sure it handles division by zero
+    component.total = 0;
+    //@ts-expect-error
+    expect(component.percentage).toBe(0);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default size as small', () => {
+    expect(component.size).toBe(RadialProgressSizeEnum.SMALL);
+  });
+
+  it('should have default value as 0', () => {
+    expect(component.value).toBe(0);
+  });
+
+  it('should have default total as 0', () => {
+    expect(component.total).toBe(0);
+  });
+
+  it('should have default variant as number', () => {
+    expect(component.variant).toBe('number' as RadialProgressVariant);
+  });
+
+  it('should have default icon as empty', () => {
+    expect(component.icon).toBe('');
+  });
+
+  it('should have default buttonTooltip as empty string', () => {
+    expect(component.buttonTooltip).toBe('');
+  });
+
+  it('should have default applicationTheme as light', () => {
+    expect(component.applicationTheme).toBe('light' as ApplicationTheme);
+  });
+
+  it('should calculate the correct progressSize for small size', () => {
+    component.size = RadialProgressSizeEnum.SMALL;
+    // @ts-ignore
+    expect(component.progressSize).toBe(RadialProgressSizeValue.SMALL);
+  });
+
+  it('should calculate the correct progressSize for large size', () => {
+    component.size = RadialProgressSizeEnum.LARGE;
+    // @ts-ignore
+    expect(component.progressSize).toBe(RadialProgressSizeValue.LARGE);
+  });
+
+  it('should calculate the correct percentage', () => {
+    component.value = 50;
+    component.total = 200;
+    // @ts-ignore
+    expect(component.percentage).toBe(25);
+  });
+
+  it('should return 0 percentage when total is 0', () => {
+    component.value = 50;
+    component.total = 0;
+    // @ts-ignore
+    expect(component.percentage).toBe(0);
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RadialProgressComponent } from './radial-progress.component';
+import { RadialProgressSizeEnum } from './radial-progress.model';
+import { transformTheme } from '../../utils/transform-theme';
+import { ButtonComponentModule } from '../button/button.component.module';
+
+export default {
+  title: 'Radial Progress',
+  component: RadialProgressComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [RadialProgressComponent],
+      imports: [MatProgressSpinnerModule, ButtonComponentModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12588-64132&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Large = Template.bind({});
+Large.args = {
+  size: RadialProgressSizeEnum.LARGE,
+  value: 25,
+  total: 100,
+};
+
+Large.parameters = parameters;
+export const Small = Template.bind({});
+Small.args = {
+  size: RadialProgressSizeEnum.SMALL,
+  value: 25,
+  total: 100,
+};
+
+Small.parameters = parameters;
+
+export const IconButton = Template.bind({});
+IconButton.args = {
+  size: RadialProgressSizeEnum.LARGE,
+  value: 25,
+  total: 100,
+  variant: 'icon-button',
+  companyColor: 'red',
+  icon: 'Test',
+  buttonTooltip: 'Test',
+};
+
+IconButton.parameters = parameters;

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  Optional,
+  Output, SimpleChanges
+} from '@angular/core';
+import {
+  RadialProgressSize,
+  RadialProgressSizeEnum,
+  RadialProgressSizeValue,
+  RadialProgressVariant
+} from './radial-progress.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { IconName } from '../icon/icon.model';
+
+@Component({
+  selector: 'ui-radial-progress',
+  templateUrl: './radial-progress.component.html',
+  styleUrls: ['./radial-progress.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadialProgressComponent {
+  /**
+   * The size of the component. Defaults to 'small'.
+   * @type {RadialProgressSize}
+   * @memberof RadialProgressComponent
+   */
+  @Input() size: RadialProgressSize = RadialProgressSizeEnum.SMALL;
+  /**
+   * The current value of the progress. Defaults to 0.
+   * @type {number}
+   * @memberof RadialProgressComponent
+   */
+  @Input() value = 0;
+  /**
+   * The value of the total progress. Used to set the cap and used for percentage calculations. Defaults to 0.
+   * @type {number}
+   * @memberof RadialProgressComponent
+   */
+  @Input() total = 0;
+
+  /**
+   * @type {number}
+   * @memberof RadialProgressComponent
+   */
+  @Input() variant: RadialProgressVariant = 'number';
+
+  /**
+   * Icon for icon button
+   * @type {number}
+   * @memberof RadialProgressComponent
+   */
+  @Input() icon: IconName = '';
+
+  /**
+   * The tooltip that is displayed on hover. Required for icon-button
+   * @type {number}
+   * @memberof RadialProgressComponent
+   */
+  @Input() buttonTooltip = '';
+
+  /**
+   * Color of the progress bar.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof RadialProgressComponent
+   */
+  @HostBinding('style.--color')
+  @Input() companyColor: string;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ButtonComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  @Output() buttonClicked = new EventEmitter<Event>();
+
+  protected radialProgressSize = RadialProgressSizeEnum;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes['companyColor']) {
+      this.companyColor = this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
+    }
+  }
+
+  protected get progressSize(): number {
+    return this.size === RadialProgressSizeEnum.SMALL ? RadialProgressSizeValue.SMALL : RadialProgressSizeValue.LARGE;
+  }
+
+  protected get percentage(): number {
+    return Math.round(this.total ? (this.value * 100) / this.total : 0);
+  }
+
+  protected onButtonClick(ev: Event): void {
+    this.buttonClicked.emit(ev);
+  }
+}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.model.ts

@@ -0,0 +1,13 @@
+export type RadialProgressSize = 'large' | 'small';
+
+export enum RadialProgressSizeValue {
+  LARGE = 64,
+  SMALL = 40,
+}
+
+export enum RadialProgressSizeEnum {
+  LARGE = 'large',
+  SMALL = 'small',
+}
+
+export type RadialProgressVariant = 'number' | 'icon-button';

package/projects/tgo-canopy-ui/components/radio-button/radio-button.component.html

@@ -0,0 +1,18 @@
+<div [class]="multiple ? 'radio-container' : ''" [ngClass]="classMultiple" [attr.theme]="applicationTheme" [attr.hasError]="hasError">
+  <mat-radio-button
+    #radio
+    [checked]="selected"
+    [disabled]="disabled"
+    [name]="name"
+    [value]="value"
+    class="radio-button"
+    (click)="clickRadio(radio, $event)"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+  >
+    <span class="label"
+          (click)="clickRadio(radio, $event)"
+    >{{ label }}</span>
+    <ng-content select="[radio-label]"></ng-content>
+  </mat-radio-button>
+</div>

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

@@ -0,0 +1,13 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatRadioModule } from '@angular/material/radio';
+import { RadioButtonComponent } from './radio-button.component';
+import { MatInputModule } from '@angular/material/input';
+
+@NgModule({
+  declarations: [RadioButtonComponent],
+  imports: [CommonModule, MatRadioModule, FormsModule, ReactiveFormsModule, MatInputModule],
+  exports: [RadioButtonComponent],
+})
+export class RadioButtonComponentModule {}