Merge pull request #1804 from Kajabi/DSS-473_react-form-section-title

[DSS-473] React Form Section title
Kajabi · Oct 24, 2023 · 0b3a6dc · 0b3a6dc
2 parents 2af60a6 + 46d3fdb
commit 0b3a6dc
Showing 1 changed file with 28 additions and 20 deletions.
diff --git a/packages/sage-react/lib/FormSection/FormSection.jsx b/packages/sage-react/lib/FormSection/FormSection.jsx
@@ -2,41 +2,49 @@ 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,
   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 ${SageClassnames.TYPE.HEADING_5}`}>{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,
 };