feat: add help/support section (#915)

- add links for additional help/support resources in homePage
  - add twitter, angular event and angular blog

Fixes #133

Co-authored-by: Michael Prentice <splaktar@gmail.com>

Author: kian23kpt

material.angular.io/src/_app-theme.scss

@@ -43,6 +43,14 @@
     color: mat.get-color-from-palette($primary, default-contrast);
   }
 
+  .docs-help-support {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+
+    a {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+  }
+
   .is-next-version {
     background: mat.get-color-from-palette($next-theme, 900) !important;
   }

material.angular.io/src/app/pages/homepage/homepage.html

@@ -85,4 +85,5 @@ <h2>Guides</h2>
 
 </main>
 
+<app-support></app-support>
 <app-footer></app-footer>

material.angular.io/src/app/pages/homepage/homepage.ts

@@ -11,6 +11,7 @@ import {MatCardModule} from '@angular/material/card';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {CommonModule} from '@angular/common';
 import {CarouselModule} from '../../shared/carousel/carousel-module';
+import {Support} from '../../shared/support/support';
 
 const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button'];
 
@@ -39,13 +40,13 @@ const routes: Routes = [{path: '', component: Homepage}];
 
 @NgModule({
   imports: [SvgViewerModule,
-            MatButtonModule,
-            FooterModule,
-            RouterModule.forChild(routes),
-            NavigationFocusModule, MatIconModule, MatDividerModule, MatCardModule, CommonModule,
-            CarouselModule],
+    MatButtonModule,
+    FooterModule,
+    RouterModule.forChild(routes),
+    NavigationFocusModule, MatIconModule, MatDividerModule, MatCardModule, CommonModule,
+    CarouselModule],
   exports: [Homepage],
-  declarations: [Homepage],
+  declarations: [Homepage, Support],
   providers: [GuideItems]
 })
 export class HomepageModule {

material.angular.io/src/app/shared/support/support.html

@@ -0,0 +1,41 @@
+<div class="docs-help-support">
+  <ul>
+    <li>
+      <a href="https://stackoverflow.com/questions/tagged/angular-material">
+        <img src="../../../assets/img/homepage/stackoverflow-logo.svg" alt="StackOverflow icon" loading="lazy">
+        StackOverflow
+      </a>
+      <div class="docs-help-support-description">Questions tagged with <a
+        href="https://stackoverflow.com/questions/tagged/angular-material">angular-material</a> or
+        <a href="https://stackoverflow.com/questions/tagged/angular-cdk">angular-cdk</a></div>
+    </li>
+    <li>
+      <a href="https://discord.gg/angular">
+        <img src="../../../assets/img/homepage/discord-logo.svg" alt="Discord icon" loading="lazy">
+        Discord
+      </a>
+      <div class="docs-help-support-description">Angular Community on Discord</div>
+    </li>
+    <li>
+      <a href="https://groups.google.com/g/angular-material2">
+        <img src="../../../assets/img/homepage/google-groups-logo.png" alt="Google Groups icon" loading="lazy">
+        Google Groups
+      </a>
+      <div class="docs-help-support-description">Angular Components discussion forum</div>
+    </li>
+    <li>
+      <a href="https://twitter.com/angular">
+        <img src="../../../assets/img/homepage/twitter-logo.svg" alt="Twitter icon" loading="lazy">
+        Twitter
+      </a>
+      <div class="docs-help-support-description">Connect with @angular on Twitter</div>
+    </li>
+    <li>
+      <a href="https://blog.angular.io">
+        <img src="../../../assets/img/homepage/angular-logo.svg" alt="Angular icon" loading="lazy">
+        Angular Blog
+      </a>
+      <div class="docs-help-support-description">News and Tips from the Angular Team</div>
+    </li>
+  </ul>
+</div>

material.angular.io/src/app/shared/support/support.scss

@@ -0,0 +1,61 @@
+.docs-help-support {
+  width: 75%;
+  margin: auto;
+  padding-bottom: 40px;
+}
+
+.docs-help-support ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  margin: 0;
+  padding: 18px 0;
+}
+
+.docs-help-support ul li {
+  text-align: center;
+  flex: 0 1 200px;
+  -moz-box-flex: 0;
+}
+
+.docs-help-support ul li a {
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.docs-help-support ul li a:hover {
+  text-decoration: underline;
+}
+
+.docs-help-support ul li a img {
+  display: block;
+  margin: 10px auto;
+  width: 50px;
+  height: 50px;
+}
+
+.docs-help-support-description {
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+@media screen and (max-width: 884px) {
+  .docs-help-support {
+    padding-bottom: 20px;
+  }
+  .docs-help-support ul {
+    display: block;
+  }
+
+  .docs-help-support ul li a {
+    display: flex;
+    align-items: center;
+  }
+  .docs-help-support ul li a img {
+    margin: 10px;
+
+  }
+  .docs-help-support-description {
+    display: none;
+  }
+}

material.angular.io/src/app/shared/support/support.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {Support} from './support';
+
+describe('HelpSupportComponent', () => {
+  let component: Support;
+  let fixture: ComponentFixture<Support>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Support]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Support);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

material.angular.io/src/app/shared/support/support.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-support',
+  templateUrl: './support.html',
+  styleUrls: ['./support.scss']
+})
+export class Support {
+}