feat: add summaries to all menu items and category pages

src/app/pages/component-category-list/component-category-list.html

@@ -1,9 +1,11 @@
+<div class="docs-component-category-list-summary">{{_categoryListSummary}}</div>
 <div class="docs-component-category-list">
   <a *ngFor="let category of docItems.getCategories((params | async)?.section)"
      class="docs-component-category-list-item"
     [routerLink]="['../', category.id]">
     <mat-card class="docs-component-category-list-card">
       <mat-card-title>{{category.name}}</mat-card-title>
+      <mat-card-content class="docs-component-category-list-card-summary">{{category.summary}}</mat-card-content>
     </mat-card>
   </a>
 </div>

src/app/pages/component-category-list/component-category-list.scss

@@ -1,5 +1,9 @@
 @import '../../../styles/constants';
 
+.docs-component-category-list-summary {
+  padding: 25px 40px 0;
+}
+
 .docs-component-category-list {
   display: flex;
   flex-wrap: wrap;

src/app/pages/component-category-list/component-category-list.ts

@@ -16,6 +16,7 @@ import {Observable, combineLatest, Subscription} from 'rxjs';
 export class ComponentCategoryList implements OnInit, OnDestroy {
   params: Observable<Params>;
   routeParamSubscription: Subscription;
+  _categoryListSummary: string;
 
   constructor(public docItems: DocumentationItems,
               public _componentPageTitle: ComponentPageTitle,
@@ -30,7 +31,9 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
     // title on topbar navigation
     this.routeParamSubscription = this.params.subscribe(params => {
       const sectionName = params['section'];
-      this._componentPageTitle.title = SECTIONS[sectionName];
+      const section = SECTIONS[sectionName];
+      this._componentPageTitle.title = section.name;
+      this._categoryListSummary = section.summary;
     });
   }
 

src/app/pages/component-list/_component-list-theme.scss

@@ -5,7 +5,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .docs-component-list-item {
+  .docs-component-list-card-summary {
     color: mat-color($foreground, secondary-text);
   }
 }

src/app/pages/component-list/component-list.html

@@ -2,15 +2,20 @@
   <a *ngFor="let component of category.items"
     class="docs-component-list-item"
     [routerLink]="'/' + section + '/' + component.id">
-    <mat-card class="docs-component-list-card">
-      <mat-card-title class="docs-component-list-card-title">{{component.name}}</mat-card-title>
-      <div class="docs-component-list-icon-spacer"></div>
-      <div class="docs-component-list-item-icon">
-        <docs-svg-viewer
+    <mat-card>
+      <mat-card-header class="docs-component-list-card-header">
+        <mat-card-title class="docs-component-list-card-title">{{component.name}}</mat-card-title>
+        <div class="docs-component-list-icon-spacer"></div>
+        <div class="docs-component-list-item-icon">
+          <docs-svg-viewer
             [attr.aria-label]="component.name"
             scaleToContainer="true"
             [src]="'../../../assets/img/components/' + component.id + '.svg'"></docs-svg-viewer>
-      </div>
+        </div>
+      </mat-card-header>
+      <mat-card-content class="docs-component-list-card-summary" *ngIf="component.summary">
+        {{component.summary}}
+      </mat-card-content>
     </mat-card>
   </a>
 </div>

src/app/pages/component-list/component-list.scss

@@ -30,14 +30,18 @@
 }
 
 .docs-component-list-card-title {
-  margin: 0;
+  margin: 0 0 0 -8px;
 }
 
-.docs-component-list-card {
-  display: flex;
+.docs-component-list-card-header {
   align-items: center;
 }
 
+.docs-component-list-card-summary {
+  min-height: 2.4em;
+  margin-top: 20px;
+}
+
 .docs-component-list-item-icon {
   margin: 0 0 0 10px;
   width: 40px;