From 16eb4bf98fdb80f87235ae8495638e51845af54a Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Tue, 8 Apr 2025 12:30:40 -0700 Subject: [PATCH 1/7] export contentModal and make docsLinkTitle Signed-off-by: Reyna Nikolayev --- .changeset/honest-teams-shave.md | 8 +++++ plugins/home-react/report.api.md | 27 ++++++++++++++ .../src/components}/ContentModal.tsx | 33 +++++++++++++++-- plugins/home-react/src/components/index.ts | 4 +++ plugins/home-react/src/index.ts | 1 + .../home-react/src/overridableComponents.ts | 36 +++++++++++++++++++ plugins/home/report.api.md | 2 +- .../homePageComponents/QuickStart/Content.tsx | 4 +-- .../QuickStart/QuickStart.stories.tsx | 28 +++++++++++++++ 9 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 .changeset/honest-teams-shave.md rename plugins/{home/src/homePageComponents/QuickStart => home-react/src/components}/ContentModal.tsx (69%) create mode 100644 plugins/home-react/src/overridableComponents.ts diff --git a/.changeset/honest-teams-shave.md b/.changeset/honest-teams-shave.md new file mode 100644 index 0000000000..c779f20c8f --- /dev/null +++ b/.changeset/honest-teams-shave.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-home-react': patch +'@backstage/plugin-home': patch +--- + +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 diff --git a/plugins/home-react/report.api.md b/plugins/home-react/report.api.md index c7e847fb36..c5a90553a9 100644 --- a/plugins/home-react/report.api.md +++ b/plugins/home-react/report.api.md @@ -5,9 +5,22 @@ ```ts import { Extension } from '@backstage/core-plugin-api'; import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { JSX as JSX_3 } from 'react'; +import { Overrides } from '@material-ui/core/styles/overrides'; 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< + StyleRules + >; +}; + // @public (undocumented) export type CardConfig = { layout?: CardLayout; @@ -39,6 +52,11 @@ export type CardSettings = { uiSchema?: UiSchema; }; +// @public (undocumented) +export type CatalogReactComponentsNameToClassKey = { + BackstageContentModal: BackstageContentModalClassKey; +}; + // @public (undocumented) export type ComponentParts = { Content: (props?: any) => JSX.Element; @@ -52,6 +70,15 @@ export type ComponentRenderer = { Renderer?: (props: RendererProps) => JSX.Element; }; +// @public +export const ContentModal: (props: ContentModalProps) => JSX_2.Element; + +// @public +export type ContentModalProps = { + modalContent: JSX_3.Element; + linkContent: string | JSX_3.Element; +}; + // @public export function createCardExtension(options: { title?: string; diff --git a/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx b/plugins/home-react/src/components/ContentModal.tsx similarity index 69% rename from plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx rename to plugins/home-react/src/components/ContentModal.tsx index ff917f367c..7dfb746390 100644 --- a/plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx +++ b/plugins/home-react/src/components/ContentModal.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2022 The Backstage Authors + * Copyright 2025 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. @@ -18,14 +18,43 @@ import { JSX, useState } from 'react'; import { Link } from '@backstage/core-components'; import Modal from '@material-ui/core/Modal'; import Box from '@material-ui/core/Box'; +import { makeStyles, Theme } from '@material-ui/core/styles'; -import { useStyles } from './styles'; +/** @public */ +export type BackstageContentModalClassKey = 'contentModal' | 'linkText'; +export const useStyles = makeStyles( + (theme: Theme) => ({ + contentModal: { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '80%', + height: 'auto', + }, + linkText: { + marginBottom: theme.spacing(1.5), + }, + }), + { name: 'BackstageContentModal' }, +); + +/** + * Props customizing the component. + * + * @public + */ export type ContentModalProps = { modalContent: JSX.Element; linkContent: string | JSX.Element; }; +/** + * A component to expand given content into a full screen modal. + * + * @public + */ export const ContentModal = (props: ContentModalProps) => { const { modalContent, linkContent } = props; const styles = useStyles(); diff --git a/plugins/home-react/src/components/index.ts b/plugins/home-react/src/components/index.ts index dce6968b36..9271da0e48 100644 --- a/plugins/home-react/src/components/index.ts +++ b/plugins/home-react/src/components/index.ts @@ -15,3 +15,7 @@ */ export { SettingsModal } from './SettingsModal'; +export { ContentModal } from './ContentModal'; + +export type { BackstageContentModalClassKey } from './ContentModal'; +export type { ContentModalProps } from './ContentModal'; diff --git a/plugins/home-react/src/index.ts b/plugins/home-react/src/index.ts index 1f02ded1c6..54602dc814 100644 --- a/plugins/home-react/src/index.ts +++ b/plugins/home-react/src/index.ts @@ -30,3 +30,4 @@ export type { CardSettings, CardConfig, } from './extensions'; +export * from './overridableComponents'; diff --git a/plugins/home-react/src/overridableComponents.ts b/plugins/home-react/src/overridableComponents.ts new file mode 100644 index 0000000000..8c5dff4465 --- /dev/null +++ b/plugins/home-react/src/overridableComponents.ts @@ -0,0 +1,36 @@ +/* + * Copyright 2025 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. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Overrides } from '@material-ui/core/styles/overrides'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; +import { BackstageContentModalClassKey } from './'; + +/** @public */ +export type CatalogReactComponentsNameToClassKey = { + BackstageContentModal: BackstageContentModalClassKey; +}; + +/** @public */ +export type BackstageOverrides = Overrides & { + [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial< + StyleRules + >; +}; + +declare module '@backstage/theme' { + interface OverrideComponentNameToClassKeys + extends CatalogReactComponentsNameToClassKey {} +} diff --git a/plugins/home/report.api.md b/plugins/home/report.api.md index 7c7f55fd47..0bfa6230e7 100644 --- a/plugins/home/report.api.md +++ b/plugins/home/report.api.md @@ -194,7 +194,7 @@ export const QuickStartCard: ( // @public export type QuickStartCardProps = { modalTitle?: string | JSX_3.Element; - docsLinkTitle?: string; + docsLinkTitle?: string | React.JSX.Element; docsLink?: string; video?: JSX_3.Element; image: JSX_3.Element; diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx index 829b9ed191..3cb92f7178 100644 --- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx @@ -18,7 +18,7 @@ import { JSX } from 'react'; import { Link } from '@backstage/core-components'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import { ContentModal } from './ContentModal'; +import { ContentModal } from '@backstage/plugin-home-react'; import { useStyles } from './styles'; /** @@ -30,7 +30,7 @@ export type QuickStartCardProps = { /** The modal link title */ modalTitle?: string | JSX.Element; /** The link to docs title */ - docsLinkTitle?: string; + docsLinkTitle?: string | JSX.Element; /** The link to docs */ docsLink?: string; /** The video to play on the card */ diff --git a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx index 18375c9c27..acc7c5d15e 100644 --- a/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx @@ -18,6 +18,7 @@ import { QuickStartCard } from '../../plugin'; import { ComponentType, PropsWithChildren } from 'react'; import { wrapInTestApp } from '@backstage/test-utils'; import Grid from '@material-ui/core/Grid'; +import OpenInNewIcon from '@material-ui/icons/OpenInNew'; import ContentImage from './static/backstageSystemModel.png'; export default { @@ -65,3 +66,30 @@ export const Customized = () => { ); }; + +export const CustomDocLink = () => { + return ( + + + + Learn more with getting started docs + + } + docsLink="https://backstage.io/docs/getting-started" + image={ + quick start + } + cardDescription="Backstage system model will help you create new entities" + /> + + ); +}; From 95af6f3d198b059b099bf460f99ca20251e01b81 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Tue, 8 Apr 2025 12:56:00 -0700 Subject: [PATCH 2/7] fix api report Signed-off-by: Reyna Nikolayev --- plugins/home/report.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/home/report.api.md b/plugins/home/report.api.md index 0bfa6230e7..37630e2e11 100644 --- a/plugins/home/report.api.md +++ b/plugins/home/report.api.md @@ -194,7 +194,7 @@ export const QuickStartCard: ( // @public export type QuickStartCardProps = { modalTitle?: string | JSX_3.Element; - docsLinkTitle?: string | React.JSX.Element; + docsLinkTitle?: string | JSX_3.Element; docsLink?: string; video?: JSX_3.Element; image: JSX_3.Element; From b9b3b3520deae9766c5fb64daeaeb12423673075 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Fri, 18 Apr 2025 15:47:18 -0700 Subject: [PATCH 3/7] update video prop name Signed-off-by: Reyna Nikolayev --- .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 => { - {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={ +

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

