feat(demo): update landing page (#4972)

* feat(demo): update landing page

* fix(landing): fix cypress tests after chahge langing
Closes #4970

README.md

@@ -12,14 +12,14 @@ Best way to quickly integrate <a href="https://getbootstrap.com/">Bootstrap 3</a
 <a href="https://travis-ci.org/valor-software/ngx-bootstrap"><img alt="" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development"></a>
 
 <br/>
-<a href="https://ngx-slack.herokuapp.com"><img src="https://ngx-slack.herokuapp.com/badge.svg" alt="slack" ></a>
+<a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg"><img src="https://a.slack-edge.com/66f9/img/icons/ios-256.png" width="25" height="25" alt="slack" ></a>
 </p>
 
 ## Links
 
 - [Documentation](http://valor-software.com/ngx-bootstrap/)
 - [Release Notes](https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md)
-- [Slack Community](https://ngx-slack.herokuapp.com)
+- [Slack Community](https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg)
 
 <!-- [![codecov](https://codecov.io/gh/valor-software/ngx-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ngx-bootstrap) -->
 
@@ -157,7 +157,7 @@ If you want to run the demo with Angular Universal:
 So if you are in trouble, here's where you can look for help.
 
 The best place to ask questions is on [StackOverflow (under the `ngx-bootstrap` tag)](https://stackoverflow.com/questions/tagged/ngx-bootstrap)
-You can also join [our Slack channel](https://ngx-slack.herokuapp.com/) and link your stackoverflow question there. But try to avoid asking generic help questions directly on Slack since they can easily get lost in the chat. You can also [search among the existing GitHub issues](https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue).
+You can also join [our Slack channel](https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg) and link your stackoverflow question there. But try to avoid asking generic help questions directly on Slack since they can easily get lost in the chat. You can also [search among the existing GitHub issues](https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue).
 
 If, **and only if**, none of the above helped, please open a [new issue](https://github.com/valor-software/ngx-bootstrap/issues/new).
 
@@ -172,8 +172,8 @@ Please read our [contribution guidelines](https://github.com/valor-software/ngx-
 Please read central `ngx` modules [readme](https://github.com/valor-software/ng2-plans) for details, plans and approach
 
 ### Credits
-Crossbrowser testing sponsored by [Browser Stack](https://www.browserstack.com)
-[<img src="https://camo.githubusercontent.com/a7b268f2785656ab3ca7b1cbb1633ee5affceb8f/68747470733a2f2f64677a6f7139623561736a67312e636c6f756466726f6e742e6e65742f70726f64756374696f6e2f696d616765732f6c61796f75742f6c6f676f2d6865616465722e706e67" alt="Browser Stack" height="31px" style="background: cornflowerblue;">](https://www.browserstack.com)
+Crossbrowser testing sponsored by [Saucelab](https://saucelabs.com/)
+[<img src="https://saucelabs.com/content/images/[email protected]" alt="Browser Stack" width="31" height="31">](https://saucelabs.com/)
 
 ### License
 

cypress/integration/landing_page_spec.ts

@@ -52,12 +52,17 @@ describe('Landing Page test suite', () => {
         .should('include', searchedUrl);
     });
 
-    it('Github button is enabled and contains link to ngx-bootstrap repo', () => {
-      const buttonText = 'Github';
+    it('Documentation button is enabled and contains link to documentation', () => {
+      const buttonText = 'Documentation';
+      const searchedUrl = '/getting-started';
 
       cy.get(landing.navBtn).contains(buttonText)
-        .should('be.enabled')
-        .and('have.attr', 'href', landing.githubUrl);
+        .should('be.enabled');
+
+      landing.clickByText(landing.navBtn, buttonText);
+
+      cy.url()
+        .should('include', searchedUrl);
     });
 
     it('Info buttons in header are enabled and contains links to slack, github and stackoverflow', () => {

cypress/support/landing.po.ts

@@ -14,7 +14,7 @@ export class LandingPo extends BaseComponent {
 
   stackoverflowUrl = 'https://stackoverflow.com/questions/tagged/ngx-bootstrap';
   githubUrl = 'https://github.com/valor-software/ngx-bootstrap';
-  slackUrl = 'https://ngx-slack.herokuapp.com';
+  slackUrl = 'https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg';
 
   teamUrl = 'https://github.com/valor-software';
   contributorsUrl = 'https://github.com/valor-software/ngx-bootstrap/graphs/contributors';

demo/src/app/common/getting-started/getting-started.component.html

@@ -34,8 +34,9 @@ <h1 align="center">
       <a href="https://travis-ci.org/valor-software/ngx-bootstrap">
         <img alt="build status" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development">
       </a>
-      <a href="https://ngx-slack.herokuapp.com">
-        <img src="https://ngx-slack.herokuapp.com/badge.svg" alt="ngx on slack">
+      <br/>
+      <a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">
+        <img src="https://a.slack-edge.com/66f9/img/icons/ios-256.png" width="25" height="25" alt="slack" >
       </a>
     </p>
 
@@ -45,7 +46,7 @@ <h2>Links</h2>
       <ul>
         <li><a href="http://valor-software.com/ngx-bootstrap/">Documentation</a></li>
         <li><a href="https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md">Release Notes</a></li>
-        <li><a href="https://ngx-slack.herokuapp.com">Slack Community</a></li>
+        <li><a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">Slack Community</a></li>
       </ul>
 
       <h2>Table of contents</h2>
@@ -108,9 +109,9 @@ <h4>Method 2</h4>
         <span class="pln">ng add ngx</span><span class="pun">-</span><span class="pln">bootstrap </span> --component <span class="pln">typeahead</span></pre>
 
       <h3>Setting up the bootstrap version manually</h3>
-      
+
       <p>Sometimes, your project might contain some library that could interfear with the bootstrap framework, or you might have a customized version of bootstrap. The consequence is that the process of determining bootstrap version might be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the boostraping component (i.e. <code>AppComonent</code>):</p>
-      
+
       <pre class="prettyprint lang-js prettyprinted">
 <span class="kwd">import</span><span class="pln"> </span><span class="pun">{{'{'}}</span><span class="pln"> setTheme </span><span class="pun">{{'}'}}</span><span class="pln"> from </span><span class="str">'ngx-bootstrap/utils'</span><span class="pun">;</span>
 <span class="pln">&nbsp;</span>
@@ -151,7 +152,7 @@ <h2 id="troubleshooting">Troubleshooting</h2>
 
       <ul>
         <li>you can search and ask for help at <a href="https://stackoverflow.com/questions/tagged/ngx-bootstrap">StackOverflow</a></li>
-        <li>you can join <a href="https://ngx-slack.herokuapp.com/">slack</a> and ask a question</li>
+        <li>you can join <a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">slack</a> and ask a question</li>
         <li>if none of this helped please <a href="https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue">search</a> and only then open new issue</li>
       </ul>
 
@@ -166,8 +167,10 @@ <h3>If you need more modules check <a href="https://github.com/valor-software/ng
       <h3>Credits</h3>
 
       <p>Crossbrowser testing sponsored by
-        <a href="https://www.browserstack.com">Browser Stack</a>
-        <a href="https://www.browserstack.com"><img src="https://camo.githubusercontent.com/a7b268f2785656ab3ca7b1cbb1633ee5affceb8f/68747470733a2f2f64677a6f7139623561736a67312e636c6f756466726f6e742e6e65742f70726f64756374696f6e2f696d616765732f6c61796f75742f6c6f676f2d6865616465722e706e67" alt="Browser Stack" height="31px"></a>
+        <a href="https://saucelabs.com/" class="pr-1">Saucelab</a>
+        <a href="https://saucelabs.com/">
+          <img src="https://saucelabs.com/content/images/[email protected]" alt="Browser Stack" width="31" height="31">
+        </a>
       </p>
 
       <h2 id="accessibility">Accessibility</h2>

demo/src/app/common/landing/landing.component.html

@@ -7,8 +7,8 @@
     <h1 class="slogan">Develop better. Faster.</h1>
     <p class="descr">Bootstrap components, powered by Angular</p>
     <div class="btn-block">
-      <a class="btn btn-primary" routerLink="/getting-started">Get started</a>
-      <a class="btn btn-outline-secondary" href="https://github.com/valor-software/ngx-bootstrap">Github</a>
+      <a class="btn btn-primary" (click)="scrollToSection()" routerLink="/getting-started">Get started</a>
+      <a class="btn btn-outline-secondary" routerLink="/getting-started">Documentation</a>
     </div>
     <p class="version">{{currentVersion}}</p>
   </section>

demo/src/app/common/landing/landing.component.ts

@@ -4,6 +4,7 @@ import { setTheme } from 'ngx-bootstrap/utils';
 
 import { StyleManager } from '../../theme/style-manager';
 import { ThemeStorage } from '../../theme/theme-storage';
+import { Router } from '@angular/router';
 
 const _bs4Css = 'assets/css/bootstrap-4.0.0/css/bootstrap.min.css';
 
@@ -15,7 +16,10 @@ export class LandingComponent implements AfterViewInit {
   currentVersion: string;
   currentTheme: 'bs3' | 'bs4';
 
-  constructor(public styleManager: StyleManager, private http: HttpClient, private themeStorage: ThemeStorage) {
+  constructor(public styleManager: StyleManager,
+              private http: HttpClient,
+              private themeStorage: ThemeStorage,
+              private router: Router) {
     const currentTheme = this.themeStorage.getStoredTheme();
     if (currentTheme && currentTheme === 'bs3') {
       this.installTheme('bs4');
@@ -38,4 +42,8 @@ export class LandingComponent implements AfterViewInit {
       this.themeStorage.storeTheme(this.currentTheme);
     }
   }
+
+  scrollToSection() {
+    this.router.navigate(['.', 'getting-started' ], {fragment: 'getting-started'});
+  }
 }

demo/src/app/common/top-menu/top-menu.component.html

@@ -29,7 +29,7 @@ <h1 class="logo" >
         </a>
       </li>
       <li>
-        <a target="_blank" rel="noopener" href="https://ngx-slack.herokuapp.com">
+        <a target="_blank" rel="noopener" href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">
           <img src="assets/images/icons/icon-slack.svg" alt="ngx on slack">
         </a>
       </li>

demo/src/assets/css/style.scss

@@ -128,9 +128,9 @@ a:hover {
     margin: 40px 0 20px;
 
     .btn {
-      width: 160px;
+      min-width: 160px;
       margin: 0 13px;
-      padding: 12px 0;
+      padding: 12px 10px;
       cursor: pointer;
       text-transform: uppercase;
       letter-spacing: 2px;