@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,195 @@
+@use "../../theme/variables" as *;
+
+.month-picker .mat-calendar-period-button {
+  pointer-events: none;
+}
+
+.month-picker .mat-calendar-arrow {
+  display: none;
+}
+
+.ui-datepicker {
+  width: 100%;
+
+  .mat-mdc-form-field {
+    margin-top: 0px;
+    min-width: 296px;
+
+    &.full-width {
+      width: 100%;
+    }
+
+    &.hide-bottom-content {
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+
+    &.mat-form-field-appearance-outline {
+
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+
+        .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;
+        max-height: 48px;
+        padding: 4px 0;
+        line-height: 22px;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        padding: 0;
+        margin-top: 0;
+        font-size: 12px;
+        line-height: 16px;
+        position: relative;
+        padding-bottom: 12px;
+
+        .mat-form-field-hint-spacer {
+          display: none;
+        }
+      }
+
+      .mat-mdc-form-field-hint.info {
+        color: $tgo-dark;
+        width: 100%;
+      }
+
+      .mat-mdc-form-field-bottom-align::before {
+        height: 0;
+      }
+
+      .mat-mdc-form-field-hint-wrapper {
+        padding: 0;
+        position: relative;
+      }
+
+      .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: 4px;
+        }
+      }
+    }
+
+    &.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-form-field-label {
+          mat-label {
+            color: $tgo-error-default;
+          }
+        }
+    }
+
+    .mat-mdc-form-field-hint.error {
+      display: flex;
+      flex-flow: column;
+      row-gap: 4px;
+
+      .errors {
+        display: flex;
+        padding-bottom: 10px;
+      }
+    }
+
+    &.mat-accent {
+      &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover {
+        .mdc-notched-outline {
+          color: $tgo-petrol-default;
+        }
+      }
+
+      &.mat-focused {
+       .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label {
+          mat-label {
+            color: $tgo-petrol-default;
+          }
+        }
+
+      }
+    }
+
+    &.mat-form-field-disabled {
+      &.mat-form-field-appearance-outline .mdc-notched-outline {
+        color: $tgo-medium;
+      }
+    }
+
+    .mat-mdc-form-field-hint .hint-message {
+      color: $tgo-dark !important;
+      margin-top: 4px;
+    }
+  }
+}
+
+.mat-datepicker-content {
+  .mat-mdc-button.mat-unthemed .mdc-button__label > span{
+    font-weight: 600;
+  }
+
+  &.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: $tgo-petrol-90w;
+  }
+
+  &.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {
+    background-color: $tgo-petrol-90w;
+  }
+
+}
+
+[theme="dark"], [theme="light"] {
+  .mat-datepicker-content {
+    &.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+      background-color: $brand-10;
+    }
+    &.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before {
+      background-color: $brand-10;
+    }
+    .mat-calendar-body-selected {
+      background-color: $brand-50;;
+    }
+    .mat-calendar-body-today:not(.mat-calendar-body-selected) {
+      background: transparent;
+      --mat-datepicker-calendar-date-focus-state-background-color: $tgo-white
+    }
+    .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+      --mat-datepicker-calendar-date-focus-state-background-color: $brand-10;
+    }
+  }
+}
+
+.info {
+  margin-top: 4px !important;
+  padding-bottom: 10px;
+}

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

