@testgorilla/tgo-ui 2.10.1 → 2.10.2

package/projects/tgo-canopy-ui/components/rating/half-star.pipe.spec.ts

@@ -1,33 +0,0 @@
-import { HalfStarPipe } from './half-star.pipe';
-
-describe('HalfStarPipe', () => {
-  let pipe: HalfStarPipe;
-
-  beforeEach(() => {
-    pipe = new HalfStarPipe();
-  });
-
-  it('should create an instance', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should return true for a half-star index', () => {
-    const result = pipe.transform(4, 3.5);
-    expect(result).toBe(true);
-  });
-
-  it('should return false for a whole-star index', () => {
-    const result = pipe.transform(2, 2);
-    expect(result).toBe(false);
-  });
-
-  it('should return false for a non-matching index', () => {
-    const result = pipe.transform(1, 2.5);
-    expect(result).toBe(false);
-  });
-
-  it('should return false for a whole-star index with non-integer value', () => {
-    const result = pipe.transform(3, 3.5);
-    expect(result).toBe(false);
-  });
-});

package/projects/tgo-canopy-ui/components/rating/half-star.pipe.ts

@@ -1,17 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'halfStar',
-})
-export class HalfStarPipe implements PipeTransform {
-  /**
-   * @description Used to indicate whether display half-star icon.
-   * Returns true if the rounded value of the current element
-   * is equal to it's index, and value is not integer (e.g. index = 4, value = 3.5),
-   * @param index the index of the current element
-   * @param value the value of the current element
-   */
-  transform(index: number, value: number): boolean {
-    return Math.ceil(value) === index && !Number.isInteger(value);
-  }
-}

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

@@ -1,31 +0,0 @@
-<div class="rating"
-     (mouseleave)="onHover(-1)"
-     [attr.aria-label]="ariaLabel"
-     [attr.aria-required]="ariaRequired"
->
-  <ng-container *ngIf="theme === 'block';else stars">
-    <div class="rating-item" [attr.theme]="applicationTheme" *ngFor="let item of items" (click)="select(item)" (mouseenter)="onHover(item)"
-         [ngClass]="{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }"
-         [ngStyle]="{'width.px': barWidth}">
-    </div>
-  </ng-container>
-
-  <ng-template #stars>
-    <div class="star-container" [attr.theme]="applicationTheme">
-      <div
-        class="star"
-        [tabIndex]="0"
-        (mouseenter)="onHover(item)"
-        (mouseleave)="onHover(-1)"
-        [ngClass]="{
-          filled: value > i,
-          hover: item < hoverIndex && (value ? item >= value : true),
-          disabled,
-          'filled-half': i + 1 | halfStar : value
-        }"
-        *ngFor="let item of items; index as i"
-        (click)="select(item)"
-      ></div>
-    </div>
-  </ng-template>
-</div>

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

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RatingComponent } from './rating.component';
-import { HalfStarPipe } from './half-star.pipe';
-import { MatInputModule } from '@angular/material/input';
-
-@NgModule({
-  declarations: [RatingComponent, HalfStarPipe],
-  imports: [CommonModule, MatInputModule],
-  exports: [RatingComponent],
-})
-export class RatingComponentModule {}

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

