@testgorilla/tgo-ui 2.31.0 → 2.31.1

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconLabelComponent } from './icon-label.component';
+
+@NgModule({
+  declarations: [IconLabelComponent],
+  imports: [CommonModule, IconComponentModule],
+  exports: [IconLabelComponent],
+  providers: [],
+})
+export class IconLabelComponentModule {}

package/projects/tgo-canopy-ui/components/icon-label/icon-label.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  ui-icon {
+    margin-right: 8px;
+  }
+}

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

@@ -0,0 +1,59 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconLabelComponent } from './icon-label.component';
+import { By } from '@angular/platform-browser';
+
+describe('IconLabelComponent', () => {
+  let component: IconLabelComponent;
+  let fixture: ComponentFixture<IconLabelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IconLabelComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconLabelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('When text input is initialized', () => {
+    it('should render text value', () => {
+      component.text = 'Testing';
+      fixture.detectChanges();
+      const iconLabel = fixture.debugElement.nativeElement;
+      expect(iconLabel.querySelector('span').textContent).toContain('Testing');
+    });
+  });
+  describe('When iconSize input is initialized', () => {
+    it('should render icon size with small version', () => {
+      fixture.detectChanges();
+      const iconLabel = fixture.debugElement.query(By.css('ui-icon')).nativeElement;
+      expect(iconLabel.size).toBe('16');
+    });
+    describe('and it changes its value', () => {
+      it('should render icon size with big version', () => {
+        component.iconSize  ='24';
+        fixture.detectChanges();
+        const iconLabel = fixture.debugElement.query(By.css('ui-icon')).nativeElement;
+        expect(iconLabel.size).toBe('24');
+      });
+    });
+  });
+  describe('When iconName is initialized', () => {
+    it('should render icon name', () => {
+      component.iconName = 'Level';
+      fixture.detectChanges();
+      const iconLabel = fixture.debugElement.query(By.css('ui-icon')).nativeElement;
+      expect(iconLabel.name).toBe('Level');
+    });
+  });
+});

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

@@ -0,0 +1,48 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconLabelComponent } from './icon-label.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Icons/Icon + label',
+  component: IconLabelComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [IconLabelComponent],
+      imports: [IconComponentModule],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const hideControls = {
+  controls: {
+    exclude: ['ngOnInit'],
+  },
+};
+
+export const IconSizeSmall = Template.bind({});
+IconSizeSmall.args = {
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  iconName: 'Location',
+  iconSize: '16',
+};
+
+export const IconSizeBig = Template.bind({});
+IconSizeBig.args = {
+  text: 'Donec dapibus lectus nisi',
+  iconName: 'Feedback-1',
+  iconSize: '24',
+};
+
+IconSizeBig.parameters = hideControls;
+IconSizeSmall.parameters = hideControls;

package/projects/tgo-canopy-ui/components/icon-label/icon-label.component.ts

@@ -0,0 +1,53 @@
+import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
+import { IconName, IconSize } from '../../components/icon/icon.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-icon-label',
+  templateUrl: './icon-label.component.html',
+  styleUrls: ['./icon-label.component.scss']
+})
+export class IconLabelComponent implements OnInit {
+
+  /**
+   * Icon size
+   *
+   * @type {IconSize}
+   * @memberof IconLabelComponent
+   */
+  @Input() iconSize: IconSize = '16';
+
+  /**
+   * Icon name
+   *
+   * @type {IconName}
+   * @memberof IconLabelComponent
+   */
+  @Input() iconName: IconName;
+
+  /**
+   * Label
+   *
+   * @memberof IconLabelComponent
+   */
+  @Input() text = '';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof IconLabelComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {}
+}

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.html

@@ -0,0 +1,17 @@
+<ul *ngIf="applicationTheme === 'classic'; else rebrandIcons" class="icons-showcase">
+  <li *ngFor="let icon of icons"><ui-icon size="24" color="teal" [applicationTheme]="applicationTheme" [name]="icon"></ui-icon>{{icon}}</li>
+</ul>
+
+<ng-template #rebrandIcons>
+  <ng-container *ngFor="let section of icons | keyvalue">
+    <div class="icons-section">
+      <h1>{{section.key | titlecase}}</h1>
+
+      <ul class="icons-showcase">
+        <li *ngFor="let icon of section.value">
+          <ui-icon *ngIf="icon" size="24" color="rebrand-black" [applicationTheme]="applicationTheme" [name]="icon"></ui-icon>{{icon}}
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+</ng-template>

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconsShowcaseComponent } from './icons-showcase.component';
+
+@NgModule({
+  declarations: [IconsShowcaseComponent],
+  imports: [CommonModule, IconComponentModule],
+  exports: [IconsShowcaseComponent],
+  providers: [],
+})
+export class IconsShowcaseComponentModule {}

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.scss

