@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

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

@@ -1,203 +0,0 @@
-@use '../../theme/variables' as *;
-
-:host {
-  display: block;
-
-  .badge-container-primary,
-  .badge-container-secondary,
-  .badge-container-notification {
-    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;
-      line-height: 14px;
-    }
-
-    .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;
-      width: 100%;
-    }
-
-    &[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;
-    }
-  }
-
-  .badge {
-    width: 100% !important;
-    max-width: fit-content !important;
-
-    .label {
-      white-space: nowrap !important;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      box-sizing: border-box !important;
-    }
-  }
-}
-
-.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;
-  }
-
-  &[color='blue-20'] {
-    background: $informative-20;
-    color: $black;
-  }
-
-  &[color='blue-30'] {
-    background: $informative-30;
-    color: $tgo-white;
-  }
-
-  &[color='blue-40'] {
-    background: $informative-40;
-    color: $tgo-white;
-  }
-
-  &[color='pink-30'] {
-    background: $brand-30;
-    color: $black;
-  }
-
-  &[color='blue-10'] {
-    background: $informative-10;
-    color: $black;
-  }
-
-  &[color='grey-30'] {
-    background: $grayscale-30;
-    color: $black;
-  }
-
-  &[color='grey-10'] {
-    background: $grayscale-10;
-    color: $black;
-  }
-}

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

@@ -1,67 +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],
-      providers: [
-        {
-          provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME',
-          useValue: 'app_theme'
-        }
-      ]
-    });
-    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');
-  });
-
-  it('should apply theme from token', () => {
-    expect(component.applicationTheme).toEqual('app_theme')
-  });
-});

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

@@ -1,69 +0,0 @@
-import { BadgeComponent } from './badge.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { BadgeVariantEnum } from './badge.model';
-import { transformTheme } from '../../utils/transform-theme';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-
-export default {
-  title: 'Badge',
-  component: BadgeComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [BadgeComponent],
-      imports: [IconComponentModule, MatTooltipModule],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (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;
-
-export const LongLabel = Template.bind({});
-LongLabel.args = {
-  icon: 'Info',
-  label: '12 345 678 90 12 345 678 9 01 234 3 3',
-  rebrandColor: 'pink-30',
-};

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

@@ -1,104 +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';
-
-  @Input() truncateLabel = true;
-
-  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,
-    RebrandBadgeColorEnum.BLUE_20,
-    RebrandBadgeColorEnum.PINK_30,
-    RebrandBadgeColorEnum.BLUE_10,
-  ];
-
-  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';
-  }
-}

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

@@ -1,64 +0,0 @@
-export type BadgeVariant = 'primary' | 'secondary' | 'notification';
-export type BadgeColor =
-  | 'red'
-  | 'grey-medium'
-  | 'teal'
-  | 'yellow'
-  | 'petrol'
-  | 'teal-60w'
-  | 'petrol-90w'
-  | 'petrol-60w'
-  | 'grey-dark'
-  | 'blue-20'
-  | 'blue-40'
-  | 'pink-30'
-  | 'blue-10';
-
-export enum BadgeColorEnum {
-  RED = 'red',
-  GREY_MEDIUM = 'grey-medium',
-  TEAL = 'teal',
-  YELLOW = 'yellow',
-  PETROL = 'petrol',
-  TEAL_60W = 'teal-60w',
-  PETROL_90W = 'petrol-90w',
-  PETROL_60W = 'petrol-60w',
-  GREY_DARK = 'grey-dark',
-  BLUE_20 = 'blue-20',
-  BLUE_40 = 'blue-40',
-}
-
-export type RebrandBadgeColor =
-  | 'success'
-  | 'warning'
-  | 'negative'
-  | 'info'
-  | 'brand'
-  | 'neutral'
-  | 'blue-20'
-  | 'blue-40'
-  | 'pink-30'
-  | 'blue-10'
-  | 'grey-10'
-  | 'grey-30';
-
-export enum RebrandBadgeColorEnum {
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  NEGATIVE = 'negative',
-  INFO = 'info',
-  BRAND = 'brand',
-  NEUTRAL = 'neutral',
-  BLUE_40 = 'blue-40',
-  BLUE_20 = 'blue-20',
-  PINK_30 = 'pink-30',
-  BLUE_10 = 'blue-10',
-  GREY_30 = 'grey-30',
-  GREY_10 = 'grey-10',
-}
-
-export enum BadgeVariantEnum {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-  NOTIFICATION = 'notification',
-}

package/projects/tgo-canopy-ui/components/bars-demo/bars-demo.component.html