@@ -1,139 +0,0 @@
-@use "../../theme/variables" as *;
-
-.rating {
-  display: flex;
-  align-content: center;
-  justify-content: flex-start;
-  align-items: center;
-
-  &-item {
-    width: 35px;
-    height: 16px;
-    border: 1px solid $tgo-medium;
-    border-left: 0;
-    cursor: pointer;
-
-    &-hover {
-      border: 0;
-      background-color: $tgo-teal-60w;
-
-      &[theme="dark"], &[theme="light"] {
-        background-color: $brand-30;
-      }
-
-      &:not(:first-child) {
-        border-left: 1px solid $tgo-white;
-      }
-    }
-
-    &:first-child {
-      border-radius: 4px 0px 0px 4px;
-
-      &:not(.rating-item-selected):not(.rating-item-hover) {
-        border-left: 1px solid $tgo-medium;
-      }
-    }
-
-    &:last-child {
-      border-radius: 0px 4px 4px 0px;
-    }
-
-    &:first-child:last-child {
-      border-radius: 4px;
-    }
-
-    &-selected {
-      border: 0;
-      background-color: $tgo-teal-default;
-
-      &[theme="dark"], &[theme="light"] {
-        background-color: $brand-50;
-      }
-
-      &:not(:first-child) {
-        border-left: 1px solid $tgo-white;
-      }
-    }
-  }
-
-  .star-container {
-    display: flex;
-    flex-direction: row;
-    min-height: 24px;
-
-    .star {
-      width: 24px;
-      height: 24px;
-      background: url("/icons/rating-icons/Star-outline.svg") no-repeat center;
-      background-size: 100%;
-      margin-right: 4px;
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &:focus {
-        outline: 1px dashed $tgo-dark;
-      }
-
-      &:hover, &.hover, &:focus {
-        opacity: 0.5;
-        @extend .star-filled;
-      }
-
-      &.filled {
-        @extend .star-filled
-      }
-
-      &.filled-half {
-        background-image: url("/icons/rating-icons/Star-half.svg")!important;
-      }
-
-      &.disabled {
-        pointer-events: none;
-        background-image: url("/icons/rating-icons/Star-filled-disabled.svg");
-      }
-
-      &:active {
-        @extend .star-filled;
-        opacity: 1;
-      }
-    }
-
-    .star-filled {
-      background-image: url("/icons/rating-icons/Star-filled.svg");
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      .star {
-        cursor: pointer;
-        background: url("/icons/rebrand/Review-star-in-line.svg") no-repeat center;
-        &:hover, &.hover, &:focus {
-          opacity: 0.5;
-          @extend .star-filled;
-        }
-
-        &:focus {
-          outline-offset: 4px
-        }
-
-        &.filled {
-          @extend .star-filled;
-        }
-
-        &.filled-half {
-          background-image: url("/icons/rebrand/Review-half-star-filled.svg")!important;
-        }
-
-        &.disabled {
-          background-image: url("/icons/rebrand/Review-star-filled-disabled.svg");
-        }
-      }
-      .star-filled {
-        background-image: url("/icons/rebrand/Review-star-filled.svg");
-      }
-    }
-
-  }
-}
-
-

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

@@ -1,142 +0,0 @@
-import { DebugElement } from '@angular/core';
-import { RatingComponent } from './rating.component';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-const ratingSelectors = {
-  point: '.rating-item',
-  selectedPoint: '.rating-item-selected',
-};
-describe('Rating Component', () => {
-  let component: RatingComponent;
-  let fixture: ComponentFixture<RatingComponent>;
-  let valueChangeSpy: jest.SpyInstance;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [RatingComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RatingComponent);
-    component = fixture.componentInstance;
-    valueChangeSpy = jest.spyOn(component.valueChange, 'emit');
-  });
-
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render correctly', () => {
-    fixture.detectChanges();
-    expect(fixture).toMatchSnapshot();
-  });
-
-  describe('when value is not provided', () => {
-    let points: DebugElement[];
-    beforeEach(() => {
-      fixture.detectChanges();
-      points = fixture.debugElement.queryAll(By.css(ratingSelectors.point));
-    });
-
-    it('should render all empty points', () => {
-      const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-      expect(points.length).toBeGreaterThan(0);
-      expect(selectedPoints.length).toEqual(0);
-    });
-
-    describe('when new value is selected', () => {
-      const newValue = 3;
-      beforeEach(() => {
-        points[newValue - 1].nativeElement.click();
-        fixture.detectChanges();
-      });
-
-      it('should render no selected equals new value', () => {
-        const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-        expect(selectedPoints.length).toEqual(newValue);
-      });
-
-      it('should emit value change with new value', () => {
-        expect(valueChangeSpy).toHaveBeenCalledWith(newValue);
-      });
-    });
-  });
-
-  describe('when value is provided', () => {
-    let points: DebugElement[];
-    const value = 4;
-    beforeEach(() => {
-      component.value = value;
-      fixture.detectChanges();
-      points = fixture.debugElement.queryAll(By.css(ratingSelectors.point));
-    });
-
-    it('should render selected points equals to value', () => {
-      const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-      expect(points.length).toBeGreaterThan(0);
-      expect(selectedPoints.length).toEqual(value);
-    });
-
-    describe('when new value is selected', () => {
-      const newValue = 2;
-      beforeEach(() => {
-        points[newValue - 1].nativeElement.click();
-        fixture.detectChanges();
-      });
-
-      it('should render no selected equals new value', () => {
-        const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-        expect(selectedPoints.length).toEqual(newValue);
-      });
-
-      it('should emit value change with new value', () => {
-        expect(valueChangeSpy).toHaveBeenCalledWith(newValue);
-      });
-    });
-  });
-
-  describe('when value is equal length', () => {
-    beforeEach(() => {
-      const value = 5;
-      component.length = value;
-      component.value = value;
-      fixture.detectChanges();
-    });
-
-    it('should render all points as selected', () => {
-      const points = fixture.debugElement.queryAll(By.css(ratingSelectors.point));
-      const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-      expect(points.length).toEqual(selectedPoints.length);
-    });
-  });
-
-  describe('when value is bigger than length', () => {
-    beforeEach(() => {
-      const length = 5;
-      component.length = length;
-      component.value = length + 1;
-      fixture.detectChanges();
-    });
-
-    it('should render all points as selected', () => {
-      const points = fixture.debugElement.queryAll(By.css(ratingSelectors.point));
-      const selectedPoints = fixture.debugElement.queryAll(By.css(ratingSelectors.selectedPoint));
-      expect(points.length).toEqual(selectedPoints.length);
-    });
-  });
-
-  describe('when length is less than 0', () => {
-    beforeEach(() => {
-      const length = -2;
-      component.length = length;
-      fixture.detectChanges();
-    });
-
-    it('should render no points', () => {
-      const points = fixture.debugElement.queryAll(By.css(ratingSelectors.point));
-      expect(points.length).toEqual(0);
-    });
-  });
-});

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

