diff --git a/.changeset/hip-wasps-yell.md b/.changeset/hip-wasps-yell.md new file mode 100644 index 0000000000..1cdea4e84d --- /dev/null +++ b/.changeset/hip-wasps-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-bazaar': patch +--- + +Add `title` as optional parameter to `BazaarOverviewCard` diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md index 0798888a23..2ad141935e 100644 --- a/plugins/bazaar/README.md +++ b/plugins/bazaar/README.md @@ -80,13 +80,15 @@ export const homePage = ( + + -+ ++ + {/* ...other homepage items */} ``` -The properties `fullHeight` and `fullWidth` are optional and can be used to adjust the cards styling. +The property `title` is optional and can be used to customize the title in the card header. If no title is submitted the default titles `Bazaar Random Projects` or `Bazaar Latest Projects` are displayed. + +The properties `fullHeight` and `fullWidth` are also optional and can be used to adjust the cards styling. ## How does the Bazaar work? diff --git a/plugins/bazaar/api-report.md b/plugins/bazaar/api-report.md index a17927cd77..d7c463888a 100644 --- a/plugins/bazaar/api-report.md +++ b/plugins/bazaar/api-report.md @@ -15,6 +15,7 @@ export const BazaarOverviewCard: ( // @public (undocumented) export type BazaarOverviewCardProps = { + title?: string; order: 'latest' | 'random'; fullWidth?: boolean; fullHeight?: boolean; diff --git a/plugins/bazaar/media/overviewCard.png b/plugins/bazaar/media/overviewCard.png index 6769aa34ca..ef41ca48e5 100644 Binary files a/plugins/bazaar/media/overviewCard.png and b/plugins/bazaar/media/overviewCard.png differ diff --git a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx index d30eaa3620..c58ee3db1c 100644 --- a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx +++ b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx @@ -31,6 +31,7 @@ import StorefrontIcon from '@material-ui/icons/Storefront'; /** @public */ export type BazaarOverviewCardProps = { + title?: string; order: 'latest' | 'random'; fullWidth?: boolean; fullHeight?: boolean; @@ -51,11 +52,14 @@ const getUnlinkedCatalogEntities = ( /** @public */ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => { - const { order, fullWidth = false, fullHeight = false } = props; + const { title, order, fullWidth = false, fullHeight = false } = props; const bazaarApi = useApi(bazaarApiRef); const catalogApi = useApi(catalogApiRef); const root = useRouteRef(bazaarPlugin.routes.root); + const defaultTitle = + order === 'latest' ? 'Bazaar Latest Projects' : 'Bazaar Random Projects'; + const bazaarLink = { title: 'Go to Bazaar', link: `${root()}`, @@ -127,9 +131,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => { return (