@testgorilla/tgo-ui 2.11.0 → 2.11.1

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,139 @@
+@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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,42 @@
+// 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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,71 @@
+@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;
+      }
+    }
+  }
+}