@@ -1,87 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { RatingComponent } from './rating.component';
-import { CommonModule } from '@angular/common';
-import { HalfStarPipe } from './half-star.pipe';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'Rating',
-  component: RatingComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [RatingComponent, HalfStarPipe],
-      imports: [CommonModule],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=9652-11615&mode=design&t=jIAnrVdKNw9F4YlK-4',
-  },
-  controls: {
-    exclude: ['onHover', 'select', 'MIN_LENGTH', 'hoverIndex', 'DEFAULT_LENGTH', 'items'],
-  },
-};
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const WithValue = Template.bind({});
-
-WithValue.args = {
-  value: 2,
-};
-
-WithValue.parameters = parameters;
-
-export const LargeRange = Template.bind({});
-
-LargeRange.args = {
-  length: 10,
-  value: 5,
-};
-
-LargeRange.parameters = parameters;
-
-export const WidePoint = Template.bind({});
-
-WidePoint.args = {
-  pointWidth: 60,
-};
-
-WidePoint.parameters = parameters;
-
-export const Default = Template.bind({});
-
-Default.args = {};
-
-Default.parameters = parameters;
-
-export const Stars = Template.bind({});
-
-Stars.args = {
-  theme: 'stars',
-};
-
-Stars.parameters = parameters;
-
-export const StarsDisabled = Template.bind({});
-
-StarsDisabled.args = {
-  theme: 'stars',
-  disabled: true,
-  value: 3.5,
-};
-
-StarsDisabled.parameters;

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

