@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,75 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-  .clickable {
-    cursor: pointer;
-  }
-
-  .non-clickable {
-    pointer-events: none;
-  }
-
-  .avatar-container {
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 400;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100%;
-    background: $tgo-teal-secondary;
-    position: relative;
-    user-select: none;
-
-    &[type="icon"] {
-      background: $tgo-medium;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 100%;
-    }
-
-    &.small {
-      width: 24px;
-      height: 24px;
-      font-size: 10px;
-    }
-
-    &.medium {
-      width: 48px;
-      height: 48px;
-      font-size: 20px;
-    }
-
-    &.large {
-      width: 120px;
-      height: 120px;
-      font-size: 50px;
-      letter-spacing: -2;
-    }
-
-    .edit-avatar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      background: $tgo-light;
-      width: 32px;
-      height: 32px;
-      border-radius: 100%;
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      background: $grayscale-20;
-      color: $black;
-      .edit-avatar {
-        box-shadow: 0 4px 16px 0 #24242414;
-        background: $tgo-white;
-      }
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AvatarComponent } from './avatar.component';
-import { AvatarSize, iconSize } from "./avatar.model";
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
-
-describe('AvatarComponent', () => {
-  let component: AvatarComponent;
-  let fixture: ComponentFixture<AvatarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AvatarComponent ],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AvatarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have default values for inputs', () => {
-    expect(component.size).toEqual(AvatarSize.SMALL);
-    expect(component.imageUrl).toEqual('');
-    expect(component.name).toEqual('');
-  });
-
-  it('should use iconSize and avatarSize from the model', () => {
-    //@ts-expect-error
-    expect(component.iconSize).toEqual(iconSize);
-    //@ts-expect-error
-    expect(component.avatarSize).toEqual(AvatarSize);
-  });
-});

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

