@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/tabs/tabs.directive.spec.ts

@@ -0,0 +1,90 @@
+import { ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { Component, Directive, Input, TemplateRef, ViewChild, SimpleChanges } from '@angular/core';
+import { TabDirective } from './tab.directive';
+
+class TabsComponentMock {
+  addTab(tab: any) {}
+}
+
+@Directive({
+  selector: '[appMockHost]',
+})
+class MockHostDirective {
+  @Input() tabName: string;
+  @Input() iconLeft: string;
+  @Input() iconRight: string;
+  @Input() disabled: boolean;
+  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.addTab();
+  }
+
+  private addTab(): void {
+    const tab = {
+      tabName: this.tabName,
+      iconLeft: this.iconLeft,
+      iconRight: this.iconRight,
+      disabled: this.disabled,
+      contentTemplateRef: this.template,
+    };
+    const tabsComponentMock: TabsComponentMock = TestBed.get(TabsComponentMock);
+    tabsComponentMock.addTab(tab);
+  }
+}
+
+@Component({
+  template: `<div appMockHost [tabName]="'Test Tab'"></div>`,
+})
+class TestComponent {
+  @ViewChild(MockHostDirective, { static: true }) hostDirective: MockHostDirective;
+  addTab(): void {
+
+  }
+}
+
+describe('TabDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TabDirective, MockHostDirective, TestComponent],
+      providers: [
+        TabsComponentMock,
+      ],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create an instance', () => {
+    expect(component.hostDirective).toBeTruthy();
+  });
+
+  it('should call addTab method on ngOnChanges', fakeAsync(() => {
+    const tabsComponentMock: TabsComponentMock = TestBed.get(TabsComponentMock);
+    const addTabSpy = jest.spyOn(tabsComponentMock, 'addTab');
+
+    component.hostDirective.tabName = 'Test Tab';
+
+    fixture.detectChanges();
+    tick();
+
+    expect(addTabSpy).toHaveBeenCalledWith({
+      tabName: 'Test Tab',
+      iconLeft: undefined,
+      iconRight: undefined,
+      disabled: undefined,
+      contentTemplateRef: undefined as unknown as TemplateRef<any>,
+    });
+  }));
+
+  it('should call addTab method on ngOnChanges', fakeAsync(() => {
+    //@ts-ignore
+    const spy = jest.spyOn(component.hostDirective, 'addTab')
+    fixture.detectChanges();
+    expect(spy).toBeCalled();
+  }));
+});

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

@@ -0,0 +1,11 @@
+import { IconName } from '../icon/icon.model';
+
+export interface Tab {
+  tabName: string;
+  contentTemplateRef: any;
+  iconLeft?: IconName;
+  iconRight?: IconName;
+  disabled?: boolean;
+}
+
+export type TabsType = 'underlined' | 'filled';