@@ -0,0 +1,249 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DatepickerComponent } from './datepicker.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { LanguageService } from '../../utils/localization/language.service';
+import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { MatDatepicker } from "@angular/material/datepicker";
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+describe('DatepickerComponent', () => {
+  let component: DatepickerComponent;
+  let fixture: ComponentFixture<DatepickerComponent>;
+  let datepickerMock: Partial<MatDatepicker<Date>>;
+
+  beforeEach(async () => {
+    datepickerMock = {
+      close: jest.fn(),
+    };
+    await TestBed.configureTestingModule({
+      declarations: [ DatepickerComponent ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+      imports: [UiTranslatePipe, HasValidationErrorPipe],
+      providers: [{ provide: LanguageService, useClass: LanguageServiceStub }]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DatepickerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  describe('when label input is initialized with value', () => {
+    it('should render label value', () => {
+      const labelText = 'test';
+      component.label = labelText;
+      fixture.detectChanges();
+      const label = fixture.debugElement.nativeElement.querySelector('mat-label');
+      expect(label.textContent).toEqual(labelText);
+    });
+  });
+
+  describe('when placeholder input is initialized with value', () => {
+    it('should render password value', () => {
+      component.placeholder = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['placeholder']).toBe('testing');
+    });
+  });
+
+  describe('when disabled input is initialized in true', () => {
+    it('should render disable attribute', fakeAsync(() => {
+      component.disabled = true;
+      fixture.detectChanges();
+      tick();
+      const input = fixture.debugElement.nativeElement.querySelector('input');
+      expect(input.disabled).toBeTruthy();
+    }));
+  });
+
+  describe('when errors input is initialized', () => {
+    beforeEach(() => {
+      component.errors = ['error1', 'error2'];
+      component.hintMessage = '';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input')).nativeElement;
+      input.dispatchEvent(new Event('input'));
+      input.value = '10/10/2023';
+      fixture.detectChanges();
+    });
+
+    it('should render each error', () => {
+      const errors = fixture.debugElement.queryAll(By.css('.errors'));
+      expect(errors.length).toBe(2);
+    });
+  });
+
+  describe('when fieldName input is initialized with value', () => {
+    it('should render name attribute', fakeAsync(() => {
+      component.fieldName = 'testing';
+      fixture.detectChanges();
+      tick();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['name']).toBe('testing');
+    }));
+  });
+
+  describe('when hintMessage input is initialized with value', () => {
+    it('should render matHint', fakeAsync(() => {
+      component.hintMessage = 'testing';
+      fixture.detectChanges();
+      tick();
+      const input = fixture.debugElement.query(By.css('mat-hint'));
+      expect(input.classes['info']).toBeTruthy();
+    }));
+  });
+
+  describe('when id input is initialized with value second', () => {
+    it('should render id attribute', () => {
+      component.id = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['id']).toBe('testing');
+    });
+  });
+
+  describe('when required input is initialized with true', () => {
+    it('should render * with label', fakeAsync(() => {
+      component.label = 'Test';
+      component.required = true;
+      fixture.detectChanges();
+      tick();
+      const label = fixture.debugElement.nativeElement.querySelector('mat-label');
+      expect(label.textContent).toContain('Test *');
+    }));
+  });
+
+  describe('when value input is initialized with value', () => {
+    it('should render value attribute', fakeAsync(() => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input')).nativeElement;
+      input.value = 'testing';
+      tick();
+      input.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+      expect(input.value).toEqual('testing');
+    }));
+  });
+
+  describe('writeValue', () => {
+    it('should set value as value input', () => {
+      const testValue = '10/10/2023';
+      component.writeValue(testValue);
+      expect(component.value).toBe(testValue);
+    });
+    it('should not set empty value', () => {
+      component.writeValue();
+      expect(component.value).toBe(undefined);
+    });
+  });
+
+  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);
+    });
+  });
+
+  it('should set errors length', () => {
+    component.errors = ['Error 1', '', 'Error 3'];
+
+    expect(component.errorsLength).toBeTruthy();
+
+    component.errors = [''];
+
+    expect(component.errorsLength).toBeFalsy();
+  });
+
+
+  it('should set and emit changed event on value change', () => {
+    jest.spyOn(component.changed, 'emit');
+
+    const testDate = new Date('2022-01-01');
+    component.onValueChange(testDate);
+
+    expect(component.value).toEqual(testDate);
+    expect(component.changed.emit).toHaveBeenCalledWith(testDate);
+  });
+
+  describe('when required input is initialized with false', () => {
+    it('should render * with label', fakeAsync(() => {
+      component.label = 'Test';
+      component.required = false;
+      fixture.detectChanges();
+      tick();
+      const label = fixture.debugElement.nativeElement.querySelector('mat-label');
+      expect(label.textContent).toContain('Test');
+    }));
+  });
+
+  it('should concatenate start and end dates', () => {
+    const start = '2022-01-01';
+    const end = '2022-01-10';
+    const expectedResult = '2022-01-01-2022-01-10';
+
+    // @ts-ignore
+    const result = component.getRange(start, end);
+
+    expect(result).toEqual(expectedResult);
+  });
+
+  it('should set month and year, close datepicker, and trigger value change', () => {
+    const normalizedMonthAndYear = { month: 5, year: 2023, getMonth: () => '5', getFullYear:() => '2023' };
+    const originalValue = new Date('2022-01-01');
+    component.writeValue(originalValue);
+
+    jest.spyOn(component, 'onValueChange');
+
+    component.setMonthAndYear(normalizedMonthAndYear, datepickerMock as any);
+
+    const expectedValue = new Date(originalValue);
+    expectedValue.setMonth(normalizedMonthAndYear.month);
+    expectedValue.setFullYear(normalizedMonthAndYear.year);
+
+    // @ts-ignore
+    expect(component.value).toEqual(expectedValue);
+    expect(datepickerMock.close).toHaveBeenCalled();
+    expect(component.onValueChange).toHaveBeenCalledWith(expectedValue);
+  });
+
+  it('should set range', () => {
+    component.value = '2024/01/01-2024/04/04';
+    // @ts-ignore
+    component.setRange();
+    expect(component.range.controls.start.value).toEqual(new Date('2024/01/01'));
+    expect(component.range.controls.end.value).toEqual(new Date('2024/04/04'));
+  });
+
+  it('should update with fullDate', () => {
+    const event = { target: { value:  '04/2024' } } as unknown as Event;
+    const onValueChangeSpy = jest.spyOn(component, 'onValueChange');
+    component.onInput(event);
+    const currentDate = new Date().getDate();
+    expect(onValueChangeSpy).toHaveBeenCalledWith(new Date(`04/${currentDate}/2024`));
+  });
+});

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

