docs(download): add download button with hubspot form (#5725)

docs/app/@theme/theme.module.ts

@@ -17,6 +17,7 @@ import {
   NbCardModule,
   NbSidebarModule,
   NbTabsetModule,
+  NbDialogModule,
 } from '@nebular/theme';
 
 import { LandingSharedModule } from '../shared/landing-shared.module';
@@ -93,6 +94,7 @@ export class NgxLandingThemeModule {
         ...NbThemeModule.forRoot({ name: 'ngx-landing' }).providers,
         ...NbMenuModule.forRoot().providers,
         ...NbSidebarModule.forRoot().providers,
+        ...NbDialogModule.forRoot().providers,
 
         ...ngxLandingServices,
       ],

docs/app/pages/home/main-info-section/main-info-section.component.html

@@ -29,11 +29,18 @@
     </iframe>
   </div>
   <div class="buttons">
+    <div class="buttons-links">
       <a class="btn btn-installation-guidelines"
-       [routerLink]="'/docs/getting-started/installation-guidelines'">Installation Docs</a>
+         [routerLink]="'/docs/getting-started/installation-guidelines'">
+        Installation Docs
+      </a>
       <a class="btn btn-demo"
          href="https://hubs.ly/H0n55nc0"
-       target="_blank">Demo</a>
+         target="_blank">
+        Demo
+      </a>
+    </div>
+
+    <ngx-download-admin></ngx-download-admin>
   </div>
 </div>
-

docs/app/pages/home/main-info-section/main-info-section.component.scss

@@ -113,21 +113,28 @@
     margin-top: 1.875rem;
   }
 
+  .buttons-links {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      flex: 1;
+    }
+  }
+
   .btn {
     font-family: nb-theme(font-main), sans-serif;
     border-radius: 3px;
     border: none;
     background: #ffffff;
     color: #000000;
-    padding: 1.125rem 1em;
+    padding: 1.125rem 0;
     box-shadow: nb-theme(shadow-default);
     cursor: pointer;
     text-transform: uppercase;
 
     &.btn-demo {
       margin-left: 1em;
-      padding-left: 4rem;
-      padding-right: 4rem;
       color: #ffffff;
       background-color: nb-theme(color-active-fg);
       box-shadow: nb-theme(shadow-btn);
@@ -181,13 +188,6 @@
       margin-right: 0.75rem;
       margin-left: 1rem;
     }
-
-    .btn {
-        &.btn-demo {
-          padding-left: 3.25rem;
-          padding-right: 3.25rem;
-        }
-    }
   }
 
   @include media-breakpoint-down(xxl) {
@@ -271,14 +271,21 @@
     }
 
     .buttons {
+      padding-right: 1rem;
+      padding-left: 1rem;
+
       a {
         display: block;
-        margin: 0 1rem;
+        margin: 0;
 
         &.btn-demo {
           margin-top: 1rem;
         }
       }
     }
+
+    .buttons-links {
+      display: block;
+    }
   }
 }

docs/app/pages/home/main-info-section/main-info-section.component.ts

@@ -14,7 +14,8 @@ import { takeWhile } from 'rxjs/operators';
   styleUrls: ['./main-info-section.component.scss'],
 })
 export class MainInfoSectionComponent implements OnDestroy {
-  constructor(themeService: NbThemeService, breakpointService: NbMediaBreakpointsService) {
+  constructor(themeService: NbThemeService,
+              breakpointService: NbMediaBreakpointsService) {
     this.breakpoints = breakpointService.getBreakpointsMap();
     themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))

docs/app/shared/components/download-admin/download-admin.component.html

@@ -0,0 +1,3 @@
+<button matRipple (click)="openDialog()" class="btn btn-download">
+  Download
+</button>

docs/app/shared/components/download-admin/download-admin.component.scss

@@ -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 '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    border-radius: 3px;
+    border: none;
+    background: #ffffff;
+    color: #000000;
+    padding: 1.125rem 0;
+    box-shadow: nb-theme(shadow-default);
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &.btn-download {
+      margin-left: 1em;
+      color: #ffffff;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+
+    &.btn-download {
+      margin-left: 0;
+      margin-top: 1rem;
+      width: 100%;
+    }
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-btn);
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .btn {
+      font-size: 0.7rem;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+    }
+  }
+}

docs/app/shared/components/download-admin/download-admin.component.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { NbDialogService } from '@nebular/theme';
+import { DownloadFormComponent } from '../download-form/download-form.component';
+
+@Component({
+  selector: 'ngx-download-admin',
+  templateUrl: './download-admin.component.html',
+  styleUrls: ['./download-admin.component.scss'],
+})
+export class DownloadAdminComponent {
+
+  constructor(private dialogService: NbDialogService) {
+  }
+
+  openDialog() {
+    this.dialogService.open(DownloadFormComponent);
+  }
+}

docs/app/shared/components/download-form/download-form.component.html

