@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,175 @@
+@use '../../theme/variables' as *;
+
+.mat-mdc-radio-button.mat-accent {
+  --mat-radio-checked-ripple-color: var(--color)!important;
+  --mdc-radio-selected-focus-icon-color: var(--color)!important;
+  --mdc-radio-selected-pressed-icon-color: var(--color)!important;
+}
+
+::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle {
+  border-color: var(--color) !important;
+}
+
+::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle {
+  background-color: var(--color) !important;
+  border-color: var(--color) !important;
+}
+
+::ng-deep .mat-mdc-radio-button .mat-ripple-element {
+  background-color: var(--color) !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,
+.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle {
+  border-color: $tgo-dark !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle {
+  background-color: $tgo-dark !important;
+}
+
+[theme="dark"], [theme="light"] {
+  --color: #{$brand-50}!important;
+  .mat-mdc-radio-button.mat-accent {
+    --mdc-radio-unselected-icon-color: #{$black} !important;
+  }
+
+  ::ng-deep .mdc-radio.mdc-radio--disabled {
+    --mdc-radio-disabled-unselected-icon-color: #{$grayscale-40};
+    --mdc-radio-disabled-selected-icon-opacity: 1;
+    --mdc-radio-disabled-unselected-icon-opacity: 1;
+    --color: #{$grayscale-40};
+    .mdc-radio__background {
+      background: $grayscale-20;
+      border-radius: 100%;
+    }
+  }
+
+  ::ng-deep .mdc-radio__background {
+    background: $tgo-white!important;
+    border-radius: 100%;
+    scale: 0.8;
+
+    .mdc-radio__outer-circle {
+      border-width: 1px;
+    }
+  }
+
+  ::ng-deep .mat-ripple {
+    display: none;
+  }
+}
+
+[haserror="true"] {
+  ::ng-deep .mdc-radio__background {
+    .mdc-radio__outer-circle {
+      border-width: 2px;
+    }
+  }
+}
+
+@mixin multiple($color) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  background: $color;
+  border-radius: 8px;
+
+  ::ng-deep .mat-mdc-radio-button {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+  };
+}
+
+.multiple-checked {
+  border: 1px solid var(--color);
+  @include multiple(var(--color));
+  ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle {
+    border: 1px solid $tgo-white;
+    border-radius: 64px;
+    background: $tgo-white;
+  };
+  ::ng-deep label {
+    color: $tgo-white;
+    height: 100%;
+    width: 100%;
+  }
+
+  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"] {
+    background: $tgo-white;
+    border-color: $black;
+
+    outline: 1px solid $black;
+
+    ::ng-deep label {
+      color: $black;
+    }
+  }
+
+  &[theme="dark"][hasError="true"], &[theme="light"][hasError="true"] {
+    border: 1px solid $error-50;
+    outline: 1px solid $error-50;
+    background: $tgo-white;
+    border-radius: 10px;
+
+    ::ng-deep label {
+      color: $black;
+    }
+  }
+
+  &[theme="classic"][hasError="true"] {
+    border: 1px solid $error-50;
+    outline: 1px solid $error-50;
+  }
+}
+
+.multiple-unchecked {
+  border: 1px solid $tgo-medium;
+  @include multiple($tgo-white);
+
+  &:hover {
+    background: $tgo-light;
+    border: 1px solid $tgo-medium;
+  }
+
+  ::ng-deep label {
+    height: 100%;
+    width: 100%;
+  }
+
+  ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background::before {
+    opacity: 0 !important;
+  }
+
+  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"]  {
+    border: 1px solid $grayscale-40;
+    background: $tgo-white;
+
+    &:hover {
+      outline: 1px solid $black;
+      background: $tgo-white;
+      border-color: $black!important;
+    }
+  }
+
+  &[hasError="true"] {
+    border: 1px solid $error-50;
+    outline: 1px solid $error-50;
+    background: $tgo-white;
+    &:not([theme="classic"]) {
+      border-radius: 10px;
+    }
+  }
+}
+
+:host {
+  *[hasError="true"] {
+    .mat-mdc-radio-button.mat-accent {
+      --mdc-radio-unselected-icon-color: #{$error-50} !important;
+      --mdc-radio-unselected-hover-icon-color: #{$error-50} !important;
+      --mdc-radio-unselected-focus-icon-color: #{$error-50} !important;
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioButtonHarness } from '@angular/material/radio/testing';
+import { RadioButtonComponent } from './radio-button.component';
+
+describe('RadioButtonComponent', () => {
+  let radioHarness: MatRadioButtonHarness;
+  let component: RadioButtonComponent;
+  let fixture: ComponentFixture<RadioButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatRadioModule],
+      declarations: [RadioButtonComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(RadioButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when created', () => {
+    beforeEach(async () => {
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      radioHarness = await loader.getHarness(MatRadioButtonHarness);
+    });
+
+    it('should render', () => {
+      expect(component).toBeTruthy();
+    });
+    it('should be unselected by default', async () => {
+      expect(await radioHarness.isChecked()).toBeFalsy();
+    });
+  });
+
+  describe('when radio button is clicked', () => {
+    beforeEach(async () => {
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      radioHarness = await loader.getHarness(MatRadioButtonHarness);
+
+      jest.spyOn(component.changeRadio, 'emit');
+      jest.spyOn(component, 'clickRadio');
+      jest.spyOn(component, 'setClass');
+    });
+
+    it('should emit "onChange" output', async () => {
+      await radioHarness.check();
+
+      expect(component.changeRadio.emit).toHaveBeenCalled();
+    });
+
+    it('should call clickRadio()', async () => {
+      expect(component.clickRadio).not.toHaveBeenCalled();
+
+      await radioHarness.check();
+
+      expect(component.clickRadio).toHaveBeenCalled();
+    });
+
+    it('should check an unselected radio', async () => {
+      expect(component.selected).toBeFalsy();
+
+      await radioHarness.check();
+
+      expect(await radioHarness.isChecked()).toBeTruthy();
+    });
+
+    describe('and allowUnselected is false', () => {
+      it('should not uncheck a selected radio', async () => {
+        component.selected = true;
+
+        expect(component.allowUnselect).toBeFalsy();
+        expect(component.selected).toBeTruthy();
+
+        await radioHarness.check();
+
+        expect(await radioHarness.isChecked()).toBeTruthy();
+      });
+    });
+    describe('and disabled is true', () => {
+      it('should call setClass()', async () => {
+        component.disabled = true;
+
+        expect(component.setClass).not.toHaveBeenCalled();
+
+        await radioHarness.check();
+
+        expect(component.setClass).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('and radio button is Multiple Choice', () => {
+      let radio: any;
+
+      beforeEach(async () => {
+        radio = fixture.debugElement.nativeElement.querySelector('mat-radio-button');
+        jest.spyOn(component, 'setClass');
+      });
+      it('should toggle "multiple-cheked" and "multiple-uncheked" css classes', () => {
+        const multiRadio = fixture.debugElement.nativeElement.querySelector('div');
+        component.multiple = true;
+        component.allowUnselect = true;
+
+        expect(multiRadio.className).toEqual('');
+
+        radio.click();
+        fixture.detectChanges();
+
+        expect(multiRadio.className).toEqual('multiple-checked');
+
+        radio.click();
+        fixture.detectChanges();
+
+        expect(multiRadio.className).toEqual('multiple-unchecked');
+      });
+    });
+  });
+
+  describe('when label input is initialized', () => {
+    it('should show label', () => {
+      component.label = 'some text';
+      fixture.detectChanges();
+      const label = fixture.debugElement.nativeElement.querySelector('label');
+      expect(label.textContent).toContain('some text');
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should call setClass() method', () => {
+      const isClassMultiple = jest.spyOn(component, 'setClass');
+      component.selected = true;
+      component.ngOnChanges({
+        selected: new SimpleChange(null, component.selected, true),
+      });
+      fixture.detectChanges();
+      expect(isClassMultiple).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,126 @@
+import { MatRadioModule } from '@angular/material/radio';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { RadioButtonComponent } from './radio-button.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+export default {
+  title: 'Forms/RadioButton',
+  component: RadioButtonComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [RadioButtonComponent],
+      imports: [MatRadioModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  disabled: false,
+  selected: false,
+  allowUnselect: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['setClass', 'toggleChecked', 'ngOnInit', 'classMultiple', 'ngOnChanges'],
+  },
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=3535-5895&t=dYZklVyTZ92VyqdO-0',
+  },
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+Disabled.parameters = {
+  ...Default.parameters,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ...Default.args,
+  _selected: true,
+};
+
+Selected.parameters = {
+  ...Default.parameters,
+};
+
+export const AllowUnselect = Template.bind({});
+AllowUnselect.args = {
+  ...Default.args,
+  _selected: true,
+  allowUnselect: true,
+};
+
+AllowUnselect.parameters = {
+  ...Default.parameters,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  ...Default.args,
+  selected: true,
+  label: 'Some text.',
+};
+
+WithLabel.parameters = {
+  ...Default.parameters,
+};
+
+export const MultipleChoice: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-radio-button [multiple]="true" applicationTheme="${_theme}" label="Single selection - unselected" [selected]="false" allowUnselect="true" name="unchecked"></ui-radio-button>
+    <br>
+    <ui-radio-button [multiple]="true" applicationTheme="${_theme}" label="Single selection - selected" [selected]="true" allowUnselect="true" name="checked"></ui-radio-button>
+  `,
+    };
+  },
+} as Story;
+
+export const WithErrorMultiple: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-radio-button [hasError]="true" allowUnselect="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected"></ui-radio-button>
+        <br>
+        <ui-radio-button [hasError]="true" allowUnselect="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected"></ui-radio-button>
+      `,
+    };
+  },
+} as Story;
+
+export const WithErrorSingle: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-radio-button [hasError]="true" applicationTheme="${_theme}" label="Single selection - unselected"></ui-radio-button>
+        <br>
+        <ui-radio-button [hasError]="true" applicationTheme="${_theme}" label="Single selection - unselected"></ui-radio-button>
+      `,
+    };
+  },
+} as Story;

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

@@ -0,0 +1,190 @@
+/* eslint-disable no-underscore-dangle */
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding, Inject,
+  Input,
+  OnChanges,
+  OnInit, Optional,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { MatRadioButton } from '@angular/material/radio';
+import { RadioButtonEventType } from './radio-button.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-radio-button',
+  templateUrl: './radio-button.component.html',
+  styleUrls: ['./radio-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadioButtonComponent implements OnInit, OnChanges {
+  /**
+   * Determines whether the radio button is disabled.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * Determines whether the radio button is checked.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  //@Input() selected = false;
+
+  _selected = false;
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(selected: boolean) {
+    this._selected = selected;
+  }
+
+  /**
+   * Determines whether the radio button can be unchecked.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  @Input() allowUnselect = false;
+
+  /**
+   * Determines the radio button color.
+   * Default: Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof RadioButtonComponent
+   */
+  @HostBinding('style.--color')
+  @Input()
+  companyColor = '#46A997';
+
+  /**
+   * Used to group radios for unique selection.
+   *
+   * @type {string}
+   * @memberof RadioButtonComponent
+   */
+  @Input() name = '';
+
+  /**
+   * Text content will be applied to the input element if present.
+   *
+   * @type {string}
+   * @memberof RadioButtonComponent
+   */
+  @Input() label = '';
+
+  /**
+   * Determines whether the radio button is a multiple choice cell.
+   * Default: false
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  @Input() multiple = false;
+
+  /**
+   * Determines value of the radio button.
+   * Default: false
+   *
+   * @type {any}
+   * @memberof RadioButtonComponent
+   */
+  @Input() value: any;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof RadioButtonComponent
+   */
+  @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 RadioButtonComponent
+   */
+  @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 RadioButtonComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * Defines if checkbox has error
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  @Input() hasError = false;
+
+  /**
+   * Event emitted when the checked state of the radio button changes.
+   *
+   * @type {boolean}
+   * @memberof RadioButtonComponent
+   */
+  @Output() changeRadio = new EventEmitter<RadioButtonEventType>();
+
+  classMultiple: string;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit() {
+    this.classMultiple = this.setClass();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['selected']) {
+      this.classMultiple = this.setClass();
+    }
+  }
+
+  //Click method
+  clickRadio(element: MatRadioButton, event: MouseEvent) {
+    //event.preventDefault();
+    if (this.allowUnselect) {
+      element.checked = !element.checked;
+      this._selected = element.checked;
+      this.classMultiple = this.setClass();
+      this.changeRadio.emit({ optionName: element.value, optionChecked: element.checked });
+    } else {
+      this.changeRadio.emit({ optionName: element.value, optionChecked: true });
+    }
+    if (this.disabled) {
+      this._selected = false;
+      this.changeRadio.emit({ optionName: '', optionChecked: false });
+    }
+  }
+
+  //Set class for multiple radio
+  setClass(): string {
+    if (this.multiple) {
+      return this._selected ? 'multiple-checked' : 'multiple-unchecked';
+    }
+    return '';
+  }
+}

package/projects/tgo-canopy-ui/components/radio-button/radio-button.model.ts

@@ -0,0 +1,4 @@
+export type RadioButtonEventType = {
+  optionName: string;
+  optionChecked: boolean;
+};

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

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rating Component should render correctly 1`] = `
+<ui-rating
+  DEFAULT_LENGTH={[Function Number]}
+  MIN_LENGTH="0"
+  applicationTheme={[Function String]}
+  ariaRequired="false"
+  barWidth={[Function Number]}
+  defaultAppTheme="null"
+  disabled="false"
+  items={[Function Array]}
+  theme={[Function String]}
+  valueChange={[Function EventEmitter_]}
+>
+  <div
+    aria-required="false"
+    class="rating"
+  >
+    <div
+      class="rating-item"
+      style="width: 35px;"
+      theme="light"
+    />
+    <div
+      class="rating-item"
+      style="width: 35px;"
+      theme="light"
+    />
+    <div
+      class="rating-item"
+      style="width: 35px;"
+      theme="light"
+    />
+    <div
+      class="rating-item"
+      style="width: 35px;"
+      theme="light"
+    />
+    <div
+      class="rating-item"
+      style="width: 35px;"
+      theme="light"
+    />
+  </div>
+</ui-rating>
+`;