@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,237 @@
+@use "../../theme/variables" as *;
+
+ui-dropdown {
+  display: flex;
+
+  .mat-mdc-form-field {
+    margin-top: 0px;
+    width: 100%;
+
+    &.without-label {
+      .mdc-notched-outline__notch {
+        padding: 0;
+      }
+    }
+
+    &.hide-bottom-content {
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+
+    &.mat-form-field-appearance-outline {
+
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+        flex: none;
+
+        .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
+          margin-right: 16px;
+        }
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label {
+          top: 22px;
+        }
+      }
+
+      .mdc-notched-outline {
+        color: $tgo-dark;
+
+        .mdc-floating-label--float-above {
+          transform: translateY(-30px) scale(0.75);
+        }
+      }
+
+      .mat-mdc-form-field-infix {
+        min-height: 48px;
+        padding: 4px 0;
+        line-height: 22px;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .mat-mdc-select-arrow-wrapper {
+        display: none;
+      }
+
+      .mat-mdc-floating-label {
+        color: $tgo-dark;
+      }
+
+      .mat-mdc-form-field-bottom-align::before {
+        height: 0;
+      }
+
+      .mat-mdc-form-field-hint-wrapper {
+        padding: 0;
+      }
+
+      &.mat-focused {
+        .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label {
+          mat-label {
+            color: $tgo-petrol-default;
+          }
+        }
+
+        ui-icon:not(.clear) {
+          svg {
+            color: $tgo-petrol-default;
+          }
+        }
+      }
+
+      button.mat-mdc-unelevated-button.secondary.only-icon {
+        padding: 0;
+        height: auto;
+        background: transparent;
+
+        &:hover,
+        &:focus {
+          background: transparent;
+          color: inherit;
+          border: none;
+          outline: none;
+        }
+
+        &.focus {
+          &.cdk-focused.cdk-mouse-focused {
+            background-color: transparent !important;
+          }
+        }
+      }
+
+      .clear {
+        position: absolute;
+        right: 24px;
+        mat-icon.black svg {
+          color: $tgo-dark;
+        }
+      }
+
+
+      &.mat-warn  {
+
+        &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,
+        &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,
+        &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch {
+          border-color: $tgo-error-default;
+        }
+
+        &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,
+        &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,
+        &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch {
+          border-color: $tgo-error-default;
+        }
+        &.mat-focused {
+          .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label {
+            mat-label {
+              color: $tgo-error-default;
+            }
+          }
+          ui-icon {
+            svg {
+              color: $tgo-dark;
+            }
+          }
+        }
+      }
+      .mat-mdc-form-field-subscript-wrapper {
+        padding: 0;
+        margin-top: 9px;
+        font-size: 12px;
+        line-height: 16px;
+        position: relative;
+
+        .mat-mdc-form-field-hint-spacer {
+          display: none;
+        }
+      }
+
+      .mat-mdc-form-field-hint.error {
+        display: flex;
+        flex-flow: column;
+        row-gap: 4px;
+
+        .errors {
+          display: flex;
+        }
+      }
+
+      .mat-mdc-select-value {
+        line-height: 18px;
+        width: 90% !important;
+      }
+
+      .mat-mdc-form-field-hint.error,
+      .mat-mdc-form-field-hint.error svg {
+        color: $tgo-error-default;
+      }
+
+      .mat-mdc-form-field-hint.error {
+        display: flex;
+
+        ui-icon {
+          margin-right: 9px;
+        }
+      }
+
+      &.mat-form-field-disabled {
+        &.mat-form-field-appearance-outline .mdc-notched-outline {
+          color: $tgo-medium;
+        }
+
+        .options .options-container {
+          ui-button,
+          ui-icon {
+
+            svg {
+              color: $tgo-medium;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[theme="light"], &[theme="dark"] {
+    .mat-mdc-form-field {
+      .mat-mdc-form-field-subscript-wrapper {
+        margin-top: 4px;
+      }
+    }
+  }
+}
+
+.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list {
+  margin-top: 4px;
+  box-shadow: 0px 8px 24px 4px rgba(0, 0, 0, 0.08);
+  .mat-mdc-option {
+    display: flex;
+    height: 48px;
+    color: $tgo-black;
+    .mdc-list-item__primary-text {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .mat-option-section .section-title {
+    font-size: 12px;
+    text-transform: uppercase;
+    display: flex;
+    height: 48px;
+    align-items: center;
+    font-weight: 700;
+    padding: 0 16px;
+  }
+
+  .mat-mdc-form-field-hint.error {
+    display: flex;
+    flex-flow: column;
+    row-gap: 4px;
+
+    .errors {
+      display: flex;
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { DropdownComponent } from './dropdown.component';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DropdownComponent],
+      imports: [UiTranslatePipe, HasValidationErrorPipe],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropdownComponent);
+    fixture.detectChanges();
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('When dropdown is initialized', () => {
+
+    it('should has no errors', () => {
+      expect(component.errors?.length).toBe(0);
+    });
+
+    it('should allow to clear the selected values', fakeAsync(() => {
+      expect(component.allowClear).toBe(true);
+
+      component.value = 'item 3';
+      fixture.detectChanges();
+
+      const clearButton = fixture.debugElement.nativeElement.querySelector('ui-button');
+      clearButton.click();
+      tick();
+
+      expect(component.value).toBe('');
+    }));
+  });
+
+  describe('When dropdown value changes', () => {
+    it('should emit onChangeOption', fakeAsync(() => {
+      component.valueList = [{value: 'item 1'}, {value: 'item 2'}];
+      fixture.detectChanges();
+
+      const select = fixture.debugElement.nativeElement.querySelector('mat-select');
+      jest.spyOn(component, 'onChangeOption');
+      component.value = 'item 2';
+      fixture.detectChanges();
+
+      select.dispatchEvent(new Event('selectionChange'));
+      tick();
+      expect(component.onChangeOption).toHaveBeenCalled();
+    }));
+  });
+
+  describe('writeValue', () => {
+    it('should set value as value input', () => {
+      component.writeValue('testing');
+      expect(component.value).toBe('testing');
+    });
+    it('should set value as empty string', () => {
+      component.writeValue();
+      expect(component.value).toBe('');
+    });
+  });
+
+  describe('registerOnChange', () => {
+    it('should set onChange', () => {
+      component.registerOnChange('test');
+      expect(component.onChange).toBe('test');
+    });
+  });
+
+  describe('registerOnTouched', () => {
+    it('should set onTouch', () => {
+      component.registerOnTouched('test');
+      expect(component.onTouch).toBe('test');
+    });
+  });
+
+  describe('setDisabledState', () => {
+    it('should set disabled', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+    });
+  });
+
+  describe('setErrorsLength()', () => {
+    it('should return false when there is no errors', () => {
+      const errorsSpy = jest.spyOn(component, 'setErrorsLength');
+      component.setErrorsLength();
+
+      expect(errorsSpy).toReturnWith(false);
+    })
+  })
+});

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

@@ -0,0 +1,213 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { DropdownComponent } from './dropdown.component';
+import { OptionType } from './dropdown.model';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+export default {
+  title: 'Forms/Dropdown',
+  component: DropdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+        IconComponentModule,
+        ButtonComponentModule,
+        MatSelectModule,
+        MatIconModule,
+        UiTranslatePipe,
+        HasValidationErrorPipe,
+      ],
+      declarations: [DropdownComponent],
+    }),
+  ],
+} as Meta;
+
+const OptionsWithSection: OptionType[] = [
+  {
+    sectionTitle: 'Item Section',
+  },
+  {
+    value: 'Item 1',
+  },
+  {
+    value: 'Item 2',
+  },
+  {
+    value: 'Item 3',
+  },
+  {
+    value: 'Item 4',
+  },
+  {
+    value: 'Item 5',
+  },
+];
+
+const Options: OptionType[] = [
+  {
+    value: 'Item 1',
+  },
+  {
+    value: 'Item 2',
+  },
+  {
+    value: 'Item 3',
+  },
+  {
+    value: 'Item 4',
+  },
+  {
+    value: 'Item 5',
+  },
+];
+
+const OptionsWithDisplayValue: OptionType[] = [
+  {
+    value: 'Item 1',
+    displayValue: 'Display Item 1'
+  },
+  {
+    value: 'Item 2',
+    displayValue: 'Display Item 2'
+  },
+  {
+    value: 'Item 3',
+    displayValue: 'Display Item 3'
+  },
+  {
+    value: 'Item 4',
+    displayValue: 'Display Item 4'
+  },
+  {
+    value: 'Item 5',
+    displayValue: 'Display Item 5'
+  },
+];
+
+const excludeParameter = {
+  controls: {
+    exclude: [
+      'floatLabel',
+      'class',
+      'errorsLength',
+      'clearValue',
+      'classError',
+      'disableIcon',
+      'ngOnInit',
+      'inputChange',
+      'showCheck',
+      'setErrorsLength',
+      'onChange',
+      'onChangeOption',
+      'registerOnChange',
+      'registerOnTouched',
+      'setDisabledState',
+      'writeValue',
+    ],
+  },
+};
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: Options,
+  allowMultipleSelection: false,
+};
+
+Default.parameters = excludeParameter;
+
+export const WithOptionSection = Template.bind({});
+WithOptionSection.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: OptionsWithSection,
+  floatingLabel: false,
+  allowMultipleSelection: false,
+};
+
+WithOptionSection.parameters = excludeParameter;
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: Options,
+  disabled: true,
+};
+
+Disabled.parameters = excludeParameter;
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: Options,
+  allowMultipleSelection: true,
+};
+
+Multiple.parameters = excludeParameter;
+
+export const MultipleWithErrors = Template.bind({});
+MultipleWithErrors.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: Options,
+  allowMultipleSelection: true,
+  errors: ['Helper text'],
+};
+
+MultipleWithErrors.parameters = excludeParameter;
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  placeholder: 'Placeholder',
+  label: 'Label',
+  valueList: Options,
+  errors: ['Helper text'],
+};
+
+WithErrors.parameters = excludeParameter;
+
+export const WithoutLabel = Template.bind({});
+WithoutLabel.args = {
+  placeholder: 'Label',
+  valueList: Options,
+  errors: ['Helper text'],
+};
+
+WithoutLabel.parameters = excludeParameter;
+
+export const WithDisplayValue = Template.bind({});
+WithDisplayValue.args = {
+  placeholder: 'Label',
+  label: 'Label',
+  valueList: OptionsWithDisplayValue,
+};
+
+WithDisplayValue.parameters = excludeParameter;
+