From 61f2aac5e448fe998916fae254b6a57a12e4eeb7 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Mon, 21 Apr 2025 09:28:36 -0700 Subject: [PATCH] review suggestions Signed-off-by: Reyna Nikolayev --- .changeset/honest-teams-shave.md | 6 +++--- plugins/home-react/report.api.md | 8 ++++---- plugins/home-react/src/components/ContentModal.tsx | 6 +++--- plugins/home-react/src/components/index.ts | 2 +- plugins/home-react/src/overridableComponents.ts | 4 ++-- plugins/home/report.api.md | 1 + .../home/src/homePageComponents/QuickStart/Content.tsx | 3 +++ 7 files changed, 17 insertions(+), 13 deletions(-) diff --git a/.changeset/honest-teams-shave.md b/.changeset/honest-teams-shave.md index f4c62b348f..cf5c4b9987 100644 --- a/.changeset/honest-teams-shave.md +++ b/.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. diff --git a/plugins/home-react/report.api.md b/plugins/home-react/report.api.md index c5a90553a9..ee14be9a3f 100644 --- a/plugins/home-react/report.api.md +++ b/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(options: { settings?: CardSettings; }): Extension<(props: CardExtensionProps) => JSX_2.Element>; +// @public (undocumented) +export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText'; + // @public (undocumented) export type RendererProps = { title?: string; diff --git a/plugins/home-react/src/components/ContentModal.tsx b/plugins/home-react/src/components/ContentModal.tsx index 7dfb746390..cde317e248 100644 --- a/plugins/home-react/src/components/ContentModal.tsx +++ b/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' }, ); /** diff --git a/plugins/home-react/src/components/index.ts b/plugins/home-react/src/components/index.ts index 9271da0e48..8a982075eb 100644 --- a/plugins/home-react/src/components/index.ts +++ b/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'; diff --git a/plugins/home-react/src/overridableComponents.ts b/plugins/home-react/src/overridableComponents.ts index 8c5dff4465..e9ee530de0 100644 --- a/plugins/home-react/src/overridableComponents.ts +++ b/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 */ diff --git a/plugins/home/report.api.md b/plugins/home/report.api.md index 15c12e2c7d..f15ffde38d 100644 --- a/plugins/home/report.api.md +++ b/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; diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx index 61752e3fad..2047a158a6 100644 --- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx +++ b/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 => { + {props.video && props.video} {props.additionalContent && props.additionalContent} );