core-components: Add titleComponent prop to SignInPage to allow title customization with ReactNode

Signed-off-by: Diana Farkas-Deregi <deregidia@gmail.com>

.changeset/odd-goats-kiss.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `titleComponent` prop to `SignInPage` component to allow further customization of the title using `ReactNode`

packages/core-components/src/layout/SignInPage/SignInPage.tsx

@@ -24,7 +24,7 @@ import { UserIdentity } from './UserIdentity';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { useMountEffect } from '@react-hookz/web';
 import { Progress } from '../../components/Progress';
 import { Content } from '../Content/Content';
@@ -41,6 +41,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 type MultiSignInPageProps = SignInPageProps & {
   providers: IdentityProviders;
   title?: string;
+  titleComponent?: ReactNode;
   align?: 'center' | 'left';
 };
 
@@ -55,6 +56,7 @@ export const MultiSignInPage = ({
   onSignInSuccess,
   providers = [],
   title,
+  titleComponent,
   align = 'left',
 }: MultiSignInPageProps) => {
   const configApi = useApi(configApiRef);
@@ -74,7 +76,13 @@ export const MultiSignInPage = ({
     <Page themeId="home">
       <Header title={configApi.getString('app.title')} />
       <Content>
-        {title && <ContentHeader title={title} textAlign={align} />}
+        {(title || titleComponent) && (
+          <ContentHeader
+            title={title}
+            titleComponent={titleComponent}
+            textAlign={align}
+          />
+        )}
         <Grid
           container
           justifyContent={align === 'center' ? align : 'flex-start'}