review suggestions

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

.changeset/honest-teams-shave.md

@@ -3,8 +3,8 @@
 '@backstage/plugin-home': patch
 ---
 
-Export ContentModal from @backstage/plugin-home-react so people can use this in other scenarios.
+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.
-Update QuickStartCard prop name from video to additionalContent.
+Made QuickStartCard `docsLinkTitle` prop more flexible to allow for any React.JSX.Element instead of just a string.
+Added QuickStartCard prop `additionalContent` which can eventually replace the prop `video`.
 Remove unused styles.

plugins/home-react/report.api.md

@@ -11,9 +11,6 @@ import { RJSFSchema } from '@rjsf/utils';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { UiSchema } from '@rjsf/utils';
 
-// @public (undocumented)
-export type BackstageContentModalClassKey = 'contentModal' | 'linkText';
-
 // @public (undocumented)
 export type BackstageOverrides = Overrides & {
   [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial<
@@ -54,7 +51,7 @@ export type CardSettings = {
 
 // @public (undocumented)
 export type CatalogReactComponentsNameToClassKey = {
-  BackstageContentModal: BackstageContentModalClassKey;
+  PluginHomeContentModal: PluginHomeContentModalClassKey;
 };
 
 // @public (undocumented)
@@ -89,6 +86,9 @@ export function createCardExtension<T>(options: {
   settings?: CardSettings;
 }): Extension<(props: CardExtensionProps<T>) => JSX_2.Element>;
 
+// @public (undocumented)
+export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText';
+
 // @public (undocumented)
 export type RendererProps = {
   title?: string;

plugins/home-react/src/components/ContentModal.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2025 The Backstage Authors
+ * Copyright 2022 The Backstage Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import Box from '@material-ui/core/Box';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 /** @public */
-export type BackstageContentModalClassKey = 'contentModal' | 'linkText';
+export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText';
 
 export const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -37,7 +37,7 @@ export const useStyles = makeStyles(
       marginBottom: theme.spacing(1.5),
     },
   }),
-  { name: 'BackstageContentModal' },
+  { name: 'PluginHomeContentModal' },
 );
 
 /**

plugins/home-react/src/components/index.ts

@@ -17,5 +17,5 @@
 export { SettingsModal } from './SettingsModal';
 export { ContentModal } from './ContentModal';
 
-export type { BackstageContentModalClassKey } from './ContentModal';
+export type { PluginHomeContentModalClassKey } from './ContentModal';
 export type { ContentModalProps } from './ContentModal';

plugins/home-react/src/overridableComponents.ts

@@ -16,11 +16,11 @@
 
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
-import { BackstageContentModalClassKey } from './';
+import { PluginHomeContentModalClassKey } from './';
 
 /** @public */
 export type CatalogReactComponentsNameToClassKey = {
-  BackstageContentModal: BackstageContentModalClassKey;
+  PluginHomeContentModal: PluginHomeContentModalClassKey;
 };
 
 /** @public */

plugins/home/report.api.md

@@ -196,6 +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;

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -33,6 +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 */
@@ -78,6 +80,7 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
           </Link>
         </Grid>
       </Grid>
+      {props.video && props.video}
       {props.additionalContent && props.additionalContent}
     </>
   );