update video prop name

Signed-off-by: Reyna Nikolayev <reyna.nikolayev@autodesk.com>

.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.

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;

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}
     </>
   );
 };

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>
   );

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' },
 );