Adjusting Heading for Scaffolding Template Page

Signed-off-by: Efrain Gutierrez <v-efgutierrez@expediagroup.com>

packages/core/src/layout/Header/Header.tsx

@@ -140,7 +140,7 @@ const TypeFragment = ({
 
 const TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {
   const FinalTitle = (
-    <Typography className={classes.title} variant="h4">
+    <Typography className={classes.title} variant="h1">
       {pageTitle}
     </Typography>
   );
@@ -166,7 +166,11 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
   }
 
   return (
-    <Typography className={classes.subtitle} variant="subtitle2">
+    <Typography
+      className={classes.subtitle}
+      variant="subtitle2"
+      component="span"
+    >
       {subtitle}
     </Typography>
   );

packages/core/src/layout/InfoCard/InfoCard.tsx

@@ -125,6 +125,7 @@ type Props = {
   actionsTopRight?: ReactNode;
   className?: string;
   noPadding?: boolean;
+  titleTypographyProps?: object;
 };
 
 export const InfoCard = ({
@@ -143,6 +144,7 @@ export const InfoCard = ({
   actionsTopRight,
   className,
   noPadding,
+  titleTypographyProps,
 }: Props): JSX.Element => {
   const classes = useStyles();
   /**
@@ -183,6 +185,7 @@ export const InfoCard = ({
             title={title}
             subheader={subheader}
             style={{ ...headerStyle }}
+            titleTypographyProps={titleTypographyProps}
             {...headerProps}
           />
         )}

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -75,7 +75,9 @@ export const MultistepJsonForm = ({
           return (
             <StepUI key={title}>
               <StepLabel>
-                <Typography variant="h6">{title}</Typography>
+                <Typography variant="h6" component="h3">
+                  {title}
+                </Typography>
               </StepLabel>
               <StepContent key={title}>
                 <Form

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -187,7 +187,11 @@ export const TemplatePage = () => {
       <Content>
         {loading && <LinearProgress data-testid="loading-progress" />}
         {schema && (
-          <InfoCard title={schema.title} noPadding>
+          <InfoCard
+            title={schema.title}
+            noPadding
+            titleTypographyProps={{ component: 'h2' }}
+          >
             <MultistepJsonForm
               formData={formState}
               fields={{ RepoUrlPicker, OwnerPicker }}