@@ -0,0 +1,25 @@
+@use "../../theme/variables" as *;
+
+.icons-section {
+  margin-bottom: 24px;
+}
+
+.icons-showcase {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+
+  li {
+    flex: 1 0 12%;
+    padding: 10px;
+    justify-content: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    font-size: 12px;
+    height: 110px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconsShowcaseComponent } from './icons-showcase.component';
+import { By } from '@angular/platform-browser';
+import { groupedIcons, tgoIcons } from "../icon/icon.config";
+
+describe('IconsShowcaseComponent', () => {
+  let component: IconsShowcaseComponent;
+  let fixture: ComponentFixture<IconsShowcaseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IconsShowcaseComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        { provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME', useValue: 'light' }
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconsShowcaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('when component is initialized', () => {
+    it('should render icons', () => {
+      const showcase = fixture.debugElement.query(By.css('ul'));
+      expect(showcase.classes['icons-showcase']).toBeTruthy();
+    });
+  });
+
+  it('should set icons to tgoIcons when applicationTheme is classic on init', () => {
+    component.applicationTheme = 'classic';
+    component.ngOnInit();
+    expect(component.icons).toEqual(tgoIcons);
+  });
+
+  it('should set icons to groupedIcons when applicationTheme is not classic on init', () => {
+    component.applicationTheme = 'light';
+    component.ngOnInit();
+    expect(component.icons).toEqual(groupedIcons as unknown as typeof tgoIcons);
+  });
+
+  it('should set icons to tgoIcons when applicationTheme is classic on changes', () => {
+    component.applicationTheme = 'classic';
+    component.ngOnChanges();
+    expect(component.icons).toEqual(tgoIcons);
+  });
+
+  it('should set icons to groupedIcons when applicationTheme is not classic on changes', () => {
+    component.applicationTheme = 'light';
+    component.ngOnChanges();
+    expect(component.icons).toEqual(groupedIcons as unknown as typeof tgoIcons);
+  });
+});

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

@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { tgoIcons } from '../../components/icon/icon.config';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconsShowcaseComponent } from './icons-showcase.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Icons/Icons showcase',
+  component: IconsShowcaseComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [IconsShowcaseComponent],
+      imports: [IconComponentModule],
+    }),
+  ],
+  argTypes: {
+    icons: {
+      control: { disable: true },
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const hideControls = {
+  controls: {
+    exclude: ['ngOnInit'],
+  },
+};
+
+export const AllIcons = Template.bind({});
+AllIcons.args = {
+  icons: tgoIcons,
+};
+
+AllIcons.parameters = hideControls;

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.ts

@@ -0,0 +1,43 @@
+import { Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';
+import { groupedIcons, tgoIcons } from '../icon/icon.config';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-icons-showcase',
+  templateUrl: './icons-showcase.component.html',
+  styleUrls: ['./icons-showcase.component.scss'],
+})
+export class IconsShowcaseComponent implements OnInit, OnChanges {
+  /**
+   * Icon name
+   *
+   * @type {Array<keyof typeof tgoIcons>}
+   * @memberof IconsShowcaseComponent
+   */
+  @Input() icons = tgoIcons;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof IconsShowcaseComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.icons = this.applicationTheme === 'classic' ? tgoIcons : (groupedIcons as unknown as typeof tgoIcons);
+  }
+
+  ngOnChanges(): void {
+    this.icons = this.applicationTheme === 'classic' ? tgoIcons : (groupedIcons as unknown as typeof tgoIcons);
+  }
+}

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

@@ -0,0 +1,14 @@
+<ng-container *ngIf="applicationTheme === 'classic'; else rebrandLogo">
+  <img [attr.src]="logoURL" [alt]="type">
+</ng-container>
+
+<ng-template #rebrandLogo>
+  <div *ngIf="label && type === LogoTypeEnum.POWEREDBY; else others" class="logo-label" [style.width]="width + 'px'">
+    <h3 class="bold">{{ label }}</h3>
+    <img [attr.src]="logoURL" [alt]="type" [width]="width">
+  </div>
+
+  <ng-template #others>
+    <img [attr.src]="logoURL" [alt]="type" [width]="width">
+  </ng-template>
+</ng-template>

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { LogoComponent } from './logo.component';
+import { NgIf } from '@angular/common';
+
+@NgModule({
+  declarations: [LogoComponent],
+  imports: [NgIf],
+  exports: [LogoComponent],
+})
+export class LogoComponentModule {}

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

@@ -0,0 +1,13 @@
+@use "../../theme/variables" as *;
+
+:host {
+  position: relative;
+
+  .logo-label {
+    h3 {
+      margin-left: 35px;
+      color: $grayscale-40;
+    }
+    height: 80px;
+  }
+}

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

