From bfdb1a26ae191d0921eb0dfadf1cd9f8d34e796c Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Fri, 14 Jun 2024 11:50:36 -0700
Subject: [PATCH] docs(material/card): Update card examples (#29259)

---
 .../material/card/BUILD.bazel                 |  1 +
 .../card-actions/card-actions-example.html    | 18 +++++++---------
 .../card/card-actions/card-actions-example.ts |  3 ++-
 .../card/card-fancy/card-fancy-example.html   |  2 +-
 .../card/card-fancy/card-fancy-example.ts     |  3 ++-
 .../card/card-footer/card-footer-example.css  |  3 +++
 .../card/card-footer/card-footer-example.html | 21 ++++++++-----------
 .../card/card-footer/card-footer-example.ts   | 14 ++++++-------
 .../card/card-harness/card-harness-example.ts |  3 ++-
 .../card-media-size-example.html              |  8 +++----
 .../card-media-size-example.ts                |  3 ++-
 .../card-overview/card-overview-example.html  |  2 +-
 .../card-overview/card-overview-example.ts    |  3 ++-
 .../card-subtitle/card-subtitle-example.css   |  3 ---
 .../card-subtitle/card-subtitle-example.html  | 14 -------------
 .../card-subtitle/card-subtitle-example.ts    | 19 -----------------
 .../material/card/index.ts                    |  1 -
 17 files changed, 44 insertions(+), 77 deletions(-)
 delete mode 100644 src/components-examples/material/card/card-subtitle/card-subtitle-example.css
 delete mode 100644 src/components-examples/material/card/card-subtitle/card-subtitle-example.html
 delete mode 100644 src/components-examples/material/card/card-subtitle/card-subtitle-example.ts

diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel
index 26e607bbe5a6..a946d615e6aa 100644
--- a/src/components-examples/material/card/BUILD.bazel
+++ b/src/components-examples/material/card/BUILD.bazel
@@ -19,6 +19,7 @@ ng_module(
         "//src/material/button/testing",
         "//src/material/card",
         "//src/material/card/testing",
+        "//src/material/chips",
         "//src/material/divider",
         "//src/material/progress-bar",
         "@npm//@angular/platform-browser",
diff --git a/src/components-examples/material/card/card-actions/card-actions-example.html b/src/components-examples/material/card/card-actions/card-actions-example.html
index e731bd9c17e9..10db36f2ce0d 100644
--- a/src/components-examples/material/card/card-actions/card-actions-example.html
+++ b/src/components-examples/material/card/card-actions/card-actions-example.html
@@ -1,21 +1,19 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
-    <mat-card-title>Actions Buttons</mat-card-title>
-    <mat-card-subtitle>Start</mat-card-subtitle>
+    <mat-card-title> Australian Shepherd</mat-card-title>
+    <mat-card-subtitle>Herding group</mat-card-subtitle>
   </mat-card-header>
   <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
+    <button mat-button>Learn More</button>
   </mat-card-actions>
 </mat-card>
 <br>
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-header>
-    <mat-card-title>Actions Buttons</mat-card-title>
-    <mat-card-subtitle>End</mat-card-subtitle>
+    <mat-card-title>Poodle</mat-card-title>
+    <mat-card-subtitle>Non-sporting group</mat-card-subtitle>
   </mat-card-header>
   <mat-card-actions align="end">
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
+    <button mat-button>Learn More</button>
   </mat-card-actions>
 </mat-card>
diff --git a/src/components-examples/material/card/card-actions/card-actions-example.ts b/src/components-examples/material/card/card-actions/card-actions-example.ts
index abd274159130..567cf44fe0bb 100644
--- a/src/components-examples/material/card/card-actions/card-actions-example.ts
+++ b/src/components-examples/material/card/card-actions/card-actions-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -10,5 +10,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-actions-example.html',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardActionsExample {}
diff --git a/src/components-examples/material/card/card-fancy/card-fancy-example.html b/src/components-examples/material/card/card-fancy/card-fancy-example.html
index e7fdeb8efe16..f4f90b2553df 100644
--- a/src/components-examples/material/card/card-fancy/card-fancy-example.html
+++ b/src/components-examples/material/card/card-fancy/card-fancy-example.html
@@ -1,4 +1,4 @@
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <div mat-card-avatar class="example-header-image"></div>
     <mat-card-title>Shiba Inu</mat-card-title>
diff --git a/src/components-examples/material/card/card-fancy/card-fancy-example.ts b/src/components-examples/material/card/card-fancy/card-fancy-example.ts
index 31ae97926e41..b6543dd6c427 100644
--- a/src/components-examples/material/card/card-fancy/card-fancy-example.ts
+++ b/src/components-examples/material/card/card-fancy/card-fancy-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -11,5 +11,6 @@ import {MatCardModule} from '@angular/material/card';
   styleUrl: 'card-fancy-example.css',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardFancyExample {}
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.css b/src/components-examples/material/card/card-footer/card-footer-example.css
index 81749a89098e..744d54a6a412 100644
--- a/src/components-examples/material/card/card-footer/card-footer-example.css
+++ b/src/components-examples/material/card/card-footer/card-footer-example.css
@@ -2,3 +2,6 @@
   max-width: 400px;
 }
 
+.example-card-footer {
+  padding: 16px;
+}
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.html b/src/components-examples/material/card/card-footer/card-footer-example.html
index 62a8818233dd..022068f9d778 100644
--- a/src/components-examples/material/card/card-footer/card-footer-example.html
+++ b/src/components-examples/material/card/card-footer/card-footer-example.html
@@ -1,18 +1,15 @@
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
-    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-title>Chihuahua</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <p>This card has divider and indeterminate progress as footer</p>
-    <p>{{ longText }}</p>
-    <mat-divider></mat-divider>
+    <p>{{longText}}</p>
   </mat-card-content>
-  <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
-  </mat-card-actions>
-  <mat-card-footer>
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <mat-card-footer class="example-card-footer">
+    <mat-chip-set aria-label="Chihuahua traits">
+      <mat-chip>charming</mat-chip>
+      <mat-chip>graceful</mat-chip>
+      <mat-chip>sassy</mat-chip>
+    </mat-chip-set>
   </mat-card-footer>
 </mat-card>
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.ts b/src/components-examples/material/card/card-footer/card-footer-example.ts
index 5fbca7b37165..425a6b93feca 100644
--- a/src/components-examples/material/card/card-footer/card-footer-example.ts
+++ b/src/components-examples/material/card/card-footer/card-footer-example.ts
@@ -1,8 +1,7 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatDividerModule} from '@angular/material/divider';
 import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
 
 /**
  * @title Card with footer
@@ -12,10 +11,11 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-footer-example.html',
   styleUrl: 'card-footer-example.css',
   standalone: true,
-  imports: [MatCardModule, MatDividerModule, MatButtonModule, MatProgressBarModule],
+  imports: [MatCardModule, MatChipsModule, MatProgressBarModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardFooterExample {
-  longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
-  from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
-  originally bred for hunting.`;
+  longText = `The Chihuahua is a Mexican breed of toy dog. It is named for the
+  Mexican state of Chihuahua and is among the smallest of all dog breeds. It is
+  usually kept as a companion animal or for showing.`;
 }
diff --git a/src/components-examples/material/card/card-harness/card-harness-example.ts b/src/components-examples/material/card/card-harness/card-harness-example.ts
index b68e1ba071b6..6ef2013c7ddb 100644
--- a/src/components-examples/material/card/card-harness/card-harness-example.ts
+++ b/src/components-examples/material/card/card-harness/card-harness-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
@@ -10,5 +10,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-harness-example.html',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardHarnessExample {}
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.html b/src/components-examples/material/card/card-media-size/card-media-size-example.html
index 8b04a3ed3405..891f4fde82c5 100644
--- a/src/components-examples/material/card/card-media-size/card-media-size-example.html
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.html
@@ -1,5 +1,5 @@
 <!-- Cards with media area -->
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -12,7 +12,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -25,7 +25,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -38,7 +38,7 @@
   </mat-card-content>
 </mat-card>
 
-<mat-card class="example-card">
+<mat-card class="example-card" appearance="outlined">
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.ts b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
index aa1e909a1a28..f82f2398e10f 100644
--- a/src/components-examples/material/card/card-media-size/card-media-size-example.ts
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 
 /**
@@ -10,6 +10,7 @@ import {MatCardModule} from '@angular/material/card';
   styleUrl: 'card-media-size-example.css',
   standalone: true,
   imports: [MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardMediaSizeExample {
   longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
diff --git a/src/components-examples/material/card/card-overview/card-overview-example.html b/src/components-examples/material/card/card-overview/card-overview-example.html
index 5c8fe56a1124..6805d4fb8214 100644
--- a/src/components-examples/material/card/card-overview/card-overview-example.html
+++ b/src/components-examples/material/card/card-overview/card-overview-example.html
@@ -1,3 +1,3 @@
-<mat-card>
+<mat-card appearance="outlined">
   <mat-card-content>Simple card</mat-card-content>
 </mat-card>
diff --git a/src/components-examples/material/card/card-overview/card-overview-example.ts b/src/components-examples/material/card/card-overview/card-overview-example.ts
index 652b71d8c92f..770ab06d3841 100644
--- a/src/components-examples/material/card/card-overview/card-overview-example.ts
+++ b/src/components-examples/material/card/card-overview/card-overview-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 
 /**
@@ -9,5 +9,6 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'card-overview-example.html',
   standalone: true,
   imports: [MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardOverviewExample {}
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.css b/src/components-examples/material/card/card-subtitle/card-subtitle-example.css
deleted file mode 100644
index 82c7afd666f7..000000000000
--- a/src/components-examples/material/card/card-subtitle/card-subtitle-example.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.example-card {
-  max-width: 400px;
-}
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.html b/src/components-examples/material/card/card-subtitle/card-subtitle-example.html
deleted file mode 100644
index ca7b70720ad5..000000000000
--- a/src/components-examples/material/card/card-subtitle/card-subtitle-example.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<mat-card class="example-card">
-  <mat-card-header>
-    <mat-card-title>Shiba Inu</mat-card-title>
-    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-  </mat-card-header>
-  <mat-card-content>
-    <p>This card indeterminates progress bar.</p>
-    <p>{{longText}}</p>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
-  </mat-card-actions>
-</mat-card>
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
deleted file mode 100644
index 0458f769281f..000000000000
--- a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-
-/**
- * @title Card with sub-title
- */
-@Component({
-  selector: 'card-subtitle-example',
-  templateUrl: 'card-subtitle-example.html',
-  styleUrl: 'card-subtitle-example.css',
-  standalone: true,
-  imports: [MatCardModule, MatButtonModule],
-})
-export class CardSubtitleExample {
-  longText = `The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog
-  from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
-  originally bred for hunting.`;
-}
diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts
index dea80c297097..2c526e731aec 100644
--- a/src/components-examples/material/card/index.ts
+++ b/src/components-examples/material/card/index.ts
@@ -3,5 +3,4 @@ export {CardOverviewExample} from './card-overview/card-overview-example';
 export {CardHarnessExample} from './card-harness/card-harness-example';
 export {CardActionsExample} from './card-actions/card-actions-example';
 export {CardMediaSizeExample} from './card-media-size/card-media-size-example';
-export {CardSubtitleExample} from './card-subtitle/card-subtitle-example';
 export {CardFooterExample} from './card-footer/card-footer-example';