feat(aio): about/contributor page rebased and tweaked

aio/content/marketing/contributors.json

@@ -68,7 +68,7 @@
     "twitter": "ThomasBurleson",
     "website": "http://www.solutionOptimist.com",
     "bio": "AngularJS Material and @angular/flex-layout Team Lead. Thomas joined the core team in 2014. He leads a team of developers working on UX components for AngularJS.",
-    "group": "Lead"
+    "group": "Angular"
   },
   "stephenfluin": {
     "name": "Stephen Fluin",

aio/src/app/embedded/contributor/contributor-list.component.ts

@@ -1,22 +1,40 @@
-import { Component } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-
+import { Component, OnInit } from '@angular/core';
 import { ContributorGroup } from './contributors.model';
 import { ContributorService } from './contributor.service';
 
 @Component({
-  selector: 'aio-contributor-list',
+  selector: `aio-contributor-list`,
   template: `
-  <section *ngFor="let group of groups | async" class="grid-fluid">
-    <h4 class="title">{{group.name}}</h4>
-    <aio-contributor *ngFor="let person of group.contributors" [person]="person"></aio-contributor>
+  <div class="flex-center group-buttons">
+    <a *ngFor="let name of groupNames"
+       [class.selected]="name == selectedGroup.name"
+       class="button mat-button filter-button"
+       (click)="selectGroup(name)">{{name}}</a>
+  </div>
+  <section *ngIf="selectedGroup" class="grid-fluid">
+    <div class="contributor-group">
+      <aio-contributor *ngFor="let person of selectedGroup.contributors" [person]="person"></aio-contributor>
+    </div>
   </section>`
 })
-export class ContributorListComponent {
-  groups: Observable<ContributorGroup[]>;
+export class ContributorListComponent implements OnInit {
+  private groups: ContributorGroup[];
+  groupNames: string[];
+  selectedGroup: ContributorGroup;
 
-  constructor(private contributorService: ContributorService) {
-    this.groups = this.contributorService.contributors;
+  constructor(private contributorService: ContributorService) { }
+
+  ngOnInit() {
+    // no need to unsubscribe because `contributors` completes
+    this.contributorService.contributors
+      .subscribe(grps => {
+        this.groups = grps;
+        this.groupNames = grps.map(g => g.name);
+        this.selectGroup(grps[0].name);
+      });
+  }
+
+  selectGroup(name) {
+    this.selectedGroup = this.groups.find(g => g.name === name);
   }
 }

aio/src/app/embedded/contributor/contributor.component.ts

@@ -22,7 +22,7 @@ import { Contributor } from './contributors.model';
                     <span class="fa fa-link fa-2x"></span>
                 </a>
                 <div>
-                    <a *ngIf="person.bio" aria-label="View Bio" (click)="flipCard(person)">View Bio</a>
+                    <a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
                 </div>
             </div>
         </div>

aio/src/app/embedded/contributor/contributor.service.spec.ts

@@ -56,15 +56,15 @@ describe('ContributorService', () => {
     });
 
     it('should reshape the contributor json to expected result', () => {
-      const groupNames = contribs.map(g => g.name);
-      expect(groupNames).toEqual(['Lead', 'Google', 'Community']);
+      const groupNames = contribs.map(g => g.name).join(',');
+      expect(groupNames).toEqual('Angular,Community');
     });
 
-    it('should have expected "Lead" contribs in order', () => {
-      const leads = contribs[0];
-      const actualLeadNames = leads.contributors.map(l => l.name).join(',');
-      const expectedLeadNames = [testData.igor, testData.misko, testData.naomi].map(l => l.name).join(',');
-      expect(actualLeadNames).toEqual(expectedLeadNames);
+    it('should have expected "Community" contribs in order', () => {
+      const community = contribs[1];
+      const actualAngularNames = community.contributors.map(l => l.name).join(',');
+      const expectedAngularNames = [testData.jeffcross, testData.kapunahelewong].map(l => l.name).join(',');
+      expect(actualAngularNames).toEqual(expectedAngularNames);
     });
   });
 
@@ -74,29 +74,37 @@ describe('ContributorService', () => {
 function getTestContribs() {
   // tslint:disable:quotemark
   return {
+    "kapunahelewong": {
+      "name": "Kapunahele Wong",
+      "picture": "kapunahelewong.jpg",
+      "website": " https://github.com/kapunahelewong",
+      "twitter": "kapunahele",
+      "bio": "Kapunahele is a front-end developer and contributor to angular.io",
+      "group": "Community"
+    },
     "misko": {
       "name": "Miško Hevery",
       "picture": "misko.jpg",
       "twitter": "mhevery",
       "website": "http://misko.hevery.com",
       "bio": "Miško Hevery is the creator of AngularJS framework.",
-      "group": "Lead"
+      "group": "Angular"
     },
     "igor": {
       "name": "Igor Minar",
       "picture": "igor-minar.jpg",
       "twitter": "IgorMinar",
-      "website": "https://google.com/+IgorMinar",
-      "bio": "Igor is a software engineer at Google.",
-      "group": "Lead"
+      "website": "https://Angular.com/+IgorMinar",
+      "bio": "Igor is a software engineer at Angular.",
+      "group": "Angular"
     },
     "kara": {
       "name": "Kara Erickson",
       "picture": "kara-erickson.jpg",
       "twitter": "karaforthewin",
       "website": "https://github.com/kara",
-      "bio": "Kara is a software engineer on the Angular team at Google and a co-organizer of the Angular-SF Meetup. ",
-      "group": "Google"
+      "bio": "Kara is a software engineer on the Angular team at Angular and a co-organizer of the Angular-SF Meetup. ",
+      "group": "Angular"
     },
     "jeffcross": {
       "name": "Jeff Cross",
@@ -110,9 +118,9 @@ function getTestContribs() {
       "name": "Naomi Black",
       "picture": "naomi.jpg",
       "twitter": "naomitraveller",
-      "website": "http://google.com/+NaomiBlack",
+      "website": "http://Angular.com/+NaomiBlack",
       "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades.",
-      "group": "Lead"
+      "group": "Angular"
     }
  };
 }

aio/src/app/embedded/contributor/contributor.service.ts

@@ -9,7 +9,7 @@ import { Logger } from 'app/shared/logger.service';
 import { Contributor, ContributorGroup } from './contributors.model';
 
 const contributorsPath = 'content/contributors.json';
-const knownGroups = ['Lead', 'Google', 'Community'];
+const knownGroups = ['Angular', 'Community'];
 
 @Injectable()
 export class ContributorService {