@@ -1,111 +0,0 @@
-import { AvatarComponent } from './avatar.component';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { NameInitialsPipe } from '../../pipes/name-initials.pipe';
-import { AvatarSize } from './avatar.model';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { transformTheme } from "../../utils/transform-theme";
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12298-63689&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export default {
-  title: 'Avatar',
-  component: AvatarComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [AvatarComponent, NameInitialsPipe],
-      imports: [IconComponentModule, MatTooltipModule, ButtonComponentModule],
-    }),
-  ],
-} as Meta;
-
-
-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 Editable = Template.bind({});
-Editable.args = {
-  size: AvatarSize.LARGE,
-  allowEdit: true,
-  tooltipText: 'Edit',
-};
-Editable.parameters = parameters;
-
-export const MultipleDefaultAvatar: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-        <ui-avatar applicationTheme="${_theme}" size="small" ></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="medium" ></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="large"></ui-avatar>
-      `,
-    }
-  }
-} as Story
-MultipleDefaultAvatar.parameters = parameters;
-
-export const MultipleImageAvatar: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-        <ui-avatar applicationTheme="${_theme}" size="small" imageUrl="/images/Avatar.png"></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="medium" imageUrl="/images/Avatar.png"></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="large" imageUrl="/images/Avatar.png"></ui-avatar>
-      `,
-    }
-  }
-} as Story
-MultipleImageAvatar.parameters = parameters;
-
-export const MultipleInitialsAvatar: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-        <ui-avatar applicationTheme="${_theme}" size="small" name="LS"></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="medium" name="LS"></ui-avatar>
-        <ui-avatar applicationTheme="${_theme}" size="large" name="LS"></ui-avatar>
-      `,
-    }
-  }
-} as Story
-MultipleInitialsAvatar.parameters = parameters;
-
-export const Small = Template.bind({});
-Small.args = {
-  size: AvatarSize.SMALL,
-};
-Small.parameters = parameters;
-
-export const Medium = Template.bind({});
-Medium.args = {
-  size: AvatarSize.MEDIUM,
-};
-Medium.parameters = parameters;
-
-export const Large = Template.bind({});
-Large.args = {
-  size: AvatarSize.LARGE,
-};
-Large.parameters = parameters;

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

@@ -1,76 +0,0 @@
-import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { AvatarSize, iconSize } from './avatar.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-avatar',
-  templateUrl: './avatar.component.html',
-  styleUrls: ['./avatar.component.scss'],
-})
-export class AvatarComponent {
-  /**
-   * Input property for specifying the size of the avatar.
-   * @type {AvatarSize}
-   * @default AvatarSize.SMALL
-   * @memberof AvatarComponent
-   */
-  @Input() size = AvatarSize.SMALL;
-  /**
-   * Input property for specifying the URL of the image to display in the avatar.
-   * @type {string}
-   * @memberof AvatarComponent
-   */
-  @Input() imageUrl = '';
-
-  /**
-   * Input property for specifying the initials to display in the avatar.
-   * @type {string}
-   * @memberof AvatarComponent
-   */
-  @Input() name = '';
-
-  /**
-   * Input property for specifying the tooltip text for edit.
-   * @type {string}
-   * @memberof AvatarComponent
-   */
-  @Input() tooltipText = '';
-
-  /**
-   * Input property that makes avatar editable.
-   * @type {boolean}
-   * @memberof AvatarComponent
-   */
-  @Input() allowEdit = false;
-
-  /**
-   *
-   * Defines the application theme where
-   *
-   * @type {ApplicationTheme}
-   * @memberof AvatarComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Event emitted when the edit button is clicked.
-   * @type {Event}
-   * @memberof AvatarComponent
-   */
-  @Output() editClick = new EventEmitter<Event>();
-
-  protected readonly iconSize = iconSize;
-  protected readonly avatarSize = AvatarSize;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  protected onEditClick(event: Event): void {
-    this.editClick.emit(event);
-  }
-}

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

@@ -1,13 +0,0 @@
-import { IconSize } from '../icon/icon.model';
-
-export enum AvatarSize {
-  SMALL = 'small',
-  MEDIUM = 'medium',
-  LARGE = 'large',
-}
-
-export const iconSize: Record<string, IconSize> = {
-  small: '16',
-  medium: '24',
-  large: '80',
-};

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

@@ -1,10 +0,0 @@
-<div [class]="'badge-container-' + variant" [attr.theme]="applicationTheme" [attr.color]="isClassicTheme ? color : rebrandColor">
-  <ng-container [ngSwitch]="variant">
-    <ng-container *ngSwitchCase="badgeVariant.PRIMARY">
-      <ui-icon *ngIf="icon" class="badge-icon" [name]="icon" [color]="iconColor" ></ui-icon>
-    </ng-container>
-    <div *ngSwitchCase="badgeVariant.SECONDARY" class="point" [attr.color]="isClassicTheme ? color : rebrandColor"></div>
-    <div *ngSwitchCase="badgeVariant.NOTIFICATION" class="number-notification">{{ notificationsAmount }}</div>
-  </ng-container>
-  <div class="label" *ngIf="label && variant !== badgeVariant.NOTIFICATION">{{ label }}</div>
-</div>

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

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

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

@@ -1,147 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-
-  display: block;
-  width: fit-content;
-
-  .badge-container-primary, .badge-container-secondary {
-    height: 24px;
-    padding: 0 8px;
-    border-radius: 21px;
-    color: $tgo-white;
-    line-height: 10px;
-    @extend .flex-center;
-
-    .label {
-      font-size: 12px;
-    }
-
-    .badge-icon {
-      margin-right: 8px;
-    }
-  }
-
-  .badge-container-primary {
-    @extend .background-colors;
-  }
-
-  .badge-container-secondary {
-    .point {
-      border-radius: 50%;
-      width: 8px;
-      height: 8px;
-      margin-right: 8px;
-
-      @extend .background-colors;
-    }
-
-    .label {
-      color: black!important;
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      color: $black;
-    }
-  }
-
-  .badge-container-notification {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    color: $tgo-white;
-
-    @extend .background-colors;
-    @extend .flex-center;
-
-    line-height: 10px;
-
-    .label {
-      font-size: 12px;
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      background: $black!important;
-      color: $tgo-white!important;
-      border-color: 1px solid $tgo-white;
-    }
-  }
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.background-colors {
-  &[color="red"] {
-    background: $tgo-error-default;
-  }
-
-  &[color="grey-medium"] {
-    background: $tgo-medium;
-    color: $tgo-black;
-  }
-
-  &[color="teal"] {
-    background: $tgo-teal-default;
-  }
-
-  &[color="yellow"] {
-    background: $tgo-warning-default;
-  }
-
-  &[color="petrol"] {
-    background: $tgo-petrol-default;
-  }
-
-  &[color="teal-60w"] {
-    background: $tgo-teal-60w;
-    color: $tgo-black;
-  }
-
-  &[color="petrol-90w"] {
-    background: $tgo-petrol-90w;
-    color: $tgo-black;
-  }
-
-  &[color="petrol-60w"] {
-    background: $tgo-petrol-60w;
-    color: $tgo-black;
-  }
-
-  &[color="grey-dark"] {
-    background: $tgo-dark;
-  }
-
-  &[color="success"] {
-    background: $success-20;
-    color: $black;
-  }
-
-  &[color="warning"] {
-    background: $warning-20;
-    color: $black;
-  }
-
-  &[color="negative"] {
-    background: $error-20;
-    color: $black;
-  }
-
-  &[color="info"] {
-    background: $informative-10;
-    color: $black;
-  }
-
-  &[color="brand"] {
-    background: $brand-20;
-    color: $black;
-  }
-
-  &[color="neutral"] {
-    background: $grayscale-20;
-    color: $black;
-  }
-}

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

@@ -1,57 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BadgeComponent } from './badge.component';
-import { BadgeColorEnum } from "./badge.model";
-import { IconComponentModule } from '../icon/icon.component.module';
-
-describe('BadgeComponent', () => {
-  let component: BadgeComponent;
-  let fixture: ComponentFixture<BadgeComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [BadgeComponent],
-      imports: [IconComponentModule]
-    });
-    fixture = TestBed.createComponent(BadgeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have default values for properties', () => {
-    expect(component.label).toEqual('');
-    expect(component.icon).toEqual('');
-    expect(component.color).toEqual('petrol');
-    expect(component.variant).toEqual('primary');
-    expect(component.notificationsAmount).toEqual(0);
-  });
-
-  it('should set icon color to "black" when the color is dark', () => {
-    component.color = BadgeColorEnum.GREY_MEDIUM;
-    //@ts-expect-error
-    expect(component.iconColor).toEqual('black');
-
-    component.color = BadgeColorEnum.PETROL_90W;
-    //@ts-expect-error
-    expect(component.iconColor).toEqual('black');
-
-    component.color = BadgeColorEnum.TEAL_60W;
-    //@ts-expect-error
-    expect(component.iconColor).toEqual('black');
-
-    component.color = BadgeColorEnum.GREY_MEDIUM;
-    //@ts-expect-error
-    expect(component.iconColor).toEqual('black');
-  });
-
-  it('should set icon color to "white" when the color is not dark', () => {
-    component.color = 'red';
-    component.applicationTheme = "classic";
-    //@ts-expect-error
-    expect(component.iconColor).toEqual('white');
-  });
-});

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

@@ -1,61 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { BadgeComponent } from './badge.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { BadgeVariantEnum } from './badge.model';
-import { transformTheme } from "../../utils/transform-theme";
-
-export default {
-  title: 'Badge',
-  component: BadgeComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [BadgeComponent],
-      imports: [IconComponentModule],
-    }),
-  ],
-} 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=12476-21293&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  icon: 'Info',
-  label: 'Hello',
-  color: 'petrol',
-  variant: BadgeVariantEnum.PRIMARY,
-};
-
-Primary.parameters = parameters;
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  color: 'petrol',
-  label: 'Hello',
-  variant: BadgeVariantEnum.SECONDARY,
-};
-
-Secondary.parameters = parameters;
-
-export const Notification = Template.bind({});
-Notification.args = {
-  notificationsAmount: 5,
-  variant: BadgeVariantEnum.NOTIFICATION,
-};
-
-Notification.parameters = parameters;

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

@@ -1,99 +0,0 @@
-import { Component, Inject, Input, Optional } from '@angular/core';
-import { IconColor, IconName } from '../icon/icon.model';
-import {
-  BadgeColor,
-  BadgeColorEnum,
-  BadgeVariant,
-  BadgeVariantEnum,
-  RebrandBadgeColor,
-  RebrandBadgeColorEnum,
-} from './badge.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-badge',
-  templateUrl: './badge.component.html',
-  styleUrls: ['./badge.component.scss'],
-})
-export class BadgeComponent {
-  /**
-   * The label to be displayed on the badge.
-   * @type {string}
-   * @memberof BadgeComponent
-   */
-  @Input() label = '';
-
-  /**
-   * The icon name to be displayed on the badge.
-   * @type {IconName}
-   * @memberof BadgeComponent
-   */
-  @Input() icon: IconName = '';
-
-  /**
-   * The color of the badge. Defaults to 'petrol'.
-   * @type {BadgeColor}
-   * @memberof BadgeComponent
-   */
-  @Input() color: BadgeColor = 'petrol';
-
-  /**
-   * The variant of the badge. Defaults to 'primary'.
-   * @type {BadgeVariant}
-   * @memberof BadgeComponent
-   */
-  @Input() variant: BadgeVariant = 'primary';
-
-  /**
-   * The amount of notifications to be displayed on the badge.
-   * @type {number}
-   * @memberof BadgeComponent
-   */
-  @Input() notificationsAmount = 0;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof BadgeComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * The color of the badge on new theme. Defaults to 'brand'.
-   * @type {RebrandBadgeColor}
-   * @memberof BadgeComponent
-   */
-  @Input() rebrandColor: RebrandBadgeColor = 'brand';
-
-  protected badgeVariant = BadgeVariantEnum;
-  private darkColors: string[] = [
-    BadgeColorEnum.GREY_MEDIUM,
-    BadgeColorEnum.PETROL_90W,
-    BadgeColorEnum.TEAL_60W,
-    BadgeColorEnum.PETROL_60W,
-    RebrandBadgeColorEnum.SUCCESS,
-    RebrandBadgeColorEnum.INFO,
-    RebrandBadgeColorEnum.BRAND,
-    RebrandBadgeColorEnum.NEUTRAL,
-    RebrandBadgeColorEnum.NEGATIVE,
-    RebrandBadgeColorEnum.WARNING,
-  ];
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  protected get iconColor(): IconColor {
-    return this.darkColors.includes(this.isClassicTheme ? this.color : this.rebrandColor) ? 'black' : 'white';
-  }
-
-  protected get isClassicTheme(): boolean {
-    return this.applicationTheme === 'classic';
-  }
-}