From d0e2116c448e47087566de0be290f62efb821fee Mon Sep 17 00:00:00 2001
From: Efrain Gutierrez <v-efgutierrez@expediagroup.com>
Date: Wed, 7 Apr 2021 11:49:02 -0500
Subject: [PATCH] Adjusting Heading for Scaffolding Template Page

Signed-off-by: Efrain Gutierrez <v-efgutierrez@expediagroup.com>
---
 packages/core/src/layout/Header/Header.tsx                | 8 ++++++--
 packages/core/src/layout/InfoCard/InfoCard.tsx            | 3 +++
 .../components/MultistepJsonForm/MultistepJsonForm.tsx    | 4 +++-
 .../src/components/TemplatePage/TemplatePage.tsx          | 6 +++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx
index efa7502723..1ad7b91687 100644
--- a/packages/core/src/layout/Header/Header.tsx
+++ b/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>
   );
diff --git a/packages/core/src/layout/InfoCard/InfoCard.tsx b/packages/core/src/layout/InfoCard/InfoCard.tsx
index cf06a5f0a1..5bb3e19362 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.tsx
+++ b/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}
           />
         )}
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index 876d6dfa66..5354216bd9 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/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
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 15b6c9935c..ba71b38d75 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/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 }}