@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,230 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { DialogComponent } from './dialog.component';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+class MatDialogMock {
+  disableClose: boolean | undefined;
+  close(): void {}
+}
+
+describe('Dialog Component', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+  let mockMatDialogRef: MatDialogMock;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DialogComponent],
+      imports: [MatDialogModule, UiTranslatePipe],
+      providers: [
+        { provide: MatDialogRef, useClass: MatDialogMock },
+        { provide: MAT_DIALOG_DATA, useValue: { data: { applicationTheme: 'dark' } } },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    mockMatDialogRef = TestBed.inject(MatDialogRef);
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  //Testing title input
+  describe('when title input is initialized', () => {
+    it('should render text', () => {
+      component.title = 'Testing';
+      fixture.detectChanges();
+      const dialog = fixture.debugElement.nativeElement;
+      expect(dialog.querySelector('.dialog-title').textContent).toContain('Testing');
+    });
+  });
+
+  //Testing showCloseButton input
+  describe('when showCloseButton input is initialized', () => {
+    it('should render button', () => {
+      fixture.detectChanges();
+      const dialog = fixture.debugElement.nativeElement;
+
+      expect(dialog.querySelector('.close')).toBeTruthy();
+    });
+    describe('and when it changes to false', () => {
+      it('should not render button', () => {
+        component.showCloseButton = false;
+        const dialog = fixture.debugElement.nativeElement;
+        fixture.detectChanges();
+
+        expect(dialog.querySelector('.close')).toBeFalsy();
+      });
+    });
+  });
+
+  //Testing secondaryButtonLabel input
+  describe('when secondaryButtonLabel input is initialized', () => {
+    it('should not render dialog footer', () => {
+      fixture.detectChanges();
+      const dialog = fixture.debugElement.nativeElement;
+      expect(dialog.querySelector('mat-dialog-actions')).toBeFalsy();
+    });
+
+    describe('and when it has a value', () => {
+      it('should render secondary button label', () => {
+        component.secondaryButtonLabel = 'Testing';
+        fixture.detectChanges();
+        const dialog = fixture.debugElement.nativeElement;
+        expect(dialog.querySelectorAll('ui-button')[1].label).toContain('Testing');
+      });
+    });
+  });
+
+  //Testing primaryButtonLabel input
+  describe('when primaryButtonLabel input is initialized', () => {
+    it('should not render dialog footer', () => {
+      fixture.detectChanges();
+      const dialog = fixture.debugElement.nativeElement;
+      expect(dialog.querySelector('mat-dialog-actions')).toBeFalsy();
+    });
+
+    describe('and when it has a value', () => {
+      it('should render primary button label', () => {
+        component.primaryButtonLabel = 'Testing';
+        fixture.detectChanges();
+        const dialog = fixture.debugElement.nativeElement;
+        expect(dialog.querySelectorAll('ui-button')[1].label).toContain('Testing');
+      });
+    });
+  });
+
+  //Testing ngOnInit
+  describe('ngOnInit', () => {
+    it('should call areButtonsDisabled', () => {
+      const spy = jest.spyOn(component, 'areButtonsDisabled');
+      component.ngOnInit();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  //Testing ngOnChanges
+  describe('ngOnChanges', () => {
+    beforeEach(() => {
+      component.canCloseFn = () => false;
+      component.ngOnChanges({
+        canCloseFn: new SimpleChange(null, component.canCloseFn, true),
+      });
+    });
+    it('should set dialogRef.disableClose', () => {
+      fixture.detectChanges();
+      expect(mockMatDialogRef.disableClose).toBe(true);
+    });
+
+    it('should call areButtonsDisabled', () => {
+      const spyButtons = jest.spyOn(component, 'areButtonsDisabled');
+      fixture.detectChanges();
+      expect(spyButtons).toHaveBeenCalled();
+    });
+  });
+
+  //Testing areButtonsDisabled
+  describe('areButtonsDisabled', () => {
+    it('should disable buttons based when canCloseFn is false', () => {
+      component.canCloseFn = () => false;
+      component.areButtonsDisabled();
+
+      expect(component.disableButtons).toBe(true);
+    });
+    it('should enable buttons based when canCloseFn is true', () => {
+      component.areButtonsDisabled();
+
+      expect(component.disableButtons).toBe(false);
+    });
+  });
+
+  //Testing dismiss
+  describe('dismiss', () => {
+    it('should close the dialog when canCloseFn returns true', () => {
+      const spy = jest.spyOn(mockMatDialogRef, 'close');
+      component.dismiss();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when close button is clicked', () => {
+    it('should call onClose', fakeAsync(() => {
+      jest.spyOn(component, 'onClose');
+      fixture.detectChanges();
+      let buttonClose = fixture.debugElement.nativeElement.querySelector('ui-button');
+      buttonClose.click();
+      tick();
+      fixture.detectChanges();
+
+      expect(component.onClose).toHaveBeenCalled();
+    }));
+    it('should emit the event when onClose is called', () => {
+      const emitSpy = jest.spyOn(component.closeEvent, 'emit');
+      const eventMock = new Event('click');
+      component.onClose(eventMock);
+      fixture.detectChanges();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when secondary button is clicked', () => {
+    it('should call onSecondaryButtonClick', fakeAsync(() => {
+      component.secondaryButtonLabel = 'Test';
+      jest.spyOn(component, 'onSecondaryButtonClick');
+      fixture.detectChanges();
+      let buttonSecondary = fixture.debugElement.nativeElement.querySelectorAll('ui-button')[1];
+      buttonSecondary.click();
+      tick();
+      fixture.detectChanges();
+
+      expect(component.onSecondaryButtonClick).toHaveBeenCalled();
+    }));
+    it('should emit the event when onSecondaryButtonClick is called', () => {
+      const emitSpy = jest.spyOn(component.secondaryButtonClickEvent, 'emit');
+      const eventMock = new Event('click');
+      component.onSecondaryButtonClick(eventMock);
+      fixture.detectChanges();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when primary button is clicked', () => {
+    it('should call onPrimaryButtonClick', fakeAsync(() => {
+      component.primaryButtonLabel = 'Test';
+      jest.spyOn(component, 'onPrimaryButtonClick');
+      fixture.detectChanges();
+      let buttonPrimary = fixture.debugElement.nativeElement.querySelectorAll('ui-button')[1];
+      buttonPrimary.click();
+      tick();
+      fixture.detectChanges();
+
+      expect(component.onPrimaryButtonClick).toHaveBeenCalled();
+    }));
+    it('should emit the event when onPrimaryButtonClick is called', () => {
+      const emitSpy = jest.spyOn(component.primaryButtonClickEvent, 'emit');
+      const eventMock = new Event('click');
+      component.onPrimaryButtonClick(eventMock);
+      fixture.detectChanges();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { DialogComponent } from './dialog.component';
+import { DialogService } from './dialog.service';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Dialog/Dialog',
+  component: DialogComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [DialogComponent],
+      imports: [ButtonComponentModule, MatDialogModule, UiTranslatePipe],
+      providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService],
+    }),
+  ],
+} as Meta;
+
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Modal title',
+};
+
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'This `ui-dialog` component that should be use everytime a modal is needed',
+    },
+  },
+  controls: {
+    exclude: [
+      'data',
+      'dialogRef',
+      'disableButtons',
+      'onCloseEvent',
+      'secondaryButtonClickEvent',
+      'primaryButtonClickEvent',
+      'dismiss',
+      'areButtonsDisabled',
+      'ngOnChanges',
+      'ngOnInit',
+      'onClose',
+      'onPrimaryButtonClick',
+      'onSecondaryButtonClick',
+    ],
+  },
+};

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

@@ -0,0 +1,184 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit, Optional,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ButtonColor } from '../button/button.model';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class DialogComponent implements OnInit, OnChanges {
+
+  /**
+   * Dialog title
+   *
+   * @memberof DialogComponent
+   */
+  @Input() title? = '';
+
+  /**
+   * Show close button
+   *
+   * @memberof DialogComponent
+   */
+  @Input() showCloseButton = true;
+
+  /**
+   * Fuction called before dialgo is closed
+   *
+   * @memberof DialogComponent
+   */
+  @Input() canCloseFn: () => boolean = () => true;
+
+  /**
+   * Secondary button label
+   *
+   * @memberof DialogComponent
+   */
+  @Input() secondaryButtonLabel? = '';
+
+  /**
+   * Primary button label
+   *
+   * @memberof DialogComponent
+   */
+  @Input() primaryButtonLabel? = '';
+
+  /**
+   * Secondary button type
+   *
+   * @memberof DialogComponent
+   */
+  @Input() secondaryButtonType: ButtonColor = 'secondary';
+
+  /**
+   * Primary button type
+   *
+   * @memberof DialogComponent
+   */
+  @Input() primaryButtonType: ButtonColor = 'primary';
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof DialogComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   * Color of the dialog.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof DialogComponent
+   */
+  @HostBinding('style.--color')
+  @Input()
+  companyColor = '#46A997';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof DialogComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  /**
+   *
+   * Disable primary button
+   *
+   * @type {boolean}
+   * @memberof DialogComponent
+   */
+  @Input() disablePrimaryButton = false;
+  /**
+   *
+   * Disable close button
+   *
+   * @type {boolean}
+   * @memberof DialogComponent
+   */
+  @Input() disableClose = false;
+
+  @Output() closeEvent: EventEmitter<Event> = new EventEmitter<Event>();
+  @Output() secondaryButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
+  @Output() primaryButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: { applicationTheme: ApplicationTheme }
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  disableButtons = false;
+  protected readonly translationContext = 'DIALOG.';
+
+  ngOnInit(): void {
+    this.areButtonsDisabled();
+    if (this.data?.applicationTheme) {
+      this.applicationTheme = this.data.applicationTheme;
+    }
+    if (this.applicationTheme !== 'classic') {
+      this.secondaryButtonType = 'ghost';
+      this.companyColor = '#D410AA';
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['canCloseFn']) {
+      this.dialogRef.disableClose = !this.canCloseFn();
+      this.areButtonsDisabled();
+    }
+  }
+
+  //Disable primary button when canClose is false
+  areButtonsDisabled() {
+    if (this.canCloseFn() === false) {
+      this.disableButtons = true;
+    } else {
+      this.disableButtons = false;
+    }
+  }
+
+  //Close modal
+  dismiss(): void {
+    if (this.canCloseFn()) {
+      this.dialogRef.disableClose = false;
+      this.dialogRef.close();
+    }
+  }
+
+  onClose(event: Event): void {
+    this.closeEvent.emit(event);
+  }
+
+  onSecondaryButtonClick(event: Event): void {
+    this.secondaryButtonClickEvent.emit(event);
+  }
+
+  onPrimaryButtonClick(event: Event): void {
+    this.primaryButtonClickEvent.emit(event);
+  }
+}

package/projects/tgo-canopy-ui/components/dialog/dialog.service.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { DialogService } from './dialog.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DialogCustomComponent } from '../dialog-custom/dialog-custom.component';
+
+const disableAnimations =
+  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
+
+describe('DialogService', () => {
+  let service: DialogService;
+  let mockMatDialog = {
+    open: jest.fn(),
+  } as unknown as MatDialog;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule, BrowserAnimationsModule.withConfig({ disableAnimations })],
+      providers: [DialogService, { provide: MatDialog, useClass: mockMatDialog }],
+    });
+    service = new DialogService(mockMatDialog, 'dark');
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('should open the dialog using MatDialog', () => {
+    it('when theme is classic', () => {
+      service = new DialogService(mockMatDialog, 'classic');
+      service.open(DialogCustomComponent, 'classic');
+
+      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
+        panelClass: ['ui-dialog-wrapper', '', 'small'],
+        data: { applicationTheme: 'classic' },
+      });
+    });
+    it('when theme is NOT classic', () => {
+      service.open(DialogCustomComponent, 'dark');
+
+      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
+        panelClass: ['ui-dialog-wrapper', '', 'dark', 'small'],
+        data: { applicationTheme: 'dark' },
+      });
+    });
+    it('when theme is NOT classic and size is large', () => {
+      service.open(DialogCustomComponent, 'dark', 'large');
+
+      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
+        panelClass: ['ui-dialog-wrapper', '', 'dark', 'large'],
+        data: { applicationTheme: 'dark' },
+      });
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/dialog/dialog.service.ts

@@ -0,0 +1,33 @@
+import { ComponentType } from '@angular/cdk/portal';
+import { Inject, Injectable, Optional } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+export type DialogSize = 'small' | 'large';
+@Injectable()
+export class DialogService {
+  constructor(
+    private matDialog: MatDialog,
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
+  ) {}
+
+  open(
+    dialogComponent: ComponentType<any>,
+    applicationTheme: ApplicationTheme = 'light',
+    size: DialogSize = 'small',
+    panelClass: string = '',
+    extraData?: any
+  ): MatDialogRef<any> {
+    // Open the dialog using UI custom styles
+    return this.matDialog.open(dialogComponent, {
+      data: {
+        applicationTheme: this.defaultAppTheme ?? applicationTheme,
+        ...extraData,
+      },
+      panelClass:
+        applicationTheme === 'classic'
+          ? ['ui-dialog-wrapper', panelClass, size]
+          : ['ui-dialog-wrapper', panelClass, applicationTheme, size],
+    });
+  }
+}

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogCustomComponent should render correctly 1`] = `
+<ui-dialog-custom
+  applicationTheme={[Function String]}
+  canClose={[Function Function]}
+  defaultAppTheme="null"
+>
+  <ui-dialog
+    primarybuttonlabel="Confirm"
+    secondarybuttonlabel="Cancel"
+    title="Custom Modal title"
+  >
+    <p>
+       Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend tempus fermentum, nullam netus litora quis varius feugiat vivamus eget. Dictumst vivamus imperdiet aptent hac libero ac pellentesque nascetur massa, iaculis taciti congue ridiculus vehicula leo placerat duis, nunc varius cubilia dictum venenatis quam interdum sociis. A pellentesque at diam integer venenatis quisque nibh nec, commodo convallis potenti eleifend velit volutpat magna viverra aenean, fermentum class congue ultrices neque tincidunt curae. 
+    </p>
+    <p>
+       Purus tempus diam a quam nullam quis elementum justo pellentesque sed, fusce nunc gravida ac congue cum risus praesent tristique nec lectus, potenti natoque tincidunt vitae himenaeos volutpat faucibus vulputate neque. Hendrerit ultrices volutpat conubia gravida nunc nisi sem varius, sociis dapibus habitasse risus mus eu. Nullam integer varius rutrum duis eleifend urna pellentesque tempor, arcu aliquam fusce eget viverra feugiat placerat, ridiculus phasellus eu porttitor justo lectus habitasse. Lobortis inceptos libero justo scelerisque at potenti hendrerit taciti mattis ac hac, pretium viverra quisque tincidunt euismod nascetur rhoncus aenean non sapien, faucibus dis sociis rutrum morbi vehicula eros senectus molestie facilisis. 
+    </p>
+    <p>
+       Aliquet fringilla molestie hendrerit ac tortor porta sociis sem curae interdum, eros mollis turpis vel sociosqu nisl lobortis aenean et. Feugiat magna scelerisque eu hendrerit ullamcorper litora dignissim, in aenean varius vehicula himenaeos senectus, euismod montes metus facilisi pellentesque consequat. Fusce magnis risus ut est venenatis semper mi, dapibus luctus curabitur auctor arcu posuere, lacus ornare quisque scelerisque sociosqu suscipit. 
+    </p>
+    <p>
+       Fusce commodo natoque facilisis habitant duis turpis morbi taciti suscipit pellentesque, dis hendrerit at etiam feugiat per consequat congue tincidunt, fringilla dignissim cursus varius enim nulla euismod sociosqu cubilia. Tristique fames molestie erat lobortis massa odio porttitor vestibulum conubia tincidunt, sociis id platea nibh praesent lectus per donec gravida, ante aptent quam eros pretium auctor convallis ultricies risus. Erat nam libero eleifend ornare habitant ultricies quam integer pellentesque lectus, senectus aptent facilisi non sagittis mauris ultrices varius tortor phasellus, imperdiet vitae cursus dictum massa scelerisque consequat vulputate curae. 
+    </p>
+  </ui-dialog>
+</ui-dialog-custom>
+`;

package/projects/tgo-canopy-ui/components/dialog-custom/dialog-custom.component.html

@@ -0,0 +1,38 @@
+<ui-dialog
+  title="Custom Modal title"
+  secondaryButtonLabel="Cancel"
+  primaryButtonLabel="Confirm"
+  [applicationTheme]="applicationTheme"
+  [canCloseFn]="canClose"
+>
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend tempus fermentum, nullam netus litora quis varius
+    feugiat vivamus eget. Dictumst vivamus imperdiet aptent hac libero ac pellentesque nascetur massa, iaculis taciti
+    congue ridiculus vehicula leo placerat duis, nunc varius cubilia dictum venenatis quam interdum sociis. A
+    pellentesque at diam integer venenatis quisque nibh nec, commodo convallis potenti eleifend velit volutpat magna
+    viverra aenean, fermentum class congue ultrices neque tincidunt curae.
+  </p>
+  <p>
+    Purus tempus diam a quam nullam quis elementum justo pellentesque sed, fusce nunc gravida ac congue cum risus
+    praesent tristique nec lectus, potenti natoque tincidunt vitae himenaeos volutpat faucibus vulputate neque.
+    Hendrerit ultrices volutpat conubia gravida nunc nisi sem varius, sociis dapibus habitasse risus mus eu. Nullam
+    integer varius rutrum duis eleifend urna pellentesque tempor, arcu aliquam fusce eget viverra feugiat placerat,
+    ridiculus phasellus eu porttitor justo lectus habitasse. Lobortis inceptos libero justo scelerisque at potenti
+    hendrerit taciti mattis ac hac, pretium viverra quisque tincidunt euismod nascetur rhoncus aenean non sapien,
+    faucibus dis sociis rutrum morbi vehicula eros senectus molestie facilisis.
+  </p>
+  <p>
+    Aliquet fringilla molestie hendrerit ac tortor porta sociis sem curae interdum, eros mollis turpis vel sociosqu nisl
+    lobortis aenean et. Feugiat magna scelerisque eu hendrerit ullamcorper litora dignissim, in aenean varius vehicula
+    himenaeos senectus, euismod montes metus facilisi pellentesque consequat. Fusce magnis risus ut est venenatis semper
+    mi, dapibus luctus curabitur auctor arcu posuere, lacus ornare quisque scelerisque sociosqu suscipit.
+  </p>
+  <p>
+    Fusce commodo natoque facilisis habitant duis turpis morbi taciti suscipit pellentesque, dis hendrerit at etiam
+    feugiat per consequat congue tincidunt, fringilla dignissim cursus varius enim nulla euismod sociosqu cubilia.
+    Tristique fames molestie erat lobortis massa odio porttitor vestibulum conubia tincidunt, sociis id platea nibh
+    praesent lectus per donec gravida, ante aptent quam eros pretium auctor convallis ultricies risus. Erat nam libero
+    eleifend ornare habitant ultricies quam integer pellentesque lectus, senectus aptent facilisi non sagittis mauris
+    ultrices varius tortor phasellus, imperdiet vitae cursus dictum massa scelerisque consequat vulputate curae.
+  </p>
+</ui-dialog>

package/projects/tgo-canopy-ui/components/dialog-custom/dialog-custom.component.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Source } from '@storybook/addon-docs';
+import * as DialogCustomStories from './dialog-custom.component.stories';
+
+<Meta of={DialogCustomStories} />
+
+# Custom ui-dialog
+
+This an example of a custom dialog component that uses `ui-dialog`.
+
+<Story of={DialogCustomStories.Basic} />
+
+<Source
+  dark="true"
+  language="html"
+  code={`<ui-dialog title="Custom Modal title"
+secondaryButtonLabel="Cancel"
+primaryButtonLabel="Confirm"
+[canCloseFn]="canClose">
+  <p>...</p>
+</ui-dialog>`}
+/>
+
+### CanCloseFn implementation
+
+Take in consideration this code snippet to use `@Input canCloseFn` correctly from `ui-dialog`, if any validation is needed to close dialog. For further information, look at `ui-dialog` story.
+
+<Source
+  dark="true"
+  language="typescript"
+  code={`canClose: () => boolean;
+canCloseFalse(): boolean {
+  return false;
+}
+ngOnInit(): void {
+  this.canClose = this.canCloseFalse.bind(this);
+}
+`}
+/>

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DialogComponentModule } from '../dialog/dialog.component.module';
+import { DialogCustomComponent } from './dialog-custom.component';
+
+@NgModule({
+  declarations: [DialogCustomComponent],
+  imports: [CommonModule, DialogComponentModule],
+  exports: [DialogCustomComponent],
+})
+export class DialogCustomComponentModule {}