@@ -1,11 +0,0 @@
-<h2 style="margin-bottom: 32px">Alert Banner</h2>
-<ui-dropdown [(ngModel)]="alertType" [label]="'Alert type'" [valueList]="[{value: 'success', displayValue: 'success'}, {value: 'error', displayValue: 'error'}, {value: 'info', displayValue: 'info'}, {value: 'warning', displayValue: 'warning'}]"></ui-dropdown>
-<ui-dropdown [(ngModel)]="alertVariant" [label]="'Alert variant'" [valueList]="[{value: 'banner', displayValue: 'banner'}, {value: 'callout', displayValue: 'callout'}]"></ui-dropdown>
-<ui-field [(ngModel)]="bannerDuration" [label]="'Banner duration'"></ui-field>
-<ui-button style="margin: 16px 0" [label]="'Show alert banner'" (buttonClickEvent)="showAlertBanner()"></ui-button>
-<ui-alert-banner style="margin: 16px 0" *ngIf="isAlertBannerVisible" [alertType]="alertType" [alertVariant]="alertVariant" [message]="'Alert banner message'" [linkText]="'Link text'"></ui-alert-banner>
-<ui-divider></ui-divider>
-<h2 style="margin: 32px 0">Snack Bar</h2>
-<ui-dropdown [(ngModel)]="snackbarType" [label]="'Snackbar type'" [valueList]="[{value: 'error', displayValue: 'error'}, {value: 'success', displayValue: 'success'}, {value: 'info', displayValue: 'info'}, {value: 'warning', displayValue: 'warning'}]"></ui-dropdown>
-<ui-button style="margin: 16px 0" [label]="'Show snack bar'" (buttonClickEvent)="showSnackBar()"></ui-button>
-

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

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BarsDemoComponent } from './bars-demo.component';
-import { AlertBannerComponentModule } from '../alert-banner/alert-banner.component.module';
-import { FieldComponentModule } from '../field/field.component.module';
-import { DropdownComponentModule } from '../dropdown/dropdown.component.module';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { FormsModule } from '@angular/forms';
-import { DividerComponentModule } from '../divider/divider.component.module';
-
-
-
-@NgModule({
-  declarations: [BarsDemoComponent],
-  imports: [
-    CommonModule,
-    AlertBannerComponentModule,
-    FieldComponentModule,
-    DropdownComponentModule,
-    ButtonComponentModule,
-    FormsModule,
-    DividerComponentModule,
-  ],
-})
-export class BarsDemoComponentModule { }

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

@@ -1,30 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { BarsDemoComponent } from './bars-demo.component';
-import { DropdownComponentModule } from '../dropdown/dropdown.component.module';
-import { SnackbarService } from '../snackbar/snackbar.service';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { FormsModule } from '@angular/forms';
-import { AlertBannerComponentModule } from '../alert-banner/alert-banner.component.module';
-import { FieldComponentModule } from '../field/field.component.module';
-import { DividerComponentModule } from '../divider/divider.component.module';
-import { SnackbarComponentModule } from '../snackbar/snackbar.component.module';
-
-export default {
-  title: 'Demo/Alert banner-Snack bar',
-  component: BarsDemoComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [BarsDemoComponent],
-      imports: [DropdownComponentModule, MatSnackBarModule, ButtonComponentModule, FormsModule, AlertBannerComponentModule, FieldComponentModule, DividerComponentModule, SnackbarComponentModule],
-      providers: [SnackbarService],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = args => ({
-  props: args,
-});
-
-export const Default = Template.bind({});
-Default.args = {};

package/projects/tgo-canopy-ui/components/bars-demo/bars-demo.component.ts

@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-import { SnackbarService } from '../snackbar/snackbar.service';
-import { AlertBarType, AlertVariant } from '../../utils/alert-bar.model';
-import { SnackbarType } from '../snackbar/snackbar.model';
-
-@Component({
-  selector: 'ui-bars-demo',
-  templateUrl: './bars-demo.component.html',
-  styleUrl: './bars-demo.component.scss'
-})
-export class BarsDemoComponent {
-
-  alertType: AlertBarType = 'success';
-  alertVariant: AlertVariant = 'banner';
-  bannerDuration = 2;
-  isAlertBannerVisible = false;
-  snackbarType: SnackbarType = 'info';
-
-  constructor(
-    private readonly snackbarService: SnackbarService,
-  ) {}
-
-  showAlertBanner(): void {
-    this.isAlertBannerVisible = true;
-    setTimeout(() => this.isAlertBannerVisible = false, this.bannerDuration * 1000);
-  }
-
-  showSnackBar(): void {
-    this.snackbarService[this.snackbarType]('Snackbar message');
-  }
-}