+ } /> ); 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' }, ); From 61f2aac5e448fe998916fae254b6a57a12e4eeb7 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Mon, 21 Apr 2025 09:28:36 -0700 Subject: [PATCH 4/7] 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} ); From d6d4b24e35715d69b2256125f692c1195febaaf6 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Fri, 25 Apr 2025 11:19:03 -0700 Subject: [PATCH 5/7] remove unnecessary style removal Signed-off-by: Reyna Nikolayev --- .changeset/honest-teams-shave.md | 1 - plugins/home/src/homePageComponents/QuickStart/styles.ts | 9 ++++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/.changeset/honest-teams-shave.md b/.changeset/honest-teams-shave.md index cf5c4b9987..931cfd2f63 100644 --- a/.changeset/honest-teams-shave.md +++ b/.changeset/honest-teams-shave.md @@ -7,4 +7,3 @@ Export ContentModal from `@backstage/plugin-home-react` so people can use this i 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/src/homePageComponents/QuickStart/styles.ts b/plugins/home/src/homePageComponents/QuickStart/styles.ts index 8cc8c291c4..f6f93f7070 100644 --- a/plugins/home/src/homePageComponents/QuickStart/styles.ts +++ b/plugins/home/src/homePageComponents/QuickStart/styles.ts @@ -23,7 +23,8 @@ export type QuickStartCardClassKey = | 'contentModal' | 'imageSize' | 'link' - | 'linkText'; + | 'linkText' + | 'videoContainer'; export const useStyles = makeStyles( (theme: Theme) => ({ @@ -56,6 +57,12 @@ export const useStyles = makeStyles( linkText: { marginBottom: theme.spacing(1.5), }, + videoContainer: { + borderRadius: '10px', + width: '100%', + height: 'auto', + background: `${theme.palette.background.default}`, + }, }), { name: 'HomeQuickStartCard' }, ); From e0cc70195679595d7f023ad1ab7c06fe908feda5 Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Wed, 30 Apr 2025 10:54:00 -0700 Subject: [PATCH 6/7] review suggestion Signed-off-by: Reyna Nikolayev --- .../home/src/homePageComponents/QuickStart/Content.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx index 2047a158a6..b923970888 100644 --- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx +++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx @@ -33,7 +33,9 @@ export type QuickStartCardProps = { docsLinkTitle?: string | JSX.Element; /** The link to docs */ docsLink?: string; - /** The video to play on the card */ + /** The video to play on the card + * @deprecated This will be removed in the future, please use `additionalContent` instead + */ video?: JSX.Element; /** Additional card content */ additionalContent?: JSX.Element; @@ -80,8 +82,8 @@ export const Content = (props: QuickStartCardProps): JSX.Element => { - {props.video && props.video} - {props.additionalContent && props.additionalContent} + {(props.additionalContent && props.additionalContent) || + (props.video && props.video)} ); }; From 651b56033240ad701e138eb52eddb3ffec35511b Mon Sep 17 00:00:00 2001 From: Reyna Nikolayev Date: Fri, 9 May 2025 15:13:53 -0700 Subject: [PATCH 7/7] rename CatalogReactComponentsNameToClassKey as suggested Signed-off-by: Reyna Nikolayev --- .changeset/honest-teams-shave.md | 1 + plugins/home-react/report.api.md | 14 +++++++------- plugins/home-react/src/overridableComponents.ts | 8 ++++---- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/.changeset/honest-teams-shave.md b/.changeset/honest-teams-shave.md index 931cfd2f63..6afbf37039 100644 --- a/.changeset/honest-teams-shave.md +++ b/.changeset/honest-teams-shave.md @@ -4,6 +4,7 @@ --- Export ContentModal from `@backstage/plugin-home-react` so people can use this in other scenarios. +Renamed `CatalogReactComponentsNameToClassKey` to `PluginHomeComponentsNameToClassKey` in `overridableComponents.ts` 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`. diff --git a/plugins/home-react/report.api.md b/plugins/home-react/report.api.md index ee14be9a3f..26ef6267aa 100644 --- a/plugins/home-react/report.api.md +++ b/plugins/home-react/report.api.md @@ -13,8 +13,8 @@ import { UiSchema } from '@rjsf/utils'; // @public (undocumented) export type BackstageOverrides = Overrides & { - [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial< - StyleRules + [Name in keyof PluginHomeComponentsNameToClassKey]?: Partial< + StyleRules >; }; @@ -49,11 +49,6 @@ export type CardSettings = { uiSchema?: UiSchema; }; -// @public (undocumented) -export type CatalogReactComponentsNameToClassKey = { - PluginHomeContentModal: PluginHomeContentModalClassKey; -}; - // @public (undocumented) export type ComponentParts = { Content: (props?: any) => JSX.Element; @@ -86,6 +81,11 @@ export function createCardExtension(options: { settings?: CardSettings; }): Extension<(props: CardExtensionProps) => JSX_2.Element>; +// @public (undocumented) +export type PluginHomeComponentsNameToClassKey = { + PluginHomeContentModal: PluginHomeContentModalClassKey; +}; + // @public (undocumented) export type PluginHomeContentModalClassKey = 'contentModal' | 'linkText'; diff --git a/plugins/home-react/src/overridableComponents.ts b/plugins/home-react/src/overridableComponents.ts index e9ee530de0..8a88fd5c94 100644 --- a/plugins/home-react/src/overridableComponents.ts +++ b/plugins/home-react/src/overridableComponents.ts @@ -19,18 +19,18 @@ import { StyleRules } from '@material-ui/core/styles/withStyles'; import { PluginHomeContentModalClassKey } from './'; /** @public */ -export type CatalogReactComponentsNameToClassKey = { +export type PluginHomeComponentsNameToClassKey = { PluginHomeContentModal: PluginHomeContentModalClassKey; }; /** @public */ export type BackstageOverrides = Overrides & { - [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial< - StyleRules + [Name in keyof PluginHomeComponentsNameToClassKey]?: Partial< + StyleRules >; }; declare module '@backstage/theme' { interface OverrideComponentNameToClassKeys - extends CatalogReactComponentsNameToClassKey {} + extends PluginHomeComponentsNameToClassKey {} }