From b1410ee2a1d1b906ed43f2247121f009b0e9a118 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Tue, 26 Sep 2023 16:41:07 -0700
Subject: [PATCH 1/2] fix(form section): allow user-defined heading

---
 .../lib/FormSection/FormSection.jsx           | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/sage-react/lib/FormSection/FormSection.jsx b/packages/sage-react/lib/FormSection/FormSection.jsx
index 191add7008..cff43bdf6f 100644
--- a/packages/sage-react/lib/FormSection/FormSection.jsx
+++ b/packages/sage-react/lib/FormSection/FormSection.jsx
@@ -7,36 +7,43 @@ export const FormSection = ({
   children,
   subtitle,
   title,
+  titleTag,
   ...rest
-}) => (
-  <Grid className="sage-form-section" {...rest}>
-    <Grid.Row>
-      <Grid.Col size={4} small={12} large={4}>
-        <div className="sage-form-section__info">
-          <h3 className="sage-form-section__title">{title}</h3>
-          {subtitle && (
-            <div className="sage-form-section__subtitle">{subtitle}</div>
-          )}
-        </div>
-      </Grid.Col>
-      <Grid.Col size={8} small={12} large={8}>
-        <Panel>
-          <div className="sage-form-section__content">
-            {children}
+}) => {
+  const TagName = titleTag || 'h5';
+
+  return (
+    <Grid className="sage-form-section" {...rest}>
+      <Grid.Row>
+        <Grid.Col size={4} small={12} large={4}>
+          <div className="sage-form-section__info">
+            <TagName className="sage-form-section__title">{title}</TagName>
+            {subtitle && (
+              <div className="sage-form-section__subtitle">{subtitle}</div>
+            )}
           </div>
-        </Panel>
-      </Grid.Col>
-    </Grid.Row>
-  </Grid>
-);
+        </Grid.Col>
+        <Grid.Col size={8} small={12} large={8}>
+          <Panel>
+            <div className="sage-form-section__content">
+              {children}
+            </div>
+          </Panel>
+        </Grid.Col>
+      </Grid.Row>
+    </Grid>
+  );
+};
 
 FormSection.defaultProps = {
   children: null,
   subtitle: null,
+  titleTag: null,
 };
 
 FormSection.propTypes = {
   children: PropTypes.node,
   subtitle: PropTypes.node,
   title: PropTypes.string.isRequired,
+  titleTag: PropTypes.string,
 };

From 46d3fdb9e22d7feff85164ba16f914899bf38910 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Tue, 26 Sep 2023 16:42:39 -0700
Subject: [PATCH 2/2] fix(form section): apply heading style

---
 packages/sage-react/lib/FormSection/FormSection.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/sage-react/lib/FormSection/FormSection.jsx b/packages/sage-react/lib/FormSection/FormSection.jsx
index cff43bdf6f..aa11829f8a 100644
--- a/packages/sage-react/lib/FormSection/FormSection.jsx
+++ b/packages/sage-react/lib/FormSection/FormSection.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from '../Grid';
 import { Panel } from '../Panel';
+import { SageClassnames } from '../configs';
 
 export const FormSection = ({
   children,
@@ -17,7 +18,7 @@ export const FormSection = ({
       <Grid.Row>
         <Grid.Col size={4} small={12} large={4}>
           <div className="sage-form-section__info">
-            <TagName className="sage-form-section__title">{title}</TagName>
+            <TagName className={`sage-form-section__title ${SageClassnames.TYPE.HEADING_5}`}>{title}</TagName>
             {subtitle && (
               <div className="sage-form-section__subtitle">{subtitle}</div>
             )}