@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,125 @@
+import { DebugElement } from '@angular/core';
+import { ScaleComponent } from './scale.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+const scaleSelectedItemClass = 'scale-item-selected';
+const scaleSelectors = {
+  item: '.scale-item',
+  selectedItem: `.${scaleSelectedItemClass}`
+};
+
+describe('Scale Component', () => {
+  let component: ScaleComponent;
+  let fixture: ComponentFixture<ScaleComponent>;
+  let selectedIndexChangeSpy: jest.SpyInstance;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ScaleComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScaleComponent);
+    component = fixture.componentInstance;
+    selectedIndexChangeSpy = jest.spyOn(component.selectedIndexChange, 'emit');
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  describe('when selectedIndex is not provided', () => {
+    let items: DebugElement[];
+    beforeEach(() => {
+      fixture.detectChanges();
+      items = fixture.debugElement.queryAll(By.css(scaleSelectors.item));
+    });
+
+    it('should render all items unselected', () => {
+      const selectedItems = fixture.debugElement.queryAll(By.css(scaleSelectors.selectedItem));
+      expect(items.length).toBeGreaterThan(0);
+      expect(selectedItems.length).toEqual(0);
+    });
+
+    describe('when selectedIndex is changed', () => {
+      const newValue = 2;
+      beforeEach(() => {
+        items[newValue].nativeElement.click();
+        fixture.detectChanges();
+      });
+
+      it('should render one selected item', () => {
+        const selectedItems = fixture.debugElement.queryAll(By.css(scaleSelectors.selectedItem));
+        expect(selectedItems.length).toEqual(1);
+      });
+
+      it('should emit selectedIndexChange with new selectedIndex', () => {
+        expect(selectedIndexChangeSpy).toHaveBeenCalledWith(newValue);
+      });
+
+      describe('and same selected item is clicked again', () => {
+        beforeEach(() => {
+          items[newValue].nativeElement.click();
+          fixture.detectChanges();
+        });
+
+        it('should NOT deselect item', () => {
+          expect(items[newValue].nativeElement.classList).toContain(scaleSelectedItemClass);
+        });
+
+        it('should NOT emit another value by selectedIndexChange', () => {
+          expect(selectedIndexChangeSpy).toHaveBeenCalledWith(newValue);
+        });
+      });
+    });
+  });
+
+  describe('when selectedIndex is provided', () => {
+    let items: DebugElement[];
+    const selectedIndex = 4;
+    beforeEach(() => {
+      component.selectedIndex = selectedIndex;
+      fixture.detectChanges();
+      items = fixture.debugElement.queryAll(By.css(scaleSelectors.item));
+    });
+
+    it('should render selected items according to selectedIndex', () => {
+      expect(items[selectedIndex].nativeElement.classList).toContain(scaleSelectedItemClass);
+    });
+
+    describe('when selectedIndex is changed', () => {
+      const newValue = 2;
+      beforeEach(() => {
+        items[newValue].nativeElement.click();
+        fixture.detectChanges();
+      });
+
+      it('should render selected item according to new selectedIndex', () => {
+        expect(items[newValue].nativeElement.classList).toContain(scaleSelectedItemClass);
+      });
+
+      it('should emit selectedIndex change with new selectedIndex', () => {
+        expect(selectedIndexChangeSpy).toHaveBeenCalledWith(newValue);
+      });
+    });
+  });
+
+  describe('when length is less than 0', () => {
+    beforeEach(() => {
+      component.length = -2;
+      fixture.detectChanges();
+    });
+
+    it('should render 1 item', () => {
+      const items = fixture.debugElement.queryAll(By.css(scaleSelectors.item));
+      expect(items.length).toEqual(1);
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ScaleComponent } from './scale.component';
+import { CommonModule } from '@angular/common';
+import { transformTheme } from '../../utils/transform-theme';
+
+export default {
+  title: 'Scale',
+  component: ScaleComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ScaleComponent],
+      imports: [CommonModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/Yyjp3wD1ZeFjvFcuF1Uuud/Assessment-Taking-Flow?type=design&node-id=12743-46949&mode=design&t=1VaucVaMTJH1sCOo-0',
+  },
+  controls: {
+    exclude: ['select', 'MIN_LENGTH', '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 = {
+  selectedIndex: 2,
+};
+
+WithValue.parameters = parameters;
+
+export const LargeRange = Template.bind({});
+
+LargeRange.args = {
+  length: 10,
+  selectedIndex: 5,
+};
+
+LargeRange.parameters = parameters;
+
+export const Default = Template.bind({});
+
+Default.args = {};
+
+Default.parameters = parameters;

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

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-scale',
+  templateUrl: './scale.component.html',
+  styleUrls: ['./scale.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScaleComponent {
+  private readonly MIN_LENGTH = 1;
+  private readonly DEFAULT_LENGTH = 5;
+  protected items: number[] = [];
+
+  /**
+   * The value representing the selected item of the scale.
+   * @type {number}
+   * @memberof ScaleComponent
+   */
+  @Input() selectedIndex: number;
+
+  /**
+   * The max number of items in the scale.
+   * @type {number}
+   * @memberof ScaleComponent
+   */
+  @Input() set length(length: number) {
+    this.items = Array(Math.max(length, this.MIN_LENGTH))
+      .fill(0)
+      .map((_, i) => i);
+  }
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ScaleComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  @Output() selectedIndexChange = 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.selectedIndex = index;
+    this.selectedIndexChange.emit(this.selectedIndex);
+  }
+}

package/projects/tgo-canopy-ui/components/segmented-bar/segmented-bar.component.html

@@ -0,0 +1,16 @@
+<div class="segmented-bar-container" [attr.theme]="applicationTheme" [ngClass]="'segment-size-' + size" [style.width]="width">
+  <ng-container *ngFor="let segment of segments">
+    <div
+      class="segmented-bar"
+      *ngIf="segment.value"
+      [ngClass]="segment.color"
+      [ngStyle]="{ flex: segment.value }"
+      [matTooltip]="segment.tooltip ?? ''"
+      [matTooltipClass]="applicationTheme"
+      [attr.aria-label]="ariaLabel"
+      [attr.aria-required]="ariaRequired"
+    >
+      <span>{{ segment.value }}</span>
+    </div>
+  </ng-container>
+</div>

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SegmentedBarComponent } from './segmented-bar.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatInputModule } from '@angular/material/input';
+
+@NgModule({
+  declarations: [SegmentedBarComponent],
+  imports: [CommonModule, MatTooltipModule, MatInputModule],
+  exports: [SegmentedBarComponent],
+})
+export class SegmentedBarComponentModule {}

package/projects/tgo-canopy-ui/components/segmented-bar/segmented-bar.component.scss

@@ -0,0 +1,86 @@
+@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");
+
+.segmented-bar-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  &.segment-size-small {
+    height: 16px;
+  }
+
+  &.segment-size-large {
+    height: 30px;
+  }
+
+  .segmented-bar {
+    color: $tgo-black;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $tgo-teal-default;
+
+    &.teal {
+      background: $tgo-teal-default;
+    }
+
+    &.rhubarb {
+      background: $tgo-error-default;
+    }
+
+    &.light-teal {
+      background: $tgo-teal-secondary;
+    }
+
+    &.grey {
+      background: $tgo-grey;
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    &.segment-size-small {
+      font-size: 12px;
+    }
+
+    &.segment-size-large {
+      font-size: 14px;
+    }
+
+    .segmented-bar {
+      color: $black;
+      background: $success-30;
+
+      &.teal {
+        background: $success-30;
+      }
+
+      &.rhubarb {
+        background: $error-20;
+      }
+
+      &.light-teal {
+        background: $warning-20;
+      }
+
+      &.grey {
+        background: $grayscale-20;
+      }
+    }
+  }
+}
+
+
+::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/segmented-bar/segmented-bar.component.spec.ts

@@ -0,0 +1,69 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SegmentedBarComponent } from './segmented-bar.component';
+import { By } from '@angular/platform-browser';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { InjectionToken } from "@angular/core";
+import { SliderComponent } from "../slider/slider.component";
+
+describe('SegmentedBarComponent', () => {
+  let component: SegmentedBarComponent;
+  let fixture: ComponentFixture<SegmentedBarComponent>;
+  const CANOPYUI_DEFAULT_APPLICATION_THEME = new InjectionToken<string>('CANOPYUI_DEFAULT_APPLICATION_THEME');
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SegmentedBarComponent],
+      providers: [{ provide: CANOPYUI_DEFAULT_APPLICATION_THEME, useValue: 'dark' }], // optional provider
+      imports: [MatTooltipModule]
+    });
+
+    fixture = TestBed.createComponent(SegmentedBarComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should apply ngClass based on size', () => {
+    component.size = 'small';
+    fixture.detectChanges();
+    const container = fixture.debugElement.query(By.css('.segmented-bar-container'));
+    expect(container.classes['segment-size-small']).toBe(true);
+  });
+
+  it('should set width using ngStyle', () => {
+    component.width = '200px';
+    fixture.detectChanges();
+    const container = fixture.debugElement.query(By.css('.segmented-bar-container'));
+    expect(container.styles['width']).toBe('200px');
+  });
+
+  it('should render segments with proper styles and values', () => {
+    component.segments = [
+      { color: 'teal', value: 2, tooltip: 'teal' },
+      { color: 'light-teal', value: 3, tooltip: 'light-teal' },
+      { color: 'rhubarb', value: 5, tooltip: 'rhubarb' },
+    ];
+    fixture.detectChanges();
+    const segments = fixture.debugElement.queryAll(By.css('.segmented-bar'));
+
+    expect(segments.length).toBe(3);
+
+    expect(segments[0].classes['teal']).toBe(true);
+    expect(segments[0].styles['flex']).toBe('2');
+    expect(segments[0].query(By.css('span')).nativeElement.textContent).toBe('2');
+  });
+
+  it('should handle empty segments array', () => {
+    component.segments = [];
+    fixture.detectChanges();
+    const container = fixture.debugElement.query(By.css('.segmented-bar-container'));
+    expect(container.queryAll(By.css('.segmented-bar')).length).toBe(0);
+  });
+
+  it('should default to light theme if no theme is injected', () => {
+    fixture.detectChanges();
+    expect(component.applicationTheme).toBe('light');
+  });
+});

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