@@ -0,0 +1,138 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+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 { DatepickerComponent } from './datepicker.component';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+import { NoDateFormatDirective } from './no-date-format.directive';
+
+export default {
+  title: 'Forms/Datepicker',
+  component: DatepickerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        ButtonComponentModule,
+        IconComponentModule,
+        UiTranslatePipe,
+        NoDateFormatDirective
+      ],
+      declarations: [DatepickerComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const excludeParameter = {
+  controls: {
+    exclude: [
+      'class',
+      'showClose',
+      'ngOnInit',
+      'inputChange',
+      'onInput',
+      'registerOnChange',
+      'registerOnTouched',
+      'setDisabledState',
+      'setErrorsLength',
+      'writeValue',
+      'errorsLength',
+      'fieldChangeEvent',
+      'clearValue',
+      '_errors',
+    ],
+  },
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2851-4193&mode=design&t=KFrqGE3ZnlxieCyX-0',
+  },
+};
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  label: 'Date',
+};
+
+Basic.parameters = excludeParameter;
+
+export const WithValue = Template.bind({});
+
+WithValue.args = {
+  label: 'Date',
+  value: new Date(new Date().setDate(15)),
+};
+
+WithValue.parameters = excludeParameter;
+
+export const WithRange = Template.bind({});
+
+WithRange.args = {
+  label: 'Date',
+  isRange: true,
+};
+
+WithRange.parameters = excludeParameter;
+
+export const WithPlaceholder = Template.bind({});
+
+WithPlaceholder.args = {
+  label: 'Date',
+  placeholder: 'DD/MM/YYYY',
+};
+
+WithPlaceholder.parameters = excludeParameter;
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  errors: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit'],
+};
+
+WithErrors.parameters = excludeParameter;
+
+export const WithDisable = Template.bind({});
+WithDisable.args = {
+  disabled: true,
+};
+
+WithDisable.parameters = excludeParameter;
+
+export const WithRequire = Template.bind({});
+WithRequire.args = {
+  required: true,
+  label: 'Label require',
+};
+
+WithRequire.parameters = excludeParameter;
+
+export const MonthPicker = Template.bind({});
+MonthPicker.args = {
+  label: 'Label require',
+  monthPicker: true,
+};
+
+MonthPicker.parameters = excludeParameter;