@@ -0,0 +1,8 @@
+<nb-card>
+  <nb-card-body>
+    <div class="close-icon" (click)="closeDialog()">
+      <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
+    </div>
+    <div id="hubspotForm"></div>
+  </nb-card-body>
+</nb-card>

docs/app/shared/components/download-form/download-form.component.scss

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card-body {
+    position: relative;
+  }
+
+  .close-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 0.1rem;
+    top: 0.1rem;
+  }
+
+  ::ng-deep .custom-form {
+    .modal-header {
+      display: none;
+    }
+
+    .modal-body {
+      padding-bottom: 0;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    input.hs-input {
+      width: 100%;
+      font-size: nb-theme(font-size-sm);
+      padding: 0.75rem 1rem !important;
+      border: 1px solid #e4e9f2;
+      box-shadow: nb-theme(shadow-default);
+      border-radius: 0.25rem;
+
+      &.invalid {
+        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+      }
+
+      &::placeholder {
+        color: #434a59;
+        opacity: 0.24;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .hs-error-msgs {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .hs-form-required, .hs-error-msg {
+      color: #f2545b;
+    }
+
+    .hs_error_rollup {
+      display: none;
+    }
+
+    .btn {
+      margin-top: 2rem;
+      font-family: nb-theme(font-main), sans-serif;
+      border-radius: 3px;
+      border: none;
+      background-color: nb-theme(color-active-fg);
+      color: #ffffff;
+      padding: 1rem 2rem;
+      box-shadow: nb-theme(shadow-btn);
+      cursor: pointer;
+      text-transform: uppercase;
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+  }
+}

docs/app/shared/components/download-form/download-form.component.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { AfterViewInit, Component } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-download-form',
+  templateUrl: './download-form.component.html',
+  styleUrls: ['./download-form.component.scss'],
+})
+export class DownloadFormComponent implements AfterViewInit {
+
+  constructor(protected ref: NbDialogRef<DownloadFormComponent>) {
+  }
+
+  ngAfterViewInit() {
+    hbspt.forms.create({
+      portalId: '2452262',
+      formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
+      target: '#hubspotForm',
+      submitButtonClass: 'btn',
+      css: '',
+      cssClass: 'custom-form',
+      redirectUrl: 'https://github.com/akveo/ngx-admin',
+    });
+  }
+
+  closeDialog() {
+    this.ref.close();
+  }
+}

docs/app/shared/components/material-theme-link/material-theme-link.component.ts

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NbPopoverDirective } from '@nebular/theme';

docs/app/shared/landing-shared.module.ts

@@ -1,16 +1,41 @@
 import { NgModule } from '@angular/core';
-import {NbBadgeModule, NbPopoverModule} from '@nebular/theme';
+import { NbBadgeModule, NbCardModule, NbDialogModule, NbPopoverModule } from '@nebular/theme';
 import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
 import { CapitalizePipe } from './pipes/capitalize.pipe';
 import { EvaIconsPipe } from './pipes/eva-icons.pipe';
 import { RouterModule } from '@angular/router';
+import { DownloadAdminComponent } from './components/download-admin/download-admin.component';
+import { DownloadFormComponent } from './components/download-form/download-form.component';
 
-const component = [MaterialThemeLinkComponent];
-const pipes = [CapitalizePipe, EvaIconsPipe];
+const component = [
+  MaterialThemeLinkComponent,
+  DownloadAdminComponent,
+  DownloadFormComponent,
+];
+const pipes = [
+  CapitalizePipe,
+  EvaIconsPipe,
+];
 
 @NgModule({
-  imports: [RouterModule, NbPopoverModule, NbBadgeModule],
-  declarations: [...component, ...pipes],
-  exports: [NbPopoverModule, ...component, ...pipes],
+  imports: [
+    RouterModule,
+    NbPopoverModule,
+    NbBadgeModule,
+    NbCardModule,
+    NbDialogModule.forChild(),
+  ],
+  declarations: [
+    ...component,
+    ...pipes,
+  ],
+  entryComponents: [
+    DownloadFormComponent,
+  ],
+  exports: [
+    NbPopoverModule,
+    ...component,
+    ...pipes,
+  ],
 })
 export class LandingSharedModule {}

docs/app/shared/pipes/eva-icons.pipe.ts

@@ -25,7 +25,7 @@ export class EvaIconsPipe implements PipeTransform {
             options: {
               height: number;
               width: number;
-              fill: string;
+              fill?: string;
               animationType?: string;
               animationHover?: boolean;
               animationInfinity?: boolean;

docs/index.html

@@ -19,6 +19,11 @@
   <link rel="icon" type="image/png" href="favicon.png">
   <script type="text/javascript" src="assets/ghspa.js"></script>
 
+  <!--[if lte IE 8]>
+  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
+  <![endif]-->
+  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
+
   <!-- Google Tag Manager -->
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

docs/typings.d.ts

@@ -13,3 +13,4 @@ interface NodeModule {
 declare var require: NodeRequire;
 declare var structure: any;
 declare var docs: any;
+declare var hbspt: any;