Add title as optional parameter

Signed-off-by: Frida Jacobsson <fridahelenajacobsson@gmail.com>

.changeset/hip-wasps-yell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Add `title` as optional parameter to `BazaarOverviewCard`

plugins/bazaar/README.md

@@ -80,13 +80,15 @@ export const homePage = (
 +       </Grid>
 
 +       <Grid item xs={12} >
-+         <BazaarOverviewCard order='random' fullWidth fullHeight />
++         <BazaarOverviewCard title='My Orgs Projects' order='random' fullWidth fullHeight />
 +       </Grid>
 
         {/* ...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?
 

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;

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 (
     <InfoCard
-      title={
-        order === 'latest' ? 'Bazaar Latest Projects' : 'Bazaar Random Projects'
-      }
+      title={title ?? defaultTitle}
       action={
         <IconButton>
           <Link to={bazaarLink.link} title={bazaarLink.title}>