From 094961f9610c726bd899ac272880bf0f08fd1725 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 15 Apr 2025 09:26:08 +0200
Subject: [PATCH] docs(material/card): use better example for overview

Currently the only example we show when the user lands on the docs for the card is a plain card with one line of text. These changes switch to using the "fancy" example which we weren't surfacing anywhere.
---
 .../card/card-fancy/card-fancy-example.html   | 19 ------------------
 .../card/card-fancy/card-fancy-example.ts     | 15 --------------
 .../card-overview-example.css}                |  0
 .../card-overview/card-overview-example.html  | 20 +++++++++++++++++--
 .../card-overview/card-overview-example.ts    |  6 ++++--
 .../material/card/index.ts                    |  1 -
 6 files changed, 22 insertions(+), 39 deletions(-)
 delete mode 100644 src/components-examples/material/card/card-fancy/card-fancy-example.html
 delete mode 100644 src/components-examples/material/card/card-fancy/card-fancy-example.ts
 rename src/components-examples/material/card/{card-fancy/card-fancy-example.css => card-overview/card-overview-example.css} (100%)

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
deleted file mode 100644
index cea3420f3259..000000000000
--- a/src/components-examples/material/card/card-fancy/card-fancy-example.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<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>
-    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-  </mat-card-header>
-  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
-  <mat-card-content>
-    <p>
-      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.
-    </p>
-  </mat-card-content>
-  <mat-card-actions>
-    <button matButton>LIKE</button>
-    <button matButton>SHARE</button>
-  </mat-card-actions>
-</mat-card>
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
deleted file mode 100644
index f2e1a6412557..000000000000
--- a/src/components-examples/material/card/card-fancy/card-fancy-example.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-
-/**
- * @title Card with multiple sections
- */
-@Component({
-  selector: 'card-fancy-example',
-  templateUrl: 'card-fancy-example.html',
-  styleUrl: 'card-fancy-example.css',
-  imports: [MatCardModule, MatButtonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CardFancyExample {}
diff --git a/src/components-examples/material/card/card-fancy/card-fancy-example.css b/src/components-examples/material/card/card-overview/card-overview-example.css
similarity index 100%
rename from src/components-examples/material/card/card-fancy/card-fancy-example.css
rename to src/components-examples/material/card/card-overview/card-overview-example.css
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 6805d4fb8214..cea3420f3259 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,19 @@
-<mat-card appearance="outlined">
-  <mat-card-content>Simple card</mat-card-content>
+<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>
+    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+  <mat-card-content>
+    <p>
+      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.
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button matButton>LIKE</button>
+    <button matButton>SHARE</button>
+  </mat-card-actions>
 </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 20d771a367fd..59b143aad555 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,13 +1,15 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 
 /**
- * @title Basic cards
+ * @title Card overview
  */
 @Component({
   selector: 'card-overview-example',
   templateUrl: 'card-overview-example.html',
-  imports: [MatCardModule],
+  styleUrl: 'card-overview-example.css',
+  imports: [MatCardModule, MatButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardOverviewExample {}
diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts
index 2c526e731aec..9b4642266df8 100644
--- a/src/components-examples/material/card/index.ts
+++ b/src/components-examples/material/card/index.ts
@@ -1,4 +1,3 @@
-export {CardFancyExample} from './card-fancy/card-fancy-example';
 export {CardOverviewExample} from './card-overview/card-overview-example';
 export {CardHarnessExample} from './card-harness/card-harness-example';
 export {CardActionsExample} from './card-actions/card-actions-example';