@@ -0,0 +1,98 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { SegmentedBarComponent } from './segmented-bar.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Segmented Bar',
+  component: SegmentedBarComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [SegmentedBarComponent],
+      imports: [CommonModule, MatTooltipModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (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=13396-77691&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  segments: [
+    { value: 1, color: 'teal' },
+    { value: 1, color: 'grey' },
+    { value: 1, color: 'light-teal' },
+    { value: 1, color: 'rhubarb' },
+  ],
+};
+
+Default.parameters = parameters;
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  segments: [
+    { value: 3, color: 'teal' },
+    { value: 1, color: 'grey' },
+    { value: 10, color: 'light-teal' },
+    { value: 4, color: 'rhubarb' },
+  ],
+};
+
+WithValue.parameters = parameters;
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  segments: [
+    { value: 3, color: 'teal' },
+    { value: 1, color: 'grey' },
+    { value: 10, color: 'light-teal' },
+    { value: 4, color: 'rhubarb' },
+  ],
+};
+
+Small.parameters = parameters;
+
+export const WithCustomWidth = Template.bind({});
+WithCustomWidth.args = {
+  width: '500px',
+  segments: [
+    { value: 5, color: 'teal' },
+    { value: 1, color: 'grey' },
+    { value: 10, color: 'light-teal' },
+    { value: 4, color: 'rhubarb' },
+  ],
+};
+
+WithCustomWidth.parameters = parameters;
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  width: '500px',
+  segments: [
+    { value: 3, color: 'teal', tooltip: 'Value 3 teal' },
+    { value: 1, color: 'grey', tooltip: 'Value 1 grey' },
+    { value: 10, color: 'light-teal', tooltip: 'Value 10 light-teal' },
+    { value: 4, color: 'rhubarb', tooltip: 'Value 4 rhubarb' },
+  ],
+};
+
+WithTooltip.parameters = parameters;

