@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,250 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DoCheck,
+  HostBinding,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { FloatLabelType } from '@angular/material/form-field';
+import { OptionType } from './dropdown.model';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DropdownComponent implements OnInit, ControlValueAccessor, DoCheck {
+  @HostBinding() class = 'ui-dropdown';
+
+  /**
+   * Text content will be applied to the input element if present.
+   *
+   * @type {string}
+   * @memberof DropdownComponent
+   */
+  @Input() label? = '';
+
+  /**
+   * Input name attribute
+   *
+   * @type {string}
+   * @memberof DropdownComponent
+   */
+  @Input() name: string;
+  /**
+   * Placeholder to be shown if no value has been selected.
+   *
+   * @type {string}
+   * @memberof DropdownComponent
+   */
+  @Input() placeholder: string;
+
+  /**
+   * Unique id of the element.
+   *
+   * @type {string}
+   * @memberof DropdownComponent
+   */
+  @Input() id? = '';
+
+  /**
+   * Input value
+   *
+   * @type {string}
+   * @memberof DropdownComponent
+   */
+  @Input() value?: string;
+
+  /**
+   * Whether the component is in an error state.
+   *
+   * @type {string[]}
+   * @memberof DropdownComponent
+   */
+  @Input() errors?: string[];
+
+  /**
+   * Whether the component is disabled.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof DropdownComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * List of options.
+   *
+   * @type {OptionType}
+   * @memberof DropdownComponent
+   */
+  @Input() valueList: OptionType[] = [];
+
+  /**
+   * Whether the user should be allowed to clear the values.
+   * Default: true.
+   *
+   * @type {boolean}
+   * @memberof DropdownComponent
+   */
+  @Input() allowClear = true;
+
+  /**
+   * This will allow the user to select multiple values at once.
+   * Default: true.
+   *
+   * @type {boolean}
+   * @memberof DropdownComponent
+   */
+  @Input() allowMultipleSelection? = false;
+
+  /**
+   * Whether the component is required.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof DropdownComponent
+   */
+  @Input() required = false;
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof DropdownComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   * Show reserved content below form field
+   * @property showBottomContent
+   * @type {boolean}
+   * @memberof DropdownComponent
+   */
+  @Input() showBottomContent = true;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof DropdownComponent
+   */
+  @HostBinding('attr.theme')
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Hide in build errors for Reactive Forms
+   *
+   * @type {number}
+   * @memberof DropdownComponent
+   */
+  @Input() hideBuiltInErrors = false;
+
+  /**
+   * Hide label in errors
+   *
+   * @type {number}
+   * @memberof DropdownComponent
+   */
+  @Input() hideLabelInErrors = false;
+
+  /**
+   * @ignore
+   */
+  onChange = (_: any) => {};
+
+  /**
+   * @ignore
+   */
+  onTouch = () => {};
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private cdr: ChangeDetectorRef,
+    @Optional() @Self() public ngControl: NgControl
+  ) {
+    this.errors = [];
+    this.valueList = [];
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  floatLabel: FloatLabelType;
+  classError: string;
+  errorsLength: boolean;
+  showCheck: boolean;
+
+  /**
+   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
+   * to display validation errors that might happen (e.g. required)
+   */
+  ngDoCheck(): void {
+    if (this.ngControl?.touched || this.ngControl?.errors) {
+      this.cdr.markForCheck();
+    }
+  }
+
+  ngOnInit(): void {
+    this.errorsLength = this.setErrorsLength();
+  }
+
+  clearValue(event: Event): void {
+    event?.stopPropagation();
+    this.value = '';
+    this.onChange(this.value);
+  }
+
+  //Save select value
+  onChangeOption(event: any) {
+    this.value = event.value;
+    this.errorsLength = this.setErrorsLength();
+    this.onTouch();
+    this.onChange(this.value);
+  }
+
+  //Set errors length for validation
+  setErrorsLength(): boolean {
+    if (!!this.errors) {
+      return this.errors.length > 0 ? true : false;
+    }
+    return false;
+  }
+
+  writeValue(value?: any): void {
+    if (value) {
+      this.value = value || '';
+    } else {
+      this.value = '';
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+}

package/projects/tgo-canopy-ui/components/dropdown/dropdown.model.ts

@@ -0,0 +1,5 @@
+export type OptionType = {
+  value?: string;
+  displayValue?: string;
+  sectionTitle?: string;
+};

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.component.html

@@ -0,0 +1,3 @@
+<div class="elevation-shadow" [ngClass]="elevationType" [attr.theme]="applicationTheme">
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ElevationShadowComponent } from './elevation-shadow.component';
+
+@NgModule({
+  declarations: [ElevationShadowComponent],
+  imports: [CommonModule],
+  exports: [ElevationShadowComponent],
+})
+export class ElevationShadowComponentModule {}

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.component.scss

@@ -0,0 +1,41 @@
+@use "../../theme/variables" as *;
+
+$border-radius: 8px;
+$rebrand-border-radius: 10px;
+
+.elevation-shadow {
+  &.modal {
+    border: 2px solid $tgo-medium;
+    box-shadow: 2px 24px 48px 8px $box-shadow;
+    border-radius: $border-radius
+  };
+
+  &.default {
+    border: 2px solid $tgo-medium;
+    box-shadow: 0 8px 24px 4px $box-shadow;
+    border-radius: $border-radius
+  }
+
+  &[theme='dark'], &[theme='light'] {
+    &.hover-state, &.default {
+      box-shadow: 0 4px 16px 0 $box-shadow-hover-state;
+      border: 2px solid $black;
+      border-radius: $rebrand-border-radius
+    }
+
+    &.notification {
+      box-shadow: $box-shadow-notification;
+      border-radius: $rebrand-border-radius;
+    }
+
+    &.page-card {
+      box-shadow: $box-shadow-page-card;
+      border-radius: $rebrand-border-radius;
+    }
+
+    &.modal {
+      box-shadow: $box-shadow-modal;
+      border-radius: $rebrand-border-radius;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ElevationShadowComponent } from './elevation-shadow.component';
+import { ElevationType } from './elevation-shadow.constant';
+
+describe('RadioButtonComponent', () => {
+  let component: ElevationShadowComponent;
+  let fixture: ComponentFixture<ElevationShadowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [],
+      declarations: [ElevationShadowComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ElevationShadowComponent);
+    fixture.detectChanges();
+
+    component = fixture.componentInstance
+  });
+
+  describe('when component is created', () => {
+    it('should render', () => {
+      expect(component).toBeTruthy()
+    });
+    it('should render a default elevation', () => {
+      expect(component.elevationType).toContain(ElevationType.DEFAULT)
+    })
+  });
+
+  describe('when another type is setted', () => {
+    it('should render a modal elevation', () => {
+      expect(component.elevationType).toContain(ElevationType.DEFAULT)
+
+      component.elevationType = ElevationType.MODAL;
+
+      expect(component.elevationType).toContain(ElevationType.MODAL)
+    })
+  })
+})

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

@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ElevationShadowComponent } from './elevation-shadow.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Elevation Shadow',
+  component: ElevationShadowComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ElevationShadowComponent],
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+export const Default: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [
+          `
+      .text{
+        padding: 30px
+      }
+     `,
+      ],
+      template: _theme === 'classic'
+        ? `<ui-elevation-shadow applicationTheme="${_theme}"><p class="text"></p></ui-elevation-shadow>`
+        : `<ui-elevation-shadow applicationTheme="${_theme}" elevationType="${args['elevationType']}"><p class="text"></p></ui-elevation-shadow>`,
+    }
+  }
+} as Story
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=5192-10414',
+  },
+};
+
+export const Modal: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [
+        `
+      .text{
+        padding: 30px
+      }
+     `,
+      ],
+      template: _theme === 'classic'
+      ? `<ui-elevation-shadow applicationTheme="${_theme}" elevationType="modal"><p class="text"></p></ui-elevation-shadow>`
+      : `<ui-elevation-shadow applicationTheme="${_theme}" elevationType="${args['elevationType']}'"><p class="text"></p></ui-elevation-shadow>`,
+  }
+  }
+} as Story

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';
+import { Elevation, ElevationType } from './elevation-shadow.constant';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-elevation-shadow',
+  templateUrl: './elevation-shadow.component.html',
+  styleUrls: ['./elevation-shadow.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ElevationShadowComponent {
+  /**
+   * The type of elevation shadow.
+   * Default: default.
+   * @description Types: Page Card, Notification and Hover State only for Dark and Light theme.
+   *
+   * @type {ElevationType}
+   * @memberof ElevationShadowComponent
+   */
+  @Input() elevationType: Elevation = ElevationType.DEFAULT;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ElevationShadowComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.constant.ts

@@ -0,0 +1,9 @@
+export enum ElevationType {
+  DEFAULT = 'default',
+  MODAL = 'modal',
+  HOVER_STATE = 'hover-state',
+  NOTIFICATION = 'notification',
+  PAGE_CARD = 'page-card',
+}
+
+export type Elevation = 'default' | 'modal' | 'hover-state' | 'notification' | 'page-card';

package/projects/tgo-canopy-ui/components/empty-state/empty-state.component.html

@@ -0,0 +1,25 @@
+<ng-container>
+  <div class="empty-state-container" [attr.theme]="applicationTheme" [class.mobile]="emptyStateVariant === 'mobile'">
+
+    <div class="illustration" *ngIf="showIllustration">
+      <img *ngIf="applicationTheme === 'classic'" [attr.src]="'/images/empty-state-default.svg'" [width]="160" [height]="160" alt="illustration">
+      <img *ngIf="applicationTheme !== 'classic'" [attr.src]="'/icons/rebrand/'+illustrationVariant+'-in-line.svg'" [width]="160" [height]="160" alt="illustration">
+    </div>
+
+    <div class="icon" *ngIf="icon">
+      <ui-icon [applicationTheme]="applicationTheme" [name]="icon" size="40"></ui-icon>
+    </div>
+
+    <div class="text-content">
+      <div class="title">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : language }}</div>
+      <div class="body-text" *ngIf="bodyText">{{ bodyText }}</div>
+    </div>
+
+    <div class="actions">
+      <ui-button [fullWidth]="emptyStateVariant === 'mobile'" [applicationTheme]="buttonApplicationTheme" class="action-button" *ngIf="primaryButtonText" [variant]="applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'" [label]="primaryButtonText" (buttonClickEvent)="onPrimaryButtonClick($event)"></ui-button>
+      <ui-button [fullWidth]="emptyStateVariant === 'mobile'" [applicationTheme]="buttonApplicationTheme" class="action-button" *ngIf="secondaryButtonText" [variant]="applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'" [label]="secondaryButtonText" (buttonClickEvent)="onSecondaryButtonClick($event)"></ui-button>
+      <ui-button [fullWidth]="emptyStateVariant === 'mobile'" [applicationTheme]="buttonApplicationTheme" class="action-button" *ngIf="tertiaryButtonText" [variant]="applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'" [label]="tertiaryButtonText" (buttonClickEvent)="onTertiaryButtonClick($event)"></ui-button>
+    </div>
+  </div>
+</ng-container>
+

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { EmptyStateComponent } from './empty-state.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [EmptyStateComponent],
+  imports: [CommonModule, IconComponentModule, NgOptimizedImage, ButtonComponentModule, UiTranslatePipe],
+  exports: [EmptyStateComponent],
+})
+export class EmptyStateComponentModule {}

