fix: add ripples to clickable cards

Adds ripples to the various clickable cards to make them feel more "Material-ey".

Author: crisbeto

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

@@ -7,7 +7,7 @@
   <a *ngFor="let component of docItems.getItems(section)"
      class="docs-component-category-list-item"
     [routerLink]="'/' + section + '/' + component.id">
-    <div class="docs-component-category-list-card">
+    <div class="docs-component-category-list-card" matRipple>
       <img *ngIf="section === 'components'"
           class="docs-component-category-list-card-image-wrapper"
           [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"

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

@@ -2,6 +2,7 @@ import {CommonModule, NgIf, NgFor, AsyncPipe} from '@angular/common';
 import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {ActivatedRoute, Params, RouterModule, RouterLink} from '@angular/router';
+import {MatRipple} from '@angular/material/core';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 
 import {
@@ -17,7 +18,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
   standalone: true,
-  imports: [NavigationFocus, NgIf, NgFor, RouterLink, AsyncPipe]
+  imports: [NavigationFocus, NgIf, NgFor, RouterLink, AsyncPipe, MatRipple]
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
   params: Observable<Params> | undefined;

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

@@ -1,7 +1,8 @@
 <main focusOnNavigation aria-label="Guide list" id="guide-list" class="docs-guide">
   <div class="docs-guide-list">
-  <a class='docs-guide-item' *ngFor="let guide of guideItems.getAllItems()"
-     routerLink='/guide/{{guide.id}}'>
+  <a class="docs-guide-item" *ngFor="let guide of guideItems.getAllItems()"
+     routerLink="/guide/{{guide.id}}"
+     matRipple>
     <mat-card class="docs-guide-card" appearance="outlined">
       <mat-card-title>{{guide.name}}</mat-card-title>
       <mat-card-content class="docs-guide-card-summary">

src/app/pages/guide-list/guide-list.ts

@@ -6,13 +6,14 @@ import {NgFor} from '@angular/common';
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {MatCardModule} from '@angular/material/card';
+import {MatRipple} from '@angular/material/core';
 
 @Component({
   selector: 'app-guides',
   templateUrl: './guide-list.html',
   styleUrls: ['./guide-list.scss'],
   standalone: true,
-  imports: [NavigationFocus, NgFor, RouterLink, MatCardModule, Footer]
+  imports: [NavigationFocus, NgFor, RouterLink, MatCardModule, Footer, MatRipple]
 })
 export class GuideList implements OnInit {
   @HostBinding('class.main-content') readonly mainContentClass = true;

src/app/pages/homepage/homepage.html

@@ -77,7 +77,8 @@ <h2>Guides</h2>
     <app-carousel aria-label="Guides">
       <a carousel-item class="carousel-item docs-homepage-guides-carousel-item"
          *ngFor="let guide of guideItems.getAllItems()"
-         routerLink="/guide/{{guide.id}}">
+         routerLink="/guide/{{guide.id}}"
+         matRipple>
         <mat-card class="docs-homepage-guides-card" appearance="outlined">
           <mat-card-title>{{guide.name}}</mat-card-title>
           <mat-card-content class="docs-component-category-list-card-summary">{{guide.overview}}</mat-card-content>

src/app/pages/homepage/homepage.ts

@@ -2,6 +2,7 @@ import {Component, HostBinding, Inject, OnInit, Optional} from '@angular/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 import {MatButtonModule} from '@angular/material/button';
+import {MatRipple} from '@angular/material/core';
 import {Footer} from '../../shared/footer/footer';
 import {RouterLink} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -36,6 +37,7 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
     Support,
     Footer,
     AppLogo,
+    MatRipple,
   ],
 })
 export class Homepage implements OnInit {