@testgorilla/tgo-ui 2.11.0 → 2.11.1

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

@@ -0,0 +1,393 @@
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding, Inject,
+  Input,
+  OnInit, Optional,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import { IconName } from '../icon/icon.model';
+import {
+  ButtonBadgeConfig,
+  ButtonColor,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonState,
+  ButtonType,
+  IconButtonSize,
+  LinkUrlTarget
+} from './button.model';
+import { adjustLightness } from '../../utils/color-contrast';
+import { MatButton } from '@angular/material/button';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent implements OnInit, AfterViewInit {
+  @HostBinding('style.pointer-events')
+  get enabled(): string {
+    return this.disabled ? 'none' : 'all';
+  }
+
+  @ViewChild('tooltipElement') tooltipElement: ElementRef<HTMLElement>;
+
+  /**
+   * Define button height
+   *
+   * @type {ButtonSize}
+   * @memberof ButtonComponent
+   */
+  @Input() size: ButtonSize = 'big';
+  /**
+   * Background color of the button while in active state
+   *
+   * @type {ButtonColor}
+   * @memberof ButtonComponent
+   */
+  @HostBinding('attr.btn-variant')
+  @Input()
+  variant: ButtonColor = 'primary';
+
+  /**
+   * Text content to appear on the button
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() label = '';
+
+  /**
+   * Positioning of the icon (when existant)
+   *
+   * @type {ButtonIconPosition}
+   * @memberof ButtonComponent
+   */
+  @Input() iconPosition?: ButtonIconPosition = 'right';
+
+  /**
+   * Define if button has only icon without text
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() justIcon = false;
+
+  /**
+   * Name of ui-icon
+   *
+   * @type {IconName}
+   * @memberof ButtonComponent
+   */
+  @Input() iconName: IconName = '';
+
+  /**
+   * Indicator if the button should be disabled
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * Indicator if the loading icon should be shown
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() loading = false;
+
+  /**
+   * Indicator of the button width
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() fullWidth = false;
+
+  /**
+   * Url of button if it is a link
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() url?: string;
+
+  /**
+   * Url's target of button if it is a link
+   *
+   * @type {@type {LinkUrlTarget}}
+   * @memberof ButtonComponent
+   */
+  @Input() urlTarget?: LinkUrlTarget;
+
+  /**
+   * Button value
+   *
+   * @memberof ButtonComponent
+   */
+  @Input() value?: string;
+
+  /**
+   * @property tooltip
+   * @description The tooltip that is displayed on hover. Required for icon-button type
+   * @type {string}
+   * @memberof ButtonComponent
+   */
+  @Input() tooltip = '';
+
+  /**
+   * @property isPremium
+   * @description The icon that is displayed for Premium button
+   * @type {boolean}
+   * @memberof ButtonComponent
+   */
+  @Input() isPremium = false;
+
+  /**
+   * The type of the button.
+   *
+   * @type {ButtonType}
+   * @memberof ButtonComponent
+   * @default 'button'
+   */
+  @Input() type: ButtonType = 'button';
+
+  /**
+   * Color of the button.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof ButtonComponent
+   */
+  @Input() companyColor = '';
+
+  /**
+   * Config for the button badge variation
+   * @type {ButtonBadgeConfig}
+   * @property badgeType Type of badge on the button
+   * @property badgeLabel Label text for the badge
+   * @property badgeNotificationAmount The amount for notification in the badge
+   */
+  @Input() buttonBadgeConfig: ButtonBadgeConfig | undefined;
+
+  /**
+   *
+   * Defines the application theme where buttons is used
+   *
+   * @type {ApplicationTheme}
+   * @memberof ButtonComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * Disabled button scale on click
+   *
+   * @type {boolean}
+   * @memberof ButtonComponent
+   */
+  @Input() disabledScaleOnClick = false;
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof ButtonComponent
+   */
+  @Input() ariaLabel: string;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input field is required for form submission.
+   * @type {boolean}
+   * @memberof ButtonComponent
+   */
+  @Input() ariaRequired = false;
+
+  @Output() buttonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
+
+  @Output() buttonHoverEvent: EventEmitter<Event> = new EventEmitter<Event>();
+
+  @ViewChild('buttonElement', { static: false }) buttonElement: MatButton;
+
+  get isDisabled(): boolean {
+    return this.disabled;
+  }
+
+  @HostBinding('style.--color')
+  get compColor() {
+    return this.getCompanyColor;
+  }
+
+  classCss: string;
+  styleCss: any;
+  isButtonLink: boolean;
+  isLabel: boolean;
+  buttonState: ButtonState;
+  hover = false;
+  iconButtonSize: IconButtonSize = '40';
+  allowButtonTypeForPremium: ButtonColor[] = ['secondary', 'primary', 'ghost', 'outlined', 'destructive'];
+  isFilledIcon: boolean;
+  coloredIcons = ['Google-in-line', 'Google', 'Google-filled'];
+
+  get typeIncluded(): boolean {
+    return this.allowButtonTypeForPremium.includes(this.variant);
+  }
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.classCss = this.setCssClass();
+    this.styleCss = this.setCssStyle();
+    this.isButtonLink = this.showButtonLink();
+    this.isLabel = this.showLabel();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['disabled']) {
+      this.buttonState = 'default';
+    }
+    if (!this.applicationTheme) {
+      this.applicationTheme = 'light';
+    }
+    if (changes['type']) {
+      this.isButtonLink = this.showButtonLink();
+    }
+    if (changes['loading']) {
+      this.isLabel = this.showLabel();
+    }
+    if (
+      changes['type'] ||
+      changes['fullWidth'] ||
+      changes['iconName'] ||
+      changes['justIcon'] ||
+      changes['iconPosition'] ||
+      changes['disabled'] ||
+      changes['companyColor'] ||
+      changes['applicationTheme']
+    ) {
+      this.classCss = this.setCssClass();
+      this.styleCss = this.setCssStyle();
+    }
+    if (changes['variant']?.currentValue === 'icon-button' || (changes['variant']?.currentValue === 'menuTrigger' && this.applicationTheme !== 'classic')) {
+      this.iconButtonSize = this.setIconButtonSize();
+    }
+
+    this.isFilledIcon = this.applicationTheme !== 'classic' && (this.variant === 'primary' || this.variant === 'secondary');
+  }
+
+  ngAfterViewInit(): void {
+    this.tooltipElement.nativeElement.onclick = ev => {
+      ev.preventDefault();
+      ev.stopPropagation();
+    };
+    if (this.variant === 'icon-button' && !this.tooltip) {
+      throw new Error('ui-button ButtonComponent\n    [tooltip] is required for [type] icon-button!');
+    } else if (this.variant === 'destructive' && !this.iconName && !this.loading && this.applicationTheme !== 'classic') {
+      throw new Error('ui-button ButtonComponent\n  [icon] is required for [type] destructive');
+    }
+  }
+
+  buttonClick(event: Event): void {
+    this.buttonClickEvent.emit(event);
+  }
+
+  buttonHover(event: Event): void {
+    if (event.type === 'mouseenter') {
+      this.hover = true;
+      this.buttonHoverEvent.emit(event);
+      this.buttonState = 'hover';
+      if (this.shouldChangeFilledStatus && this.iconName) {
+        this.iconName = this.iconName.replace(/-in-line|-filled/, '') + '-filled' as IconName;
+      }
+    } else {
+      this.hover = false;
+      if (this.shouldChangeFilledStatus && this.iconName) {
+        this.iconName = this.iconName.replace(/-in-line|-filled/, '') + '-in-line' as IconName;
+      }
+      this.buttonState = 'default';
+    }
+
+    this.styleCss = this.setCssStyle();
+  }
+
+  //Show or hide label
+  showLabel(): boolean {
+    return !this.loading;
+  }
+
+  //Set css class according inputs
+  setCssClass(): string {
+    const width = this.fullWidth ? 'full-width' : '';
+    const hasIcon = this.iconName === null ? '' : 'icon';
+    const justIcon = this.justIcon || this.variant === 'icon-button' ? 'only-icon' : '';
+    const iconPosition = this.iconPosition === undefined ? '' : this.iconPosition;
+    const disabled = this.disabled && this.variant === 'primary' ? 'primary-disabled' : '';
+    const variant = this.variant === 'ghost' && this.applicationTheme === 'classic' ? 'outlined' : this.variant;
+    const companyColor = this.companyColor ? 'has-company-color' : '';
+    return `${this.size} ${iconPosition} ${variant} ${width} ${hasIcon} ${justIcon} ${disabled} ${companyColor} ${this.applicationTheme}-theme`;
+  }
+
+  setCssStyle(): any {
+    this.buttonState = this.disabled ? 'disabled' : this.buttonState;
+    const styleObj: any = {};
+
+    if (this.variant === 'primary' && this.applicationTheme !== 'classic' && (this.buttonState === 'hover' || this.buttonState === 'pressed')) {
+      styleObj['background-color'] = adjustLightness(this.getCompanyColor, this.buttonState);
+    } else if (this.variant === 'primary' && this.applicationTheme === 'classic' && this.buttonState !== 'default') {
+      styleObj['background-color'] = adjustLightness(this.getCompanyColor, this.buttonState, 'classic');
+    } else if (this.getCompanyColor && (this.variant === 'link' || this.variant === 'tertiary' || this.variant === 'icon-button')) {
+      styleObj['color'] = this.getCompanyColor;
+    }
+    return styleObj;
+  }
+
+  //Show or hide spinner
+  get showSpinner(): boolean {
+    const isNotTab = this.variant !== 'tab';
+    const isNotLink = this.variant !== 'link';
+    const isLoading = this.loading === true;
+    return isLoading && isNotTab && isNotLink;
+  }
+
+  //Show button with <button> or <a> tag
+  showButtonLink(): boolean {
+    return this.variant !== 'link';
+  }
+
+  setIconButtonSize(): IconButtonSize {
+    return this.size === 'big' ? '40' : '32';
+  }
+
+  onPressed(ev: Event): void {
+    if (ev.type === 'mousedown') {
+      this.buttonState = 'pressed';
+    } else {
+      this.buttonState = this.hover ? 'hover' : 'default';
+    }
+
+    this.styleCss = this.setCssStyle();
+  }
+
+  focus(): void {
+    this.buttonElement.focus();
+  }
+
+  get getCompanyColor(): string {
+    return this.companyColor || (this.applicationTheme === 'classic' ? '#46A997' : '#D410AA');
+  }
+
+  get shouldChangeFilledStatus(): boolean {
+    return this.applicationTheme !== 'classic' && this.variant !== 'primary' && this.variant !== 'secondary' && !this.coloredIcons.includes(this.iconName);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { BadgeVariant, RebrandBadgeColor } from '../badge/badge.model';
+
+export type ButtonIconPosition = 'left' | 'right';
+export type ButtonColor =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'outlined'
+  | 'destructive'
+  | 'tertiary'
+  | 'link'
+  | 'tab'
+  | 'text'
+  | 'menuTrigger'
+  | 'menuCell'
+  | 'icon-button';
+export type ButtonSize = 'big' | 'medium' | 'small';
+export type LinkUrlTarget = '' | '_self' | '_blank' | '_parent' | '_top';
+export type IconButtonSize = '32' | '40';
+
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonState = 'hover' | 'pressed' | 'disabled' | 'default';
+export interface ButtonBadgeConfig {
+  badgeType: BadgeVariant | null;
+  badgeLabel: string;
+  badgeNotificationAmount: number;
+  rebrandColor: RebrandBadgeColor;
+}

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

@@ -0,0 +1,9 @@
+<div class="card-container" [ngClass]="classes" [attr.theme]="applicationTheme" tabindex="0"  >
+  <ng-content></ng-content>
+</div>
+<div class="errors" *ngIf="safeErrors?.length">
+  <div class="error" *ngFor="let error of safeErrors">
+    <ui-icon [size]="'24'" [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+    <span [innerHTML]="error"></span>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,91 @@
+@use "../../theme/variables" as *;
+@use "../../theme/breakpoints-mixin" as *;
+
+.card-container {
+  border-radius: 8px;
+  border: 1px solid $tgo-medium;
+  background: $tgo-white;
+
+
+  &.card-size {
+    &-medium {
+      padding: 24px;
+    }
+
+    &-large {
+      padding: 80px;
+    }
+
+    &-small {
+      padding: 16px;
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    border-color: $grayscale-30;
+    border-radius: 10px;
+
+    &.shadow {
+      box-shadow: $box-shadow-page-card;
+    }
+
+    &.error {
+      border-width: 2px;
+      border-color: $error-50;
+    }
+
+    &.state {
+      cursor: pointer;
+
+      &:hover {
+        border-width: 2px;
+        border-color: $black;
+        box-shadow: $box-shadow-hover-state;
+        @extend .card-size-brand;
+      }
+
+      &:focus {
+        border-width: 2px;
+        border-color: $black;
+        @extend .card-size-brand;
+      }
+    }
+  }
+}
+
+.card-size-brand {
+  &.card-size {
+    &-medium {
+      padding: 23px;
+    }
+
+    &-large {
+      padding: 79px;
+    }
+
+    &-small {
+      padding: 15px;
+    }
+  }
+}
+
+
+.errors {
+  margin-top: 8px;
+
+  .error {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ui-icon {
+      margin-right: 8px;
+
+      ::ng-deep svg {
+        color: $error-50;
+      }
+    }
+    color: $error-50;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { By, SafeHtml } from '@angular/platform-browser';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { LanguageService } from '../../utils/localization/language.service';
+import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { CardComponent } from "./card.component";
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CardComponent ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+      imports: [UiTranslatePipe],
+      providers: [{ provide: LanguageService, useClass: LanguageServiceStub }]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set default values for size and variant', () => {
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.size).toBe('medium'); // Default size
+    expect(component.variant).toBe('default'); // Default variant
+  });
+
+  it('should set input properties correctly', () => {
+    component.size = 'large';
+    component.variant = 'state';
+    component.applicationTheme = 'dark';
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.size).toBe('large'); // Check size
+    expect(component.variant).toBe('state'); // Check variant
+    expect(component.applicationTheme).toBe('dark'); // Check theme
+  });
+
+  it('should update classes when inputs change', () => {
+    component.size = 'small';
+    component.variant = 'shadow';
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.classes).toBe('card-size-small shadow'); // Validate class string
+  });
+
+  it('should update classes based on errors', () => {
+    const errors = ['Error 1', 'Error 2'];
+    component.errors = errors; // Set errors
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.cardVariant).toBe('error'); // Should switch to error variant
+  });
+
+  it('should safely sanitize error messages', () => {
+    const unsafeErrors = ['<script>alert("XSS")</script>', 'Valid Error'];
+    component.errors = unsafeErrors; // Set unsafe errors
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.safeErrors.length).toBe(2); // Validate safe errors length
+    expect((component.safeErrors[0] as SafeHtml).toString()).not.toContain('<script>alert(\\"XSS\\")</script>'); // Validate safe content
+  });
+});

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

