@testgorilla/tgo-ui 2.30.13 → 2.31.1

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, StoryFn } 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: StoryFn = {
+  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 StoryFn
+
+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: StoryFn = {
+  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 StoryFn

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" [attr.aria-hidden]="true">
+      <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 | async }}</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" [iconName]="primaryButtonIconName" [iconPosition]="primaryButtonIconPosition" (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" [iconName]="secondaryButtonIconName" [iconPosition]="secondaryButtonIconPosition" (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" [iconName]="tertiaryButtonIconName" [iconPosition]="tertiaryButtonIconPosition" (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,72 @@
+@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: 20px;
+      line-height: 26px;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    .body-text {
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  .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,110 @@
+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: [LanguageService]
+    });
+    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
+  });
+
+  it('should emit primary button click', () => {
+    const event = new Event('click');
+    const spy = jest.spyOn(component.primaryButtonClick, 'emit');
+
+    component.onPrimaryButtonClick(event);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(event);
+  });
+
+  it('should emit secondary button click', () => {
+    const event = new Event('click');
+    const spy = jest.spyOn(component.secondaryButtonClick, 'emit');
+
+    component.onSecondaryButtonClick(event);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(event);
+  });
+
+  it('should emit tertiary button click', () => {
+    const event = new Event('click');
+    const spy = jest.spyOn(component.tertiaryButtonClick, 'emit');
+
+    component.onTertiaryButtonClick(event);
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(event);
+  });
+});

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

@@ -0,0 +1,183 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+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';
+import { transformTheme } from '../../utils/transform-theme';
+
+export default {
+  title: 'Empty State',
+  component: EmptyStateComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [IconComponentModule, UiTranslatePipe, ButtonComponentModule],
+      declarations: [EmptyStateComponent],
+    }),
+  ],
+} 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=12793-9858&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: 'Test',
+};
+
+WithIcon.parameters = parameters;
+
+export const WithIllustration = Template.bind({});
+WithIllustration.args = {
+  showIllustration: true,
+};
+
+WithIllustration.parameters = parameters;
+
+export const WithBodyText = Template.bind({});
+WithBodyText.args = {
+  bodyText: 'Try a different filter or search.',
+  showIllustration: true,
+};
+
+WithBodyText.parameters = parameters;
+
+export const WithCommandButton: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page">
+    </ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+export const WithCommandButtonBlackColour: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page" primaryButtonVariant="black">
+    </ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+export const WithCommandButtonGhost: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page" primaryButtonVariant="ghost">
+    </ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+WithCommandButton.parameters = parameters;
+
+export const WithExtraCommandButtons: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state
+      applicationTheme="${_theme}"
+      icon="Upgrade"
+      bodyText="Try a different filter or search."
+      primaryButtonText="Back to main page"
+      secondaryButtonText="Back to main page"
+      tertiaryButtonText="Back to main page"
+    ></ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+WithExtraCommandButtons.parameters = parameters;
+
+export const WithExtraCommandButtonsWithIcons: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state
+      applicationTheme="${_theme}"
+      icon="Upgrade"
+      bodyText="Try a different filter or search."
+      [primaryButtonText]="'Action1'"
+      primaryButtonIconName="Plus-filled"
+      secondaryButtonText="Action2"
+      secondaryButtonIconName="TestGorilla-Pink-in-line"
+      secondaryButtonIconPosition="right"
+      tertiaryButtonText="Action3"
+      tertiaryButtonIconName="Arrow-chevron-up-filled"
+    ></ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+WithExtraCommandButtonsWithIcons.parameters = parameters;
+
+export const MobileVariant: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state
+      applicationTheme="${_theme}"
+      emptyStateVariant="mobile"
+      icon="Upgrade"
+      bodyText="Try a different filter or search."
+      primaryButtonText="Back to main page"
+    ></ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+MobileVariant.parameters = parameters;
+
+export const MobileVariantWithIllustration: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-empty-state
+      applicationTheme="${_theme}"
+      showIllustration="true"
+      illustrationVariant="Disconnected"
+      emptyStateVariant="mobile"
+      bodyText="Try a different filter or search."
+      primaryButtonText="Back to main page"
+      primaryButtonVariant="black"
+    ></ui-empty-state>
+  `,
+    };
+  },
+} as StoryFn;
+
+MobileVariantWithIllustration.parameters = parameters;