package/projects/tgo-canopy-ui/components/segmented-bar/segmented-bar.component.ts

@@ -0,0 +1,69 @@
+import { Component, Inject, Input, Optional } from '@angular/core';
+import { SegmentedBar, SegmentedBarVariant } from './segmented-bar.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-segmented-bar',
+  templateUrl: './segmented-bar.component.html',
+  styleUrls: ['./segmented-bar.component.scss'],
+})
+export class SegmentedBarComponent {
+  /**
+   * The width of the segmented bar. Defaults to '100%'.
+   * You can use '100%' or '100px' for this field. 100 is just an example
+   * @default '100%'
+   * @type {string}
+   * @memberof SegmentedBarComponent
+   */
+  @Input() width = '100%';
+
+  /**
+   * The size variant of the segmented bar. Can be 'small' or 'large'.
+   * Defaults to 'large'.
+   * @default 'large'
+   * @type {SegmentedBarVariant}
+   * @memberof SegmentedBarComponent
+   */
+  @Input() size: SegmentedBarVariant = 'large';
+
+  /**
+   * The segments to be displayed in the segmented bar.
+   * @required true
+   * @type {SegmentedBar}
+   * @memberof SegmentedBarComponent
+   */
+  @Input({ required: true }) segments: SegmentedBar[] = [];
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SegmentedBarComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof SegmentedBarComponent
+   */
+  @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 SegmentedBarComponent
+   */
+  @Input() ariaRequired = false;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/segmented-bar/segmented-bar.model.ts

@@ -0,0 +1,8 @@
+export type SegmentedBarVariant = 'large' | 'small';
+export type SegmentedBarColor = 'teal' | 'rhubarb' | 'light-teal' | 'grey';
+
+export interface SegmentedBar {
+  value: number;
+  color: SegmentedBarColor;
+  tooltip?: string;
+}

package/projects/tgo-canopy-ui/components/segmented-button/segmented-button.component.html

@@ -0,0 +1,11 @@
+<mat-button-toggle-group class="segmented-button-container" [(value)]="value">
+  <mat-button-toggle
+    class="start-button"
+    [disableRipple]="true"
+    *ngFor="let button of buttonConfig"
+    [value]="button.value"
+  >
+    <ng-container *ngIf="button.template; else label" [ngTemplateOutlet]="button.template"></ng-container>
+    <ng-template #label>{{ button.label }}</ng-template>
+  </mat-button-toggle>
+</mat-button-toggle-group>

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SegmentedButtonComponent } from './segmented-button.component';
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { FormsModule } from "@angular/forms";
+
+
+
+@NgModule({
+  declarations: [
+    SegmentedButtonComponent
+  ],
+  exports: [
+    SegmentedButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    MatButtonToggleModule,
+    FormsModule
+  ]
+})
+export class SegmentedButtonComponentModule { }

package/projects/tgo-canopy-ui/components/segmented-button/segmented-button.component.scss

@@ -0,0 +1,44 @@
+@use '../../theme/variables' as *;
+@use '../../theme/typography' as *;
+
+.segmented-button-container {
+  border-color: $grayscale-40;
+
+  &:first-child {
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  .mat-button-toggle {
+    min-width: 80px;
+    min-height: 48px;
+    border-color: $grayscale-40;
+
+    ::ng-deep.mat-button-toggle-label-content {
+      color: $black;
+      @include font-style('label');
+    }
+
+    &:hover {
+      background: $brand-10;
+    }
+
+    &.mat-button-toggle-checked {
+      background: $brand-20;
+
+      ::ng-deep.mat-button-toggle-label-content {
+        font-weight: 700;
+      }
+
+    }
+
+    ::ng-deep.mat-button-toggle-focus-overlay {
+      display: none;
+    }
+  }
+}