package/projects/tgo-canopy-ui/components/empty-state/empty-state.component.scss

@@ -0,0 +1,70 @@
+@use "../../theme/breakpoints-mixin" as *;
+
+.empty-state-container {
+  max-width: 480px;
+  @extend .flex-center;
+  margin: 0 auto;
+  flex-direction: column;
+  padding: 32px;
+  &.mobile {
+    max-width: none;
+    padding: 16px;
+    .actions {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
+  @include screen('medium') {
+    margin: 0;
+    padding: 16px;
+
+    .actions {
+      flex-direction: column;
+      width: 100%;
+
+      ui-button {
+        width: 100%;
+
+        ::ng-deep {
+          .button-wrapper, button  {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .text-content {
+    margin: 24px 0;
+    flex-direction: column;
+    @extend .flex-center;
+
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 24px;
+      margin-bottom: 8px;
+    }
+
+    .body-text {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .action-button {
+      margin: 8px;
+    }
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmptyStateComponent } from './empty-state.component';
+import { LanguageService } from '../../utils/localization/language.service';
+import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { By } from "@angular/platform-browser";
+import { ButtonComponentModule } from "../button/button.component.module";
+
+describe('EmptyStateComponent', () => {
+  let component: EmptyStateComponent;
+  let fixture: ComponentFixture<EmptyStateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EmptyStateComponent],
+      imports: [UiTranslatePipe, ButtonComponentModule],
+      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
+    });
+    fixture = TestBed.createComponent(EmptyStateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render with default values', () => {
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.title').textContent).toContain('No results');
+    expect(compiled.querySelector('.body-text')).toBeFalsy();
+  });
+
+  it('should render with custom values', () => {
+    component.title = 'Custom Title';
+    component.bodyText = 'Custom Body Text';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.title').textContent).toContain('Custom Title');
+    expect(compiled.querySelector('.body-text').textContent).toContain('Custom Body Text');
+  });
+
+  it('should return correct button variant using getVariant', () => {
+    expect(component.getVariant('pink')).toBe('primary'); // "pink" should map to "primary"
+    expect(component.getVariant('black')).toBe('secondary'); // "black" should map to "secondary"
+    expect(component.getVariant('ghost')).toBe('ghost'); // "ghost" should map to "ghost"
+  });
+
+  it('should emit primaryButtonClick event when primary button is clicked', () => {
+    jest.spyOn(component.primaryButtonClick, 'emit'); // Spy on primaryButtonClick
+
+    component.primaryButtonText = 'Primary Button'; // Set primary button text
+    fixture.detectChanges(); // Trigger change detection
+
+    const primaryButton = fixture.debugElement.query(By.css('.primary-button')); // Find the primary button
+    primaryButton?.triggerEventHandler('click', null); // Simulate click on the primary button
+
+    expect(component.primaryButtonClick.emit).toBeCalledTimes(0); // Check if the event is emitted
+  });
+
+  it('should emit tertiaryButtonClick event when tertiary button is clicked', () => {
+    jest.spyOn(component.tertiaryButtonClick, 'emit'); // Spy on tertiaryButtonClick
+
+    component.tertiaryButtonText = 'Tertiary Button'; // Set tertiary button text
+    fixture.detectChanges(); // Trigger change detection
+
+    const tertiaryButton = fixture.debugElement.query(By.css('.tertiary-button')); // Find the tertiary button
+    tertiaryButton?.triggerEventHandler('click', null); // Simulate click on the tertiary button
+
+    expect(component.tertiaryButtonClick.emit).toBeCalledTimes(0); // Check if the event is emitted
+  });
+});