@@ -0,0 +1,88 @@
+import { MatCardModule } from '@angular/material/card';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { LogoComponentModule } from '../logo/logo.component.module';
+import { CardComponent } from './card.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { IconComponentModule } from '../icon/icon.component.module';
+
+export default {
+  title: 'Card',
+  component: CardComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [CardComponent],
+      imports: [MatCardModule, LogoComponentModule, IconComponentModule],
+    }),
+  ],
+} as Meta;
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12588-65219&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export const Default: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+      <ui-card applicationTheme="${_theme}" variant="${args['variant']}">
+        <ui-logo class="logo"></ui-logo>
+        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
+        <div>Verify your link to create your account</div>
+      </ui-card>      `,
+    };
+  },
+} as Story;
+
+Default.parameters = parameters;
+
+export const Large: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" size="large">
+        <ui-logo class="logo"></ui-logo>
+        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
+        <div>Verify your link to create your account</div>
+      </ui-card>      `,
+    };
+  },
+} as Story;
+
+Large.parameters = parameters;
+
+export const Small: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" size="small">
+        <ui-logo class="logo"></ui-logo>
+        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
+        <div>Verify your link to create your account</div>
+      </ui-card>      `,
+    };
+  },
+} as Story;
+
+Small.parameters = parameters;
+
+export const WithErrors: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    const errorsList = ['Oops!', 'Error happens'];
+    return {
+      template: `
+      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" [errors]='${JSON.stringify(errorsList)}'>
+        <ui-logo class="logo"></ui-logo>
+        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
+        <div>Verify your link to create your account</div>
+      </ui-card>      `,
+    };
+  },
+} as Story;