@@ -0,0 +1,166 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LogoComponent } from './logo.component';
+import { LogoTypeEnum, LogoPathEnum } from './logo.model';
+import { InjectionToken, SimpleChange } from '@angular/core';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+  const CANOPYUI_DEFAULT_APPLICATION_THEME = new InjectionToken<string>('CANOPYUI_DEFAULT_APPLICATION_THEME');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LogoComponent],
+      providers: [{ provide: CANOPYUI_DEFAULT_APPLICATION_THEME, useValue: 'dark' }], // optional provider
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges(); // Triggers ngOnInit and other lifecycle hooks
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the default logo width to 200', () => {
+    expect(component.width).toBe(200);
+  });
+
+  it('should not set logo width if less than 200', () => {
+    // @ts-ignore
+    component.ngOnChanges({ width: new SimpleChange(150, 150, true) });
+    expect(component.width).toBe(200); // Should not change
+  });
+
+  it('should set logo width if it is 200 or greater', () => {
+    // @ts-ignore
+    component.ngOnChanges({ width: new SimpleChange(250, 250, true) });
+    expect(component.width).toBe(250); // Should update
+  });
+
+  it('should set logoURL based on type and applicationTheme', () => {
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.applicationTheme = 'light';
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK);
+
+    component.applicationTheme = 'classic';
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY);
+  });
+
+  it('should update the logoURL on ngOnInit', () => {
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.applicationTheme = 'classic';
+    component.ngOnInit(); // Calls setURL
+    expect(component.logoURL).toBe(LogoPathEnum.DEFAULT);
+  });
+
+  it('should update the logoURL on ngOnChanges', () => {
+    component.type = LogoTypeEnum.SECONDARY_BRANDMARK_BLACK;
+    component.applicationTheme = 'light';
+    component.ngOnChanges({}); // Calls setURL
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_BRANDMARK_BLACK);
+  });
+
+  it('should have a default application theme if injected', () => {
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set default values on initialization', () => {
+    fixture.detectChanges();
+    expect(component.width).toBe(200);
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should set logoURL correctly based on applicationTheme and type', () => {
+    component.applicationTheme = 'classic';
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    component.ngOnChanges({})
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY);
+    component.applicationTheme = 'light';
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK);
+
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_BLACK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_LOCKUP_BLACK);
+
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_CREAM;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_LOCKUP_CREAM);
+
+    component.type = LogoTypeEnum.SECONDARY_WORDMARK_BLACK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_WORDMARK_BLACK);
+
+    component.type = LogoTypeEnum.SECONDARY_WORDMARK_CREAM;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_WORDMARK_CREAM);
+
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.REBRAND_POWEREDBY);
+  });
+
+  it('should set default application theme if provided through constructor', () => {
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should update the logoURL when ngOnChanges is triggered', () => {
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_CREAM;
+    component.applicationTheme = 'classic';
+    fixture.detectChanges();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_LOCKUP_PINK);
+  });
+
+  it('should set correct logo URL based on application theme and type', () => {
+    component.applicationTheme = 'classic'; // Set the theme to classic
+    component.type = LogoTypeEnum.POWEREDBY; // Set the logo type
+    component.ngOnInit(); // Initialize the component
+
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY); // Validate the correct logo URL
+
+    component.applicationTheme = 'dark'; // Set to a non-classic theme
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK; // Change the logo type
+    component.ngOnChanges({}); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK); // Check updated logo URL
+  });
+
+  it('should set default logo URL when application theme or type does not match specific cases', () => {
+    component.applicationTheme = 'classic';
+    component.type = 'unknown' as LogoTypeEnum; // Set an unknown type
+    component.ngOnChanges({}); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.DEFAULT); // Default logo for classic theme
+
+    //@ts-ignore
+    component.applicationTheme = 'dark';
+    component.ngOnChanges({}); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_LOCKUP_PINK); // Default logo for non-classic theme
+  });
+
+  it('should respect width input to set logo width', () => {
+    // @ts-ignore
+    component.ngOnChanges({ width: new SimpleChange(300, 300, true) }); // Set width to 300
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.width).toBe(300); // Check the width
+
+    // @ts-ignore
+    component.ngOnChanges({ width: new SimpleChange(150, 150, true) }); // Set width to 150 (less than 200)
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.width).toBe(200); // Should default to 200 when less than 200
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { LogoComponent } from './logo.component';
+import { LogoTypeEnum } from './logo.model';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Logo',
+  component: LogoComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [LogoComponent],
+      imports: [],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+export const Default = Template.bind({});
+Default.args = {
+  type: LogoTypeEnum.DEFAULT,
+};
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: '',
+  },
+};
+
+export const PoweredBy = Template.bind({});
+PoweredBy.args = {
+  type: LogoTypeEnum.POWEREDBY,
+};
+
+export const Reverse = Template.bind({});
+Reverse.args = {
+  type: LogoTypeEnum.REVERSE,
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  type: LogoTypeEnum.DEFAULT,
+  width: 400
+};
+