@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';
+import { CardSize, CardVariant } from './card.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ui-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CardComponent implements OnChanges, OnInit {
+  /**
+   * Card size. Defaults "medium".
+   *
+   * @type {CardSize}
+   * @memberof CardComponent
+   */
+  @Input() size: CardSize = 'medium';
+
+  /**
+   * Card variants. Defaults "default".
+   *
+   * @type {CardVariant}
+   * @memberof CardComponent
+   */
+  @Input() variant: CardVariant = 'default';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof CardComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Show errors below card.
+   *
+   * @type {string[]}
+   * @memberof CardComponent
+   */
+  @Input() set errors(errors: string[]) {
+    this.safeErrors = errors?.filter(Boolean).map(error => this.domSanitizer.bypassSecurityTrustHtml(error));
+  }
+
+  safeErrors: SafeHtml[];
+
+  classes = '';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private domSanitizer: DomSanitizer
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(): void {
+    this.classes = `card-size-${this.size ?? 'medium'} ${this.cardVariant ?? 'default'}`;
+  }
+
+  ngOnInit(): void {
+    this.classes = `card-size-${this.size ?? 'medium'} ${this.cardVariant ?? 'default'}`;
+  }
+
+  get cardVariant(): CardVariant {
+    return this.safeErrors?.length ? 'error' : this.variant;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div [ngClass]="classMultiple" [attr.theme]="applicationTheme" [attr.hasError]="hasError">
+  <mat-checkbox
+    #checkbox
+    (mouseleave)="checkbox.disableRipple = true"
+    (mouseenter)="checkbox.disableRipple = false"
+    [indeterminate]="indeterminate"
+    [checked]="checked"
+    [disabled]="disabled"
+    [name]="name"
+    [ngClass]="{ 'disable-ripple': checkbox.disableRipple }"
+    (change)="toggleChecked($event)"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+    class="checkbox"
+  >
+    {{ label }}
+    <ng-content select="[checkbox-label]"></ng-content>
+  </mat-checkbox>
+
+  <mat-hint class="error" *ngIf="ngControl?.errors | hasValidationError">
+    <ui-validation-error *ngIf="ngControl && !hideBuiltInErrors" [ngControl]="ngControl" [label]="hideLabelInErrors ? null : label" [language]="language"></ui-validation-error>
+  </mat-hint>
+</div>

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CheckboxComponent } from './checkbox.component';
+import { MatInputModule } from '@angular/material/input';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { ValidationErrorModule } from '../validation-error/validation-error.module';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+@NgModule({
+  declarations: [CheckboxComponent],
+  imports: [CommonModule, MatCheckboxModule, FormsModule, ReactiveFormsModule, MatInputModule, IconComponentModule, UiTranslatePipe, ValidationErrorModule, HasValidationErrorPipe],
+  exports: [CheckboxComponent],
+})
+export class CheckboxComponentModule {}

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

