From b9b3b3520deae9766c5fb64daeaeb12423673075 Mon Sep 17 00:00:00 2001
From: Reyna Nikolayev <reyna.nikolayev@autodesk.com>
Date: Fri, 18 Apr 2025 15:47:18 -0700
Subject: [PATCH] update video prop name

Signed-off-by: Reyna Nikolayev <reyna.nikolayev@autodesk.com>
---
 .changeset/honest-teams-shave.md                         | 4 +++-
 plugins/home/report.api.md                               | 2 +-
 .../home/src/homePageComponents/QuickStart/Content.tsx   | 6 +++---
 .../homePageComponents/QuickStart/QuickStart.stories.tsx | 7 +++++++
 plugins/home/src/homePageComponents/QuickStart/styles.ts | 9 +--------
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/.changeset/honest-teams-shave.md b/.changeset/honest-teams-shave.md
index c779f20c8f..f4c62b348f 100644
--- a/.changeset/honest-teams-shave.md
+++ b/.changeset/honest-teams-shave.md
@@ -5,4 +5,6 @@
 
 Export ContentModal from @backstage/plugin-home-react so people can use this in other scenarios.
 
-Make QuickStartCard docsLinkTitle prop more flexible to allow for any React.JSX.Element instead of just a string
+Make QuickStartCard docsLinkTitle prop more flexible to allow for any React.JSX.Element instead of just a string.
+Update QuickStartCard prop name from video to additionalContent.
+Remove unused styles.
diff --git a/plugins/home/report.api.md b/plugins/home/report.api.md
index 37630e2e11..15c12e2c7d 100644
--- a/plugins/home/report.api.md
+++ b/plugins/home/report.api.md
@@ -196,7 +196,7 @@ export type QuickStartCardProps = {
   modalTitle?: string | JSX_3.Element;
   docsLinkTitle?: string | JSX_3.Element;
   docsLink?: string;
-  video?: JSX_3.Element;
+  additionalContent?: JSX_3.Element;
   image: JSX_3.Element;
   cardDescription?: string;
   downloadImage?: JSX_3.Element;
diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
index 3cb92f7178..61752e3fad 100644
--- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx
+++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
@@ -33,8 +33,8 @@ export type QuickStartCardProps = {
   docsLinkTitle?: string | JSX.Element;
   /** The link to docs */
   docsLink?: string;
-  /** The video to play on the card */
-  video?: JSX.Element;
+  /** Additional card content */
+  additionalContent?: JSX.Element;
   /** A quickstart image to display on the card */
   image: JSX.Element;
   /** The card description*/
@@ -78,7 +78,7 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
           </Link>
         </Grid>
       </Grid>
-      {props.video && props.video}
+      {props.additionalContent && props.additionalContent}
     </>
   );
 };
diff --git a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx
index acc7c5d15e..c0963b88a1 100644
--- a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx
+++ b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx
@@ -62,6 +62,13 @@ export const Customized = () => {
           />
         }
         cardDescription="Backstage system model will help you create new entities"
+        additionalContent={
+          <p>
+            This is a custom description for the Quick Start card. It can be
+            used to provide additional information or context about the Quick
+            Start process.
+          </p>
+        }
       />
     </Grid>
   );
diff --git a/plugins/home/src/homePageComponents/QuickStart/styles.ts b/plugins/home/src/homePageComponents/QuickStart/styles.ts
index f6f93f7070..8cc8c291c4 100644
--- a/plugins/home/src/homePageComponents/QuickStart/styles.ts
+++ b/plugins/home/src/homePageComponents/QuickStart/styles.ts
@@ -23,8 +23,7 @@ export type QuickStartCardClassKey =
   | 'contentModal'
   | 'imageSize'
   | 'link'
-  | 'linkText'
-  | 'videoContainer';
+  | 'linkText';
 
 export const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -57,12 +56,6 @@ export const useStyles = makeStyles(
     linkText: {
       marginBottom: theme.spacing(1.5),
     },
-    videoContainer: {
-      borderRadius: '10px',
-      width: '100%',
-      height: 'auto',
-      background: `${theme.palette.background.default}`,
-    },
   }),
   { name: 'HomeQuickStartCard' },
 );