@@ -1,97 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-export type RatingComponentTheme = 'stars' | 'block';
-
-@Component({
-  selector: 'ui-rating',
-  templateUrl: './rating.component.html',
-  styleUrls: ['./rating.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RatingComponent {
-  private readonly MIN_LENGTH = 0;
-  private readonly DEFAULT_LENGTH = 5;
-  protected items: number[] = [];
-  protected hoverIndex: number;
-
-  /**
-   *
-   * Defines the application theme where accordion is used
-   *
-   * @type {ApplicationTheme}
-   * @memberof AccordionComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * The value representing the rating.
-   * @type {number}
-   * @memberof RatingComponent
-   */
-  @Input() value: number;
-
-  /**
-   * The theme of the rating component. Defaults "block".
-   * @type {RatingComponentTheme}
-   * @memberof RatingComponent
-   */
-  @Input() theme: RatingComponentTheme = 'block';
-
-  /**
-   * A flag indicating whether the rating component is disabled.
-   * @type {boolean}
-   * @memberof RatingComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * A string representing the ARIA label for accessibility.
-   * This label is used to provide an accessible name for the input element.
-   * @type {string}
-   * @memberof RatingComponent
-   */
-  @Input() ariaLabel: string;
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {boolean}
-   * @memberof RatingComponent
-   */
-  @Input() ariaRequired = false;
-
-  /**
-   * The width of the rating bar.
-   * @type {number}
-   * @memberof RatingComponent
-   */
-  @Input() barWidth = 35;
-
-  @Input() set length(length: number) {
-    this.items = Array(Math.max(length, this.MIN_LENGTH))
-      .fill(0)
-      .map((x, i) => i);
-  }
-
-  @Output() valueChange = new EventEmitter<number>();
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-    this.length = this.DEFAULT_LENGTH;
-
-  }
-
-  protected select(index: number): void {
-    this.value = this.value === index + 1 ? 0 : index + 1;
-    this.valueChange.emit(this.value);
-  }
-
-  protected onHover(index: number): void {
-    this.hoverIndex = index + 1;
-  }
-}

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

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Scale Component should render correctly 1`] = `
-<ui-scale
-  DEFAULT_LENGTH={[Function Number]}
-  MIN_LENGTH={[Function Number]}
-  applicationTheme={[Function String]}
-  defaultAppTheme="null"
-  items={[Function Array]}
-  selectedIndexChange={[Function EventEmitter_]}
->
-  <div
-    class="scale"
-  >
-    <div
-      class="scale-item"
-    >
-       1 
-    </div>
-    <div
-      class="scale-item"
-    >
-       2 
-    </div>
-    <div
-      class="scale-item"
-    >
-       3 
-    </div>
-    <div
-      class="scale-item"
-    >
-       4 
-    </div>
-    <div
-      class="scale-item"
-    >
-       5 
-    </div>
-  </div>
-</ui-scale>
-`;

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

@@ -1,7 +0,0 @@
-<div class="scale"
-     [ngClass]="{ 'scale-classic': applicationTheme === 'classic' }">
-  <div class="scale-item" *ngFor="let item of items" (click)="select(item)"
-       [ngClass]="{ 'scale-item-selected': item === selectedIndex }">
-    {{ item + 1 }}
-  </div>
-</div>

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ScaleComponent } from './scale.component';
-
-
-@NgModule({
-  declarations: [ScaleComponent],
-  imports: [CommonModule],
-  exports: [ScaleComponent]
-})
-export class ScaleComponentModule {
-}

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

@@ -1,71 +0,0 @@
-@use "../../theme/variables" as *;
-
-.scale {
-  display: flex;
-  align-content: center;
-  justify-content: flex-start;
-  align-items: center;
-
-  &-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 72px;
-    height: 48px;
-    border: 1px solid $grayscale-40;
-    border-left: 0;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: 400;
-    font-family: "ModernGothic", serif;
-    background-color: $tgo-white;
-
-    &:hover:not(.scale-item-selected) {
-      background-color: $brand-30;
-    }
-
-    &:first-child {
-      border-radius: 10px 0 0 10px;
-      border-left: 1px solid $grayscale-40;
-    }
-
-    &:last-child {
-      border-radius: 0 10px 10px 0;
-    }
-
-    &-selected {
-      background-color: $brand-50;
-      color: $tgo-white;
-      font-weight: bold;
-    }
-  }
-
-  &-classic {
-    .scale-item {
-      border-color: $tgo-medium;
-      font-family: "Open Sans", serif;
-
-      &:first-child {
-        border-radius: 4px 0 0 4px;
-        border-left: 1px solid $tgo-medium;
-      }
-
-      &:last-child {
-        border-radius: 0 4px 4px 0;
-      }
-
-
-      &:not(.scale-item-selected) {
-        color: $black;
-      }
-
-      &:hover:not(.scale-item-selected) {
-        background-color: $tgo-teal-60w;
-      }
-
-      &-selected {
-        background-color: $tgo-teal-default;
-      }
-    }
-  }
-}