package/projects/tgo-canopy-ui/components/tag/__snapshots__/tag.component.spec.ts.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagComponent should render correctly 1`] = `
+<ui-tag
+  allowClose="false"
+  applicationTheme={[Function String]}
+  ariaRequired="false"
+  checkLabelEllipsis$={[Function ReplaySubject]}
+  close={[Function EventEmitter_]}
+  defaultAppTheme="null"
+  icon=""
+  iconColor={[Function String]}
+  iconToPass=""
+  isDisabled="false"
+  isEllipseActiveObs$={[Function AnonymousSubject]}
+  isHovered="false"
+  isSelected="false"
+  labelElement={[Function _ElementRef]}
+  labelText=""
+  press={[Function EventEmitter_]}
+  readOnly="false"
+  showIconWhenSelected="false"
+  shrink="false"
+>
+  <div
+    class="mat-mdc-tooltip-trigger tag-wrapper"
+  >
+    <div
+      aria-required="false"
+      class="tag-container outlined"
+      data-testid="tag--container"
+      tabindex="0"
+      theme="light"
+    >
+      <span
+        class="tag-label"
+      >
+      </span>
+    </div>
+  </div>
+</ui-tag>
+`;

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

@@ -0,0 +1,26 @@
+<div class="tag-wrapper" [matTooltip]="(isEllipseActiveObs$ | async) ? labelText : ''" [matTooltipClass]="applicationTheme">
+  <div
+    [tabindex]="tabIndex"
+    class="tag-container"
+    [attr.data-testid]="'tag--container'"
+    [attr.theme]="applicationTheme"
+    [ngClass]="{
+      filled: filled,
+      readonly: readOnly,
+      disabled: isDisabled,
+      outlined: !isSelected,
+      shrink
+    }"
+    (click)="onPress()"
+    (mouseenter)="setHoverState(true)" (mouseleave)="setHoverState(false)"
+    (mousedown)="setShrinkState(true)" (mouseup)="setShrinkState(false)"
+    (touchstart)="setShrinkState(true)" (touchend)="setShrinkState(false)"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+  >
+    <ui-icon *ngIf="icon" class="icon" [color]="iconColor" [name]="iconToPass" [applicationTheme]="applicationTheme"></ui-icon>
+    <ui-icon *ngIf="isSelected && showIconWhenSelected" [color]="iconColor" class="icon" [name]="'Check'" [applicationTheme]="applicationTheme"></ui-icon>
+    <span class="tag-label" #labelElement>{{ labelText }}</span>
+    <ui-icon [tabindex]="tabIndex" *ngIf="allowClose" class="delete-icon" [color]="iconColor" (click)="onClose()" [name]="'Close'" [applicationTheme]="applicationTheme"></ui-icon>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TagComponent } from './tag.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { TooltipComponentModule } from '../tooltip/tooltip.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatInputModule } from "@angular/material/input";
+
+@NgModule({
+  declarations: [TagComponent],
+    imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule],
+  exports: [TagComponent],
+  providers: [],
+})
+export class TagComponentModule {}

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

@@ -0,0 +1,161 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+:host {
+  .tag-wrapper {
+    max-width: 264px;
+  }
+
+  .tag-container {
+    height: 32px;
+    max-width: 264px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    width: fit-content;
+    cursor: pointer;
+    margin: 4px;
+
+    &.outlined {
+      border: 1px solid $tgo-petrol-30w;
+    }
+
+    &:focus {
+      outline: 1px dashed $tgo-dark;
+      outline-offset: 4px;
+      background: $tgo-light;
+      border: 1px solid $tgo-petrol-30w;
+
+      &.filled {
+        background-color: $tgo-petrol-90w;
+        border: 1px solid $tgo-petrol-default;
+      }
+    }
+
+    &.filled {
+      background: $tgo-petrol-90w;
+      border: 1px solid $tgo-petrol-90w;
+
+      &:hover {
+        background-color: $tgo-petrol-90w;
+        border: 1px solid $tgo-petrol-default;
+      }
+
+      &:active {
+        background: $tgo-petrol-60w;
+        border: 1px solid $tgo-petrol-30b;
+      }
+    }
+
+    &:hover {
+      background: $tgo-light;
+      border: 1px solid $tgo-petrol-30w;
+    }
+
+    &:active {
+      background: $tgo-petrol-90w;
+    }
+
+    &.readonly {
+      pointer-events: none;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      border: 1px solid $tgo-petrol-default;
+      background: $tgo-petrol-90w;
+      pointer-events: none;
+    }
+
+    .tag-label {
+      user-select: none;
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 400;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .icon {
+      height: 16px;
+      width: 16px;
+      min-width: 16px;
+      margin-right: 8px;
+    }
+
+    .delete-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 8px;
+      text-align: center;
+      border: 1px solid transparent;
+
+      &:focus {
+        border: 1px dashed $tgo-petrol-30b;
+        border-radius: 4px;
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+    &[theme="dark"], &[theme="light"] {
+      background: $grayscale-10;
+      border: none;
+
+      &:focus {
+        outline: 1px dashed $grayscale-50;
+        outline-offset: 4px;
+        &.filled{
+          background: $grayscale-10;
+          border: none;
+        }
+        &:hover {
+          background-color: $grayscale-50;
+          color: $tgo-white;
+        }
+      }
+
+      &:hover {
+        background-color: $grayscale-50;
+        color: $tgo-white;
+        border: none;
+        .delete-icon {
+          &:focus {
+            border: 1px dashed $tgo-white;
+          }
+        }
+      }
+
+      &.shrink {
+        transform: scale(0.98);
+      }
+
+      .delete-icon {
+        &:focus {
+          border: 1px dashed $grayscale-50;
+          &:hover {
+            border: 1px dashed $tgo-white;
+          }
+        }
+      }
+    }
+  }
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}

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

@@ -0,0 +1,193 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TagComponent } from './tag.component';
+import { ElementRef } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+describe('TagComponent', () => {
+  let component: TagComponent;
+  let fixture: ComponentFixture<TagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TagComponent],
+      imports: [MatTooltipModule]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should emit onClose event when close() is called', () => {
+    jest.spyOn(component.close, 'emit');
+    component.onClose();
+    expect(component.close.emit).toHaveBeenCalled();
+  });
+
+  it('should set tabIndex correctly', () => {
+    component.isDisabled = true;
+    expect(component.tabIndex).toBe(-1);
+
+    component.isDisabled = false;
+    component.readOnly = true;
+    expect(component.tabIndex).toBe(-1);
+
+    component.readOnly = false;
+    expect(component.tabIndex).toBe(0);
+  });
+
+  it('should update label text and check for ellipsis on label change', () => {
+    component.labelElement = { nativeElement: { offsetWidth: 100, scrollWidth: 50 } } as ElementRef<HTMLElement>;
+    //@ts-expect-error
+    component.labelText = 'Sample Label';
+    //@ts-expect-error
+    jest.spyOn(component, 'isLabelEllipseActive');
+
+    component.label = 'New Label';
+
+    //@ts-expect-error
+    expect(component.labelText).toBe('New Label');
+    //@ts-expect-error
+    expect(component.isLabelEllipseActive).toHaveBeenCalled();
+  });
+
+  describe('when tag pressed', () => {
+    let onPressEventSpy: jest.SpyInstance
+    beforeEach(() => {
+      onPressEventSpy = jest.spyOn(component.press, 'emit');
+    })
+    it('should emit onPress event', () => {
+      component.readOnly = false;
+      component.allowClose = false;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledWith(component.isSelected);
+    });
+
+    it('should not call press() when readOnly is true', () => {
+      component.readOnly = true;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledTimes(0)
+    });
+
+    it('should not call press() when allowClose is true', () => {
+      component.allowClose = true;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('should have default values for various inputs', () => {
+    expect(component.isSelected).toBe(false); // Default selected state
+    expect(component.isDisabled).toBe(false); // Default disabled state
+    expect(component.applicationTheme).toBe('light'); // Default theme
+  });
+
+  it('should emit "press" event when pressed', () => {
+    jest.spyOn(component.press, 'emit'); // Spy on the "press" event
+
+    component.onPress(); // Simulate a press action
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.press.emit).toHaveBeenCalled(); // The event should be emitted
+  });
+
+  it('should emit "close" event when closed', () => {
+    jest.spyOn(component.close, 'emit'); // Spy on the "close" event
+
+    component.onClose(); // Simulate a close action
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.close.emit).toHaveBeenCalled(); // The event should be emitted
+  });
+
+  it('should set the hover state correctly', () => {
+    component.setHoverState(true); // Set hover state to true
+
+    //@ts-ignore
+    expect(component.isHovered).toBe(true); // Hover state should be true
+
+    component.setHoverState(false); // Set hover state to false
+
+    //@ts-ignore
+    expect(component.isHovered).toBe(false); // Hover state should be false
+  });
+
+  it('should set the shrink state correctly', () => {
+    component.setShrinkState(true); // Set shrink state to true
+
+    //@ts-ignore
+    expect(component.shrink).toBe(true); // Shrink state should be true
+
+    component.setShrinkState(false); // Set shrink state to false
+
+    //@ts-ignore
+    expect(component.shrink).toBe(false); // Shrink state should be false
+  });
+
+  it('should check if the label is truncated', () => {
+    //@ts-ignore
+    component.labelText = 'A very long label text that should be truncated';
+
+    // Mock the labelElement for the test
+    //@ts-ignore
+    component.labelElement = new ElementRef({
+      offsetWidth: 50, // Mocked width
+      scrollWidth: 100, // Scroll width is greater, indicating truncation
+    });
+
+    //@ts-ignore
+    component.isLabelEllipseActive(); // Trigger the ellipsis check
+
+    fixture.detectChanges(); // Trigger change detection
+
+    // Now you can test if the ellipsis logic works
+    //@ts-ignore
+    component.isEllipseActiveObs$.subscribe((isTruncated) => {
+      expect(isTruncated).toBe(true); // Should indicate truncation
+    });
+  });
+
+  it('should return the correct tabIndex based on disabled and readOnly states', () => {
+    component.isDisabled = true; // Set disabled to true
+
+    expect(component.tabIndex).toBe(-1); // Should return -1 when disabled
+
+    component.isDisabled = false; // Set disabled to false
+    component.readOnly = true; // Set readOnly to true
+
+    expect(component.tabIndex).toBe(-1); // Should return -1 when read-only
+
+    component.readOnly = false; // Set read-only to false
+
+    //@ts-ignore
+    expect(component.tabIndex).toBe(0); // Should return 0 when not disabled or read-only
+  });
+
+  it('should return "filled" correctly based on other inputs', () => {
+    component.readOnly = true;
+    expect(component.filled).toBe(true); // Should return true when read-only
+
+    component.readOnly = false;
+    component.allowClose = true; // Set allowClose to true
+
+    expect(component.filled).toBe(true); // Should return true when allowClose is true
+
+    component.allowClose = false;
+    component.isSelected = true; // Set isSelected to true
+
+    expect(component.filled).toBe(true); // Should return true when selected
+  });
+});

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

@@ -0,0 +1,125 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TagComponent } from './tag.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { within, userEvent } from '@storybook/testing-library';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12298-62808&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+export default {
+  title: 'Tag',
+  component: TagComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TagComponent],
+      imports: [IconComponentModule, MatTooltipModule],
+    }),
+  ],
+} 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 Suggestion = Template.bind({});
+Suggestion.args = {
+  label: 'Label',
+};
+Suggestion.parameters = parameters;
+
+export const SuggestionWithIcon = Template.bind({});
+SuggestionWithIcon.args = {
+  label: 'Label',
+  icon: 'Folder',
+};
+SuggestionWithIcon.parameters = parameters;
+
+export const Filter = Template.bind({});
+Filter.args = {
+  label: 'Label',
+  isSelected: true,
+  showIconWhenSelected: true,
+};
+Filter.parameters = parameters;
+
+Filter.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await userEvent.unhover(canvas.getByTestId('tag--container'));
+};
+
+export const Input = Template.bind({});
+Input.args = {
+  label: 'Label',
+  allowClose: true,
+};
+Input.parameters = parameters;
+
+export const InputWithIcon = Template.bind({});
+InputWithIcon.args = {
+  label: 'Label',
+  icon: 'Assessment',
+  allowClose: true,
+};
+InputWithIcon.parameters = parameters;
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: 'Label',
+  readOnly: true,
+};
+ReadOnly.parameters = parameters;
+
+export const TruncatedLabel: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" allowClose="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" readOnly="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Folder"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Assessment" allowClose="true"></ui-tag>
+  `,
+    };
+  },
+} as Story;
+TruncatedLabel.parameters = parameters;
+
+export const Disabled: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Filter(Selected)" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input Without Icon" allowClose="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Read-only" readOnly="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion With Icon" icon="Folder"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input With Icon" icon="Assessment" allowClose="true"></ui-tag>`,
+    };
+  },
+} as Story;
+Disabled.parameters = parameters;