@@ -0,0 +1,221 @@
+@use "../../theme/variables" as *;
+
+.mat-mdc-checkbox.checkbox.mat-accent {
+  ::ng-deep .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    background-color: var(--color) !important;
+    border-color: var(--color) !important;
+  }
+
+  ::ng-deep &.mat-mdc-checkbox-checked .mdc-checkbox__background {
+    background-color: var(--color) !important;
+    border-color: var(--color) !important;
+
+    .mdc-checkbox__checkmark {
+      color: $tgo-white !important;
+    }
+  }
+
+  ::ng-deep .mdc-checkbox__ripple {
+    background-color: var(--color);
+  }
+
+  //disabled styles
+  ::ng-deep &.mdc-checkbox__native-control:indeterminate ~ .mat-mdc-checkbox-disabled .mdc-checkbox__background {
+    background-color: $tgo-dark;
+  }
+
+  ::ng-deep &.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background {
+    background-color: $tgo-dark;
+    --color: $tgo-dark!important;
+  }
+
+  ::ng-deep &.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox {
+    opacity: 0.5;
+  }
+}
+
+[theme="dark"], [theme="light"], .dark, .light {
+  --color: #{$brand-50}!important;
+  --mdc-checkbox-unselected-icon-color: #{$black} !important;
+
+  .mat-mdc-checkbox {
+    &.disable-ripple {
+      ::ng-deep .mdc-checkbox__ripple {
+        display: none;
+      }
+    }
+  }
+
+  ::ng-deep .mdc-checkbox__background {
+    border-radius: 4px;
+    transform: scale(0.9);
+    background: $tgo-white!important;
+    border-width: 1px;
+  }
+
+  ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox {
+    opacity: 1 !important;
+  }
+
+  ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background {
+    background-color: $grayscale-20!important;
+    border-color: $grayscale-40!important;
+
+    .mdc-checkbox__mixedmark {
+      border-color: $grayscale-40;
+      width: 8px;
+    }
+
+    svg {
+      color: $grayscale-40!important;
+    }
+  }
+
+  ::ng-deep .mdc-checkbox__checkmark {
+    width: 12px;
+    height: 12px;
+    left: calc(50% - 6px);
+    top: calc(50% - 6px);
+  }
+
+  ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark {
+    width: 12px;
+  }
+}
+
+::ng-deep .mdc-checkbox {
+  &__ripple {
+    background: var(--color)!important;
+  }
+}
+
+::ng-deep .mat-mdc-checkbox {
+  .mdc-form-field .mdc-label {
+    padding-left: 0;
+  }
+}
+
+@mixin multiple($color) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  background: $color;
+  border-radius: 8px;
+
+  ::ng-deep .mat-mdc-checkbox {
+    width: 100%;
+    height: 100%;
+  }
+
+  ::ng-deep .mdc-form-field {
+    padding: 8px;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+  }
+}
+
+.multiple-checked {
+  border: 1px solid var(--color);
+  @include multiple(var(--color));
+
+  .mat-mdc-checkbox.checkbox.mat-accent {
+    ::ng-deep .mdc-checkbox__background {
+      border: 1px solid $tgo-white !important;
+      border-color: $tgo-white !important;
+    }
+  }
+
+  ::ng-deep label {
+    color: $tgo-white;
+  }
+
+  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"] {
+    background: $tgo-white;
+    border-radius: 10px;
+    border-color: $black;
+    outline: 1px solid $black;
+
+    .mat-mdc-checkbox.checkbox.mat-accent {
+      ::ng-deep .mdc-checkbox__background {
+        border: unset !important;
+      }
+    }
+
+    ::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 .mdc-checkbox__background {
+    border: 1px solid $tgo-black;
+  }
+
+  ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~ .mdc-checkbox__ripple {
+    opacity: 0 !important;
+  }
+
+  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"] {
+    border: 1px solid $grayscale-40;
+    background: $tgo-white;
+    border-radius: 10px;
+
+    ::ng-deep .mdc-checkbox__background {
+      border: 1px solid $black!important;
+    }
+
+    &:hover {
+      outline: 1px solid $black;
+      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;
+    }
+  }
+}
+
+*[hasError="true"] {
+  --mdc-checkbox-unselected-icon-color: #{$error-50} !important;
+  --mdc-checkbox-unselected-hover-icon-color: #{$error-50} !important;
+  --mdc-checkbox-unselected-focus-icon-color: #{$error-50} !important;
+
+  ::ng-deep {
+    .mdc-checkbox__background {
+      border-width: 2px !important;
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CheckboxComponent } from './checkbox.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+describe('CheckboxComponent', () => {
+  let fixture: ComponentFixture<CheckboxComponent>;
+  let component: CheckboxComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatCheckboxModule, HasValidationErrorPipe],
+      declarations: [CheckboxComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when disabled input is intialized in true', () => {
+    it('should add disable attribute', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+      const input = fixture.debugElement.nativeElement.querySelector('input');
+      expect(input.disabled).toBeTruthy();
+    });
+  });
+
+  describe('when checked input is intialized', () => {
+    it('should add checked property in false', () => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.properties['checked']).toBeFalsy();
+    });
+    describe('and its value is true', () => {
+      it('should add checked attribute in true', () => {
+        component.checked = true;
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.properties['checked']).toBeTruthy();
+      });
+    });
+  });
+
+  describe('when indeterminate input is intialized', () => {
+    it('should add indeterminate property in false', () => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.properties['indeterminate']).toBeFalsy();
+    });
+    describe('and its value is true', () => {
+      it('should add checked indeterminate in true', () => {
+        component.indeterminate = true;
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.properties['indeterminate']).toBeTruthy();
+      });
+    });
+  });
+
+  describe('when name input is intialized', () => {
+    it('should add name property in default', () => {
+      component.name = "test"
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.properties['name']).toBe('test');
+    });
+  });
+
+  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('when mat-checkbox changes', () => {
+    let checkbox: any;
+
+    beforeEach(async () => {
+      checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox');
+
+      jest.spyOn(component, 'setClass');
+    });
+    it('should call emitChange when change', fakeAsync(() => {
+      jest.spyOn(component, 'toggleChecked');
+      fixture.detectChanges();
+      let input = fixture.debugElement.nativeElement.querySelector('mat-checkbox');
+      input.dispatchEvent(new Event('change'));
+      tick();
+      expect(component.toggleChecked).toHaveBeenCalled();
+    }));
+    it('should emit the event when emitChange is called', () => {
+      const emitSpy = jest.spyOn(component.changed, 'emit');
+      const eventMock = new MatCheckboxChange();
+      component.emitChange(eventMock);
+      fixture.detectChanges();
+      expect(emitSpy).toHaveBeenCalled();
+    });
+    describe('and disabled is true', () => {
+      it('should not change checkbox state', () => {
+        component.disabled = true;
+        expect(component.checked).toBeFalsy();
+
+        checkbox.click();
+
+        fixture.detectChanges();
+        expect(component.checked).toBeFalsy()
+      })
+    });
+    describe('and disabled is false', () => {
+      it('should change checkbox state', fakeAsync(() => {
+        component.disabled = false;
+        expect(component.checked).toBeFalsy();
+        const myCheckBox = fixture.debugElement.query(By.css('mat-checkbox'));
+
+        myCheckBox.triggerEventHandler('change', { checked: true });
+
+        tick();
+        fixture.detectChanges();
+        expect(component.checked).toBeTruthy();
+      }));
+
+      it('should call setClass()', () => {
+        expect(component.setClass).not.toHaveBeenCalled();
+
+        checkbox.click();
+
+        fixture.detectChanges();
+        expect(component.setClass).toHaveBeenCalled();
+      })
+    });
+    describe('and checkbox is Multiple Choice', () => {
+      it('should toggle "multiple-cheked" and "multiple-uncheked" css classes', fakeAsync(() => {
+        const multiCheckboxDiv = fixture.debugElement.nativeElement.querySelector('div');
+        const multiCheckbox = fixture.debugElement.query(By.css('mat-checkbox'));
+
+        component.multiple = true;
+
+        expect(multiCheckboxDiv.className).toBe("")
+
+        multiCheckbox.triggerEventHandler('change', { checked: true });
+        tick();
+        fixture.detectChanges();
+
+        expect(multiCheckboxDiv.className).toEqual('multiple-checked');
+
+        multiCheckbox.triggerEventHandler('change', { checked: false });
+        tick();
+        fixture.detectChanges();
+
+        expect(multiCheckboxDiv.className).toEqual('multiple-unchecked');
+      }));
+    });
+  });
+
+  //Testing writeValue
+  describe('writeValue', () => {
+    it('should set value as value input', () => {
+      component.writeValue(true);
+      expect(component.checked).toBe(true);
+    });
+  });
+  //Testing registerOnChange
+  describe('registerOnChange', () => {
+    it('should set onChange', () => {
+      component.registerOnChange(false);
+      expect(component.onChange).toBe(false);
+    });
+  });
+  //Testing registerOnTouched
+  describe('registerOnTouched', () => {
+    it('should set onTouch', () => {
+      component.registerOnTouched(true);
+      expect(component.onTouch).toBe(true);
+    });
+  });
+  //Testing setDisabledState
+  describe('setDisabledState', () => {
+    it('should set disabled', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,122 @@
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CheckboxComponent } from './checkbox.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+export default {
+  title: 'Forms/Checkbox',
+  component: CheckboxComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [CheckboxComponent],
+      imports: [MatCheckboxModule, HasValidationErrorPipe],
+      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,
+  checked: false,
+  indeterminate: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['setClass', 'toggleChecked', 'ngOnInit', 'classMultiple', 'emitChange'],
+  },
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=3535-5895&t=onhTI5hJRt5inE1g-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,
+  checked: true,
+};
+
+Selected.parameters = {
+  ...Default.parameters,
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  ...Default.args,
+  indeterminate: true,
+};
+
+Indeterminate.parameters = {
+  ...Default.parameters,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  checked: true,
+  label: 'Some text.',
+};
+
+WithLabel.parameters = {
+  ...Default.parameters,
+};
+
+export const MultipleChoice: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+      <ui-checkbox applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
+    <br>
+    <ui-checkbox applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - selected" [checked]="true"></ui-checkbox>
+    `,
+    };
+  },
+} as Story;
+
+export const WithErrorMultiple: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
+        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
+      `,
+    };
+  },
+} as Story;
+
+export const WithErrorSingle: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="false" label="Single selection - unselected" [checked]="false"></ui-checkbox>
+        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="false" label="Single selection - unselected" [checked]="false"></ui-checkbox>
+      `,
+    };
+  },
+} as Story;