chore(docs): add for business section (akveo#2683)

docs/app/@theme/components/for-business/for-business.component.scss

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../styles/themes';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  max-width: 55.625rem;
+  overflow: hidden;
+
+  background: nb-theme(background-basic-color-1);
+  border: 1px solid nb-theme(border-basic-color-3);
+  border-radius: nb-theme(border-radius);
+}
+
+.left,
+.right {
+  padding: 2rem;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  $grad-start: nb-theme(color-primary-500);
+  $grad-end: nb-theme(color-primary-400);
+  background: linear-gradient(86.61deg, $grad-start 0.85%, $grad-end 99.82%);
+}
+
+.heading {
+  text-align: center;
+}
+
+.submit {
+  margin: auto auto 0;
+
+  &.appearance-filled.status-control {
+    color: nb-theme(text-primary-color);
+    text-transform: none;
+  }
+}
+
+.offerings-title {
+  color: rgba(nb-theme(color-fg-heading), 0.5);
+}
+
+.offerings {
+  margin: 1.5rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.offering {
+  margin-bottom: 0.5rem;
+
+  &::before {
+    content: '•';
+    margin-right: 0.15rem;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  :host {
+    flex-direction: row;
+  }
+
+  .left {
+    max-width: 21rem;
+    padding: 3rem;
+  }
+
+  .right {
+    padding: 3.625rem 2.25rem;
+  }
+
+  .offerings-title-second-line {
+    display: block;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .offerings {
+    columns: 2;
+  }
+}

docs/app/@theme/components/for-business/for-business.component.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NbDialogService } from '@nebular/theme';
+
+import { NgdHubspotFormDialogComponent } from '../hubspot-form-dialog/hubspot-form-dialog.component';
+
+@Component({
+  selector: 'ngd-for-business',
+  template: `
+    <div class="left">
+      <h2 [attr.id]="headingId" class="heading h1 text-control">Nebular for business</h2>
+      <button (click)="openDialog()" class="submit" nbButton status="control">Submit your request</button>
+    </div>
+
+    <div class="right">
+      <p class="h6 offerings-title">
+        If you use Nebular for business,
+        <span class="offerings-title-second-line">we'd like to offer you:</span>
+      </p>
+
+      <ul class="offerings">
+        <li class="offering text-hint" *ngFor="let offering of offerings">{{ offering }}</li>
+      </ul>
+    </div>
+  `,
+  exportAs: 'ngdForBusiness',
+  styleUrls: ['./for-business.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgdForBusinessComponent {
+  readonly headingId: string = 'ngd-for-business-heading';
+
+  offerings: string[] = [
+    'A custom template development',
+    'Developers, designers, analytics, QA, PM & marketing',
+    'Nebular customization services',
+    'The review of your project',
+  ];
+
+  constructor(private dialogService: NbDialogService) {
+  }
+
+  openDialog(): void {
+    const context = {
+      title: 'Nebular for business',
+      formConfig: {
+        portalId: '2452262',
+        formId: '40c56c10-9b41-4d12-95dd-e6c186ac4273',
+      },
+    };
+
+    this.dialogService.open(NgdHubspotFormDialogComponent, { context });
+  }
+}

docs/app/@theme/components/hero/hero.component.ts

@@ -7,7 +7,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NbDialogService } from '@nebular/theme';
 
-import { NgdDownloadDialogComponent } from './download-dialog.component';
+import { NgdHubspotFormDialogComponent } from '../hubspot-form-dialog/hubspot-form-dialog.component';
 
 @Component({
   selector: 'ngd-hero',
@@ -70,6 +70,15 @@ export class NgdHeroComponent {
   ) {}
 
   showDownloadDialog(): void {
-    this.dialogService.open(NgdDownloadDialogComponent);
+    const context = {
+      title: 'Download',
+      formConfig: {
+        portalId: '2452262',
+        formId: '0d8d709d-f487-4dd2-af4f-cdcbe3ac51ae',
+        redirectUrl: 'https://github.com/akveo/nebular',
+      },
+    };
+
+    this.dialogService.open(NgdHubspotFormDialogComponent, { context });
   }
 }

docs/app/@theme/components/hero/download-dialog.component.scss → docs/app/@theme/components/hubspot-form-dialog/hubspot-form-dialog.component.scss

@@ -1,13 +1,20 @@
 nb-card {
   width: 25rem;
   margin-bottom: 0;
+  height: 100%;
+  max-height: 100vh;
+  max-height: -webkit-fill-available;
 }
 
 nb-card-header {
   display: flex;
   align-items: center;
 }
 
+nb-card-body {
+  min-height: 5rem;
+}
+
 .close-button {
   margin-left: auto;
   padding: 0;

docs/app/@theme/components/hubspot-form-dialog/hubspot-form-dialog.component.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
+import { NB_WINDOW, NbDialogRef } from '@nebular/theme';
+
+let formContainerUniqueId = 0;
+
+@Component({
+  template: `
+    <nb-card>
+      <nb-card-header>
+        <span>{{ title }}</span>
+        <button nbButton appearance="ghost" class="close-button" (click)="closeDialog()">
+          <nb-icon icon="close" pack="eva"></nb-icon>
+        </button>
+      </nb-card-header>
+      <nb-card-body [nbSpinner]="showSpinner">
+        <div #formContainer [attr.id]="formContainerId"></div>
+      </nb-card-body>
+    </nb-card>
+  `,
+  styleUrls: ['./hubspot-form-dialog.component.scss'],
+})
+export class NgdHubspotFormDialogComponent implements OnInit, AfterViewInit {
+
+  protected readonly defaultConfig = {
+    submitButtonClass: 'hs-submit-btn btn',
+    css: '',
+    cssClass: 'hs-custom-form',
+  };
+
+  showSpinner: boolean = false;
+
+  formContainerId: string = `hubspot-form-container-id-${formContainerUniqueId++}`;
+  title: string;
+  formConfig;
+
+  @ViewChild('formContainer') formContainer: ElementRef<HTMLDivElement>;
+
+  constructor(
+    protected ref: NbDialogRef<NgdHubspotFormDialogComponent>,
+    protected cd: ChangeDetectorRef,
+    @Inject(NB_WINDOW) protected window,
+  ) {}
+
+  ngOnInit() {
+    this.showSpinner = this.couldEnableSpinner();
+  }
+
+  ngAfterViewInit() {
+    const config = this.createConfig();
+
+    if (this.showSpinner) {
+      this.listenFormInit();
+    }
+
+    (window as unknown as { hbspt: any }).hbspt.forms.create(config);
+  }
+
+  closeDialog(): void {
+    this.ref.close();
+  }
+
+  private createConfig() {
+    const config = { ...this.defaultConfig, ...this.formConfig };
+    if (!config.target) {
+      config.target = '#' + this.formContainerId;
+    }
+    return config;
+  }
+
+  protected couldEnableSpinner(): boolean {
+    return !!this.window.MutationObserver;
+  }
+
+  protected listenFormInit(): void {
+    const observer = new MutationObserver(() => {
+      this.showSpinner = false;
+      this.cd.markForCheck();
+      observer.disconnect();
+    });
+
+    observer.observe(this.formContainer.nativeElement, { childList: true });
+  }
+}

docs/app/@theme/components/index.ts

@@ -1,7 +1,7 @@
 export * from './header/header.component';
 export * from './footer/footer.component';
 export * from './hero/hero.component';
-export * from './hero/download-dialog.component';
+export * from './hubspot-form-dialog/hubspot-form-dialog.component';
 export * from './icon-card/icon-card.component';
 export * from './text-card/text-card.component';
 export * from './fragment-target/fragment-target.directive';
@@ -11,3 +11,4 @@ export * from './color-swatch/color-swatch.directive';
 export * from './description/description.directive';
 export * from './search/search.component';
 export * from './eva/eva.component';
+export * from './for-business/for-business.component';

docs/app/@theme/styles/hs-form.scss

@@ -54,6 +54,10 @@
       display: none;
     }
 
+    .hs-form-field {
+      margin-top: 1rem;
+    }
+
     .hs-submit-btn {
       @extend [nbButton], .appearance-filled, .status-basic, .size-medium;
     }

docs/app/@theme/styles/styles.scss

@@ -25,6 +25,7 @@
   @include nb-option-list-theme();
   @include nb-input-theme();
   @include nb-overlay-theme();
+  @include nb-spinner-theme();
 
   @include nbd-common();